Mercurial > gemma
changeset 1419:24b7f71c4406
made toolbar toggler a bit smaller and stay in one position
| author | Markus Kottlaender <markus@intevation.de> |
|---|---|
| date | Thu, 29 Nov 2018 12:09:00 +0100 |
| parents | 547bbe64d188 |
| children | 5bd58141b806 |
| files | client/src/components/map/toolbar/Toolbar.vue |
| diffstat | 1 files changed, 15 insertions(+), 14 deletions(-) [+] |
line wrap: on
line diff
--- a/client/src/components/map/toolbar/Toolbar.vue Thu Nov 29 11:21:18 2018 +0100 +++ b/client/src/components/map/toolbar/Toolbar.vue Thu Nov 29 12:09:00 2018 +0100 @@ -1,17 +1,15 @@ <template> - <div class="ml-2"> - <div :class="'toolbar toolbar-' + (expandToolbar ? 'expanded' : 'collapsed')"> - <Identify></Identify> - <Layers></Layers> - <Profiles></Profiles> - <Linetool></Linetool> - <Polygontool></Polygontool> - <Pdftool></Pdftool> - </div> - <div @click="$store.commit('application/expandToolbar', !expandToolbar)" class="toolbar-button bg-info text-white"> - <font-awesome-icon :icon="expandToolbar ? 'angle-up' : 'angle-down'"></font-awesome-icon> - </div> - </div> + <div :class="'ml-2 toolbar toolbar-' + (expandToolbar ? 'expanded' : 'collapsed')"> + <Identify></Identify> + <Layers></Layers> + <Profiles></Profiles> + <div @click="$store.commit('application/expandToolbar', !expandToolbar)" class="toolbar-button toolbar-toggle bg-info text-white"> + <font-awesome-icon :icon="expandToolbar ? 'angle-up' : 'angle-down'"></font-awesome-icon> + </div> + <Linetool></Linetool> + <Polygontool></Polygontool> + <Pdftool></Pdftool> + </div> </template> <style lang="sass"> @@ -22,7 +20,7 @@ transition: max-height 0.4s .toolbar-collapsed - max-height: (3 * $icon-height) + (3 * $offset) + max-height: (3 * $icon-height) + (4 * $offset) + 1rem .toolbar-expanded max-height: 100% @@ -61,6 +59,9 @@ &.show left: 0 bottom: 0 + +.toolbar-toggle + height: 1.2rem </style> <script>