Mercurial > gemma
diff client/src/application/Search.vue @ 1231:315e618a29fd
improved search styling
author | Markus Kottlaender <markus@intevation.de> |
---|---|
date | Tue, 20 Nov 2018 09:11:46 +0100 |
parents | 957907eaaa72 |
children | 3c84035b1f1b |
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) } ]; }