geolba/tethys.frontend
6
0
Fork 1
Code Issues 7 Pull Requests Packages Projects 3 Releases 1 Wiki Activity

- only individual bulma components, not everything

Browse Source 
- styleing for search detail page
This commit is contained in:
Arno Kaimbacher 2021-12-16 14:14:58 +01:00
parent 3e73b91cf0
commit 57ba2af299
6 changed files with 151 additions and 75 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
src/App.vue
View File

@ -201,7 +201,7 @@ footer .card {
} }
footer .card-title { footer .card-title {
font-family: Verdana; // font-family: Verdana;
color: #fff; color: #fff;
text-transform: uppercase; text-transform: uppercase;
font-weight: bold; font-weight: bold;

84
src/assets/scss/main-styles.scss
View File

@ -1,8 +1,61 @@
@charset "utf-8"; @charset "utf-8";
@import "~bulma"; // @import "~bulma";
// @import "@fontsource/open-sans"; // Defaults to weight 400. // @import "@fontsource/open-sans"; // Defaults to weight 400.
@import "~@openfonts/open-sans_all/index.css"; @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 { .button {
text-decoration: none; text-decoration: none;
// border: 1px solid #fff; // border: 1px solid #fff;
@ -19,24 +72,24 @@
} }
&.custom-button { &.custom-button {
// display: block; // display: block;
width: 125px; width: 125px;
color: #fff; color: #fff;
font-weight: bold; font-weight: bold;
font-size: 0.9em; font-size: 0.9em;
text-decoration: none; text-decoration: none;
border: 1px solid transparent; border: 1px solid transparent;
// .fas { // .fas {
// margin-right: 0.6em; // margin-right: 0.6em;
// // border-right: 1px solid #fff; // // border-right: 1px solid #fff;
// width: 2em; // width: 2em;
// }; // };
.fas { .fas {
margin-right: 0.6em; margin-right: 0.6em;
border-right: 1px solid #fff; border-right: 1px solid #fff;
padding: 0.6em; padding: 0.6em;
}; }
// strong { // strong {
// border-left: 1px solid #fff; // border-left: 1px solid #fff;
// padding-left: 0.6em; // padding-left: 0.6em;
@ -44,8 +97,6 @@
} }
} }
.header-image { .header-image {
background-image: url("./../site/img/Main-banner-homepage-xl.jpg"); background-image: url("./../site/img/Main-banner-homepage-xl.jpg");
background-size: cover; background-size: cover;
@ -76,7 +127,6 @@
// margin-top: 25px; // margin-top: 25px;
// } // }
// /* // /*
.help:before { .help:before {
background: url("./../site/img/Main-banner-homepage-xl.jpg"); background: url("./../site/img/Main-banner-homepage-xl.jpg");
@ -113,7 +163,6 @@
box-sizing: border-box; box-sizing: border-box;
} }
.text-center { .text-center {
text-align: center !important; text-align: center !important;
} }
@ -152,12 +201,9 @@ body H1 {
margin-top: 1.5rem !important; margin-top: 1.5rem !important;
} }
.text-left { .text-left {
text-align: left!important; text-align: left !important;
} }
html, html,
body { body {
font-family: "Open Sans", sans-serif; font-family: "Open Sans", sans-serif;
@ -198,7 +244,6 @@ body {
color: rgb(74, 74, 74); color: rgb(74, 74, 74);
} }
.hide { .hide {
display: none; display: none;
} }
@ -245,8 +290,6 @@ body {
overflow: hidden; overflow: hidden;
} }
#home_padding { #home_padding {
margin-top: 7%; margin-top: 7%;
} }
@ -318,12 +361,9 @@ body {
max-height: 6rem; max-height: 6rem;
} }
.card { .card {
position: relative; position: relative;
display: flex; display: flex;
flex-direction: column; flex-direction: column;
min-width: 0; min-width: 0;
word-wrap: break-word; word-wrap: break-word;
@ -392,4 +432,4 @@ body {
} }
.work-items div:hover .work-front { .work-items div:hover .work-front {
display: none; display: none;
} }

9
src/models/dataset.ts
View File

@ -156,6 +156,10 @@ export class DbDataset {
// return ($embargoDate->lessThan($now)); // return ($embargoDate->lessThan($now));
} }
public get MainTitle(): Nullable<Title> {
return this.titles.find((e) => e.type === TitleType.Main);
}
public get MainAbstract(): Nullable<Abstract> { public get MainAbstract(): Nullable<Abstract> {
return this.abstracts.find((e) => e.type === AbstractType.Abstract); return this.abstracts.find((e) => e.type === AbstractType.Abstract);
} }
@ -198,6 +202,10 @@ export enum AbstractType {
Other = " Other", Other = " Other",
} }
export enum TitleType {
Main = "Main",
Translated = "Translated",
}
export interface Title { export interface Title {
id: number; id: number;
type: string; type: string;
@ -220,6 +228,7 @@ export interface Author {
first_name: string; first_name: string;
last_name: string; last_name: string;
name_type: string; name_type: string;
full_name: string;
} }
export interface Person { export interface Person {

4
src/services/dataset.service.ts
View File

@ -165,14 +165,14 @@ class DatasetService {
const host = "https:" + VUE_APP_PORTAL; const host = "https:" + VUE_APP_PORTAL;
const path = "/api/dataset/" + id; const path = "/api/dataset/" + id;
const apiUrl = host + path; 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)));
// const dataset = api.get<DbDataset>(apiUrl).pipe(map((res) => this.prepareDataset(res, apiUrl)));
// this.messageService.add('HeroService: fetched heroes'); // this.messageService.add('HeroService: fetched heroes');
return dataset; return dataset;
} }
private prepareDataset(datasetObj: DbDataset, apiUrl: string) { private prepareDataset(datasetObj: DbDataset, apiUrl: string): DbDataset {
const dataset = deserialize<DbDataset>(DbDataset, JSON.stringify(datasetObj)); const dataset = deserialize<DbDataset>(DbDataset, JSON.stringify(datasetObj));
dataset.url = document.documentURI; dataset.url = document.documentURI;
// this.internalDatasetId.generateInternalId(dataset); // this.internalDatasetId.generateInternalId(dataset);

15
src/views/dataset-detail.component.ts/dataset-detail.component.ts
View File

@ -68,6 +68,11 @@ export default class DatasetDetailComponent extends Vue {
return Math.round((size + Number.EPSILON) * 100) / 100 + " " + unit[i]; 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 { public getHumanDate(date: string): string {
return moment(date).format("DD.MM.YYYY HH:mm"); return moment(date).format("DD.MM.YYYY HH:mm");
// return moment(date).format("MMM Do YYYY"); // return moment(date).format("MMM Do YYYY");
@ -76,4 +81,14 @@ export default class DatasetDetailComponent extends Vue {
public getYear(date: string) { public getYear(date: string) {
return moment(date).format("YYYY"); 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;
}
} }

112
src/views/dataset-detail.component.ts/dataset-detail.component.vue
View File

@ -16,16 +16,26 @@
<div class="columns"> <div class="columns">
<div class="column is-8 results_column" style="padding-top: 1.2rem; padding-right: 1rem; padding-left: 1rem"> <div class="column is-8 results_column" style="padding-top: 1.2rem; padding-right: 1rem; padding-left: 1rem">
<div class="card"> <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>
<div class="card record-elem"> <div class="card record-elem">
<div class="columns" v-if="dataset.hasOwnProperty('titles')"> <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 class="column is-9-desktop is-8-tablet">{{ dataset.titles[0].value }}</div>
</div> </div>
<div class="columns" v-if="dataset.hasOwnProperty('abstracts')"> <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 /> Zusammenfassung/<br />
abstract: abstract:
</div> </div>
@ -38,14 +48,14 @@
</div> </div>
</div> </div>
<div class="columns" v-if="dataset.hasOwnProperty('abstracts')"> <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()"> <div class="column is-9-desktop is-8-tablet" v-if="dataset.hasSeriesInformationAbstract()">
{{ dataset.SeriesInformationAbstract.value }} {{ dataset.SeriesInformationAbstract.value }}
</div> </div>
<div class="column is-9-desktop is-8-tablet" v-else>-</div> <div class="column is-9-desktop is-8-tablet" v-else>-</div>
</div> </div>
<div class="columns" v-if="dataset.hasOwnProperty('abstracts')"> <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()"> <div class="column is-9-desktop is-8-tablet" v-if="dataset.hasMethodsAbtract()">
{{ dataset.MethodsAbtract.value }} {{ dataset.MethodsAbtract.value }}
</div> </div>
@ -53,20 +63,20 @@
</div> </div>
<div class="columns"> <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"> <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"> <table id="items" v-if="dataset.hasEmbargoPassed()" class="table is-bordered is-striped">
<thead> <thead>
<tr> <tr>
<th>Path Name</th> <th class="table-header">Path Name</th>
<th>File Extension</th> <th class="table-header">File Extension</th>
<th>File Size</th> <th class="table-header">File Size</th>
</tr> </tr>
</thead> </thead>
<tbody> <tbody>
<tr v-for="file in dataset.files" :key="file.id"> <tr v-for="file in dataset.files" :key="file.id">
<td> <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>
<td> <td>
<span>{{ getExtension(file.path_name) }}</span> <span>{{ getExtension(file.path_name) }}</span>
@ -83,7 +93,7 @@
</div> </div>
<div class="columns"> <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"> <div class="column is-9-desktop is-8-tablet">
<p>Persistenter Identifikator: {{ dataset.url }}</p> <p>Persistenter Identifikator: {{ dataset.url }}</p>
<p>Status: {{ dataset.server_state }}</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 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="card">
<div class="column"> <div class="column">
<h2>Details</h2> <h2 class="label uppercase">Details</h2>
</div> </div>
</div> </div>
<div class="card"> <div class="card">
<div class="column"> <div class="column">
<h3>Beitragende/Contributor</h3> <h3 class="label uppercase">Beitragende/Contributor</h3>
<p v-if="dataset.hasContributors()"> <p v-if="dataset.hasContributors()">
{{ dataset.contributors.map((u) => u.full_name).join(", ") }} {{ dataset.contributors.map((u) => u.full_name).join(", ") }}
</p> </p>
@ -112,7 +122,7 @@
</div> </div>
<div class="card"> <div class="card">
<div class="column"> <div class="column">
<h3>Schlüsselwörter/Keywords</h3> <h3 class="label uppercase">Schlüsselwörter/Keywords</h3>
<p v-if="dataset.hasOwnProperty('subjects')"> <p v-if="dataset.hasOwnProperty('subjects')">
{{ dataset.subjects.map((u) => u.value).join(", ") }} {{ dataset.subjects.map((u) => u.value).join(", ") }}
</p> </p>
@ -121,7 +131,7 @@
</div> </div>
<div class="card"> <div class="card">
<div class="column"> <div class="column">
<h3>Erstellungsjahr/Year</h3> <h3 class="label uppercase">Erstellungsjahr/Year</h3>
<p> <p>
{{ getYear(dataset.server_date_published) }} {{ getYear(dataset.server_date_published) }}
</p> </p>
@ -129,7 +139,7 @@
</div> </div>
<div class="card"> <div class="card">
<div class="column"> <div class="column">
<h3>Abdeckung/Coverage</h3> <h3 class="label uppercase">Abdeckung/Coverage</h3>
<p> <p>
{{ dataset.Coverage }} {{ dataset.Coverage }}
</p> </p>
@ -137,7 +147,7 @@
</div> </div>
<div class="card"> <div class="card">
<div class="column"> <div class="column">
<h3>Sprache/Language</h3> <h3 class="label uppercase">Sprache/Language</h3>
<p> <p>
{{ dataset.language }} {{ dataset.language }}
</p> </p>
@ -145,7 +155,7 @@
</div> </div>
<div class="card"> <div class="card">
<div class="column"> <div class="column">
<h3>Objekttyp/Object Type</h3> <h3 class="label uppercase">Objekttyp/Object Type</h3>
<p> <p>
<span><i class="fas fa-file"></i> {{ dataset.type }}</span> <span><i class="fas fa-file"></i> {{ dataset.type }}</span>
</p> </p>
@ -153,20 +163,20 @@
</div> </div>
<div class="card"> <div class="card">
<div class="column"> <div class="column">
<h3>Lizenz/License</h3> <h3 class="label uppercase">Lizenz/License</h3>
<p v-if="dataset.hasLicenses()"> <p v-if="dataset.hasLicenses()">
<label v-for="license in dataset.licenses" :key="license.id"> <label v-for="license in dataset.licenses" :key="license.id">
<span class="label"> <span class="normal label">
{{ license.name }} {{ license.name }}
</span> </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> </label>
</p> </p>
</div> </div>
</div> </div>
<div class="card"> <div class="card">
<div class="column"> <div class="column">
<h3>Projekt/Project</h3> <h3 class="label uppercase">Projekt/Project</h3>
<p v-if="dataset.project != null"> <p v-if="dataset.project != null">
<span>{{ dataset.project.name }}</span> <span>{{ dataset.project.name }}</span>
</p> </p>
@ -175,7 +185,7 @@
</div> </div>
<div class="card"> <div class="card">
<div class="column"> <div class="column">
<h3>Embargo</h3> <h3 class="label uppercase">Embargo</h3>
<p v-if="dataset.embargo_date"> <p v-if="dataset.embargo_date">
<span>{{ getHumanDate(dataset.embargo_date) }}</span> <span>{{ getHumanDate(dataset.embargo_date) }}</span>
</p> </p>
@ -184,27 +194,6 @@
</div> </div>
</div> </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>
<div class="container-fluid" style="padding-top: 3.8em"> <div class="container-fluid" style="padding-top: 3.8em">
@ -232,12 +221,35 @@ export default DatasetDetailComponent;
.section { .section {
font-size: 0.8rem; font-size: 0.8rem;
} }
label { .card {
display: inline-block; border-radius: 0;
// width: 3em; /* rempve box-shadow */
margin: 0.5em 0; box-shadow: none;
color: #607d8b; }
font-weight: bold; .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 { input {
height: 2em; height: 2em;