Mercurial > gemma

changeset 1167:1ae93a0438df

Find changesets by keywords (author, files, the commit message), revision number or hash, or revset expression.
fixed topbar button styles search button border-radius fixed margins between buttons fixed searchbar width based on flex-box (overlapping issue NOT fixed... yet)
author Markus Kottlaender <markus@intevation.de>
date Wed, 14 Nov 2018 12:12:00 +0100
parents 0cddb3b24d24
children 930fdd8b474f a9e455c017cb
files client/src/application/Topbar.vue client/src/identify/Identify.vue client/src/layers/Layers.vue
diffstat 3 files changed, 127 insertions(+), 133 deletions(-) [+]
line wrap: on
line diff
--- a/client/src/application/Topbar.vue	Wed Nov 14 11:35:55 2018 +0100
+++ b/client/src/application/Topbar.vue	Wed Nov 14 12:12:00 2018 +0100
@@ -5,11 +5,11 @@
         </div>
         <div v-if="routeName == 'mainview'" :class="searchbarContainerStyle">
             <div class="input-group-prepend shadow">
-                <span @click="toggleSearchbar" class="ui-element input-group-text searchlabel d-print-none" for="search">
+                <span @click="toggleSearchbar" :class="searchButtonStyle" for="search">
                     <i class="fa fa-search d-print-none"></i>
                 </span>
             </div>
-            <div class="searchgroup">
+            <div class="searchgroup flex-fill">
                 <input @keyup.enter="takeFirstSearchresult" v-if="showSearchbar" id="search" v-model="searchQuery" type="text" class="form-control ui-element search searchbar d-print-none">
                 <ul v-if="showSearchbar && searchResults !== null " class="list-group d-print-none">
                     <li v-for="entry of searchResults" :key="entry.name" class="list-group-item">
@@ -27,74 +27,68 @@
     </div>
 </template>
 
-<style lang="scss" scoped>
-.searchgroup {
-  width: 90%;
-}
-.splitbutton {
-  height: $icon-height;
-}
-.list-group {
-  pointer-events: auto;
-}
-.splitscreen {
-  background-color: white;
-  padding: $small-offset;
-  margin-right: $small-offset;
-  margin-left: $offset;
-  border-radius: $border-radius;
-  height: $icon-height;
-  width: $icon-width;
-}
+<style lang="sass" scoped>
+.splitbutton
+  height: $icon-height
+
+.list-group
+  pointer-events: auto
 
-.menubutton {
-  background-color: white;
-  padding: $small-offset;
-  border-radius: $border-radius;
-  margin-left: $offset;
-  height: $icon-height;
-  width: $icon-width;
-}
+.splitscreen
+  background-color: white
+  padding: $small-offset
+  margin-right: $small-offset
+  margin-left: $offset
+  border-radius: $border-radius
+  height: $icon-height
+  width: $icon-width
 
-.searchcontainer {
-  height: $icon-height;
-  border-radius: 0.25rem;
-}
+.menubutton
+  background-color: white
+  padding: $small-offset
+  border-radius: $border-radius
+  margin-left: $offset
+  height: $icon-height
+  width: $icon-width
+
+.searchcontainer
+  height: $icon-height
+  border-radius: 0.25rem
 
-.searchbar-expanded {
-  margin-left: 22vw;
-  margin-right: auto;
-  width: $searchbar-width !important;
-}
+.searchbar-expanded
+  margin-left: 22vw
+  margin-right: auto
+  width: $searchbar-width !important
+  .searchbar
+    border-top-left-radius: 0 !important
+    border-bottom-left-radius: 0 !important
 
-.searchbar-collapsed {
-  margin-left: auto;
-  margin-right: $small-offset;
-  width: $icon-width !important;
-  transition: $transition-fast;
-}
+
+.searchbar-collapsed
+  margin-left: auto
+  width: $icon-width !important
+  transition: $transition-fast
 
-.searchbar {
-  margin-left: auto;
-  margin-right: auto;
-  height: $icon-height !important;
-}
+.searchbar
+  margin-left: auto
+  margin-right: auto
+  height: $icon-height !important
 
-.searchlabel {
-  background-color: white !important;
-}
+.searchlabel
+  background-color: white !important
 
-.topbar {
-  padding-top: $offset;
-  margin-right: $offset;
-}
+.input-group-text
+  height: $icon-height
+  width: $icon-width
 
-.logout {
-  font-size: x-large;
-}
+.topbar
+  padding-top: $offset
+  margin-right: $offset
+
+.logout
+  font-size: x-large
 </style>
 
