Mercurial > gemma

comparison client/src/application/Morphtool.vue @ 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 0b994949a4a0
children 074ce4891466
comparison
equal deleted inserted replaced
885:ea580cab3ce2 886:b1489669ba52
1 <template> 1 <template>
2 <div v-if="selectedBottleneck || selectedMorph"> 2 <div v-if="selectedBottleneck || selectedMorph" class="morphcontainer">
3 <div v-if="surveyList" class="ui-element card card-body shadow"> 3 <div v-if="surveyList" class="ui-element card card-body shadow">
4 <div class="headline"> 4 <div class="headline">
5 <h5>{{selectedBottleneck.get("objnam")}}</h5> 5 <h5>{{selectedBottleneck.get("objnam")}}</h5>
6 </div> 6 </div>
7 <ul class="list-group"> 7 <ul class="list-group surveylist">
8 <li v-for="survey of surveyList.surveys" :key="survey.data_info" 8 <li v-for="survey of surveyList.surveys" :key="survey.data_info" class="list-group-item" @click.prevent="selectSurvey(survey)">
9 class="list-group-item" @click.prevent="selectSurvey(survey)"> 9 <a href="#" @click.prevent="">{{survey.date_info}}</a>
10 <a href="#" @click.prevent="" 10 </li>
11 >{{survey.date_info}}</a> 11 </ul>
12 </li> 12 <div @click="clearSelection" class="float-left ui-element d-flex shadow morphtoolminus">
13 </ul> 13 <i class="fa fa-minus morphtoolsminus"></i>
14 <div @click="clearSelection" 14 </div>
15 class="float-left ui-element d-flex shadow morphtoolminus"> 15 </div>
16 <i class="fa fa-minus morphtoolsminus"></i> 16 <div v-else @click="clearSelection" class="float-right ui-element d-flex shadow morphtool">
17 </div> 17 <i class="fa fa-object-ungroup"></i>
18 </div>
18 </div> 19 </div>
19 <div v-else @click="clearSelection" class="float-right ui-element d-flex shadow morphtool">
20 <i class="fa fa-object-ungroup"></i>
21 </div>
22 </div>
23 </template> 20 </template>
24 21
25 <style lang="scss"> 22 <style lang="scss">
23 .morphcontainer {
24 position: relative;
25 margin-bottom: $offset;
26 margin-left: $offset;
27 }
28 .surveylist {
29 margin-bottom: $offset !important;
30 margin-left: $offset;
31 margin-right: $offset;
32 }
26 .morphtool { 33 .morphtool {
27 position: relative; 34 position: relative;
28 background-color: white; 35 background-color: white;
29 padding: $small-offset; 36 padding: $small-offset;
30 border-radius: $border-radius; 37 border-radius: $border-radius;
31 margin-left: $offset;
32 height: $icon-width; 38 height: $icon-width;
33 width: $icon-height; 39 width: $icon-height;
34 margin-bottom: $offset;
35 margin-right: $offset; 40 margin-right: $offset;
36 z-index: 2; 41 z-index: 2;
37 } 42 }
38 .morphtoolminus { 43 .morphtoolminus {
39 position: relative; 44 position: absolute;
45 bottom: 0;
46 left: 0;
40 background-color: white; 47 background-color: white;
41 padding: $small-offset; 48 padding: $small-offset;
42 border-radius: $border-radius; 49 border-radius: $border-radius;
43 height: $icon-width; 50 height: $icon-width;
44 width: $icon-height; 51 width: $icon-height;