From c5778f13563e975b893d6d81921b7dafcf414ef3 Mon Sep 17 00:00:00 2001
From: Arno Kaimbacher <arno.kaimbacher@outlook.at>
Date: Tue, 21 Dec 2021 14:58:22 +0100
Subject: [PATCH] - search page styling

---
 src/assets/scss/main-styles.scss              |  29 +++++
 src/components/vs-input/vs-input.vue          | 114 +++++++++++++-----
 .../dataset-detail.component.vue              |   1 +
 .../search-view/search-view-component.vue     |  28 +----
 4 files changed, 113 insertions(+), 59 deletions(-)

diff --git a/src/assets/scss/main-styles.scss b/src/assets/scss/main-styles.scss
index 93c523d..97852b7 100644
--- a/src/assets/scss/main-styles.scss
+++ b/src/assets/scss/main-styles.scss
@@ -443,6 +443,35 @@ body {
 }
 
 
+// search banner
+.banner {
+    background-image: url(./../../assets/site/img/main-search-banner.jpg);
+    background-size: cover;
+    background-position-x: center;
+    background-position-y: 25%;
+    background-repeat: no-repeat;
+    padding: 6.2em 0 6.2em 0;
+    min-height: 400px;
+    width: 100%;
+    /* display: flex;
+    flex-direction: column; */
+    justify-content: center;
+    align-items: center;
+}
+
+.mz-5 {
+    margin-bottom: 1.5 rem;
+}
+
+@media (max-width: 576px) {
+    .banner {
+        align-items: flex-start;
+        height: 400px;
+    }
+}
+
+
+
 
 @media only screen and (max-width: 580px) {
     .mobile-space {
diff --git a/src/components/vs-input/vs-input.vue b/src/components/vs-input/vs-input.vue
index 9b45084..04b7618 100644
--- a/src/components/vs-input/vs-input.vue
+++ b/src/components/vs-input/vs-input.vue
@@ -1,34 +1,39 @@
 <template>
     <div>
-        <div class="content column is-half is-offset-one-quarter" style="margin-top: 30px; padding-bottom: 0; margin-bottom: 0px">
-            <div class="field has-addons">
-                <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"
-                    />
-                    <!-- <p>Message is: {{ display }}</p>  v-on:input="searchChanged"-->
-                </div>
+        <!-- <div class="content column is-half is-offset-one-quarter" style="margin-top: 30px; padding-bottom: 0; margin-bottom: 0px"> -->
+        <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"
+                        />
+                        <!-- <p>Message is: {{ display }}</p>  v-on:input="searchChanged"-->
+                    </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 class="control">
+                        <button class="button input is-medium search-button-icon" @click="search()">
+                            <!-- <img src="../../assets/fa/search.svg" style="height: 22px; width: 22px" /> -->
+                            <i class="fas fa-search text-white"></i>
+                        </button>
+                    </div>
                 </div>
             </div>
         </div>
-        <div class="autocomplete-column is-half is-offset-one-quarter">
+        <!-- <div class="column is-half is-offset-one-quarter"> -->
+        <div class="column is-two-thirds-tablet is-half-desktop is-one-third-widescreen mx-auto">
             <ul class="autocomplete-results pure-u-23-24" v-show="showResults">
                 <li class="loading" v-if="isLoading">Loading results...</li>
 
@@ -56,14 +61,59 @@ export default VsInput;
 </script>
 
 <style lang="scss" scoped>
-.autocomplete-column {
-    display: block;
-    flex-basis: 0;
-    flex-grow: 1;
-    flex-shrink: 1;
-    padding: 0 0.75rem 0.75rem 0.75rem;
-    position: relative;
+// .columns:not(:last-child) {
+//     margin-bottom: calc(1.5rem - 0.75rem);
+//     display: flex;
+// }
+
+.main-search-from-bg {
+    background-color: #fff;
+    padding: 0.2em;
 }
+
+.column {
+    display: block;
+    // flex-basis: 0;
+    // flex-grow: 1;
+    // flex-shrink: 1;
+    /* padding: 0.75rem; */
+    position: relative;
+    padding: 0;
+}
+
+.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;
+}
+
 .autocomplete-results {
     padding: 0;
     margin: 0;
diff --git a/src/views/dataset-detail.component.ts/dataset-detail.component.vue b/src/views/dataset-detail.component.ts/dataset-detail.component.vue
index 9677692..63eb3bc 100644
--- a/src/views/dataset-detail.component.ts/dataset-detail.component.vue
+++ b/src/views/dataset-detail.component.ts/dataset-detail.component.vue
@@ -8,6 +8,7 @@
             <button v-on:click="goBack">Back</button>
         </section>
     </div> -->
+    <div class="container-fluid banner mz-5"></div>
     <section class="section" v-if="loaded">
         <div class="container">
             <!-- <span class="is-size-5"> Basic Table </span>
diff --git a/src/views/search-view/search-view-component.vue b/src/views/search-view/search-view-component.vue
index fda3e52..3b08628 100644
--- a/src/views/search-view/search-view-component.vue
+++ b/src/views/search-view/search-view-component.vue
@@ -142,30 +142,4 @@ import SearchViewComponent from "./search-view-component";
 export default SearchViewComponent;
 </script>
 
-<style scoped>
-.banner {
-    background-image: url(./../../assets/site/img/main-search-banner.jpg);
-    background-size: cover;
-    background-position-x: center;
-    background-position-y: 25%;
-    background-repeat: no-repeat;
-    padding: 6.2em;
-    min-height: 400px;
-    width: 100%;
-    /* display: flex;
-    flex-direction: column; */
-    justify-content: center;
-    align-items: center;
-}
-
-.mz-5 {
-    margin-bottom: 1.5 rem;
-}
-
-@media (max-width: 576px) {
-    .banner {
-        align-items: flex-start;
-        height: 400px;
-    }
-}
-</style>
+<style scoped></style>