Mercurial > gemma

changeset 892:81b84ad962f8

Find changesets by keywords (author, files, the commit message), revision number or hash, or revset expression.
morphtool streamlined
author Thomas Junk <thomas.junk@intevation.de>
date Tue, 02 Oct 2018 14:34:57 +0200
parents 074ce4891466
children 5ea4c3f5d2a7
files client/src/application/Morphtool.vue
diffstat 1 files changed, 37 insertions(+), 13 deletions(-) [+]
line wrap: on
line diff
--- a/client/src/application/Morphtool.vue	Tue Oct 02 13:40:53 2018 +0200
+++ b/client/src/application/Morphtool.vue	Tue Oct 02 14:34:57 2018 +0200
@@ -2,48 +2,72 @@
     <div v-if="selectedBottleneck || selectedMorph" class="morphcontainer">
         <div v-if="surveyList && !drawmode" class="ui-element card card-body shadow">
             <div class="headline">
-                <h5>{{selectedBottleneck.get("objnam")}}</h5>
+                <h4>{{selectedBottleneck.get("objnam")}}</h4>
+                <hr>
+                <div @click="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 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="selectedMorph" @click="clearSelection" class="ui-element shadow morphtool">
+            <div class="d-flex flex-row justify-content-between">
+                <i class="fa fa-close"></i>
+                <h6>{{selectedBottleneck.get("objnam")}}</h6>
             </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;
+<style scoped lang="scss">
+.headline {
+  margin-right: $offset;
   margin-left: $offset;
 }
+.morphcontainer {
+  margin-bottom: $offset;
+  margin-left: auto;
+  margin-right: auto;
+  border-radius: $border-radius;
+}
 .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;
   padding: $small-offset;
   border-radius: $border-radius;
   height: $icon-width;
-  width: $icon-height;
   margin-right: $offset;
+  margin-top: auto;
+  margin-bottom: auto;
   z-index: 2;
 }
+
+.morphcontainer i {
+  margin-right: $small-offset;
+}
+
 .morphtoolminus {
   position: absolute;
-  bottom: 0;
-  left: 0;
+  top: 0;
+  right: 0;
   background-color: white;
   padding: $small-offset;
   border-radius: $border-radius;