Mercurial > gemma

changeset 1399:8e2c9e518440

Find changesets by keywords (author, files, the commit message), revision number or hash, or revset expression.
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);