Mercurial > gemma

changeset 886:b1489669ba52

Find changesets by keywords (author, files, the commit message), revision number or hash, or revset expression.
morphtool layout fixed
author Thomas Junk <thomas.junk@intevation.de>
date Mon, 01 Oct 2018 17:29:33 +0200
parents ea580cab3ce2
children aae517757923
files client/src/application/Morphtool.vue
diffstat 1 files changed, 30 insertions(+), 23 deletions(-) [+]
line wrap: on
line diff
--- a/client/src/application/Morphtool.vue	Mon Oct 01 17:08:31 2018 +0200
+++ b/client/src/application/Morphtool.vue	Mon Oct 01 17:29:33 2018 +0200
@@ -1,42 +1,49 @@
 <template>
-  <div v-if="selectedBottleneck || selectedMorph">
-    <div v-if="surveyList" class="ui-element card card-body shadow">
-      <div class="headline">
-        <h5>{{selectedBottleneck.get("objnam")}}</h5>
-      </div>
-      <ul class="list-group">
-        <li v-for="survey of surveyList.surveys" :key="survey.data_info"
-            class="list-group-item" @click.prevent="selectSurvey(survey)">
-          <a href="#" @click.prevent=""
-             >{{survey.date_info}}</a>
-        </li>
-      </ul>
-      <div @click="clearSelection"
-           class="float-left ui-element d-flex shadow morphtoolminus">
-        <i class="fa fa-minus morphtoolsminus"></i>
-      </div>
+    <div v-if="selectedBottleneck || selectedMorph" class="morphcontainer">
+        <div v-if="surveyList" class="ui-element card card-body shadow">
+            <div class="headline">
+                <h5>{{selectedBottleneck.get("objnam")}}</h5>
+            </div>
+            <ul class="list-group surveylist">
+                <li v-for="survey of surveyList.surveys" :key="survey.data_info" class="list-group-item" @click.prevent="selectSurvey(survey)">
+                    <a href="#" @click.prevent="">{{survey.date_info}}</a>
+                </li>
+            </ul>
+            <div @click="clearSelection" class="float-left ui-element d-flex shadow morphtoolminus">
+                <i class="fa fa-minus morphtoolsminus"></i>
+            </div>
+        </div>
+        <div v-else @click="clearSelection" class="float-right ui-element d-flex shadow morphtool">
+            <i class="fa fa-object-ungroup"></i>
+        </div>
     </div>
-    <div v-else @click="clearSelection" class="float-right ui-element d-flex shadow morphtool">
-        <i class="fa fa-object-ungroup"></i>
-    </div>
-  </div>
 </template>
 
 <style lang="scss">
+.morphcontainer {
+  position: relative;
+  margin-bottom: $offset;
+  margin-left: $offset;
+}
+.surveylist {
+  margin-bottom: $offset !important;
+  margin-left: $offset;
+  margin-right: $offset;
+}
 .morphtool {
   position: relative;
   background-color: white;
   padding: $small-offset;
   border-radius: $border-radius;
-  margin-left: $offset;
   height: $icon-width;
   width: $icon-height;
-  margin-bottom: $offset;
   margin-right: $offset;
   z-index: 2;
 }
 .morphtoolminus {
-  position: relative;
+  position: absolute;
+  bottom: 0;
+  left: 0;
   background-color: white;
   padding: $small-offset;
   border-radius: $border-radius;