Mercurial > gemma
changeset 1267:29036b3916ab
several UI improvements
changed accent color (active buttons, etc... now same as in administration)
colored box headers (for better look n feel and to reduce header size even more -> color contrast instead of big font-size)
button colors changed from black to dark grey
added transparency to boxes and buttons
author | Markus Kottlaender <markus@intevation.de> |
---|---|
date | Wed, 21 Nov 2018 15:05:09 +0100 |
parents | c7db47e5f71d |
children | aca692e73028 |
files | client/src/application/Contextbox.vue client/src/application/Search.vue client/src/application/Sidebar.vue client/src/application/assets/application.sass client/src/bottlenecks/Bottlenecks.vue client/src/fairway/Surveys.vue client/src/identify/Identify.vue client/src/imports/Imports.vue client/src/layers/Layers.vue client/src/pdftool/Pdftool.vue client/src/staging/Staging.vue client/src/toolbar/Toolbar.vue client/src/zoom/zoom.vue |
diffstat | 13 files changed, 41 insertions(+), 17 deletions(-) [+] |
line wrap: on
line diff
--- a/client/src/application/Contextbox.vue Wed Nov 21 13:53:38 2018 +0100 +++ b/client/src/application/Contextbox.vue Wed Nov 21 15:05:09 2018 +0100 @@ -37,10 +37,12 @@ ...mapState("application", ["showSearchbarLastState", "showInContextBox"]), style() { return [ - "ui-element shadow-xs contextbox pt-3 ml-3 rounded-bottom border-top", + "ui-element shadow-xs contextbox ml-3", { contextboxcollapsed: !this.showInContextBox, - contextboxextended: this.showInContextBox + contextboxextended: this.showInContextBox, + "rounded-bottom": this.showInContextBox !== "imports", + rounded: this.showInContextBox === "imports" } ]; } @@ -82,6 +84,7 @@ height: $icon-width width: $icon-height display: none + color: #fff .contextboxextended .close-contextbox display: block
--- a/client/src/application/Search.vue Wed Nov 21 13:53:38 2018 +0100 +++ b/client/src/application/Search.vue Wed Nov 21 15:05:09 2018 +0100 @@ -26,6 +26,7 @@ <style lang="sass" scoped> .searchcontainer height: $icon-height + opacity: $slight-transparent .searchbar-expanded min-width: 600px @@ -53,6 +54,10 @@ height: $icon-height width: $icon-width + .input-group-prepend + .fa-search + color: #666 + .searchresults margin-left: -31px max-height: 20rem
--- a/client/src/application/Sidebar.vue Wed Nov 21 13:53:38 2018 +0100 +++ b/client/src/application/Sidebar.vue Wed Nov 21 15:05:09 2018 +0100 @@ -157,12 +157,14 @@ width: $icon-width top: 0 left: 0 + color: #666 .router-link-exact-active background-color: #f2f2f2 .navicon margin-right: $small-offset + color: #666 .menu padding-top: $small-offset
--- a/client/src/application/assets/application.sass Wed Nov 21 13:53:38 2018 +0100 +++ b/client/src/application/assets/application.sass Wed Nov 21 15:05:09 2018 +0100 @@ -26,6 +26,10 @@ $transition-fast: 0.3s $x-large-offset: 3rem $xx-large-offset: 5rem +$color-info: #17a2b8 + +a + color: $color-info .w-90 width: 90%
--- a/client/src/bottlenecks/Bottlenecks.vue Wed Nov 21 13:53:38 2018 +0100 +++ b/client/src/bottlenecks/Bottlenecks.vue Wed Nov 21 15:05:09 2018 +0100 @@ -1,7 +1,9 @@ <template> <div> - <h4>Bottlenecks</h4> - <hr class="mb-0"> + <h6 class="mb-0 py-2 px-3 border-bottom d-flex align-items-center bg-info text-white"> + <i class="fa fa-ship mr-2"></i> + Bottlenecks + </h6> <div class="row p-2 text-left small"> <div class="col-5"> <a href="#" @click="sortBy('name')" class="sort-link">Name</a>
--- a/client/src/fairway/Surveys.vue Wed Nov 21 13:53:38 2018 +0100 +++ b/client/src/fairway/Surveys.vue Wed Nov 21 15:05:09 2018 +0100 @@ -1,10 +1,10 @@ <template> <div class="box expanded ui-element rounded bg-white ml-auto mr-3 mb-3 text-nowrap" v-if="selectedBottleneck && surveys && !selectedSurvey"> <div style="width: 15rem"> - <h5 class="mb-0 py-2 px-3 border-bottom d-flex align-items-center"> + <h6 class="mb-0 py-2 px-3 border-bottom d-flex align-items-center bg-info text-white"> {{ selectedBottleneck }} <i class="fa fa-times ml-auto" @click="$store.dispatch('fairwayprofile/clearSelection');"></i> - </h5> + </h6> <div class="p-3"> <div v-for="(survey, i) of surveys"
--- a/client/src/identify/Identify.vue Wed Nov 21 13:53:38 2018 +0100 +++ b/client/src/identify/Identify.vue Wed Nov 21 15:05:09 2018 +0100 @@ -1,11 +1,11 @@ <template> <div :class="['box ui-element rounded bg-white mb-auto text-nowrap', { expanded: showIdentify }]"> <div style="width: 20rem"> - <h5 class="mb-0 py-2 px-3 border-bottom d-flex align-items-center"> + <h6 class="mb-0 py-2 px-3 border-bottom d-flex align-items-center bg-info text-white"> <i class="fa fa-info mr-2"></i> Identified <i class="fa fa-times ml-auto" @click="$store.commit('application/showIdentify', false)"></i> - </h5> + </h6> <div class="d-flex flex-column features p-3 flex-grow-1 text-left"> <div v-if="currentMeasurement"> <b>
--- a/client/src/imports/Imports.vue Wed Nov 21 13:53:38 2018 +0100 +++ b/client/src/imports/Imports.vue Wed Nov 21 15:05:09 2018 +0100 @@ -1,6 +1,9 @@ <template> <div> - <h4>Import soundingresults</h4> + <h6 class="mb-0 py-2 px-3 border-bottom d-flex align-items-center bg-info text-white"> + <i class="fa fa-upload mr-2"></i> + Import Soundingresults + </h6> <hr class="mr-auto ml-auto mb-0 w-90"> <div v-if="editState" class="ml-auto mr-auto mt-4 w-90"> <div class="d-flex flex-row input-group mb-4">
--- a/client/src/layers/Layers.vue Wed Nov 21 13:53:38 2018 +0100 +++ b/client/src/layers/Layers.vue Wed Nov 21 15:05:09 2018 +0100 @@ -1,11 +1,11 @@ <template> <div :class="['box ui-element rounded bg-white mb-auto text-nowrap', { expanded: showLayers }]"> <div style="width: 20rem"> - <h5 class="mb-0 py-2 px-3 border-bottom d-flex align-items-center"> + <h6 class="mb-0 py-2 px-3 border-bottom d-flex align-items-center bg-info text-white"> <i class="fa fa-th-list mr-2"></i> Layers <i class="fa fa-times ml-auto" @click="$store.commit('application/showLayers', false)"></i> - </h5> + </h6> <div class="d-flex flex-column p-3 small"> <Layerselect v-for="(layer, index) in layersForLegend"
--- a/client/src/pdftool/Pdftool.vue Wed Nov 21 13:53:38 2018 +0100 +++ b/client/src/pdftool/Pdftool.vue Wed Nov 21 15:05:09 2018 +0100 @@ -1,14 +1,14 @@ <template> <div :class="['box ui-element rounded bg-white mb-auto text-nowrap', { expanded: showPdfTool }]"> <div style="width: 15rem"> - <h5 class="mb-0 py-2 px-3 border-bottom d-flex align-items-center"> + <h6 class="mb-0 py-2 px-3 border-bottom d-flex align-items-center bg-info text-white"> <i class="fa fa-file-pdf-o mr-2"></i> Generate PDF <i class="fa fa-times ml-auto" @click="$store.commit('application/showPdfTool', false)"></i> - </h5> + </h6> <div class="p-3"> <b>Chose format:</b> - <select v-model="form.format" class="d-block w-100"> + <select v-model="form.format" class="form-control d-block w-100"> <option>landscape</option> <option>portrait</option> </select>
--- a/client/src/staging/Staging.vue Wed Nov 21 13:53:38 2018 +0100 +++ b/client/src/staging/Staging.vue Wed Nov 21 15:05:09 2018 +0100 @@ -1,7 +1,9 @@ <template> <div> - <h4>Staging area</h4> - <hr> + <h6 class="mb-0 py-2 px-3 border-bottom d-flex align-items-center bg-info text-white"> + <i class="fa fa-list-ol mr-2"></i> + Staging Area + </h6> <table class="table mb-0"> <thead> <tr>
--- a/client/src/toolbar/Toolbar.vue Wed Nov 21 13:53:38 2018 +0100 +++ b/client/src/toolbar/Toolbar.vue Wed Nov 21 15:05:09 2018 +0100 @@ -28,6 +28,8 @@ max-height: 100% .toolbar-button + opacity: $slight-transparent + color: #666 height: $icon-width width: $icon-height align-items: center @@ -40,7 +42,7 @@ z-index: 2 pointer-events: auto .inverted - color: #17a2b8 + color: $color-info .grey color: #ddd </style>