- search input on home view component

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 {
+// #home_padding {
-    margin-top: 7%;
+//     margin-top: 7%;
-}
+// }
 
 @media screen and (max-width: 768px) {
     #featured_area {

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<Dataset> = [];

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",

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 {

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 } });
+    }
+}

src/views/home-view/home-view-component.vue

@@ -46,15 +46,30 @@
         <!-- <figure class="image is-128x128">
             <img src="https://bulma.io/images/placeholders/256x256.png" />
         </figure> -->
-        <section data-sr id="help" class="help u-full-width featured-bg-image"></section>
+        <!-- class="columns help u-full-width featured-bg-image"> -->
+        <section data-sr id="help" class="columns header-image align-items-center h-100">
+            <div class="column is-one-third mx-auto">
+                <!-- <img src="site/img/Main-banner-homepage-1280.jpg" class="img-fluid""> -->
 
-        <!-- <div class="columns">
+                <div class="search-box mt-3 mx-auto">
-            <div class="column text-center">
+                    <!-- <form class="my-2 my-lg-0 main-search-from-bg d-flex d-row">
-                <h1>ÜBER TETHYS</h1>
+                        <input class="form-control mr-sm-2 border-0" type="text" placeholder="Search" aria-label="Search" />
-                <p class="lead">Was sind unsere Schwerpunkte</p>
+                        <button class="btn btn-secondary m-0" type="submit"><i class="fas fa-search text-white"></i></button>
-                <hr class="center-line" />
+                    </form> -->
+                    <div class="field has-addons">
+                        <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> -->
+                        <div class="control">
+                            <button class="button input is-medium search-button-icon" @click="search()">
+                                <img src="../../assets/fa/search.svg" style="height: 22px; width: 22px" />
+                            </button>
+                        </div>
+                    </div>
+                </div>
+            </div>
+        </section>
 
         <div class="container">
             <section class="section">

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<Dataset> = [];
 
     // facets: FacetFields = new FacetFields();
     facets: FacetResults = new FacetResults();
-    searchTerm!: string | Suggestion;
+    searchTerm: string | Suggestion = "";
     // activeFilterCategories: Object = {};
     activeFilterCategories: ActiveFilterCategories = new ActiveFilterCategories(); // = new Array<ActiveFilterCategory>();
     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 {

src/views/search-view/search-view-component.vue

@@ -1,6 +1,6 @@
 <template>
     <div id="page_style" class="rows site-content page__style page__description" autocomplete="off">
-        <vs-input v-on:search-change="onSearch" v-bind:placeholder="'Enter your search term...'"></vs-input>
+        <vs-input v-on:search-change="onSearch" v-bind:propDisplay="searchTerm" v-bind:placeholder="'Enter your search term...'"></vs-input>
 
         <div class="column is-half is-offset-one-quarter" style="padding-top: 0; margin-top: 0">
             <!-- <div class="tabs is-centered">