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

- styling search page: facet-category.vue und vs-result.vue

Browse Source
This commit is contained in:
Arno Kaimbacher 2021-12-09 16:41:47 +01:00
parent b24832ca08
commit 8c5094f91a
3 changed files with 39 additions and 17 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
src/components/face-category/facet-category.vue
View File

@ -50,6 +50,8 @@ export default FacetCategory;
background-clip: border-box; background-clip: border-box;
border: 1px solid rgba(0, 0, 0, 0.125); */ border: 1px solid rgba(0, 0, 0, 0.125); */
border-radius: 0; border-radius: 0;
/* rempve box-shadow */
box-shadow: none;
} }
/* .card-footer:last-child, /* .card-footer:last-child,

40
src/components/vs-result/vs-result.vue
View File

@ -1,22 +1,21 @@
<template> <template>
<div class="column" v-for="document in results" :key="document.id"> <div v-for="document in results" :key="document.id">
<div class="card result-list-container"> <div class="card result-list-container">
<div class="card-content record-elem"> <div class="card-content record-elem">
<p v-if="document.identifier && document.identifier.length > 0">
<!-- <span>Author: {{ document.identifier.join(', ') }}</span> -->
<!-- <span v-for="(author,index) in document.author" :key="index">{{ author }}; </span> -->
<!-- <span>'https://doi.org/' + {{ document.identifier[0] }}</span> -->
<a target="_blank" v-bind:href="'https://doi.org/' + document.identifier[0]"> {{ "https://doi.org/" + document.identifier[0] }} </a>&nbsp;
<span v-if="document.author && document.author.length > 0">{{ document.author[0] }}</span>
</p>
<span class="label label-info" data-container="div" data-title="Publication date"> <span class="label label-info" data-container="div" data-title="Publication date">
{{ convert(document.server_date_published) }} {{ convert(document.server_date_published) }}
</span> </span>
<span class="label label-default ng-binding">{{ document.doctype }}</span> <span class="label label-default ng-binding">{{ document.doctype }}</span>
<span v-if="openAccessLicences.includes(document.licence)" class="label label-success titlecase">Open Access</span> <span v-if="openAccessLicences.includes(document.licence)" class="label label-success titlecase">Open Access</span>
<p v-if="document.identifier && document.identifier.length > 0">
<!-- <span>Author: {{ document.identifier.join(', ') }}</span> -->
<!-- <span v-for="(author,index) in document.author" :key="index">{{ author }}; </span> -->
<!-- <span>'https://doi.org/' + {{ document.identifier[0] }}</span> -->
<a target="_blank" v-bind:href="'https://doi.org/' + document.identifier[0]">
{{ "https://doi.org/" + document.identifier[0] }}
</a>
</p>
<h4> <h4>
<a <a
v-if="document.identifier && document.identifier.length > 0" v-if="document.identifier && document.identifier.length > 0"
@ -31,10 +30,10 @@
</a> </a>
</h4> </h4>
<p v-if="document.author && document.author.length > 0"> <!-- <p v-if="document.author && document.author.length > 0">
<!-- <span>Author: {{ document.author.join(', ') }}</span> --> <span>Author: {{ document.author.join(', ') }}</span>
<span v-for="(author, index) in document.author" :key="index">{{ author }}; </span> <span v-for="(author, index) in document.author" :key="index">{{ author }}; </span>
</p> </p> -->
<p class="clamped clamped-2"> <p class="clamped clamped-2">
<span class="text"> <span class="text">
@ -60,6 +59,12 @@ export default VsResults;
</script> </script>
<style lang="scss" scoped> <style lang="scss" scoped>
.card {
border-radius: 0;
/* rempve box-shadow */
box-shadow: none;
}
/* overflow for abstracts */ /* overflow for abstracts */
.clamped { .clamped {
line-height: 1.5; line-height: 1.5;
@ -108,8 +113,9 @@ export default VsResults;
/* .record-elem .h4, record-elem h4 { /* .record-elem .h4, record-elem h4 {
font-size: 18px; font-size: 18px;
} */ } */
.record-elem p a { .record-elem p a {
color: #3ad29f; color: #33cccc;
font-size: 14px; font-size: 14px;
} }
/* .record-elem h4 a { /* .record-elem h4 a {
@ -122,7 +128,7 @@ export default VsResults;
text-decoration: none; text-decoration: none;
font-weight: bold; font-weight: bold;
/* margin-left: 10px; */ /* margin-left: 10px; */
font-size: 16px; // font-size: 16px;
} }
.record-elem h4 a:hover { .record-elem h4 a:hover {
color: #777; color: #777;
@ -133,9 +139,9 @@ export default VsResults;
} */ } */
.record-elem .h4, .record-elem .h4,
.record-elem h4 { .record-elem h4 {
font-size: 16px; // font-size: 16px;
letter-spacing: 0.05em; letter-spacing: 0.05em;
margin-top: 8px; // margin-top: 8px;
} }
.record-detail h1, .record-detail h1,
.record-detail p, .record-detail p,

14
src/views/search-view/search-view-component.vue
View File

@ -120,6 +120,20 @@
</div> </div>
</div> </div>
</div> </div>
<div class="container-fluid" style="padding-top: 3.8em">
<div class="columns is-mobile partner-logos">
<div class="column col-sm text-center">
<img src="@/assets/site/img/re3-data-logo-mono.jpg" alt="re3 data logo" />
</div>
<div class="column col-sm text-center mobile-space">
<img src="@/assets/site/img/geosphere-austria-logo.jpg" class="pb-3" alt="logo geosphere austria" />
</div>
<div class="column col-sm text-center">
<img src="@/assets/site/img/placeholder-logo.jpg" alt="logo placeholder" />
</div>
</div>
</div>
</div> </div>
</template> </template>