Mercurial > gemma

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

Find changesets by keywords (author, files, the commit message), revision number or hash, or revset expression.
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
comparison
equal deleted inserted replaced
1216:1c7806728172 1217:ba8cd80d68b6
1 <template> 1 <template>
2 <div class="morphcontainer rounded position-relative"> 2 <div class="mb-3 ml-auto rounded position-relative">
3 <div v-if="selectedBottleneck && surveys && !selectedSurvey" class="ui-element bg-white rounded p-3 shadow"> 3 <div v-if="selectedBottleneck && surveys && !selectedSurvey" class="ui-element bg-white rounded p-3 shadow">
4 <div class="headline"> 4 <h4 class="text-center mx-4">{{ selectedBottleneck }}</h4>
5 <h4>{{ selectedBottleneck }}</h4> 5 <hr>
6 <hr> 6 <div
7 @click="$store.dispatch('fairwayprofile/clearSelection');"
8 class="ui-element d-flex morphtoolminus position-absolute"
9 >
10 <i class="fa fa-close p-2"></i>
11 </div>
12 <div>
7 <div 13 <div
8 @click="$store.dispatch('fairwayprofile/clearSelection');"
9 class="float-left ui-element d-flex morphtoolminus"
10 >
11 <i class="fa fa-close morphtoolsminus"></i>
12 </div>
13 </div>
14 <ul class="list-group surveylist">
15 <li
16 v-for="survey of surveys" 14 v-for="survey of surveys"
17 :key="survey.data_info" 15 :key="survey.data_info"
18 class="list-group-item" 16 class="my-1"
19 @click.prevent="$store.commit('bottlenecks/setSelectedSurvey', survey)" 17 @click.prevent="$store.commit('bottlenecks/setSelectedSurvey', survey)"
20 > 18 >
21 <a href="#" @click.prevent>{{ survey.date_info }}</a> 19 <a href="#" @click.prevent>{{ survey.date_info }}</a>
22 </li> 20 </div>
23 </ul> 21 </div>
24 </div> 22 </div>
25 <div v-if="selectedSurvey && !showSplitscreen" class="ui-element shadow morphtool rounded"> 23 <div v-if="selectedSurvey && !showSplitscreen" class="ui-element shadow morphtool rounded position-relative bg-white my-auto">
26 <div class="d-flex flex-row justify-content-between"> 24 <div class="d-flex flex-row justify-content-between">
27 <h6 class="my-auto px-2"> 25 <h6 class="my-auto px-2">
28 {{ selectedBottleneck }} 26 {{ selectedBottleneck }}
29 ({{ selectedSurvey.date_info }}) 27 ({{ selectedSurvey.date_info }})
30 </h6> 28 </h6>
34 </div> 32 </div>
35 </div> 33 </div>
36 </template> 34 </template>
37 35
38 <style scoped lang="sass"> 36 <style scoped lang="sass">
39 .headline
40 margin-right: $offset
41 margin-left: $offset
42
43 .morphcontainer
44 margin-bottom: $offset
45 margin-left: auto
46
47 .surveylist
48 text-align: left
49 margin-bottom: $offset !important
50 margin-left: $offset
51 margin-right: $offset
52
53 .surveylist li
54 margin-left: auto
55 margin-right: auto
56 border-style: none
57 padding-bottom: 0rem
58
59 .morphtool 37 .morphtool
60 position: relative
61 background-color: white
62 height: $icon-width 38 height: $icon-width
63 margin-top: auto
64 margin-bottom: auto
65 z-index: 2 39 z-index: 2
66 40
67 .morphtoolminus 41 .morphtoolminus
68 position: absolute
69 top: 0 42 top: 0
70 right: 0 43 right: 0
71 background-color: white
72 padding: $small-offset
73 height: $icon-width 44 height: $icon-width
74 width: $icon-height 45 width: $icon-height
75 z-index: 2 46 z-index: 2
76 </style> 47 </style>
77 48