From 646f1b3843a1a633faa9d8ce279b502472044eb7 Mon Sep 17 00:00:00 2001 From: Arno Kaimbacher Date: Thu, 16 Dec 2021 17:34:03 +0100 Subject: [PATCH] - search input on home view component --- src/assets/scss/main-styles.scss | 7 ++-- src/components/vs-input/vs-input.ts | 4 +++ src/router/index.ts | 3 +- src/views/home-view/home-view-component.scss | 34 ++++++++++++++++++- src/views/home-view/home-view-component.ts | 18 ++++------ src/views/home-view/home-view-component.vue | 29 ++++++++++++---- .../search-view/search-view-component.ts | 11 ++++-- .../search-view/search-view-component.vue | 2 +- 8 files changed, 82 insertions(+), 26 deletions(-) diff --git a/src/assets/scss/main-styles.scss b/src/assets/scss/main-styles.scss index a355013..aa1b8b8 100644 --- a/src/assets/scss/main-styles.scss +++ b/src/assets/scss/main-styles.scss @@ -97,6 +97,7 @@ $table-striped-row-even-hover-background-color: #ecf2fa; } } +// search image .header-image { background-image: url("./../site/img/Main-banner-homepage-xl.jpg"); background-size: cover; @@ -290,9 +291,9 @@ body { overflow: hidden; } -#home_padding { - margin-top: 7%; -} +// #home_padding { +// margin-top: 7%; +// } @media screen and (max-width: 768px) { #featured_area { diff --git a/src/components/vs-input/vs-input.ts b/src/components/vs-input/vs-input.ts index a483508..7bcba03 100644 --- a/src/components/vs-input/vs-input.ts +++ b/src/components/vs-input/vs-input.ts @@ -20,6 +20,10 @@ export default class VsInput extends Vue { readonly placeholder!: string; private display = ""; + + @Prop() + private propDisplay = ""; + private value!: Suggestion | string; private error = ""; private results: Array = []; diff --git a/src/router/index.ts b/src/router/index.ts index 7cf4d83..eb116cb 100644 --- a/src/router/index.ts +++ b/src/router/index.ts @@ -22,9 +22,10 @@ const routes = [ component: HelpViewComponent, }, { - path: "/search", + path: "/search/:display?", name: "Search", component: SearchViewComponent, + props: true, }, { path: "/dataset/:datasetId", diff --git a/src/views/home-view/home-view-component.scss b/src/views/home-view/home-view-component.scss index 6c6fd9f..260fe79 100644 --- a/src/views/home-view/home-view-component.scss +++ b/src/views/home-view/home-view-component.scss @@ -13,7 +13,39 @@ h6 { margin-top: 1.5rem; } - +.search-box { + background-image: url(./../../assets/site/img/white-pixel.png); + background-repeat: repeat; + padding: 1.8em; + width: 28em; +} +.mx-auto { + margin-right: auto !important; + margin-left: auto !important; +} +.mt-3 { + margin-top: 1rem !important; +} +.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; +} +input{ + border-width:0; +} +.search-button-icon { + color: white; +} //contact apge .page-breaker { diff --git a/src/views/home-view/home-view-component.ts b/src/views/home-view/home-view-component.ts index d510575..1a93075 100644 --- a/src/views/home-view/home-view-component.ts +++ b/src/views/home-view/home-view-component.ts @@ -1,16 +1,12 @@ import { Options, Vue } from "vue-class-component"; -// import VsInput from "@/components/vs-input/vs-input.vue"; -// import VsResult from "@/components/vs-result/vs-result.vue"; -// import FacetCategory from "@/components/face-category/facet-category.vue"; -// import ActiveFacetCategory from "@/components/active-facet-category/active-facet-category.vue"; @Options({ name: "HomeViewComponent", - // components: { - // VsInput, - // VsResult, - // FacetCategory, - // ActiveFacetCategory, - // }, }) -export default class HomeViewComponent extends Vue {} +export default class HomeViewComponent extends Vue { + public display = ""; + + search(): void { + this.$router.push({ name: "Search", params: { display: this.display } }); + } +} diff --git a/src/views/home-view/home-view-component.vue b/src/views/home-view/home-view-component.vue index f3ce7b4..b958dc2 100644 --- a/src/views/home-view/home-view-component.vue +++ b/src/views/home-view/home-view-component.vue @@ -46,15 +46,30 @@ - + +
+
+ - +
+
+ + +
+
+ +
+
+
- --> +
diff --git a/src/views/search-view/search-view-component.ts b/src/views/search-view/search-view-component.ts index ab243ba..2e9cfa8 100644 --- a/src/views/search-view/search-view-component.ts +++ b/src/views/search-view/search-view-component.ts @@ -1,4 +1,5 @@ import { Options, Vue } from "vue-class-component"; +import { Prop } from "vue-property-decorator"; import VsInput from "@/components/vs-input/vs-input.vue"; import VsResult from "@/components/vs-result/vs-result.vue"; import FacetCategory from "@/components/face-category/facet-category.vue"; @@ -20,11 +21,14 @@ import { ActiveFilterCategories } from "@/models/solr"; }, }) export default class SearchViewComponent extends Vue { + @Prop() + display?: string; + results: Array = []; // facets: FacetFields = new FacetFields(); facets: FacetResults = new FacetResults(); - searchTerm!: string | Suggestion; + searchTerm: string | Suggestion = ""; // activeFilterCategories: Object = {}; activeFilterCategories: ActiveFilterCategories = new ActiveFilterCategories(); // = new Array(); pagination: any = { @@ -45,8 +49,11 @@ export default class SearchViewComponent extends Vue { // private rdrAPI!: DatasetService; private error = ""; - mounted(): void { + beforeMount(): void { // this.rdrAPI = new DatasetService(); + if (this.display != undefined && this.display != "") { + this.onSearch(this.display); + } } // onSearch(term: string): void { diff --git a/src/views/search-view/search-view-component.vue b/src/views/search-view/search-view-component.vue index 1ec8994..261b956 100644 --- a/src/views/search-view/search-view-component.vue +++ b/src/views/search-view/search-view-component.vue @@ -1,6 +1,6 @@