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