From 3bd022bf5401d46c2a0a34e7d6602717ab1d2af6 Mon Sep 17 00:00:00 2001
From: Arno Kaimbacher <arno.kaimbacher@hotmail.de>
Date: Wed, 12 Jan 2022 16:02:54 +0100
Subject: [PATCH] - feature request: autocomplete search also on the start page
 and on the dataset detail page

---
 src/App.vue                                   |    2 +-
 src/assets/scss/main-styles.scss              | 1029 +++++++++--------
 src/components/vs-input/vs-input.vue          |    2 +-
 src/router/index.ts                           |    2 +-
 .../dataset-detail.component.ts               |   22 +-
 .../dataset-detail.component.vue              |   10 +-
 src/views/home-view/home-view-component.ts    |   16 +
 src/views/home-view/home-view-component.vue   |   23 +-
 .../search-view/search-view-component.ts      |   23 +-
 .../search-view/search-view-component.vue     |    7 +-
 10 files changed, 612 insertions(+), 524 deletions(-)

diff --git a/src/App.vue b/src/App.vue
index 6b3ad4b..edfb35c 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -9,7 +9,7 @@
     /> -->
     <nav class="navbar navbar-light border-bottom" role="navigation" aria-label="main navigation">
         <div class="navbar-brand">
-            <a class="navbar-item" href="http://www.geologie.ac.at/" target="_blank">
+            <a class="navbar-item" href="/">
                 <!-- <img src="./assets/images/TETHYS-Logo.svg" width="240px" height="86" alt="TETHYS Logo" /> -->
                 <img src="./assets/images/TETHYS-Logo.svg" width="240" height="86" />
             </a>
