Mercurial > gemma
changeset 1213:9d93968db2cd
replaced custom css with bootstrap classes
author | Markus Kottlaender <markus@intevation.de> |
---|---|
date | Mon, 19 Nov 2018 14:13:01 +0100 |
parents | 387826a2efd3 |
children | 3372cf2a55c7 |
files | client/src/application/Search.vue client/src/application/Sidebar.vue client/src/application/assets/application.sass client/src/bottlenecks/Bottlenecks.vue client/src/drawtool/Drawtool.vue client/src/identify/Identify.vue client/src/imports/Imports.vue client/src/layers/Layers.vue client/src/morphtool/Morphtool.vue client/src/pdftool/Pdftool.vue client/src/staging/Staging.vue |
diffstat | 11 files changed, 16 insertions(+), 37 deletions(-) [+] |
line wrap: on
line diff
--- a/client/src/application/Search.vue Mon Nov 19 13:48:50 2018 +0100 +++ b/client/src/application/Search.vue Mon Nov 19 14:13:01 2018 +0100 @@ -43,13 +43,13 @@ box-shadow: none !important &.rounded-top-right border-radius: 0 !important - border-top-right-radius: 0.25rem !important + border-top-right-radius: $border-radius !important .searchlabel background-color: white !important &.rounded-top-left border-radius: 0 !important - border-top-left-radius: 0.25rem !important + border-top-left-radius: $border-radius !important .input-group-text height: $icon-height
--- a/client/src/application/Sidebar.vue Mon Nov 19 13:48:50 2018 +0100 +++ b/client/src/application/Sidebar.vue Mon Nov 19 14:13:01 2018 +0100 @@ -2,7 +2,7 @@ <div :class="sidebarStyle"> <div @click="$store.commit('application/showSidebar', !showSidebar)" - class="menubutton position-absolute d-flex justify-content-center" + class="menubutton rounded position-absolute d-flex justify-content-center" > <i class="ui-element d-print-none fa fa-bars"></i> </div> @@ -110,7 +110,7 @@ }, sidebarStyle() { return [ - "ui-element position-relative sidebar shadow d-print-none mb-auto", + "ui-element position-relative sidebar rounded shadow d-print-none mb-auto", { sidebarcollapsed: !this.showSidebar, sidebarextended: this.showSidebar @@ -160,7 +160,6 @@ .menubutton background-color: white padding: $small-offset - border-radius: $border-radius height: $icon-height width: $icon-width top: 0 @@ -179,7 +178,6 @@ background-color: #ffffff padding-top: $large-offset opacity: $slight-transparent - border-radius: $border-radius .sidebarcollapsed height: 30px
--- a/client/src/application/assets/application.sass Mon Nov 19 13:48:50 2018 +0100 +++ b/client/src/application/assets/application.sass Mon Nov 19 14:13:01 2018 +0100 @@ -14,7 +14,7 @@ */ $basic-shadow-light: 1px 1px 12px 1px rgba(235, 235, 235, 0.75) $basic-shadow: 1px 3px 8px 2px rgba(220, 220, 220, 0.75) -$border-radius: 5px +$border-radius: 0.25rem $icon-height: 2rem $icon-width: 2rem $large-offset: 2rem
--- a/client/src/bottlenecks/Bottlenecks.vue Mon Nov 19 13:48:50 2018 +0100 +++ b/client/src/bottlenecks/Bottlenecks.vue Mon Nov 19 14:13:01 2018 +0100 @@ -106,7 +106,7 @@ ...mapState("map", ["openLayersMap"]), bottlenecksStyle() { return [ - "ui-element shadow bottlenecks border-top", + "ui-element shadow bottlenecks rounded-bottom border-top", { bottleneckscollapsed: !this.showBottlenecks, bottlenecksextended: this.showBottlenecks @@ -240,8 +240,6 @@ background-color: #ffffff padding-top: $offset opacity: $slight-transparent - border-bottom-left-radius: $border-radius - border-bottom-right-radius: $border-radius transition: left 0.3s ease overflow: hidden background: #fff @@ -260,7 +258,6 @@ z-index: 2 right: 0 top: 7px - border-radius: $border-radius height: $icon-width width: $icon-height display: none
--- a/client/src/drawtool/Drawtool.vue Mon Nov 19 13:48:50 2018 +0100 +++ b/client/src/drawtool/Drawtool.vue Mon Nov 19 14:13:01 2018 +0100 @@ -1,12 +1,12 @@ <template> <div class="d-flex flex-column"> - <div @click="toggleLineMode" class="ui-element d-flex shadow drawtool"> + <div @click="toggleLineMode" class="ui-element d-flex shadow drawtool rounded"> <i :class="['fa fa-pencil', {inverted: drawMode === 'LineString'}]"></i> </div> - <div @click="togglePolygonMode" class="ui-element d-flex shadow drawtool"> + <div @click="togglePolygonMode" class="ui-element d-flex shadow drawtool rounded"> <i :class="['fa fa-edit', {inverted: drawMode === 'Polygon'}]"></i> </div> - <div @click="toggleCutMode" class="ui-element d-flex shadow drawtool" v-if="selectedSurvey"> + <div @click="toggleCutMode" class="ui-element d-flex shadow drawtool rounded" v-if="selectedSurvey"> <i :class="['fa fa-area-chart', {inverted: cutMode}]"></i> </div> </div> @@ -16,7 +16,6 @@ .drawtool background-color: white padding: $small-offset - border-radius: $border-radius margin-left: $offset height: $icon-width width: $icon-height
--- a/client/src/identify/Identify.vue Mon Nov 19 13:48:50 2018 +0100 +++ b/client/src/identify/Identify.vue Mon Nov 19 14:13:01 2018 +0100 @@ -76,7 +76,6 @@ z-index: 2 right: 0 margin-top: $x-small-offset - border-radius: $border-radius height: $icon-width width: $icon-height </style>
--- a/client/src/imports/Imports.vue Mon Nov 19 13:48:50 2018 +0100 +++ b/client/src/imports/Imports.vue Mon Nov 19 14:13:01 2018 +0100 @@ -141,7 +141,7 @@ }, importStyle() { return [ - "ui-element shadow imports", + "ui-element shadow imports rounded", { importscollapsed: !this.showImportSoundingResults, importsextended: this.showImportSoundingResults @@ -195,7 +195,6 @@ background-color: #ffffff padding-top: $offset opacity: $slight-transparent - border-radius: $border-radius transition: left 0.3s ease overflow: hidden background: #fff @@ -216,7 +215,6 @@ z-index: 2 right: 0 top: 7px - border-radius: $border-radius height: $icon-width width: $icon-height display: none
--- a/client/src/layers/Layers.vue Mon Nov 19 13:48:50 2018 +0100 +++ b/client/src/layers/Layers.vue Mon Nov 19 14:13:01 2018 +0100 @@ -42,7 +42,6 @@ z-index: 2 right: 0 margin-top: $x-small-offset - border-radius: $border-radius height: $icon-width width: $icon-height </style>
--- a/client/src/morphtool/Morphtool.vue Mon Nov 19 13:48:50 2018 +0100 +++ b/client/src/morphtool/Morphtool.vue Mon Nov 19 14:13:01 2018 +0100 @@ -1,6 +1,6 @@ <template> - <div class="morphcontainer"> - <div v-if="selectedBottleneck && surveys && !selectedSurvey" class="ui-element card card-body shadow"> + <div class="morphcontainer rounded position-relative"> + <div v-if="selectedBottleneck && surveys && !selectedSurvey" class="ui-element bg-white rounded p-3 shadow"> <div class="headline"> <h4>{{ selectedBottleneck }}</h4> <hr> @@ -22,7 +22,7 @@ </li> </ul> </div> - <div v-if="selectedSurvey && !showSplitscreen" class="ui-element shadow morphtool"> + <div v-if="selectedSurvey && !showSplitscreen" class="ui-element shadow morphtool rounded"> <div class="d-flex flex-row justify-content-between"> <h6 class="my-auto px-2"> {{ selectedBottleneck }} @@ -43,7 +43,6 @@ .morphcontainer margin-bottom: $offset margin-left: auto - border-radius: $border-radius .surveylist text-align: left @@ -60,7 +59,6 @@ .morphtool position: relative background-color: white - border-radius: $border-radius height: $icon-width margin-top: auto margin-bottom: auto @@ -72,7 +70,6 @@ right: 0 background-color: white padding: $small-offset - border-radius: $border-radius height: $icon-width width: $icon-height z-index: 2
--- a/client/src/pdftool/Pdftool.vue Mon Nov 19 13:48:50 2018 +0100 +++ b/client/src/pdftool/Pdftool.vue Mon Nov 19 14:13:01 2018 +0100 @@ -70,7 +70,6 @@ right: 0 top: 0 margin-top: $x-small-offset - border-radius: $border-radius height: $icon-width width: $icon-height </style>
--- a/client/src/staging/Staging.vue Mon Nov 19 13:48:50 2018 +0100 +++ b/client/src/staging/Staging.vue Mon Nov 19 14:13:01 2018 +0100 @@ -1,9 +1,9 @@ <template> - <div v-if="showStagingArea" class="card staging-card"> - <div class="card-body staging-card-body"> + <div v-if="showStagingArea" class="staging-card bg-white mx-auto rounded position-relative"> + <div class="p-3"> <div @click="$store.commit('application/showStagingArea', !showStagingArea);" - class="ui-element close-showStagingArea" + class="ui-element close-showStagingArea position-absolute" > <i class="fa fa-close"></i> </div> @@ -27,21 +27,14 @@ <style lang="sass" scoped> .close-showStagingArea - position: absolute z-index: 2 right: 0 top: 7px - border-radius: $border-radius height: $icon-width width: $icon-height .staging-card - position: relative - background-color: white width: 30rem height: 28rem - margin-left: auto - margin-right: auto - border-radius: $border-radius opacity: $slight-transparent </style>