Mercurial > gemma
comparison client/src/morphtool/Morphtool.vue @ 1213:9d93968db2cd
replaced custom css with bootstrap classes
author | Markus Kottlaender <markus@intevation.de> |
---|---|
date | Mon, 19 Nov 2018 14:13:01 +0100 |
parents | b23622905a3f |
children | ba8cd80d68b6 |
comparison
equal
deleted
inserted
replaced
1212:387826a2efd3 | 1213:9d93968db2cd |
---|---|
1 <template> | 1 <template> |
2 <div class="morphcontainer"> | 2 <div class="morphcontainer rounded position-relative"> |
3 <div v-if="selectedBottleneck && surveys && !selectedSurvey" class="ui-element card card-body shadow"> | 3 <div v-if="selectedBottleneck && surveys && !selectedSurvey" class="ui-element bg-white rounded p-3 shadow"> |
4 <div class="headline"> | 4 <div class="headline"> |
5 <h4>{{ selectedBottleneck }}</h4> | 5 <h4>{{ selectedBottleneck }}</h4> |
6 <hr> | 6 <hr> |
7 <div | 7 <div |
8 @click="$store.dispatch('fairwayprofile/clearSelection');" | 8 @click="$store.dispatch('fairwayprofile/clearSelection');" |
20 > | 20 > |
21 <a href="#" @click.prevent>{{ survey.date_info }}</a> | 21 <a href="#" @click.prevent>{{ survey.date_info }}</a> |
22 </li> | 22 </li> |
23 </ul> | 23 </ul> |
24 </div> | 24 </div> |
25 <div v-if="selectedSurvey && !showSplitscreen" class="ui-element shadow morphtool"> | 25 <div v-if="selectedSurvey && !showSplitscreen" class="ui-element shadow morphtool rounded"> |
26 <div class="d-flex flex-row justify-content-between"> | 26 <div class="d-flex flex-row justify-content-between"> |
27 <h6 class="my-auto px-2"> | 27 <h6 class="my-auto px-2"> |
28 {{ selectedBottleneck }} | 28 {{ selectedBottleneck }} |
29 ({{ selectedSurvey.date_info }}) | 29 ({{ selectedSurvey.date_info }}) |
30 </h6> | 30 </h6> |
41 margin-left: $offset | 41 margin-left: $offset |
42 | 42 |
43 .morphcontainer | 43 .morphcontainer |
44 margin-bottom: $offset | 44 margin-bottom: $offset |
45 margin-left: auto | 45 margin-left: auto |
46 border-radius: $border-radius | |
47 | 46 |
48 .surveylist | 47 .surveylist |
49 text-align: left | 48 text-align: left |
50 margin-bottom: $offset !important | 49 margin-bottom: $offset !important |
51 margin-left: $offset | 50 margin-left: $offset |
58 padding-bottom: 0rem | 57 padding-bottom: 0rem |
59 | 58 |
60 .morphtool | 59 .morphtool |
61 position: relative | 60 position: relative |
62 background-color: white | 61 background-color: white |
63 border-radius: $border-radius | |
64 height: $icon-width | 62 height: $icon-width |
65 margin-top: auto | 63 margin-top: auto |
66 margin-bottom: auto | 64 margin-bottom: auto |
67 z-index: 2 | 65 z-index: 2 |
68 | 66 |
70 position: absolute | 68 position: absolute |
71 top: 0 | 69 top: 0 |
72 right: 0 | 70 right: 0 |
73 background-color: white | 71 background-color: white |
74 padding: $small-offset | 72 padding: $small-offset |
75 border-radius: $border-radius | |
76 height: $icon-width | 73 height: $icon-width |
77 width: $icon-height | 74 width: $icon-height |
78 z-index: 2 | 75 z-index: 2 |
79 </style> | 76 </style> |
80 | 77 |