changeset 1274:dc3fb8ad8f86

further improved box header style
author Markus Kottlaender <markus@intevation.de>
date Thu, 22 Nov 2018 07:23:14 +0100
parents a76a06dd2f1e
children 9e23a2b02b32
files client/src/assets/application.sass client/src/components/map/Bottlenecks.vue client/src/components/map/Contextbox.vue client/src/components/map/Identify.vue client/src/components/map/Pdftool.vue client/src/components/map/Staging.vue client/src/components/map/fairway/Surveys.vue client/src/components/map/imports/Imports.vue client/src/components/map/layers/Layers.vue
diffstat 9 files changed, 18 insertions(+), 14 deletions(-) [+]
line wrap: on
line diff
--- a/client/src/assets/application.sass	Thu Nov 22 07:08:38 2018 +0100
+++ b/client/src/assets/application.sass	Thu Nov 22 07:23:14 2018 +0100
@@ -59,6 +59,12 @@
   box-shadow: $shadow-xs
   transition: max-width .4s, max-height .4s, margin-left .4s, margin-right .4s
 
+.box h6,
+.contextbox h6
+  border-top: solid 3px $color-info
+  color: $color-info
+  font-weight: bold
+
 .expanded
   max-height: 999px
   max-width: 999px
--- a/client/src/components/map/Bottlenecks.vue	Thu Nov 22 07:08:38 2018 +0100
+++ b/client/src/components/map/Bottlenecks.vue	Thu Nov 22 07:23:14 2018 +0100
@@ -1,6 +1,6 @@
 <template>
     <div>
-        <h6 class="mb-0 py-2 px-3 border-bottom d-flex align-items-center bg-info text-white">
+        <h6 class="mb-0 py-2 px-3 border-bottom d-flex align-items-center">
           <i class="fa fa-ship mr-2"></i>
           Bottlenecks
         </h6>
--- a/client/src/components/map/Contextbox.vue	Thu Nov 22 07:08:38 2018 +0100
+++ b/client/src/components/map/Contextbox.vue	Thu Nov 22 07:23:14 2018 +0100
@@ -1,6 +1,6 @@
 <template>
     <div :class="style">
-        <div @click="close" class="ui-element close-contextbox">
+        <div @click="close" class="ui-element close-contextbox text-muted">
             <i class="fa fa-close"></i>
         </div>
         <Bottlenecks v-if="showInContextBox === 'bottlenecks'"></Bottlenecks>
@@ -84,7 +84,6 @@
   height: $icon-width
   width: $icon-height
   display: none
-  color: #fff
 
 .contextboxextended .close-contextbox
   display: block
--- a/client/src/components/map/Identify.vue	Thu Nov 22 07:08:38 2018 +0100
+++ b/client/src/components/map/Identify.vue	Thu Nov 22 07:23:14 2018 +0100
@@ -1,10 +1,10 @@
 <template>
     <div :class="['box ui-element rounded bg-white mb-auto text-nowrap', { expanded: showIdentify }]">
         <div style="width: 20rem">
-            <h6 class="mb-0 py-2 px-3 border-bottom d-flex align-items-center bg-info text-white">
+            <h6 class="mb-0 py-2 px-3 border-bottom d-flex align-items-center">
               <i class="fa fa-info mr-2"></i>
               Identified
-              <i class="fa fa-times ml-auto" @click="$store.commit('application/showIdentify', false)"></i>
+              <i class="fa fa-times ml-auto text-muted" @click="$store.commit('application/showIdentify', false)"></i>
             </h6>
             <div class="d-flex flex-column features p-3 flex-grow-1 text-left">
                 <div v-if="currentMeasurement">
--- a/client/src/components/map/Pdftool.vue	Thu Nov 22 07:08:38 2018 +0100
+++ b/client/src/components/map/Pdftool.vue	Thu Nov 22 07:23:14 2018 +0100
@@ -1,10 +1,10 @@
 <template>
     <div :class="['box ui-element rounded bg-white mb-auto text-nowrap', { expanded: showPdfTool }]">
         <div style="width: 15rem">
-            <h6 class="mb-0 py-2 px-3 border-bottom d-flex align-items-center bg-info text-white">
+            <h6 class="mb-0 py-2 px-3 border-bottom d-flex align-items-center">
               <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>
+              <i class="fa fa-times ml-auto text-muted" @click="$store.commit('application/showPdfTool', false)"></i>
             </h6>
             <div class="p-3">
                 <b>Chose format:</b>
--- a/client/src/components/map/Staging.vue	Thu Nov 22 07:08:38 2018 +0100
+++ b/client/src/components/map/Staging.vue	Thu Nov 22 07:23:14 2018 +0100
@@ -1,6 +1,6 @@
 <template>
     <div>
-        <h6 class="mb-0 py-2 px-3 border-bottom d-flex align-items-center bg-info text-white">
+        <h6 class="mb-0 py-2 px-3 border-bottom d-flex align-items-center">
           <i class="fa fa-list-ol mr-2"></i>
           Staging Area
         </h6>
--- a/client/src/components/map/fairway/Surveys.vue	Thu Nov 22 07:08:38 2018 +0100
+++ b/client/src/components/map/fairway/Surveys.vue	Thu Nov 22 07:23:14 2018 +0100
@@ -1,9 +1,9 @@
 <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">
-            <h6 class="mb-0 py-2 px-3 border-bottom d-flex align-items-center bg-info text-white">
+            <h6 class="mb-0 py-2 px-3 border-bottom d-flex align-items-center">
               {{ selectedBottleneck }}
-              <i class="fa fa-times ml-auto" @click="$store.dispatch('fairwayprofile/clearSelection');"></i>
+              <i class="fa fa-times ml-auto text-muted" @click="$store.dispatch('fairwayprofile/clearSelection');"></i>
             </h6>
             <div class="p-3">
                 <div
--- a/client/src/components/map/imports/Imports.vue	Thu Nov 22 07:08:38 2018 +0100
+++ b/client/src/components/map/imports/Imports.vue	Thu Nov 22 07:23:14 2018 +0100
@@ -1,10 +1,9 @@
 <template>
     <div>
-        <h6 class="mb-0 py-2 px-3 border-bottom d-flex align-items-center bg-info text-white">
+        <h6 class="mb-0 py-2 px-3 border-bottom d-flex align-items-center">
           <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">
                 <div class="offset-r">
--- a/client/src/components/map/layers/Layers.vue	Thu Nov 22 07:08:38 2018 +0100
+++ b/client/src/components/map/layers/Layers.vue	Thu Nov 22 07:23:14 2018 +0100
@@ -1,10 +1,10 @@
 <template>
     <div :class="['box ui-element rounded bg-white mb-auto text-nowrap', { expanded: showLayers }]">
         <div style="width: 20rem">
-            <h6 class="mb-0 py-2 px-3 border-bottom d-flex align-items-center bg-info text-white">
+            <h6 class="mb-0 py-2 px-3 border-bottom d-flex align-items-center">
               <i class="fa fa-th-list mr-2"></i>
               Layers
-              <i class="fa fa-times ml-auto" @click="$store.commit('application/showLayers', false)"></i>
+              <i class="fa fa-times ml-auto text-muted" @click="$store.commit('application/showLayers', false)"></i>
             </h6>
             <div class="d-flex flex-column p-3 small">
                 <Layerselect