# HG changeset patch
# User Markus Kottlaender <markus@intevation.de>
# Date 1542809109 -3600
# Node ID 29036b3916ab0a9fccc87291d70cb127850c42bc
# Parent  c7db47e5f71d5ab59099afd2a018193a73422bff
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

diff -r c7db47e5f71d -r 29036b3916ab client/src/application/Contextbox.vue
--- 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
diff -r c7db47e5f71d -r 29036b3916ab client/src/application/Search.vue
--- 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
diff -r c7db47e5f71d -r 29036b3916ab client/src/application/Sidebar.vue
--- 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
diff -r c7db47e5f71d -r 29036b3916ab client/src/application/assets/application.sass
--- 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%
diff -r c7db47e5f71d -r 29036b3916ab client/src/bottlenecks/Bottlenecks.vue
--- 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>
diff -r c7db47e5f71d -r 29036b3916ab client/src/fairway/Surveys.vue
--- 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"
diff -r c7db47e5f71d -r 29036b3916ab client/src/identify/Identify.vue
--- 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>
diff -r c7db47e5f71d -r 29036b3916ab client/src/imports/Imports.vue
--- 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">
diff -r c7db47e5f71d -r 29036b3916ab client/src/layers/Layers.vue
--- 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"
diff -r c7db47e5f71d -r 29036b3916ab client/src/pdftool/Pdftool.vue
--- 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>
diff -r c7db47e5f71d -r 29036b3916ab client/src/staging/Staging.vue
--- 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>
diff -r c7db47e5f71d -r 29036b3916ab client/src/toolbar/Toolbar.vue
--- 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>
diff -r c7db47e5f71d -r 29036b3916ab client/src/zoom/zoom.vue
--- a/client/src/zoom/zoom.vue	Wed Nov 21 13:53:38 2018 +0100
+++ b/client/src/zoom/zoom.vue	Wed Nov 21 15:05:09 2018 +0100
@@ -20,6 +20,7 @@
   min-width: $icon-width
   z-index: 2
   outline: none
+  color: #666
 </style>
 <script>
 import { mapState } from "vuex";