- only individual bulma components, not everything
- styleing for search detail page
This commit is contained in:
parent
3e73b91cf0
commit
57ba2af299
6 changed files with 151 additions and 75 deletions
|
|
@ -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…
Add table
editor.link_modal.header
Reference in a new issue