diff client/src/morphtool/Morphtool.vue @ 1217:ba8cd80d68b6

made more use of bootstrap classes instead of custom css
author Markus Kottlaender <markus@intevation.de>
date Mon, 19 Nov 2018 15:20:22 +0100
parents 9d93968db2cd
children c14353e2cdb9
line wrap: on
line diff
--- a/client/src/morphtool/Morphtool.vue	Mon Nov 19 15:10:09 2018 +0100
+++ b/client/src/morphtool/Morphtool.vue	Mon Nov 19 15:20:22 2018 +0100
@@ -1,28 +1,26 @@
 <template>
-    <div class="morphcontainer rounded position-relative">
+    <div class="mb-3 ml-auto 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>
+            <h4 class="text-center mx-4">{{ selectedBottleneck }}</h4>
+            <hr>
+            <div
+                @click="$store.dispatch('fairwayprofile/clearSelection');"
+                class="ui-element d-flex morphtoolminus position-absolute"
+            >
+                <i class="fa fa-close p-2"></i>
+            </div>
+            <div>
                 <div
-                    @click="$store.dispatch('fairwayprofile/clearSelection');"
-                    class="float-left ui-element d-flex morphtoolminus"
-                >
-                    <i class="fa fa-close morphtoolsminus"></i>
-                </div>
-            </div>
-            <ul class="list-group surveylist">
-                <li
                     v-for="survey of surveys"
                     :key="survey.data_info"
-                    class="list-group-item"
+                    class="my-1"
                     @click.prevent="$store.commit('bottlenecks/setSelectedSurvey', survey)"
                 >
                     <a href="#" @click.prevent>{{ survey.date_info }}</a>
-                </li>
-            </ul>
+                </div>
+            </div>
         </div>
-        <div v-if="selectedSurvey && !showSplitscreen" class="ui-element shadow morphtool rounded">
+        <div v-if="selectedSurvey && !showSplitscreen" class="ui-element shadow morphtool rounded position-relative bg-white my-auto">
             <div class="d-flex flex-row justify-content-between">
                 <h6 class="my-auto px-2">
                     {{ selectedBottleneck }}
@@ -36,40 +34,13 @@
 </template>
 
 <style scoped lang="sass">
-.headline
-  margin-right: $offset
-  margin-left: $offset
-  
-.morphcontainer
-  margin-bottom: $offset
-  margin-left: auto
-  
-.surveylist
-  text-align: left
-  margin-bottom: $offset !important
-  margin-left: $offset
-  margin-right: $offset
-
-.surveylist li
-  margin-left: auto
-  margin-right: auto
-  border-style: none
-  padding-bottom: 0rem
-
 .morphtool
-  position: relative
-  background-color: white
   height: $icon-width
-  margin-top: auto
-  margin-bottom: auto
   z-index: 2
 
 .morphtoolminus
-  position: absolute
   top: 0
   right: 0
-  background-color: white
-  padding: $small-offset
   height: $icon-width
   width: $icon-height
   z-index: 2