forked from geolba/tethys.frontend
- add search components: vs-result.vue, vs-input.vue, facet-category.vue
- add search models - add opensans font - add bulma css framework - add axios, rxjs, vue-property-decorator - npm updates
This commit is contained in:
Arno Kaimbacher
parent
8e0bc7c18d
commit
156bf0ae26
30 changed files with 4937 additions and 2044 deletions
51
src/components/vs-result/vs-result.ts
Normal file
51
src/components/vs-result/vs-result.ts
Normal file
|
|
@ -0,0 +1,51 @@
|
|||
import { Dataset } from "@/models/dataset";
|
||||
import { Options, Vue } from "vue-class-component";
|
||||
import { Prop } from "vue-property-decorator";
|
||||
|
||||
@Options({
|
||||
name: "VsResult",
|
||||
})
|
||||
export default class VsResult extends Vue {
|
||||
public openAccessLicences: Array<string> = ["CC-BY-4.0", "CC-BY-SA-4.0"];
|
||||
|
||||
@Prop()
|
||||
private datasets!: Array<Dataset>;
|
||||
|
||||
public get results(): Array<Dataset> {
|
||||
return this.datasets;
|
||||
}
|
||||
|
||||
public getDomainWithoutSubdomain() {
|
||||
const urlParts = new URL(window.location.href).hostname.split(".");
|
||||
|
||||
return urlParts
|
||||
.slice(0)
|
||||
.slice(-(urlParts.length === 4 ? 3 : 2))
|
||||
.join(".");
|
||||
}
|
||||
|
||||
private convert(unixtimestamp: number) {
|
||||
// Unixtimestamp
|
||||
// var unixtimestamp = document.getElementById('timestamp').value;
|
||||
// Months array
|
||||
const months_arr = ["Jan", "Feb", "Mar", "Apr", "May", "Jun", "Jul", "Aug", "Sep", "Oct", "Nov", "Dec"];
|
||||
// Convert timestamp to milliseconds
|
||||
const date = new Date(unixtimestamp * 1000);
|
||||
// Year
|
||||
const year = date.getFullYear();
|
||||
// Month
|
||||
const month = months_arr[date.getMonth()];
|
||||
// Day
|
||||
const day = date.getDate();
|
||||
// Hours
|
||||
const hours = date.getHours();
|
||||
// Minutes
|
||||
const minutes = "0" + date.getMinutes();
|
||||
// Seconds
|
||||
const seconds = "0" + date.getSeconds();
|
||||
// Display date time in MM-dd-yyyy h:m:s format
|
||||
const convdataTime = month + "-" + day + "-" + year + " " + hours + ":" + minutes.substr(-2) + ":" + seconds.substr(-2);
|
||||
// document.getElementById('datetime').innerHTML = convdataTime;
|
||||
return convdataTime;
|
||||
}
|
||||
}
|
||||
165
src/components/vs-result/vs-result.vue
Normal file
165
src/components/vs-result/vs-result.vue
Normal file
|
|
@ -0,0 +1,165 @@
|
|||
<template>
|
||||
<div class="column" v-for="document in results" :key="document.id">
|
||||
<div class="card result-list-container">
|
||||
<div class="card-content row record-elem">
|
||||
<span class="label label-info" data-container="div" data-title="Publication date">
|
||||
{{ convert(document.server_date_published) }}
|
||||
</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>
|
||||
|
||||
<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>
|
||||
<a
|
||||
v-if="document.identifier && document.identifier.length > 0"
|
||||
target="_self"
|
||||
v-bind:href="'https://doi.' + getDomainWithoutSubdomain() + '/' + document.identifier[0]"
|
||||
class="ng-binding"
|
||||
>
|
||||
{{ document.title_output }}
|
||||
</a>
|
||||
<a v-else target="_self" v-bind:href="'dataset/' + document.id" class="ng-binding">
|
||||
{{ document.title_output }}
|
||||
</a>
|
||||
</h4>
|
||||
|
||||
<p v-if="document.author && document.author.length > 0">
|
||||
<!-- <span>Author: {{ document.author.join(', ') }}</span> -->
|
||||
<span v-for="(author, index) in document.author" :key="index">{{ author }}; </span>
|
||||
</p>
|
||||
|
||||
<p class="clamped clamped-2">
|
||||
<span class="text">
|
||||
Abstract: {{ document.abstract_output }}
|
||||
<span class="ellipsis">...</span>
|
||||
<span class="fill"></span>
|
||||
</span>
|
||||
</p>
|
||||
|
||||
<p>
|
||||
<span>Licence: {{ document.licence }}</span>
|
||||
</p>
|
||||
|
||||
<span class="label label-keyword titlecase" v-for="(item, index) in document.subject" :key="index"> #{{ item }} </span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script lang="ts">
|
||||
import VsResults from "./vs-result";
|
||||
export default VsResults;
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
/* overflow for abstracts */
|
||||
.clamped {
|
||||
line-height: 1.5;
|
||||
overflow: hidden;
|
||||
position: relative;
|
||||
}
|
||||
.clamped-2 {
|
||||
/* Clamp to 2 lines, ie line-height x 2: */
|
||||
max-height: 4.5em;
|
||||
}
|
||||
.ellipsis {
|
||||
background: #fff;
|
||||
bottom: 0;
|
||||
position: absolute;
|
||||
right: 0;
|
||||
}
|
||||
.fill {
|
||||
background: #fff;
|
||||
height: 100%;
|
||||
position: absolute;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
/* zenodo */
|
||||
.label-success {
|
||||
background-color: #5cb85c;
|
||||
}
|
||||
.label-default {
|
||||
background-color: #777;
|
||||
}
|
||||
.label-info {
|
||||
background-color: #6aa3d5;
|
||||
}
|
||||
.label-keyword {
|
||||
background-color: #7e7e7e;
|
||||
}
|
||||
.label {
|
||||
display: inline-block;
|
||||
padding: 0.2em 0.12em 0.3em;
|
||||
font-size: 75%;
|
||||
color: #fff;
|
||||
border-radius: 0.25em;
|
||||
margin-right: 1.25em;
|
||||
/* margin-left: 10px; */
|
||||
}
|
||||
/* .record-elem .h4, record-elem h4 {
|
||||
font-size: 18px;
|
||||
} */
|
||||
.record-elem p a {
|
||||
color: #3ad29f;
|
||||
font-size: 14px;
|
||||
}
|
||||
/* .record-elem h4 a {
|
||||
color: #000;
|
||||
} */
|
||||
|
||||
.record-elem h4 a {
|
||||
cursor: pointer;
|
||||
color: #000;
|
||||
text-decoration: none;
|
||||
font-weight: bold;
|
||||
/* margin-left: 10px; */
|
||||
font-size: 16px;
|
||||
}
|
||||
.record-elem h4 a:hover {
|
||||
color: #777;
|
||||
text-decoration: none;
|
||||
}
|
||||
/* .search-detail a:hover {
|
||||
color: rgb(0, 128, 0);
|
||||
} */
|
||||
.record-elem .h4,
|
||||
.record-elem h4 {
|
||||
font-size: 16px;
|
||||
letter-spacing: 0.05em;
|
||||
margin-top: 8px;
|
||||
}
|
||||
.record-detail h1,
|
||||
.record-detail p,
|
||||
.record-elem h4,
|
||||
.record-elem p,
|
||||
.well {
|
||||
word-wrap: break-word;
|
||||
}
|
||||
.record-elem p span {
|
||||
color: #000;
|
||||
font-size: 14px;
|
||||
}
|
||||
|
||||
.post {
|
||||
position: relative;
|
||||
min-height: 1px;
|
||||
padding-left: 15px;
|
||||
padding-right: 15px;
|
||||
|
||||
box-sizing: border-box;
|
||||
margin-bottom: 10px;
|
||||
margin-top: 15px;
|
||||
}
|
||||
/* .record-elem {
|
||||
border-top: 1px solid rgb(238, 238, 238);
|
||||
} */
|
||||
</style>
|
||||
Loading…
Add table
editor.link_modal.header
Reference in a new issue