diff --git a/src/assets/scss/main-styles.scss b/src/assets/scss/main-styles.scss
index 53366ea..9ef960a 100644
--- a/src/assets/scss/main-styles.scss
+++ b/src/assets/scss/main-styles.scss
@@ -1,498 +1,533 @@
-@charset "utf-8";
-// @import "~bulma";
-// @import "@fontsource/open-sans"; // Defaults to weight 400.
-@import "~@openfonts/open-sans_all/index.css";
-
-// 1. Import the initial variables
-@import "~bulma/sass/utilities/_all.sass";
-
-
-// 2. Set your own initial (brand) variables
-// Update the blue shade, used for links
-$blue: #06bcef;
-// Add pink and its invert
-$pink: #FA7C91;
-$pink-invert: #fff;
-$purple: #8A4D76;
-$brown: #757763;
-$beige-light: #D0D1CD;
-$beige-lighter: #EFF0EB;
-$mouse-grey: #6c6e6b;
-$select-green: #03a678;
-
-// 3. Set the derived variables
-$grey-dark: $brown;
-$is-dark: $mouse-grey;
-// $grey-light: $beige-light;
-// $primary: $purple;
-// $link: $mouse-grey;
-$widescreen-enabled: false;
-$fullhd-enabled: false;
-// $tabs-link-active-border-bottom-color: $select-green;
-// $tabs-link-active-color: $select-green;
-$table-striped-row-even-background-color: #ecf2fa;
-$table-striped-row-even-hover-background-color: #ecf2fa;
-
-// 4. Import the rest of bulma, only what you need from Bulma
-// @import "../../node_modules/bulma/sass/utilities/_all.sass";
-@import "~bulma/sass/grid/_all.sass";
-@import "~bulma/sass/base/_all.sass";
-@import "~bulma/sass/elements/box.sass";
-@import "~bulma/sass/elements/button.sass";
-@import "~bulma/sass/elements/container.sass";
-@import "~bulma/sass/elements/content.sass";
-@import "~bulma/sass/elements/title.sass";
-@import "~bulma/sass/elements/icon.sass";
-@import "~bulma/sass/elements/table.sass";
-@import "~bulma/sass/form/_all.sass";
-@import "~bulma/sass/helpers/_all.sass";
-@import "~bulma/sass/components/navbar.sass";
-// @import "~bulma/sass/components/tabs.sass";
-@import "~bulma/sass/components/media.sass";
-@import "~bulma/sass/components/modal.sass";
-@import "~bulma/sass/components/card.sass";
-
-@import "~bulma/sass/components/panel.sass";
-
-@import "~bulma/sass/layout/_all.sass";
-
-.button {
-    text-decoration: none;
-    // border: 1px solid #fff;
-    &.is-primary {
-        background-color: #33cccc;
-        border-color: transparent;
-        color: #fff;
-        &:hover {
-            color: #fff;
-            background-color: #336699;
-            text-decoration: none;
-            border: 1px solid #fff;
-        }
-    }
-    &.custom-button {
-        // display: block;
-
-        width: 125px;
-        color: #fff;
-        font-weight: bold;
-        font-size: 0.9em;
-        text-decoration: none;
-        border: 1px solid transparent;
-        // .fas {
-        //     margin-right: 0.6em;
-        //     // border-right: 1px solid #fff;
-        //    width: 2em;
-
-        // };
-        .fas {
-            margin-right: 0.6em;
-            border-right: 1px solid #fff;
-            padding: 0.6em;
-        }
-        // strong {
-        //     border-left: 1px solid #fff;
-        //     padding-left: 0.6em;
-        // }
-    }
-}
-
-// search image
-.header-image {
-    background-image: url("./../site/img/Main-banner-homepage-xl.jpg");
-    background-size: cover;
-    background-position: top center;
-    background-repeat: no-repeat;
-    min-height: 562px;
-}
-.align-items-center {
-    -webkit-box-align: center !important;
-    -ms-flex-align: center !important;
-    align-items: center !important;
-}
-.h-100 {
-    height: 100% !important;
-}
-
-@media only screen and (min-width: 1408px) {
-    .header-image {
-      background-image: url("../site/img/Main-banner-homepage-2560x.jpg");
-      min-height: 700px;
-    }
-  }
-
-/* =Section general styling
--------- */
-// section {
-//     text-align: center;
-//     padding: 60px 0 0 0;
-// }
-// section.normal {
-//     text-align: left;
-// }
-
-// .content-container {
-//     margin-top: 25px;
-// }
-// /*
-
-.help:before {
-    background: url("./../site/img/Main-banner-homepage-xl.jpg");
-}
-
-.featured-bg-image {
-    position: relative;
-    /* background-color: #222222; */
-    background-color: gray;
-    color: white;
-    min-height: 500px;
-}
-.featured-bg-image:before {
-    content: "";
-    position: absolute;
-    top: 0;
-    right: 0;
-    left: 0;
-    bottom: 0;
-    background-size: cover;
-    background-position: 50% 50%;
-    background-repeat: no-repeat;
-    // opacity: .35;
-
-    // background-size: cover;
-    // background-position: top center;
-    // background-repeat: no-repeat;
-    min-height: 562px;
-}
-/* Utilities
-–––––––––––––––––––––––––––––––––––––––––––––––––– */
-.u-full-width {
-    width: 100%;
-    box-sizing: border-box;
-}
-
-.text-center {
-    text-align: center !important;
-}
-.py-3 {
-    padding-top: 1rem !important;
-    padding-bottom: 1rem !important;
-}
-hr.center-line {
-    background: #33cccc;
-}
-
-hr.center-line {
-    border: 0;
-    height: 3px;
-    width: 185px;
-    position: relative;
-    margin: 1.65em auto;
-    opacity: 1;
-}
-body H1 {
-    // font-family: Verdana;
-    text-transform: uppercase;
-    font-weight: bold;
-    font-size: 1.6em;
-    line-height: 1.75em;
-}
-.lead {
-    font-size: 1em;
-    font-weight: bold;
-    // font-family: Verdana;
-    color: #495057;
-    margin: 0;
-}
-
-.mt-4 {
-    margin-top: 1.5rem !important;
-}
-.text-left {
-    text-align: left !important;
-}
-
-html,
-body {
-    font-family: "Open Sans", sans-serif;
-    // font-size: 0.92rem;
-    margin: 0;
-    font-size: 1rem;
-    font-weight: 400;
-    line-height: 1.5;
-    color: #212529;
-    background-color: #fff;
-}
-
-.columns {
-    margin: 0;
-}
-
-/*footer {*/
-/*    !*position: absolute;*!*/
-/*    bottom: 0;*/
-/*    width: 100%;*/
-/*}*/
-
-.site {
-    display: flex;
-    min-height: 100vh;
-    flex-direction: column;
-}
-
-.site-content {
-    flex: 1;
-}
-
-.search-button-icon {
-    color: rgb(219, 219, 219);
-}
-
-.search-button-icon:hover {
-    color: rgb(74, 74, 74);
-}
-
-.hide {
-    display: none;
-}
-
-// .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);
-//     }
-// }
-
-.page_description {
-    font-weight: 300;
-    text-align: center;
-}
-
-.page_style {
-    background: transparent;
-    top: 0;
-    right: 0;
-    bottom: 0;
-    left: 0;
-    height: 100%;
-    width: 100%;
-    margin: auto;
-    overflow: hidden;
-}
-
-// #home_padding {
-//     margin-top: 7%;
-// }
-
-@media screen and (max-width: 768px) {
-    #featured_area {
-        display: none;
-    }
-
-    #home_message {
-        display: none;
-    }
-
-    #home_padding {
-        margin-top: 15%;
-    }
-    #firefox_button,
-    #chrome_button,
-    #opera_button {
-        display: none;
-    }
-}
-
-@media screen and (min-width: 769px) {
-    .autocomplete-column.is-offset-one-quarter,
-    .autocomplete-column.is-offset-one-quarter-tablet {
-        margin-left: 25%;
-    }
-
-    .autocomplete-column.is-half,
-    .autocomplete-column.is-half-tablet {
-        flex: none;
-        width: 50%;
-    }
-}
-
-.navbar {
-    padding-top: 0.5rem;
-    padding-bottom: 0.5rem;
-    // display:flex;
-    // justify-content:center;
-}
-
-.border-bottom {
-    border-bottom: 1px solid #dee2e6 !important;
-}
-
-.navbar .navbar-item {
-    // padding-right: 2.2em;
-    padding-left: 2.2em;
-}
-.navbar-light .navbar-link:focus,
-.navbar-light .navbar-link:hover {
-    color: rgba(0, 0, 0, 0.7);
-}
-.navbar-link.router-link-active,
-.navbar-link:hover {
-    border-bottom: 2px solid #33cccc;
-    background-color: #fff;
-}
-
-.navbar-light .navbar-menu .navbar-item {
-    // font-family: Verdana, sans-serif;
-    color: #212529;
-    font-size: 0.9em;
-    font-weight: 700;
-}
-.navbar-item img {
-    max-height: 6rem;
-}
-
-.card {
-    position: relative;
-    display: flex;
-    flex-direction: column;
-    min-width: 0;
-    word-wrap: break-word;
-    background-color: #fff;
-    background-clip: border-box;
-    border: 1px solid rgba(0, 0, 0, 0.125);
-    border-radius: 0.25rem;
-}
-
-.card-body {
-    -webkit-box-flex: 1;
-    -ms-flex: 1 1 auto;
-    flex: 1 1 auto;
-    padding: 1rem 1rem;
-}
-
-.text-white {
-    color: #fff !important;
-}
-
-// .work-front {
-//     position: absolute;
-//     top: 5%;
-//     left: 5%;
-// }
-.work-front {
-    display: flex;
-}
-.work-front .box-1,
-.work-front .box-2,
-.work-front .box-3 {
-    position: absolute;
-    top: 85%;
-    left: 50%;
-    -webkit-transform: translate(-50%, -50%);
-    transform: translate(-50%, -50%);
-}
-
-// .work-back {
-//     position: absolute;
-//     top: 5%;
-//     left: 5%;
-// }
-.work-back {
-    display: none;
-}
-.work-back .box-1-hover {
-    position: absolute;
-    top: 5%;
-    left: 5%;
-    opacity: 0.9;
-    padding: 2%;
-}
-
-.custom-heading {
-    font-family: Verdana;
-    font-weight: bold;
-    font-size: 1.2em;
-    line-height: 1.9em;
-    color: #fff;
-}
-
-.work-items div:hover .work-back {
-    display: flex;
-    /* box-shadow: inset 0 0 0 10px #222; */
-}
-.work-items div:hover .work-front {
-    display: none;
-}
-
-
-// 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 {
-      margin-top: 2em;
-    }
-    .page-breaker {
-      padding: 0;
-    }
-    footer .card {
-      margin-bottom: 2em;
-    }
-    .overlay-boxes {
-      margin-bottom: 1em;
-    }
-    .super-card {
-      margin-bottom: 1em;
-    }
-    .partner-logos {
-      padding: 0;
-    }
-    .search-box {
-      width: auto;
-    }
+@charset "utf-8";
+// @import "~bulma";
+// @import "@fontsource/open-sans"; // Defaults to weight 400.
+@import "~@openfonts/open-sans_all/index.css";
+
+// 1. Import the initial variables
+@import "~bulma/sass/utilities/_all.sass";
+
+
+// 2. Set your own initial (brand) variables
+// Update the blue shade, used for links
+$blue: #06bcef;
+// Add pink and its invert
+$pink: #FA7C91;
+$pink-invert: #fff;
+$purple: #8A4D76;
+$brown: #757763;
+$beige-light: #D0D1CD;
+$beige-lighter: #EFF0EB;
+$mouse-grey: #6c6e6b;
+$select-green: #03a678;
+
+// 3. Set the derived variables
+$grey-dark: $brown;
+$is-dark: $mouse-grey;
+// $grey-light: $beige-light;
+// $primary: $purple;
+// $link: $mouse-grey;
+$widescreen-enabled: false;
+$fullhd-enabled: false;
+// $tabs-link-active-border-bottom-color: $select-green;
+// $tabs-link-active-color: $select-green;
+$table-striped-row-even-background-color: #ecf2fa;
+$table-striped-row-even-hover-background-color: #ecf2fa;
+
+// 4. Import the rest of bulma, only what you need from Bulma
+// @import "../../node_modules/bulma/sass/utilities/_all.sass";
+@import "~bulma/sass/grid/_all.sass";
+@import "~bulma/sass/base/_all.sass";
+@import "~bulma/sass/elements/box.sass";
+@import "~bulma/sass/elements/button.sass";
+@import "~bulma/sass/elements/container.sass";
+@import "~bulma/sass/elements/content.sass";
+@import "~bulma/sass/elements/title.sass";
+@import "~bulma/sass/elements/icon.sass";
+@import "~bulma/sass/elements/table.sass";
+@import "~bulma/sass/form/_all.sass";
+@import "~bulma/sass/helpers/_all.sass";
+@import "~bulma/sass/components/navbar.sass";
+// @import "~bulma/sass/components/tabs.sass";
+@import "~bulma/sass/components/media.sass";
+@import "~bulma/sass/components/modal.sass";
+@import "~bulma/sass/components/card.sass";
+
+@import "~bulma/sass/components/panel.sass";
+
+@import "~bulma/sass/layout/_all.sass";
+
+.button {
+    text-decoration: none;
+    // border: 1px solid #fff;
+    &.is-primary {
+        background-color: #33cccc;
+        border-color: transparent;
+        color: #fff;
+        &:hover {
+            color: #fff;
+            background-color: #336699;
+            text-decoration: none;
+            border: 1px solid #fff;
+        }
+    }
+    &.custom-button {
+        // display: block;
+
+        width: 125px;
+        color: #fff;
+        font-weight: bold;
+        font-size: 0.9em;
+        text-decoration: none;
+        border: 1px solid transparent;
+        // .fas {
+        //     margin-right: 0.6em;
+        //     // border-right: 1px solid #fff;
+        //    width: 2em;
+
+        // };
+        .fas {
+            margin-right: 0.6em;
+            border-right: 1px solid #fff;
+            padding: 0.6em;
+        }
+        // strong {
+        //     border-left: 1px solid #fff;
+        //     padding-left: 0.6em;
+        // }
+    }
+}
+
+// search image
+.header-image {
+    background-image: url("./../site/img/Main-banner-homepage-xl.jpg");
+    background-size: cover;
+    background-position: top center;
+    background-repeat: no-repeat;
+    padding: 18.2em 0 0 0;
+    min-height: 562px;
+    width: 100%;
+    /* display: flex;
+    flex-direction: column; */
+    justify-content: center;
+    align-items: center;
+}
+.align-items-center {
+    -webkit-box-align: center !important;
+    -ms-flex-align: center !important;
+    align-items: center !important;
+}
+.h-100 {
+    height: 100% !important;
+}
+
+@media only screen and (min-width: 1408px) {
+    .header-image {
+      background-image: url("../site/img/Main-banner-homepage-2560x.jpg");
+      min-height: 700px;
+    }
+  }
+
+
+  
+// 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;
+    }
+}
+
+/* =Section general styling
+-------- */
+// section {
+//     text-align: center;
+//     padding: 60px 0 0 0;
+// }
+// section.normal {
+//     text-align: left;
+// }
+
+// .content-container {
+//     margin-top: 25px;
+// }
+// /*
+
+.help:before {
+    background: url("./../site/img/Main-banner-homepage-xl.jpg");
+}
+
+.featured-bg-image {
+    position: relative;
+    /* background-color: #222222; */
+    background-color: gray;
+    color: white;
+    min-height: 500px;
+}
+.featured-bg-image:before {
+    content: "";
+    position: absolute;
+    top: 0;
+    right: 0;
+    left: 0;
+    bottom: 0;
+    background-size: cover;
+    background-position: 50% 50%;
+    background-repeat: no-repeat;
+    // opacity: .35;
+
+    // background-size: cover;
+    // background-position: top center;
+    // background-repeat: no-repeat;
+    min-height: 562px;
+}
+/* Utilities
+–––––––––––––––––––––––––––––––––––––––––––––––––– */
+.u-full-width {
+    width: 100%;
+    box-sizing: border-box;
+}
+
+.text-center {
+    text-align: center !important;
+}
+.py-3 {
+    padding-top: 1rem !important;
+    padding-bottom: 1rem !important;
+}
+hr.center-line {
+    background: #33cccc;
+}
+
+hr.center-line {
+    border: 0;
+    height: 3px;
+    width: 185px;
+    position: relative;
+    margin: 1.65em auto;
+    opacity: 1;
+}
+body H1 {
+    // font-family: Verdana;
+    text-transform: uppercase;
+    font-weight: bold;
+    font-size: 1.6em;
+    line-height: 1.75em;
+}
+.lead {
+    font-size: 1em;
+    font-weight: bold;
+    // font-family: Verdana;
+    color: #495057;
+    margin: 0;
+}
+
+.mt-4 {
+    margin-top: 1.5rem !important;
+}
+.text-left {
+    text-align: left !important;
+}
+
+html,
+body {
+    font-family: "Open Sans", sans-serif;
+    // font-size: 0.92rem;
+    margin: 0;
+    font-size: 1rem;
+    font-weight: 400;
+    line-height: 1.5;
+    color: #212529;
+    background-color: #fff;
+}
+
+.columns {
+    margin: 0;
+}
+
+/*footer {*/
+/*    !*position: absolute;*!*/
+/*    bottom: 0;*/
+/*    width: 100%;*/
+/*}*/
+
+.site {
+    display: flex;
+    min-height: 100vh;
+    flex-direction: column;
+}
+
+.site-content {
+    flex: 1;
+}
+
+.search-button-icon {
+    color: rgb(219, 219, 219);
+}
+
+.search-button-icon:hover {
+    color: rgb(74, 74, 74);
+}
+
+.hide {
+    display: none;
+}
+
+// .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);
+//     }
+// }
+
+.page_description {
+    font-weight: 300;
+    text-align: center;
+}
+
+.page_style {
+    background: transparent;
+    top: 0;
+    right: 0;
+    bottom: 0;
+    left: 0;
+    height: 100%;
+    width: 100%;
+    margin: auto;
+    overflow: hidden;
+}
+
+// #home_padding {
+//     margin-top: 7%;
+// }
+
+@media screen and (max-width: 768px) {
+    #featured_area {
+        display: none;
+    }
+
+    #home_message {
+        display: none;
+    }
+
+    #home_padding {
+        margin-top: 15%;
+    }
+    #firefox_button,
+    #chrome_button,
+    #opera_button {
+        display: none;
+    }
+}
+
+@media screen and (min-width: 769px) {
+    .autocomplete-column.is-offset-one-quarter,
+    .autocomplete-column.is-offset-one-quarter-tablet {
+        margin-left: 25%;
+    }
+
+    .autocomplete-column.is-half,
+    .autocomplete-column.is-half-tablet {
+        flex: none;
+        width: 50%;
+    }
+}
+
+.navbar {
+    padding-top: 0.5rem;
+    padding-bottom: 0.5rem;
+    // display:flex;
+    // justify-content:center;
+}
+
+.border-bottom {
+    border-bottom: 1px solid #dee2e6 !important;
+}
+
+.navbar .navbar-item {
+    // padding-right: 2.2em;
+    padding-left: 2.2em;
+}
+.navbar-light .navbar-link:focus,
+.navbar-light .navbar-link:hover {
+    color: rgba(0, 0, 0, 0.7);
+}
+.navbar-link.router-link-active,
+.navbar-link:hover {
+    border-bottom: 2px solid #33cccc;
+    background-color: #fff;
+}
+
+.navbar-light .navbar-menu .navbar-item {
+    // font-family: Verdana, sans-serif;
+    color: #212529;
+    font-size: 0.9em;
+    font-weight: 700;
+}
+.navbar-item img {
+    max-height: 6rem;
+}
+
+.card {
+    position: relative;
+    display: flex;
+    flex-direction: column;
+    min-width: 0;
+    word-wrap: break-word;
+    background-color: #fff;
+    background-clip: border-box;
+    border: 1px solid rgba(0, 0, 0, 0.125);
+    border-radius: 0.25rem;
+}
+
+.card-body {
+    -webkit-box-flex: 1;
+    -ms-flex: 1 1 auto;
+    flex: 1 1 auto;
+    padding: 1rem 1rem;
+}
+
+.text-white {
+    color: #fff !important;
+}
+
+// .work-front {
+//     position: absolute;
+//     top: 5%;
+//     left: 5%;
+// }
+.work-front {
+    display: flex;
+}
+.work-front .box-1,
+.work-front .box-2,
+.work-front .box-3 {
+    position: absolute;
+    top: 85%;
+    left: 50%;
+    -webkit-transform: translate(-50%, -50%);
+    transform: translate(-50%, -50%);
+}
+
+// .work-back {
+//     position: absolute;
+//     top: 5%;
+//     left: 5%;
+// }
+.work-back {
+    display: none;
+}
+.work-back .box-1-hover {
+    position: absolute;
+    top: 5%;
+    left: 5%;
+    opacity: 0.9;
+    padding: 2%;
+}
+
+.custom-heading {
+    font-family: Verdana;
+    font-weight: bold;
+    font-size: 1.2em;
+    line-height: 1.9em;
+    color: #fff;
+}
+
+.work-items div:hover .work-back {
+    display: flex;
+    /* box-shadow: inset 0 0 0 10px #222; */
+}
+.work-items div:hover .work-front {
+    display: none;
+}
+
+
+// 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 {
+      margin-top: 2em;
+    }
+    .page-breaker {
+      padding: 0;
+    }
+    footer .card {
+      margin-bottom: 2em;
+    }
+    .overlay-boxes {
+      margin-bottom: 1em;
+    }
+    .super-card {
+      margin-bottom: 1em;
+    }
+    .partner-logos {
+      padding: 0;
+    }
+    .search-box {
+      width: auto;
+    }
   }
