From 2b7b5323d328200ef30bac506b1e99c6d81de042 Mon Sep 17 00:00:00 2001
From: frankporras <francisco.porras-bernardez@geosphere.at>
Date: Fri, 30 Aug 2024 13:50:38 +0200
Subject: [PATCH] - Results box background colour changed - Results message
 redesigned - Pagination text aligned right

---
 src/components/PaginationComponent.vue        |  2 +-
 src/components/vs-input/vs-input.vue          |  6 +-
 .../search-view/search-view-component.vue     | 76 ++++++++++++++++++-
 3 files changed, 78 insertions(+), 6 deletions(-)

diff --git a/src/components/PaginationComponent.vue b/src/components/PaginationComponent.vue
index fd4db10..c236e70 100644
--- a/src/components/PaginationComponent.vue
+++ b/src/components/PaginationComponent.vue
@@ -86,7 +86,7 @@ const prevClick = () => {
         </div>
 
         <div class="hidden sm:flex-1 sm:flex sm:items-center sm:justify-between">
-            <div id="frontText">
+            <div id="frontText" class="w-full text-right mr-4">
                 <p class="text-sm text-gray-700 leading-5">
                     Showing
                     <span class="font-medium">{{ fromPage }}</span>
diff --git a/src/components/vs-input/vs-input.vue b/src/components/vs-input/vs-input.vue
index e06d528..b4235d1 100644
--- a/src/components/vs-input/vs-input.vue
+++ b/src/components/vs-input/vs-input.vue
@@ -136,7 +136,7 @@ input {
     list-style-type: none;
     z-index: 1000;
     position: absolute;
-    max-height: 200px;
+    max-height: 192px;
     overflow-y: auto;
     overflow: hidden;
     background: white;
@@ -155,9 +155,11 @@ input {
 
 .autocomplete-result-item.is-active {
     background: rgba(0, 180, 255, 0.15);
+    // background: #3cc;
 }
 
 .autocomplete-result-item:hover {
-    background: rgba(0, 180, 255, 0.075);
+    // background: rgba(0, 180, 255, 0.075);
+    background: #baedf1;
 }
 </style>
diff --git a/src/views/search-view/search-view-component.vue b/src/views/search-view/search-view-component.vue
index 36d0e07..f2eeb8f 100644
--- a/src/views/search-view/search-view-component.vue
+++ b/src/views/search-view/search-view-component.vue
@@ -5,7 +5,7 @@
             <vs-input v-bind:propDisplay="searchTerm" v-bind:placeholder="'Enter your search term...'" @search-change="onSearch"></vs-input>
         </div>
 
-        <div class="column is-half is-offset-one-quarter" style="padding-top: 0; margin-top: 0">
+        <!-- <div class="column is-half is-offset-one-quarter" style="padding-top: 0; margin-top: 0">
             <div v-if="results.length > 0" class="result-list-info">
                 <div v-if="hasSearchTerm()" class="resultheader">
                     Your search term {{ "'" + stringSearchTerm + "'" }} yielded <strong>{{ numFound }}</strong> results:
@@ -17,10 +17,80 @@
                     <strong> 0</strong> results:
                 </div>
             </div>
+        </div> -->
+
+        <!-- ASK ELNAZ! ------------------------------------------------------------------------------------------------- -->
+        <div class="columns">
+            <div id="id-side-bar" class="column is-4 sidebar_column" style="padding-top: 0rem; padding-right: 1.5rem; padding-left: 1.5rem">
+
+            </div>
+
+            <div class="col col-8 column is-8 results_column" style="padding-top: 0.5rem; padding-right: 1rem; padding-left: 1rem; padding-bottom: 0rem;">
+
+                <!-- <div v-if="results.length > 0" class="result-list-info">
+                    <div v-if="hasSearchTerm()" class="resultheader">
+                        Your search term {{ "'" + stringSearchTerm + "'" }} yielded <strong>{{ numFound }}</strong> results:
+                    </div>
+                </div> -->
+                
+                <!-- Option 1: Enclose in a Colored Box -->
+                <!-- <div v-if="results.length > 0" class="result-list-info">
+                    <div v-if="hasSearchTerm()" class="bg-blue-50 border-l-4 border-blue-400 p-4">
+                        <p class="text-sm text-blue-700">
+                            Your search term <span class="font-semibold">{{ "'" + stringSearchTerm + "'" }}</span> yielded <strong>{{ numFound }}</strong> results:
+                        </p>
+                    </div>
+                </div> -->
+                
+                <!-- Option 2: Use a Notice/Alert Style -->
+                <!--
+                <div v-if="results.length > 0" class="result-list-info">
+                    <div v-if="hasSearchTerm()" class="bg-yellow-100 border border-yellow-300 text-yellow-800 px-4 py-3 rounded-md" role="alert">
+                        <span class="block sm:inline">Your search term <span class="font-semibold">{{ "'" + stringSearchTerm + "'" }}</span> yielded <strong>{{ numFound }}</strong> results:</span>
+                    </div>
+                </div>
+                -->
+
+                <!-- Option 3: Highlight with a Callout -->
+                
+                <div v-if="results.length > 0" class="result-list-info">
+                    <div v-if="hasSearchTerm()" class="p-1 mb-0 text-sm bg-[#d8f4f7] rounded-lg" role="alert">
+                        <span class="font-medium pl-5">Your search term</span> <span class="font-semibold">{{ "'" + stringSearchTerm + "'" }}</span> yielded <strong>{{ numFound }}</strong> results:
+                    </div>
+                </div>
+               
+                <!-- Option 4: Bold with Underline -->
+                <!--
+                <div v-if="results.length > 0" class="result-list-info">
+                    <div v-if="hasSearchTerm()" class="text-lg font-bold underline text-gray-800">
+                        Your search term <span class="font-semibold">{{ "'" + stringSearchTerm + "'" }}</span> yielded <strong>{{ numFound }}</strong> results:
+                    </div>
+                </div>
+                -->
+
+                <div v-else-if="results.length == 0">
+                    <div class="p-1 mb-0 text-sm bg-[#d8f4f7] rounded-lg" role="alert">
+                        <span class="font-medium pl-5">Your search yielded <strong> 0</strong> results:</span>
+                        <!-- Your search yielded
+                        <strong> 0</strong> results: -->
+                    </div>
+                </div>
+
+                <!-- <div v-else-if="results.length == 0">
+                    <div class="resultheader">
+                        Your search yielded
+                        <strong> 0</strong> results:
+                    </div>
+                </div> -->
+
+            </div>
+
         </div>
 
+
+
         <div class="columns">
-            <div id="id-side-bar" class="column is-4 sidebar_column" style="padding-top: 1.2rem; padding-right: 1.5rem; padding-left: 1.5rem">
+            <div id="id-side-bar" class="column is-4 sidebar_column" style="padding-top: 0.5rem; padding-right: 1.5rem; padding-left: 1.5rem">
                 <div id="externals" class="">
                     <div v-for="(facetItems, key, index) in facets" v-bind:key="index" name="external_card" style="margin-bottom: 0px">
                         <facet-category v-bind:facetItems="facetItems" v-bind:filterName="key" @filter="onFilter"></facet-category>
@@ -28,7 +98,7 @@
                 </div>
             </div>
 
-            <div class="col col-8 column is-8 results_column" style="padding-top: 1.2rem; padding-right: 1rem; padding-left: 1rem">
+            <div class="col col-8 column is-8 results_column" style="padding-top: 0.5rem; padding-right: 1rem; padding-left: 1rem">
                 <div v-if="activeFilterCategories && Object.keys(activeFilterCategories).length > 0" class="column">
                     <span v-for="(values, key, index) in activeFilterCategories" v-bind:key="index" class="active-filter-items">
                         <!-- {{ values }} {{key}} {{index }} -->