Mercurial > gemma
changeset 626:d4fa28bfa6ec
fix: layout minor fixes of buttons and menu
author | Thomas Junk <thomas.junk@intevation.de> |
---|---|
date | Tue, 11 Sep 2018 17:17:37 +0200 |
parents | 4acf60d1bbb4 |
children | afd5595c8d8b |
files | client/src/App.vue client/src/application/Main.vue client/src/application/Sidebar.vue client/src/application/Topbar.vue client/src/application/User.vue client/src/layers/Layers.vue client/src/layers/Layerselect.vue client/src/map/Maplayer.vue |
diffstat | 8 files changed, 42 insertions(+), 33 deletions(-) [+] |
line wrap: on
line diff
--- a/client/src/App.vue Tue Sep 11 17:03:22 2018 +0200 +++ b/client/src/App.vue Tue Sep 11 17:17:37 2018 +0200 @@ -15,7 +15,7 @@ </div> </div> - <div class="bottomcontainer"> + <div class="bottomcontainer d-flex flex-row align-items-end"> <User v-if="isAuthenticated"></User> </div> </div> @@ -42,9 +42,7 @@ } .bottomcontainer { - .top { - height: 10vh; - } + height: 10vh; } .midcontainer {
--- a/client/src/application/Main.vue Tue Sep 11 17:03:22 2018 +0200 +++ b/client/src/application/Main.vue Tue Sep 11 17:17:37 2018 +0200 @@ -10,10 +10,6 @@ <style lang="scss"> @import "../application/assets/application.scss"; -.menubutton { - margin-left: $small-offset; -} - .profile { background-color: white; height: 50vh;
--- a/client/src/application/Sidebar.vue Tue Sep 11 17:03:22 2018 +0200 +++ b/client/src/application/Sidebar.vue Tue Sep 11 17:17:37 2018 +0200 @@ -59,7 +59,8 @@ } .sidebar { - top: 0; + top: 1rem; + left: 1rem; background-color: #ffffff; padding-top: $large-offset; opacity: 0.96; @@ -71,12 +72,10 @@ } .sidebarcollapsed { - transition: $transition; - left: -250px; + display: none; } .sidebarextended { - transition: $transition; - left: 0; + display: block; } </style>
--- a/client/src/application/Topbar.vue Tue Sep 11 17:03:22 2018 +0200 +++ b/client/src/application/Topbar.vue Tue Sep 11 17:17:37 2018 +0200 @@ -33,6 +33,7 @@ background-color: white; padding: 0.5rem; border-radius: 5px; + margin-left: 1rem; } .searchcontainer { @@ -50,9 +51,8 @@ } .topbar { - padding-top: 2vh; - margin-right: 1vw; - margin-left: 0; + padding-top: 1rem; + margin-right: 1rem; } .logout {
--- a/client/src/application/User.vue Tue Sep 11 17:03:22 2018 +0200 +++ b/client/src/application/User.vue Tue Sep 11 17:17:37 2018 +0200 @@ -14,6 +14,7 @@ margin-left: 1rem; padding: 0.25rem; border-radius: 5px; + margin-bottom: 1rem; } .usermanagementcollapsed {
--- a/client/src/layers/Layers.vue Tue Sep 11 17:03:22 2018 +0200 +++ b/client/src/layers/Layers.vue Tue Sep 11 17:17:37 2018 +0200 @@ -1,15 +1,15 @@ <template> - <div class="ui-element card layerselection shadow"> - <div class="card-body"> - <div class="headline"> - <h4 class="card-title">Layers</h4> - </div> - <hr> - <div class="d-flex flex-column"> - <Layerselect :layerindex="index" :layername="layer.name" v-for="(layer, index) in layers" :key="layer.name" :isVisible="layer.isVisible" @visibilityToggled="visibilityToggled"></Layerselect> - </div> + <div class="ui-element card layerselection shadow"> + <div class="card-body"> + <div class="headline"> + <h4 class="card-title">Layers</h4> + </div> + <hr> + <div class="d-flex flex-column"> + <Layerselect :layerindex="index" :layername="layer.name" v-for="(layer, index) in layers" :key="layer.name" :isVisible="layer.isVisible" @visibilityToggled="visibilityToggled"></Layerselect> + </div> + </div> </div> - </div> </template> <style lang="scss"> @@ -18,6 +18,7 @@ .layerselection { background-color: white; margin-left: 0.5rem; + padding: 0.5rem; } </style>
--- a/client/src/layers/Layerselect.vue Tue Sep 11 17:03:22 2018 +0200 +++ b/client/src/layers/Layerselect.vue Tue Sep 11 17:17:37 2018 +0200 @@ -1,12 +1,17 @@ <template> - <div class="form-check d-flex flex-row"> - <input class="form-check-input" @change="visibilityToggled" :id="layername" type="checkbox" :checked="isVisible"> - <label class="form-check-label" :for="layername">{{this.layername}}</label> - </div> + <div class="form-check d-flex flex-row flex-start selection"> + <input class="form-check-input" @change="visibilityToggled" :id="layername" type="checkbox" :checked="isVisible"> + <label class="layername form-check-label" :for="layername">{{this.layername}}</label> + </div> </template> -<style lang="sass"> - +<style lang="scss"> +.selection { + text-align: left; +} +.layername { + margin-left: 0.5rem; +} </style>
--- a/client/src/map/Maplayer.vue Tue Sep 11 17:03:22 2018 +0200 +++ b/client/src/map/Maplayer.vue Tue Sep 11 17:17:37 2018 +0200 @@ -16,11 +16,20 @@ .ol-zoom { display: flex; left: 15vw; - margin-top: 2vh; z-index: 5; + top: 1rem; + padding: 0.3rem; background-color: white; box-shadow: $basic-shadow; } + +.ol-attribution { + padding: 0.3rem; + background-color: white; + box-shadow: $basic-shadow; + margin-bottom: 1rem; + margin-right: 0.3rem; +} </style> <script>