\ No newline at end of file
diff --git a/src/components/vs-input/vs-input.vue b/src/components/vs-input/vs-input.vue
index cfbd982..11de9f8 100644
--- a/src/components/vs-input/vs-input.vue
+++ b/src/components/vs-input/vs-input.vue
@@ -1,5 +1,5 @@
 <template>
-    <div>
+    <div class="is-multiline">
         <!-- <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">
diff --git a/src/router/index.ts b/src/router/index.ts
index eb116cb..e0c2144 100644
--- a/src/router/index.ts
+++ b/src/router/index.ts
@@ -22,7 +22,7 @@ const routes = [
         component: HelpViewComponent,
     },
     {
-        path: "/search/:display?",
+        path: "/search/:display?/:type?",
         name: "Search",
         component: SearchViewComponent,
         props: true,
diff --git a/src/views/dataset-detail.component.ts/dataset-detail.component.ts b/src/views/dataset-detail.component.ts/dataset-detail.component.ts
index d4c7049..8dcfd0d 100644
--- a/src/views/dataset-detail.component.ts/dataset-detail.component.ts
+++ b/src/views/dataset-detail.component.ts/dataset-detail.component.ts
@@ -4,19 +4,23 @@ 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";
+// import SimpleSearchComponent from "@/components/simple-search/simple-search-component.vue";
+import VsInput from "@/components/vs-input/vs-input.vue";
+import { Suggestion } from "@/models/dataset";
 import { VUE_APP_PORTAL } from "@/constants";
 
 @Options({
     name: "DatasetDetailComponent",
     components: {
-        SimpleSearchComponent,
+        VsInput,
     },
 })
 export default class DatasetDetailComponent extends Vue {
     @Prop()
     datasetId!: number;
 
+    searchTerm: string | Suggestion = "";
+
     private subscriptions: Array<Subscription> = [];
     public dataset = {} as DbDataset;
     private error = "";
@@ -36,6 +40,20 @@ export default class DatasetDetailComponent extends Vue {
         }
     }
 
+    onSearch(suggestion: Suggestion | string): void {
+        let term;
+        if (typeof suggestion === "string") {
+            term = suggestion;
+            this.$router.push({ name: "Search", params: { display: term } });
+        } else if (suggestion instanceof Suggestion) {
+            term = suggestion.value;
+            this.$router.push({ name: "Search", params: { display: term, type: suggestion.type } });
+        }
+
+        // this.searchTerm = suggestion;
+        // this.$router.push({ name: "Search", params: { display: term, suggestion instanceof Suggestion ? ty} });
+    }
+
     private getDataset(id: number): void {
         const newSub = DatasetService.getDataset(id).subscribe(
             (res: DbDataset) => {
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 364adf5..f7843d7 100644
--- a/src/views/dataset-detail.component.ts/dataset-detail.component.vue
+++ b/src/views/dataset-detail.component.ts/dataset-detail.component.vue
@@ -37,7 +37,8 @@
                 </div>
             </div>
         </div> -->
-        <simple-search-component></simple-search-component>
+        <!-- <simple-search-component></simple-search-component> -->
+        <vs-input v-on:search-change="onSearch" v-bind:placeholder="'Enter your search term...'"></vs-input>
     </div>
     <section class="section" v-if="loaded">
         <div class="container">
@@ -232,9 +233,10 @@
                 <div class="column col-sm text-center">
                     <a target="_blank" href="https://www.re3data.org/repository/r3d100013400"><img src="@/assets/site/img/re3-data-logo-mono.jpg" alt="re3 data logo" /></a>
                 </div>
-                <!-- <div class="column col-sm text-center mobile-space">
-                    <img src="@/assets/site/img/geosphere-austria-logo.jpg" class="pb-3" alt="logo geosphere austria" />
-                </div> -->
+                <a target="_blank" href="http://www.geologie.ac.at/">
+                    <!-- <img src="@/assets/site/img/geosphere-austria-logo.jpg" class="pb-3" alt="logo geosphere austria" /> -->
+                    <img src="@/assets/site/img/geologische-bundesanstalt-logo.jpg" alt="Geologische Bundesanstalt logo" />
+                </a>
                 <div class="column col-sm text-center">
                     <a target="_blank" href="https://www.base-search.net/Search/Results?q=coll:fttethysrdr&refid=dctablede">
                         <img src="@/assets/site/img/base-logo.gif" alt="logo base" />
diff --git a/src/views/home-view/home-view-component.ts b/src/views/home-view/home-view-component.ts
index 1a93075..21600a0 100644
--- a/src/views/home-view/home-view-component.ts
+++ b/src/views/home-view/home-view-component.ts
@@ -1,11 +1,27 @@
 import { Options, Vue } from "vue-class-component";
+import VsInput from "@/components/vs-input/vs-input.vue";
+import { Suggestion } from "@/models/dataset";
 
 @Options({
     name: "HomeViewComponent",
+    components: {
+        VsInput,
+    },
 })
 export default class HomeViewComponent extends Vue {
     public display = "";
 
+    onSearch(suggestion: Suggestion | string): void {
+        let term;
+        if (typeof suggestion === "string") {
+            term = suggestion;
+            this.$router.push({ name: "Search", params: { display: term } });
+        } else if (suggestion instanceof Suggestion) {
+            term = suggestion.value;
+            this.$router.push({ name: "Search", params: { display: term, type: suggestion.type } });
+        }
+    }
+
     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 a6ff984..95dd8cc 100644
--- a/src/views/home-view/home-view-component.vue
+++ b/src/views/home-view/home-view-component.vue
@@ -47,19 +47,12 @@
             <img src="https://bulma.io/images/placeholders/256x256.png" />
         </figure> -->
         <!-- 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-two-thirds-tablet is-half-desktop is-one-third-widescreen mx-auto">
-                <!-- <img src="site/img/Main-banner-homepage-1280.jpg" class="img-fluid""> -->
-
+        <section data-sr id="help" class="header-image align-items-center h-100">
+            <!-- <div class="column is-two-thirds-tablet is-half-desktop is-one-third-widescreen mx-auto">
                 <div class="search-box mx-auto">
-                    <!-- <form class="my-2 my-lg-0 main-search-from-bg d-flex d-row">
-                        <input class="form-control mr-sm-2 border-0" type="text" placeholder="Search" aria-label="Search" />
-                        <button class="btn btn-secondary m-0" type="submit"><i class="fas fa-search text-white"></i></button>
-                    </form> -->
                     <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()">
@@ -68,7 +61,8 @@
                         </div>
                     </div>
                 </div>
-            </div>
+            </div> -->
+            <vs-input v-on:search-change="onSearch" v-bind:placeholder="'Enter your search term...'"></vs-input>
         </section>
 
         <div class="container">
@@ -188,9 +182,12 @@
                 <div class="column col-sm text-center">
                     <a target="_blank" href="https://www.re3data.org/repository/r3d100013400"><img src="@/assets/site/img/re3-data-logo-mono.jpg" alt="re3 data logo" /></a>
                 </div>
-                <!-- <div class="column col-sm text-center mobile-space">
-                    <img src="@/assets/site/img/geosphere-austria-logo.jpg" class="pb-3" alt="logo geosphere austria" />
-                </div> -->
+                <div class="column col-sm text-center mobile-space">
+                    <a target="_blank" href="http://www.geologie.ac.at/">
+                        <!-- <img src="@/assets/site/img/geosphere-austria-logo.jpg" class="pb-3" alt="logo geosphere austria" /> -->
+                        <img src="@/assets/site/img/geologische-bundesanstalt-logo.jpg" alt="Geologische Bundesanstalt logo" />
+                    </a>
+                </div>
                 <div class="column col-sm text-center">
                     <a target="_blank" href="https://www.base-search.net/Search/Results?q=coll:fttethysrdr&refid=dctablede">
                         <img src="@/assets/site/img/base-logo.gif" alt="logo base" />
diff --git a/src/views/search-view/search-view-component.ts b/src/views/search-view/search-view-component.ts
index bc6f319..00eda8b 100644
--- a/src/views/search-view/search-view-component.ts
+++ b/src/views/search-view/search-view-component.ts
@@ -7,7 +7,7 @@ import ActiveFacetCategory from "@/components/active-facet-category/active-facet
 import { SolrSettings } from "@/models/solr";
 // import { DatasetService } from "@/services/dataset.service";
 import DatasetService from "../../services/dataset.service";
-import { Suggestion, Dataset } from "@/models/dataset";
+import { Suggestion, Dataset, SearchType } from "@/models/dataset";
 import { SolrResponse, FacetFields, FacetItem, FacetResults, FacetInstance } from "@/models/headers";
 import { ActiveFilterCategories } from "@/models/solr";
 
@@ -24,6 +24,9 @@ export default class SearchViewComponent extends Vue {
     @Prop()
     display!: string;
 
+    @Prop()
+    type!: string;
+
     results: Array<Dataset> = [];
 
     // facets: FacetFields = new FacetFields();
@@ -68,10 +71,26 @@ export default class SearchViewComponent extends Vue {
             return false;
         }
     }
+    // getKeyName(value: string) {
+    //     return Object.entries(Suggestion).find(([key, val]) => val === value)?.[0];
+    // }
+    getEnumKeyByEnumValue<T extends { [index: string]: string }>(myEnum: T, enumValue: string): keyof T | null {
+        const keys = Object.keys(myEnum).filter((x) => myEnum[x] == enumValue);
+        return keys.length > 0 ? keys[0] : null;
+        // return keys[0];
+    }
 
     beforeMount(): void {
         // this.rdrAPI = new DatasetService();
-        if (this.display != undefined && this.display != "") {
+        if (this.display != "" && this.type != undefined) {
+            const enumKey = this.getEnumKeyByEnumValue(SearchType, this.type);
+            if (enumKey) {
+                const suggestion = new Suggestion(this.display, SearchType[enumKey]);
+                this.onSearch(suggestion);
+            } else {
+                this.onSearch(this.display);
+            }
+        } else if (this.display != "" && this.type == undefined) {
             this.onSearch(this.display);
         } else {
             this.onSearch("");
diff --git a/src/views/search-view/search-view-component.vue b/src/views/search-view/search-view-component.vue
index 3aa9ca2..8a04626 100644
--- a/src/views/search-view/search-view-component.vue
+++ b/src/views/search-view/search-view-component.vue
@@ -126,9 +126,10 @@
                 <div class="column col-sm text-center">
                     <a target="_blank" href="https://www.re3data.org/repository/r3d100013400"><img src="@/assets/site/img/re3-data-logo-mono.jpg" alt="re3 data logo" /></a>
                 </div>
-                <!-- <div class="column col-sm text-center mobile-space">
-                    <img src="@/assets/site/img/geosphere-austria-logo.jpg" class="pb-3" alt="logo geosphere austria" />
-                </div> -->
+                <a target="_blank" href="http://www.geologie.ac.at/">
+                    <!-- <img src="@/assets/site/img/geosphere-austria-logo.jpg" class="pb-3" alt="logo geosphere austria" /> -->
+                    <img src="@/assets/site/img/geologische-bundesanstalt-logo.jpg" alt="Geologische Bundesanstalt logo" />
+                </a>
                 <div class="column col-sm text-center">
                     <a target="_blank" href="https://www.base-search.net/Search/Results?q=coll:fttethysrdr&refid=dctablede">
                         <img src="@/assets/site/img/base-logo.gif" alt="logo base" />