Mercurial > gemma

changeset 1231:315e618a29fd

Find changesets by keywords (author, files, the commit message), revision number or hash, or revset expression.
improved search styling
author Markus Kottlaender <markus@intevation.de>
date Tue, 20 Nov 2018 09:11:46 +0100
parents 957907eaaa72
children c24f934ffe43
files client/src/application/Search.vue
diffstat 1 files changed, 13 insertions(+), 10 deletions(-) [+]
line wrap: on
line diff
--- a/client/src/application/Search.vue	Tue Nov 20 08:47:53 2018 +0100
+++ b/client/src/application/Search.vue	Tue Nov 20 09:11:46 2018 +0100
@@ -14,11 +14,11 @@
                 type="text"
                 :class="searchInputStyle"
             >
-            <ul v-if="showSearchbar && searchResults !== null && !showInContextBox" class="list-group d-print-none">
-                <li v-for="entry of searchResults" :key="entry.name" class="list-group-item">
-                    <a href="#" @click.prevent="moveToSearchResult(entry)">{{entry.name}}</a>
-                </li>
-            </ul>
+            <div v-if="showSearchbar && searchResults !== null && !showInContextBox" class="searchresults border-top ui-element bg-white rounded-bottom d-print-none">
+                <div v-for="entry of searchResults" :key="entry.name" class="border-top py-2">
+                    <a href="#" @click.prevent="moveToSearchResult(entry)">{{ entry.name }}</a>
+                </div>
+            </div>
         </div>
     </div>
 </template>
@@ -53,10 +53,12 @@
     height: $icon-height
     width: $icon-width
 
-  .list-group
-    pointer-events: auto
-    max-height: 40vh
+  .searchresults
+    margin-left: -31px
+    max-height: 20rem
     overflow: auto
+    > div:first-child
+      border-top: 0 !important
 </style>
 
 <script>
@@ -124,7 +126,7 @@
     searchInputStyle() {
       return [
         "form-control ui-element search searchbar d-print-none border-0",
-        { "rounded-top-right": this.showInContextBox }
+        { "rounded-top-right": this.showInContextBox || this.searchResults }
       ];
     },
     searchButtonStyle() {
@@ -133,7 +135,8 @@
         {
           rounded: !this.showSearchbar,
           "rounded-left": this.showSearchbar,
-          "rounded-top-left": this.showSearchbar && this.showInContextBox
+          "rounded-top-left":
+            this.showSearchbar && (this.showInContextBox || this.searchResults)
         }
       ];
     }