- only individual bulma components, not everything
- styleing for search detail page
This commit is contained in:
parent
3e73b91cf0
commit
57ba2af299
|
|
@ -201,7 +201,7 @@ footer .card {
|
|||
}
|
||||
|
||||
footer .card-title {
|
||||
font-family: Verdana;
|
||||
// font-family: Verdana;
|
||||
color: #fff;
|
||||
text-transform: uppercase;
|
||||
font-weight: bold;
|
||||
|
|
|
|||
|
|
@ -1,8 +1,61 @@
|
|||
@charset "utf-8";
|
||||
@import "~bulma";
|
||||
// @import "~bulma";
|
||||
// @import "@fontsource/open-sans"; // Defaults to weight 400.
|
||||
@import "~@openfonts/open-sans_all/index.css";
|
||||
|
||||
// 1. Import the initial variables
|
||||
@import "~bulma/sass/utilities/_all.sass";
|
||||
|
||||
|
||||
// 2. Set your own initial (brand) variables
|
||||
// Update the blue shade, used for links
|
||||
$blue: #06bcef;
|
||||
// Add pink and its invert
|
||||
$pink: #FA7C91;
|
||||
$pink-invert: #fff;
|
||||
$purple: #8A4D76;
|
||||
$brown: #757763;
|
||||
$beige-light: #D0D1CD;
|
||||
$beige-lighter: #EFF0EB;
|
||||
$mouse-grey: #6c6e6b;
|
||||
$select-green: #03a678;
|
||||
|
||||
// 3. Set the derived variables
|
||||
$grey-dark: $brown;
|
||||
$is-dark: $mouse-grey;
|
||||
// $grey-light: $beige-light;
|
||||
// $primary: $purple;
|
||||
// $link: $mouse-grey;
|
||||
$widescreen-enabled: false;
|
||||
$fullhd-enabled: false;
|
||||
// $tabs-link-active-border-bottom-color: $select-green;
|
||||
// $tabs-link-active-color: $select-green;
|
||||
$table-striped-row-even-background-color: #ecf2fa;
|
||||
$table-striped-row-even-hover-background-color: #ecf2fa;
|
||||
|
||||
// 4. Import the rest of bulma, only what you need from Bulma
|
||||
// @import "../../node_modules/bulma/sass/utilities/_all.sass";
|
||||
@import "~bulma/sass/grid/_all.sass";
|
||||
@import "~bulma/sass/base/_all.sass";
|
||||
@import "~bulma/sass/elements/box.sass";
|
||||
@import "~bulma/sass/elements/button.sass";
|
||||
@import "~bulma/sass/elements/container.sass";
|
||||
@import "~bulma/sass/elements/content.sass";
|
||||
@import "~bulma/sass/elements/title.sass";
|
||||
@import "~bulma/sass/elements/icon.sass";
|
||||
@import "~bulma/sass/elements/table.sass";
|
||||
@import "~bulma/sass/form/_all.sass";
|
||||
@import "~bulma/sass/helpers/_all.sass";
|
||||
@import "~bulma/sass/components/navbar.sass";
|
||||
// @import "~bulma/sass/components/tabs.sass";
|
||||
@import "~bulma/sass/components/media.sass";
|
||||
@import "~bulma/sass/components/modal.sass";
|
||||
@import "~bulma/sass/components/card.sass";
|
||||
|
||||
@import "~bulma/sass/components/panel.sass";
|
||||
|
||||
@import "~bulma/sass/layout/_all.sass";
|
||||
|
||||
.button {
|
||||
text-decoration: none;
|
||||
// border: 1px solid #fff;
|
||||
|
|
@ -36,7 +89,7 @@
|
|||
margin-right: 0.6em;
|
||||
border-right: 1px solid #fff;
|
||||
padding: 0.6em;
|
||||
};
|
||||
}
|
||||
// strong {
|
||||
// border-left: 1px solid #fff;
|
||||
// padding-left: 0.6em;
|
||||
|
|
@ -44,8 +97,6 @@
|
|||
}
|
||||
}
|
||||
|
||||
|
||||
|
||||
.header-image {
|
||||
background-image: url("./../site/img/Main-banner-homepage-xl.jpg");
|
||||
background-size: cover;
|
||||
|
|
@ -77,7 +128,6 @@
|
|||
// }
|
||||
// /*
|
||||
|
||||
|
||||
.help:before {
|
||||
background: url("./../site/img/Main-banner-homepage-xl.jpg");
|
||||
}
|
||||
|
|
@ -113,7 +163,6 @@
|
|||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
|
||||
.text-center {
|
||||
text-align: center !important;
|
||||
}
|
||||
|
|
@ -155,9 +204,6 @@ body H1 {
|
|||
text-align: left !important;
|
||||
}
|
||||
|
||||
|
||||
|
||||
|
||||
html,
|
||||
body {
|
||||
font-family: "Open Sans", sans-serif;
|
||||
|
|
@ -198,7 +244,6 @@ body {
|
|||
color: rgb(74, 74, 74);
|
||||
}
|
||||
|
||||
|
||||
.hide {
|
||||
display: none;
|
||||
}
|
||||
|
|
@ -245,8 +290,6 @@ body {
|
|||
overflow: hidden;
|
||||
}
|
||||
|
||||
|
||||
|
||||
#home_padding {
|
||||
margin-top: 7%;
|
||||
}
|
||||
|
|
@ -318,9 +361,6 @@ body {
|
|||
max-height: 6rem;
|
||||
}
|
||||
|
||||
|
||||
|
||||
|
||||
.card {
|
||||
position: relative;
|
||||
display: flex;
|
||||
|
|
|
|||
|
|
@ -156,6 +156,10 @@ export class DbDataset {
|
|||
// return ($embargoDate->lessThan($now));
|
||||
}
|
||||
|
||||
public get MainTitle(): Nullable<Title> {
|
||||
return this.titles.find((e) => e.type === TitleType.Main);
|
||||
}
|
||||
|
||||
public get MainAbstract(): Nullable<Abstract> {
|
||||
return this.abstracts.find((e) => e.type === AbstractType.Abstract);
|
||||
}
|
||||
|
|
@ -198,6 +202,10 @@ export enum AbstractType {
|
|||
Other = " Other",
|
||||
}
|
||||
|
||||
export enum TitleType {
|
||||
Main = "Main",
|
||||
Translated = "Translated",
|
||||
}
|
||||
export interface Title {
|
||||
id: number;
|
||||
type: string;
|
||||
|
|
@ -220,6 +228,7 @@ export interface Author {
|
|||
first_name: string;
|
||||
last_name: string;
|
||||
name_type: string;
|
||||
full_name: string;
|
||||
}
|
||||
|
||||
export interface Person {
|
||||
|
|
|
|||
|
|
@ -165,14 +165,14 @@ class DatasetService {
|
|||
const host = "https:" + VUE_APP_PORTAL;
|
||||
const path = "/api/dataset/" + id;
|
||||
const apiUrl = host + path;
|
||||
|
||||
const dataset = api.get<DbDataset>(apiUrl).pipe(map((res) => this.prepareDataset(res, apiUrl)));
|
||||
// const dataset = api.get<DbDataset>(apiUrl).pipe(map((res) => this.prepareDataset(res, apiUrl)));
|
||||
|
||||
// this.messageService.add('HeroService: fetched heroes');
|
||||
return dataset;
|
||||
}
|
||||
|
||||
private prepareDataset(datasetObj: DbDataset, apiUrl: string) {
|
||||
private prepareDataset(datasetObj: DbDataset, apiUrl: string): DbDataset {
|
||||
const dataset = deserialize<DbDataset>(DbDataset, JSON.stringify(datasetObj));
|
||||
dataset.url = document.documentURI;
|
||||
// this.internalDatasetId.generateInternalId(dataset);
|
||||
|
|
|
|||
|
|
@ -68,6 +68,11 @@ export default class DatasetDetailComponent extends Vue {
|
|||
return Math.round((size + Number.EPSILON) * 100) / 100 + " " + unit[i];
|
||||
}
|
||||
|
||||
public getPublishedDate(date: string): string {
|
||||
return moment(date).format("ddd, MMMM Do, YYYY h:mm a");
|
||||
// return moment(date).format("MMM Do YYYY");
|
||||
}
|
||||
|
||||
public getHumanDate(date: string): string {
|
||||
return moment(date).format("DD.MM.YYYY HH:mm");
|
||||
// return moment(date).format("MMM Do YYYY");
|
||||
|
|
@ -76,4 +81,14 @@ export default class DatasetDetailComponent extends Vue {
|
|||
public getYear(date: string) {
|
||||
return moment(date).format("YYYY");
|
||||
}
|
||||
|
||||
public getCitation(): string {
|
||||
let citation = this.dataset.contributors.map((u) => u.last_name + ", " + u.first_name.substring(0, 1).toUpperCase() + ".").join(", ");
|
||||
citation += " " + moment(this.dataset.server_date_published).format("YYYY") + ": ";
|
||||
citation += this.dataset.MainTitle?.value;
|
||||
citation += "." + this.dataset.creating_corporation + ", ";
|
||||
citation += this.dataset.publisher_name;
|
||||
citation += ", Wien";
|
||||
return citation;
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -16,16 +16,26 @@
|
|||
<div class="columns">
|
||||
<div class="column is-8 results_column" style="padding-top: 1.2rem; padding-right: 1rem; padding-left: 1rem">
|
||||
<div class="card">
|
||||
<div class="column dataset__blog-meta">published: {{ getHumanDate(dataset.server_date_published) }}</div>
|
||||
<div class="column dataset__blog-meta">
|
||||
<h2 class="label uppercase">published: {{ getPublishedDate(dataset.server_date_published) }}</h2>
|
||||
</div>
|
||||
</div>
|
||||
<div class="card">
|
||||
<div class="column">
|
||||
<label class="label">
|
||||
{{ getCitation() }}
|
||||
<a class="link-label" v-bind:href="dataset.url">({{ dataset.url }})</a>
|
||||
</label>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="card record-elem">
|
||||
<div class="columns" v-if="dataset.hasOwnProperty('titles')">
|
||||
<div class="column is-3-desktop is-4-tablet">Title/<br />title:</div>
|
||||
<div class="column is-3-desktop is-4-tablet label">Title/<br />title:</div>
|
||||
<div class="column is-9-desktop is-8-tablet">{{ dataset.titles[0].value }}</div>
|
||||
</div>
|
||||
<div class="columns" v-if="dataset.hasOwnProperty('abstracts')">
|
||||
<div class="column is-3-desktop is-4-tablet">
|
||||
<div class="column is-3-desktop is-4-tablet label">
|
||||
Zusammenfassung/<br />
|
||||
abstract:
|
||||
</div>
|
||||
|
|
@ -38,14 +48,14 @@
|
|||
</div>
|
||||
</div>
|
||||
<div class="columns" v-if="dataset.hasOwnProperty('abstracts')">
|
||||
<div class="column is-3-desktop is-4-tablet">Serieninformation/<br />series information:</div>
|
||||
<div class="column is-3-desktop is-4-tablet label">Serieninformation/<br />series information:</div>
|
||||
<div class="column is-9-desktop is-8-tablet" v-if="dataset.hasSeriesInformationAbstract()">
|
||||
{{ dataset.SeriesInformationAbstract.value }}
|
||||
</div>
|
||||
<div class="column is-9-desktop is-8-tablet" v-else>-</div>
|
||||
</div>
|
||||
<div class="columns" v-if="dataset.hasOwnProperty('abstracts')">
|
||||
<div class="column is-3-desktop is-4-tablet">Methodik/<br />method:</div>
|
||||
<div class="column is-3-desktop is-4-tablet label">Methodik/<br />method:</div>
|
||||
<div class="column is-9-desktop is-8-tablet" v-if="dataset.hasMethodsAbtract()">
|
||||
{{ dataset.MethodsAbtract.value }}
|
||||
</div>
|
||||
|
|
@ -53,20 +63,20 @@
|
|||
</div>
|
||||
|
||||
<div class="columns">
|
||||
<div class="column is-3-desktop is-4-tablet">Downloads/<br />downloads:</div>
|
||||
<div class="column is-3-desktop is-4-tablet label">Downloads/<br />downloads:</div>
|
||||
<div class="column is-9-desktop is-8-tablet" v-if="dataset.files.length > 0">
|
||||
<table id="items" v-if="dataset.hasEmbargoPassed()" class="table is-bordered is-striped">
|
||||
<thead>
|
||||
<tr>
|
||||
<th>Path Name</th>
|
||||
<th>File Extension</th>
|
||||
<th>File Size</th>
|
||||
<th class="table-header">Path Name</th>
|
||||
<th class="table-header">File Extension</th>
|
||||
<th class="table-header">File Size</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr v-for="file in dataset.files" :key="file.id">
|
||||
<td>
|
||||
<a target="_blank" v-bind:href="'portal/file/download/' + file.id"> {{ file.label }} </a>
|
||||
<a class="link-label" target="_blank" v-bind:href="'/portal/file/download/' + file.id"> {{ file.label }} </a>
|
||||
</td>
|
||||
<td>
|
||||
<span>{{ getExtension(file.path_name) }}</span>
|
||||
|
|
@ -83,7 +93,7 @@
|
|||
</div>
|
||||
|
||||
<div class="columns">
|
||||
<div class="column is-3-desktop is-4-tablet">Technische Metadaten/<br />technical metadata:</div>
|
||||
<div class="column is-3-desktop is-4-tablet label">Technische Metadaten/<br />technical metadata:</div>
|
||||
<div class="column is-9-desktop is-8-tablet">
|
||||
<p>Persistenter Identifikator: {{ dataset.url }}</p>
|
||||
<p>Status: {{ dataset.server_state }}</p>
|
||||
|
|
@ -98,12 +108,12 @@
|
|||
<div id="id-side-bar" class="column is-4 sidebar_column" style="padding-top: 1.2rem; padding-right: 1rem; padding-left: 1rem">
|
||||
<div class="card">
|
||||
<div class="column">
|
||||
<h2>Details</h2>
|
||||
<h2 class="label uppercase">Details</h2>
|
||||
</div>
|
||||
</div>
|
||||
<div class="card">
|
||||
<div class="column">
|
||||
<h3>Beitragende/Contributor</h3>
|
||||
<h3 class="label uppercase">Beitragende/Contributor</h3>
|
||||
<p v-if="dataset.hasContributors()">
|
||||
{{ dataset.contributors.map((u) => u.full_name).join(", ") }}
|
||||
</p>
|
||||
|
|
@ -112,7 +122,7 @@
|
|||
</div>
|
||||
<div class="card">
|
||||
<div class="column">
|
||||
<h3>Schlüsselwörter/Keywords</h3>
|
||||
<h3 class="label uppercase">Schlüsselwörter/Keywords</h3>
|
||||
<p v-if="dataset.hasOwnProperty('subjects')">
|
||||
{{ dataset.subjects.map((u) => u.value).join(", ") }}
|
||||
</p>
|
||||
|
|
@ -121,7 +131,7 @@
|
|||
</div>
|
||||
<div class="card">
|
||||
<div class="column">
|
||||
<h3>Erstellungsjahr/Year</h3>
|
||||
<h3 class="label uppercase">Erstellungsjahr/Year</h3>
|
||||
<p>
|
||||
{{ getYear(dataset.server_date_published) }}
|
||||
</p>
|
||||
|
|
@ -129,7 +139,7 @@
|
|||
</div>
|
||||
<div class="card">
|
||||
<div class="column">
|
||||
<h3>Abdeckung/Coverage</h3>
|
||||
<h3 class="label uppercase">Abdeckung/Coverage</h3>
|
||||
<p>
|
||||
{{ dataset.Coverage }}
|
||||
</p>
|
||||
|
|
@ -137,7 +147,7 @@
|
|||
</div>
|
||||
<div class="card">
|
||||
<div class="column">
|
||||
<h3>Sprache/Language</h3>
|
||||
<h3 class="label uppercase">Sprache/Language</h3>
|
||||
<p>
|
||||
{{ dataset.language }}
|
||||
</p>
|
||||
|
|
@ -145,7 +155,7 @@
|
|||
</div>
|
||||
<div class="card">
|
||||
<div class="column">
|
||||
<h3>Objekttyp/Object Type</h3>
|
||||
<h3 class="label uppercase">Objekttyp/Object Type</h3>
|
||||
<p>
|
||||
<span><i class="fas fa-file"></i> {{ dataset.type }}</span>
|
||||
</p>
|
||||
|
|
@ -153,20 +163,20 @@
|
|||
</div>
|
||||
<div class="card">
|
||||
<div class="column">
|
||||
<h3>Lizenz/License</h3>
|
||||
<h3 class="label uppercase">Lizenz/License</h3>
|
||||
<p v-if="dataset.hasLicenses()">
|
||||
<label v-for="license in dataset.licenses" :key="license.id">
|
||||
<span class="label">
|
||||
<span class="normal label">
|
||||
{{ license.name }}
|
||||
</span>
|
||||
<span v-if="openAccessLicences.includes(license.name)" class="label titlecase"><i class="fas fa-lock-open"></i> Open Access</span>
|
||||
<span v-if="openAccessLicences.includes(license.name)" class="normal label uppercase"><i class="fas fa-lock-open"></i> Open Access</span>
|
||||
</label>
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="card">
|
||||
<div class="column">
|
||||
<h3>Projekt/Project</h3>
|
||||
<h3 class="label uppercase">Projekt/Project</h3>
|
||||
<p v-if="dataset.project != null">
|
||||
<span>{{ dataset.project.name }}</span>
|
||||
</p>
|
||||
|
|
@ -175,7 +185,7 @@
|
|||
</div>
|
||||
<div class="card">
|
||||
<div class="column">
|
||||
<h3>Embargo</h3>
|
||||
<h3 class="label uppercase">Embargo</h3>
|
||||
<p v-if="dataset.embargo_date">
|
||||
<span>{{ getHumanDate(dataset.embargo_date) }}</span>
|
||||
</p>
|
||||
|
|
@ -184,27 +194,6 @@
|
|||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- <table v-if="dataset != undefined" class="table">
|
||||
<thead>
|
||||
<tr>
|
||||
<th>Title</th>
|
||||
<th>Abstract</th>
|
||||
<th>Country</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr>
|
||||
<td>
|
||||
<h2 v-if="dataset.hasOwnProperty('titles')">{{ dataset.titles[0].value }} details!</h2>
|
||||
</td>
|
||||
<td>
|
||||
<p v-if="dataset.hasOwnProperty('abstracts')" class="dataset__abstract">{{ dataset.abstracts[0].value }}</p>
|
||||
</td>
|
||||
<td>India</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table> -->
|
||||
</div>
|
||||
|
||||
<div class="container-fluid" style="padding-top: 3.8em">
|
||||
|
|
@ -232,12 +221,35 @@ export default DatasetDetailComponent;
|
|||
.section {
|
||||
font-size: 0.8rem;
|
||||
}
|
||||
label {
|
||||
display: inline-block;
|
||||
// width: 3em;
|
||||
margin: 0.5em 0;
|
||||
color: #607d8b;
|
||||
font-weight: bold;
|
||||
.card {
|
||||
border-radius: 0;
|
||||
/* rempve box-shadow */
|
||||
box-shadow: none;
|
||||
}
|
||||
.link-label {
|
||||
color: #33cccc;
|
||||
}
|
||||
.label {
|
||||
/* color: #363636; */
|
||||
display: block;
|
||||
font-size: 0.8rem;
|
||||
font-weight: 700;
|
||||
}
|
||||
.label.uppercase {
|
||||
text-transform: uppercase;
|
||||
}
|
||||
.normal.label {
|
||||
font-weight: 400;
|
||||
}
|
||||
.column p span i {
|
||||
color: #336699;
|
||||
}
|
||||
|
||||
.table-header {
|
||||
/* color: #363636; */
|
||||
font-size: 0.8rem;
|
||||
font-weight: 700;
|
||||
background-color: #ccddf1;
|
||||
}
|
||||
input {
|
||||
height: 2em;
|
||||
|
|
|
|||
Loading…
Reference in New Issue
Block a user