From 1ea0c1550470f4f484b5aebe8a3c450ddf4c5b36 Mon Sep 17 00:00:00 2001
From: Arno Kaimbacher <arno.kaimbacher@outlook.at>
Date: Thu, 16 Dec 2021 23:53:15 +0100
Subject: [PATCH] - full responsive styling for search detail page and home
 view component

---
 .../dataset-detail.component.vue                       |  1 +
 src/views/home-view/home-view-component.scss           | 10 +++++++---
 src/views/home-view/home-view-component.vue            |  6 +++---
 3 files changed, 11 insertions(+), 6 deletions(-)

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 b7d5d36..9677692 100644
--- a/src/views/dataset-detail.component.ts/dataset-detail.component.vue
+++ b/src/views/dataset-detail.component.ts/dataset-detail.component.vue
@@ -220,6 +220,7 @@ export default DatasetDetailComponent;
 <style scoped lang="scss">
 .section {
     font-size: 0.8rem;
+    padding: 0;
 }
 .card {
     border-radius: 0;
diff --git a/src/views/home-view/home-view-component.scss b/src/views/home-view/home-view-component.scss
index 260fe79..43d524f 100644
--- a/src/views/home-view/home-view-component.scss
+++ b/src/views/home-view/home-view-component.scss
@@ -17,14 +17,18 @@ h6 {
     background-image: url(./../../assets/site/img/white-pixel.png);
     background-repeat: repeat;
     padding: 1.8em;
-    width: 28em;
+    // width: 28em;
 }
 .mx-auto {
     margin-right: auto !important;
     margin-left: auto !important;
 }
-.mt-3 {
-    margin-top: 1rem !important;
+// .mt-3 {
+//     margin-top: 1rem !important;
+// }
+.columns:not(:last-child) {
+    margin-bottom: calc(1.5rem - 0.75rem);
+    display: flex;
 }
 .button {
   background-color: #33cccc;    
diff --git a/src/views/home-view/home-view-component.vue b/src/views/home-view/home-view-component.vue
index b958dc2..c0fa5c0 100644
--- a/src/views/home-view/home-view-component.vue
+++ b/src/views/home-view/home-view-component.vue
@@ -48,10 +48,10 @@
         </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-one-third mx-auto">
+            <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""> -->
 
-                <div class="search-box mt-3 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>
@@ -63,7 +63,7 @@
                         </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" />
+                                <i class="fas fa-search text-white"></i>
                             </button>
                         </div>
                     </div>