Mercurial > gemma
changeset 1167:1ae93a0438df
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>