Mercurial > gemma
changeset 1399:8e2c9e518440
improved search style
- added icons for search result types
- added missing box-shadow
- improved style when hovering search results
author | Markus Kottlaender <markus@intevation.de> |
---|---|
date | Wed, 28 Nov 2018 15:45:56 +0100 |
parents | d6dc4bcf55d3 |
children | 7ba1de867c8d |
files | client/src/components/map/Search.vue client/src/components/map/fairway/Profiles.vue client/src/main.js |
diffstat | 3 files changed, 24 insertions(+), 9 deletions(-) [+] |
line wrap: on
line diff
--- a/client/src/components/map/Search.vue Wed Nov 28 15:24:47 2018 +0100 +++ b/client/src/components/map/Search.vue Wed Nov 28 15:45:56 2018 +0100 @@ -18,8 +18,13 @@ v-if="showSearchbar && searchResults !== null && !showContextBox" class="searchresults border-top ui-element bg-white rounded-bottom d-print-none position-absolute" > - <div v-for="entry of searchResults" :key="entry.name" class="border-top py-2"> - <a href="#" @click.prevent="moveToSearchResult(entry)">{{ entry.name }}</a> + <div v-for="entry of searchResults" :key="entry.name" class="border-top text-left"> + <a href="#" @click.prevent="moveToSearchResult(entry)" class="p-2 d-block text-nowrap"> + <font-awesome-icon icon="ship" v-if="entry.type === 'bottleneck'" class="mr-1" fixed-width /> + <font-awesome-icon icon="water" v-if="entry.type === 'rhm'" class="mr-1" fixed-width /> + <font-awesome-icon icon="city" v-if="entry.type === 'city'" class="mr-1" fixed-width /> + {{ entry.name }} + </a> </div> </div> </div> @@ -62,6 +67,7 @@ fill: #666 .searchresults + box-shadow: $shadow-xs top: $icon-height left: 0 right: 0 @@ -69,6 +75,10 @@ overflow: auto > div:first-child border-top: 0 !important + a + text-decoration: none + &:hover + background: #f8f8f8 </style> <script>
--- a/client/src/components/map/fairway/Profiles.vue Wed Nov 28 15:24:47 2018 +0100 +++ b/client/src/components/map/fairway/Profiles.vue Wed Nov 28 15:45:56 2018 +0100 @@ -286,9 +286,11 @@ loadProfile(survey) { if (survey) { this.$store.commit("fairwayprofile/profileLoading", true); - this.$store.dispatch("fairwayprofile/loadProfile", survey).finally( - () => this.$store.commit("fairwayprofile/profileLoading", false) - ); + this.$store + .dispatch("fairwayprofile/loadProfile", survey) + .finally(() => + this.$store.commit("fairwayprofile/profileLoading", false) + ); } }, toggleCutTool() { @@ -367,8 +369,7 @@ }); }, deleteSelectedCut() { - let previousCuts = - JSON.parse(localStorage.getItem("previousCuts")) || []; + let previousCuts = JSON.parse(localStorage.getItem("previousCuts")) || []; previousCuts = previousCuts.filter(cut => { return JSON.stringify(cut) !== JSON.stringify(this.selectedCut); });
--- a/client/src/main.js Wed Nov 28 15:24:47 2018 +0100 +++ b/client/src/main.js Wed Nov 28 15:45:56 2018 +0100 @@ -65,7 +65,9 @@ faMinus, faSortAmountUp, faSortAmountDown, - faSpinner + faSpinner, + faCity, + faWater } from "@fortawesome/free-solid-svg-icons"; import { faAdn } from "@fortawesome/free-brands-svg-icons"; import { FontAwesomeIcon } from "@fortawesome/vue-fontawesome"; @@ -109,7 +111,9 @@ faMinus, faSortAmountUp, faSortAmountDown, - faSpinner + faSpinner, + faCity, + faWater ); Vue.component("font-awesome-icon", FontAwesomeIcon);