forked from geolba/tethys.frontend
- simple search box as extra vue component: simple-search-component
This commit is contained in:
parent
89c79ec034
commit
ed7bd8c4d2
|
|
@ -256,30 +256,30 @@ body {
|
|||
display: none;
|
||||
}
|
||||
|
||||
.animate_content {
|
||||
animation: animate 3s ease;
|
||||
}
|
||||
// .animate_content {
|
||||
// animation: animate 3s ease;
|
||||
// }
|
||||
|
||||
@keyframes animate {
|
||||
10% {
|
||||
transform: scale(1, 0.004);
|
||||
}
|
||||
35% {
|
||||
transform: scale(0.001, 0.004);
|
||||
opacity: 1;
|
||||
}
|
||||
50% {
|
||||
transform: scale(0.001, 0.004);
|
||||
opacity: 0;
|
||||
}
|
||||
85% {
|
||||
transform: scale(1, 0.004);
|
||||
opacity: 1;
|
||||
}
|
||||
100% {
|
||||
transform: scale(1, 1);
|
||||
}
|
||||
}
|
||||
// @keyframes animate {
|
||||
// 10% {
|
||||
// transform: scale(1, 0.004);
|
||||
// }
|
||||
// 35% {
|
||||
// transform: scale(0.001, 0.004);
|
||||
// opacity: 1;
|
||||
// }
|
||||
// 50% {
|
||||
// transform: scale(0.001, 0.004);
|
||||
// opacity: 0;
|
||||
// }
|
||||
// 85% {
|
||||
// transform: scale(1, 0.004);
|
||||
// opacity: 1;
|
||||
// }
|
||||
// 100% {
|
||||
// transform: scale(1, 1);
|
||||
// }
|
||||
// }
|
||||
|
||||
.page_description {
|
||||
font-weight: 300;
|
||||
|
|
|
|||
12
src/components/simple-search/simple-search-component.ts
Normal file
12
src/components/simple-search/simple-search-component.ts
Normal file
|
|
@ -0,0 +1,12 @@
|
|||
import { Options, Vue } from "vue-class-component";
|
||||
|
||||
@Options({
|
||||
name: "SimpleSearchComponent",
|
||||
})
|
||||
export default class SimpleSearchComponent extends Vue {
|
||||
public display = "";
|
||||
|
||||
search(): void {
|
||||
this.$router.push({ name: "Search", params: { display: this.display } });
|
||||
}
|
||||
}
|
||||
77
src/components/simple-search/simple-search-component.vue
Normal file
77
src/components/simple-search/simple-search-component.vue
Normal file
|
|
@ -0,0 +1,77 @@
|
|||
<template>
|
||||
<div class="column is-two-thirds-tablet is-half-desktop is-one-third-widescreen mx-auto">
|
||||
<div class="search-box mx-auto">
|
||||
<div class="field has-addons main-search-from-bg">
|
||||
<div class="control is-expanded">
|
||||
<input id="search_query" class="input is-medium" type="text" name="q" autocomplete="off" v-model="display" />
|
||||
<!-- <p>Message is: {{ display }}</p> v-on:input="searchChanged"-->
|
||||
</div>
|
||||
|
||||
<div class="control">
|
||||
<button class="button input is-medium search-button-icon" @click="search()">
|
||||
<i class="fas fa-search text-white"></i>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script lang="ts">
|
||||
import SimpleSearchComponent from "./simple-search-component";
|
||||
export default SimpleSearchComponent;
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.main-search-from-bg {
|
||||
background-color: #fff;
|
||||
padding: 0.2em;
|
||||
}
|
||||
|
||||
.banner .column {
|
||||
display: block;
|
||||
// flex-basis: 0;
|
||||
// flex-grow: 1;
|
||||
// flex-shrink: 1;
|
||||
/* padding: 0.75rem; */
|
||||
position: relative;
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
.banner .button {
|
||||
background-color: #33cccc;
|
||||
// border-color: #dbdbdb;
|
||||
border-width: 0;
|
||||
color: #363636;
|
||||
cursor: pointer;
|
||||
justify-content: center;
|
||||
padding-bottom: 0;
|
||||
padding-left: 1em;
|
||||
padding-right: 1em;
|
||||
padding-top: 0;
|
||||
text-align: center;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
.search-box {
|
||||
background-image: url(./../../assets/site/img/white-pixel.png);
|
||||
background-repeat: repeat;
|
||||
padding: 1.8em;
|
||||
// width: 28em;
|
||||
}
|
||||
|
||||
.control .input,
|
||||
.control .input:focus,
|
||||
.column .input.selected {
|
||||
// background-color: white;
|
||||
/* border-color: #dbdbdb; */
|
||||
// border: 0;
|
||||
// outline: none;
|
||||
border-radius: 4px;
|
||||
color: #363636;
|
||||
}
|
||||
input {
|
||||
border-width: 0;
|
||||
box-shadow: none;
|
||||
}
|
||||
</style>
|
||||
|
|
@ -113,6 +113,10 @@ export default VsInput;
|
|||
border-radius: 4px;
|
||||
color: #363636;
|
||||
}
|
||||
input {
|
||||
border-width: 0;
|
||||
box-shadow: none;
|
||||
}
|
||||
|
||||
.autocomplete-results {
|
||||
padding: 0;
|
||||
|
|
|
|||
|
|
@ -4,10 +4,13 @@ import { Prop } from "vue-property-decorator";
|
|||
import DatasetService from "../../services/dataset.service";
|
||||
import { Subscription } from "rxjs";
|
||||
import moment from "moment";
|
||||
import SimpleSearchComponent from "@/components/simple-search/simple-search-component.vue";
|
||||
|
||||
@Options({
|
||||
name: "DatasetDetailComponent",
|
||||
// selector: "dataset-detail",
|
||||
components: {
|
||||
SimpleSearchComponent,
|
||||
},
|
||||
})
|
||||
export default class DatasetDetailComponent extends Vue {
|
||||
@Prop()
|
||||
|
|
@ -57,7 +60,7 @@ export default class DatasetDetailComponent extends Vue {
|
|||
return filename.substring(filename.lastIndexOf(".") + 1, filename.length) || filename;
|
||||
}
|
||||
|
||||
public formatSize(file_size: number, precision = 1) {
|
||||
public formatSize(file_size: number): string {
|
||||
let size = file_size;
|
||||
const unit = ["Byte", "KiB", "MiB", "GiB", "TiB", "PiB", "EiB", "ZiB", "YiB"];
|
||||
let i;
|
||||
|
|
@ -78,7 +81,7 @@ export default class DatasetDetailComponent extends Vue {
|
|||
// return moment(date).format("MMM Do YYYY");
|
||||
}
|
||||
|
||||
public getYear(date: string) {
|
||||
public getYear(date: string): string {
|
||||
return moment(date).format("YYYY");
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -8,7 +8,37 @@
|
|||
<button v-on:click="goBack">Back</button>
|
||||
</section>
|
||||
</div> -->
|
||||
<div class="container-fluid banner mz-5"></div>
|
||||
<div class="container-fluid banner mz-5">
|
||||
<!-- <div class="column is-two-thirds-tablet is-half-desktop is-one-third-widescreen mx-auto">
|
||||
<div class="search-box mx-auto">
|
||||
<div class="field has-addons main-search-from-bg">
|
||||
<div class="control is-expanded">
|
||||
<input
|
||||
v-on:input="searchChanged"
|
||||
id="search_query"
|
||||
class="input is-medium"
|
||||
type="text"
|
||||
name="q"
|
||||
autocomplete="off"
|
||||
v-model="display"
|
||||
v-bind:placeholder="placeholder"
|
||||
v-on:keydown.down="onArrowDown"
|
||||
v-on:keydown.up="onArrowUp"
|
||||
v-on:keydown.enter="onEnter"
|
||||
@keydown.tab="close"
|
||||
v-on:focus="focus"
|
||||
/>
|
||||
</div>
|
||||
<div class="control">
|
||||
<button class="button input is-medium search-button-icon" @click="search()">
|
||||
<i class="fas fa-search text-white"></i>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div> -->
|
||||
<simple-search-component></simple-search-component>
|
||||
</div>
|
||||
<section class="section" v-if="loaded">
|
||||
<div class="container">
|
||||
<!-- <span class="is-size-5"> Basic Table </span>
|
||||
|
|
@ -253,27 +283,27 @@ export default DatasetDetailComponent;
|
|||
font-weight: 700;
|
||||
background-color: #ccddf1;
|
||||
}
|
||||
input {
|
||||
height: 2em;
|
||||
font-size: 1em;
|
||||
padding-left: 0.4em;
|
||||
}
|
||||
button {
|
||||
margin-top: 20px;
|
||||
font-family: Arial;
|
||||
background-color: #eee;
|
||||
border: none;
|
||||
padding: 5px 10px;
|
||||
border-radius: 4px;
|
||||
cursor: pointer;
|
||||
cursor: hand;
|
||||
}
|
||||
button:hover {
|
||||
background-color: #cfd8dc;
|
||||
}
|
||||
button:disabled {
|
||||
background-color: #eee;
|
||||
color: #ccc;
|
||||
cursor: auto;
|
||||
}
|
||||
// input {
|
||||
// height: 2em;
|
||||
// font-size: 1em;
|
||||
// padding-left: 0.4em;
|
||||
// }
|
||||
// button {
|
||||
// margin-top: 20px;
|
||||
// font-family: Arial;
|
||||
// background-color: #eee;
|
||||
// border: none;
|
||||
// padding: 5px 10px;
|
||||
// border-radius: 4px;
|
||||
// cursor: pointer;
|
||||
// cursor: hand;
|
||||
// }
|
||||
// button:hover {
|
||||
// background-color: #cfd8dc;
|
||||
// }
|
||||
// button:disabled {
|
||||
// background-color: #eee;
|
||||
// color: #ccc;
|
||||
// cursor: auto;
|
||||
// }
|
||||
</style>
|
||||
|
|
|
|||
Loading…
Reference in New Issue
Block a user