-
 <script>
 /*
  * This is Free Software under GNU Affero General Public License v >= 3.0
@@ -152,12 +146,22 @@
       }
     },
     searchbarContainerStyle() {
-      return {
-        "input-group": true,
-        searchcontainer: true,
-        "searchbar-collapsed": !this.showSearchbar,
-        "searchbar-expanded": this.showSearchbar
-      };
+      return [
+        "d-flex input-group searchcontainer",
+        {
+          "searchbar-collapsed": !this.showSearchbar,
+          "searchbar-expanded": this.showSearchbar
+        }
+      ];
+    },
+    searchButtonStyle() {
+      return [
+        "ui-element input-group-text p-0 d-flex justify-content-center searchlabel d-print-none",
+        {
+          rounded: !this.showSearchbar,
+          "rounded-left": this.showSearchbar
+        }
+      ];
     }
   },
   props: ["routeName"],
--- a/client/src/identify/Identify.vue	Wed Nov 14 11:35:55 2018 +0100
+++ b/client/src/identify/Identify.vue	Wed Nov 14 12:12:00 2018 +0100
@@ -39,47 +39,42 @@
     </div>
 </template>
 
-<style lang="scss" scoped>
-.features {
-  max-height: $identify-height;
-  overflow-y: auto;
-  margin-bottom: $x-large-offset + $large-offset;
-}
-.versioninfo {
-  font-size: 60%;
-  position: absolute;
-  bottom: $large-offset;
-}
-.identifymenu {
-  position: relative;
-  margin-right: $offset;
-}
-.identify {
-  background-color: white;
-  margin-left: $small-offset;
-  opacity: $slight-transparent;
-  text-align: left;
-}
+<style lang="sass" scoped>
+.features
+  max-height: $identify-height
+  overflow-y: auto
+  margin-bottom: $x-large-offset + $large-offset
+
+.versioninfo
+  font-size: 60%
+  position: absolute
+  bottom: $large-offset
+
+.identifymenu
+  position: relative
+  margin-left: $offset
 
-.identifycollapsed {
-  min-height: $icon-height;
-  width: $icon-width;
-  transition: $transition-fast;
-}
+.identify
+  background-color: white
+  opacity: $slight-transparent
+  text-align: left
 
-.identifyexpanded {
-  width: $identify-width;
-}
+.identifycollapsed
+  min-height: $icon-height
+  width: $icon-width
+  transition: $transition-fast
 
-.minimizer {
-  position: absolute;
-  z-index: 2;
-  right: 0;
-  margin-top: $x-small-offset;
-  border-radius: $border-radius;
-  height: $icon-width;
-  width: $icon-height;
-}
+.identifyexpanded
+  width: $identify-width
+
+.minimizer
+  position: absolute
+  z-index: 2
+  right: 0
+  margin-top: $x-small-offset
+  border-radius: $border-radius
+  height: $icon-width
+  width: $icon-height
 </style>
 
 <script>
--- a/client/src/layers/Layers.vue	Wed Nov 14 11:35:55 2018 +0100
+++ b/client/src/layers/Layers.vue	Wed Nov 14 12:12:00 2018 +0100
@@ -19,37 +19,32 @@
     </div>
 </template>
 
-<style lang="scss" scoped>
-.layerselectmenu {
-  position: relative;
-  margin-right: $offset;
-}
-.layerselection {
-  background-color: white;
-  margin-left: $small-offset;
-  opacity: $slight-transparent;
-}
+<style lang="sass" scoped>
+.layerselectmenu
+  position: relative
+  margin-left: $offset
+
+.layerselection
+  background-color: white
+  opacity: $slight-transparent
 
-.layerselectioncollapsed {
-  min-height: $icon-height;
-  width: $icon-width;
-  transition: $transition-fast;
-}
+.layerselectioncollapsed
+  min-height: $icon-height
+  width: $icon-width
+  transition: $transition-fast
+
+.layerselectionexpanded
+  min-height: $layerselect-height
+  width: $layerselect-width
 
-.layerselectionexpanded {
-  min-height: $layerselect-height;
-  width: $layerselect-width;
-}
-
-.minimizer {
-  position: absolute;
-  z-index: 2;
-  right: 0;
-  margin-top: $x-small-offset;
-  border-radius: $border-radius;
-  height: $icon-width;
-  width: $icon-height;
-}
+.minimizer
+  position: absolute
+  z-index: 2
+  right: 0
+  margin-top: $x-small-offset
+  border-radius: $border-radius
+  height: $icon-width
+  width: $icon-height
 </style>
 
 <script>