Mercurial > gemma

comparison client/src/application/Morphtool.vue @ 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
comparison
equal deleted inserted replaced
891:074ce4891466 892:81b84ad962f8
1 <template> 1 <template>
2 <div v-if="selectedBottleneck || selectedMorph" class="morphcontainer"> 2 <div v-if="selectedBottleneck || selectedMorph" class="morphcontainer">
3 <div v-if="surveyList && !drawmode" class="ui-element card card-body shadow"> 3 <div v-if="surveyList && !drawmode" class="ui-element card card-body shadow">
4 <div class="headline"> 4 <div class="headline">
5 <h5>{{selectedBottleneck.get("objnam")}}</h5> 5 <h4>{{selectedBottleneck.get("objnam")}}</h4>
6 <hr>
7 <div @click="clearSelection" class="float-left ui-element d-flex morphtoolminus">
8 <i class="fa fa-close morphtoolsminus"></i>
9 </div>
6 </div> 10 </div>
7 <ul class="list-group surveylist"> 11 <ul class="list-group surveylist">
8 <li v-for="survey of surveyList.surveys" :key="survey.data_info" class="list-group-item" @click.prevent="selectSurvey(survey)"> 12 <li v-for="survey of surveyList.surveys" :key="survey.data_info" class="list-group-item" @click.prevent="selectSurvey(survey)">
9 <a href="#" @click.prevent="">{{survey.date_info}}</a> 13 <a href="#" @click.prevent="">{{survey.date_info}}</a>
10 </li> 14 </li>
11 </ul> 15 </ul>
12 <div @click="clearSelection" class="float-left ui-element d-flex shadow morphtoolminus"> 16 </div>
13 <i class="fa fa-minus morphtoolsminus"></i> 17 <div v-if="selectedMorph" @click="clearSelection" class="ui-element shadow morphtool">
18 <div class="d-flex flex-row justify-content-between">
19 <i class="fa fa-close"></i>
20 <h6>{{selectedBottleneck.get("objnam")}}</h6>
14 </div> 21 </div>
15 </div>
16 <div v-else @click="clearSelection" class="float-right ui-element d-flex shadow morphtool">
17 <i class="fa fa-object-ungroup"></i>
18 </div> 22 </div>
19 </div> 23 </div>
20 </template> 24 </template>
21 25
22 <style lang="scss"> 26 <style scoped lang="scss">
23 .morphcontainer { 27 .headline {
24 position: relative; 28 margin-right: $offset;
25 margin-bottom: $offset;
26 margin-left: $offset; 29 margin-left: $offset;
27 } 30 }
31 .morphcontainer {
32 margin-bottom: $offset;
33 margin-left: auto;
34 margin-right: auto;
35 border-radius: $border-radius;
36 }
28 .surveylist { 37 .surveylist {
38 text-align: left;
29 margin-bottom: $offset !important; 39 margin-bottom: $offset !important;
30 margin-left: $offset; 40 margin-left: $offset;
31 margin-right: $offset; 41 margin-right: $offset;
32 } 42 }
43
44 .surveylist li {
45 margin-left: auto;
46 margin-right: auto;
47 border-style: none;
48 padding-bottom: 0rem;
49 }
50
33 .morphtool { 51 .morphtool {
34 position: relative; 52 position: relative;
35 background-color: white; 53 background-color: white;
36 padding: $small-offset; 54 padding: $small-offset;
37 border-radius: $border-radius; 55 border-radius: $border-radius;
38 height: $icon-width; 56 height: $icon-width;
39 width: $icon-height;
40 margin-right: $offset; 57 margin-right: $offset;
58 margin-top: auto;
59 margin-bottom: auto;
41 z-index: 2; 60 z-index: 2;
42 } 61 }
62
63 .morphcontainer i {
64 margin-right: $small-offset;
65 }
66
43 .morphtoolminus { 67 .morphtoolminus {
44 position: absolute; 68 position: absolute;
45 bottom: 0; 69 top: 0;
46 left: 0; 70 right: 0;
47 background-color: white; 71 background-color: white;
48 padding: $small-offset; 72 padding: $small-offset;
49 border-radius: $border-radius; 73 border-radius: $border-radius;
50 height: $icon-width; 74 height: $icon-width;
51 width: $icon-height; 75 width: $icon-height;