Mercurial > gemma

changeset 1213:9d93968db2cd

Find changesets by keywords (author, files, the commit message), revision number or hash, or revset expression.
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>