Mercurial > gemma
diff client/src/morphtool/Morphtool.vue @ 1217:ba8cd80d68b6
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 |
line wrap: on
line diff
--- a/client/src/morphtool/Morphtool.vue Mon Nov 19 15:10:09 2018 +0100 +++ b/client/src/morphtool/Morphtool.vue Mon Nov 19 15:20:22 2018 +0100 @@ -1,28 +1,26 @@ <template> - <div class="morphcontainer rounded position-relative"> + <div class="mb-3 ml-auto rounded position-relative"> <div v-if="selectedBottleneck && surveys && !selectedSurvey" class="ui-element bg-white rounded p-3 shadow"> - <div class="headline"> - <h4>{{ selectedBottleneck }}</h4> - <hr> + <h4 class="text-center mx-4">{{ selectedBottleneck }}</h4> + <hr> + <div + @click="$store.dispatch('fairwayprofile/clearSelection');" + class="ui-element d-flex morphtoolminus position-absolute" + > + <i class="fa fa-close p-2"></i> + </div> + <div> <div - @click="$store.dispatch('fairwayprofile/clearSelection');" - class="float-left ui-element d-flex morphtoolminus" - > - <i class="fa fa-close morphtoolsminus"></i> - </div> - </div> - <ul class="list-group surveylist"> - <li v-for="survey of surveys" :key="survey.data_info" - class="list-group-item" + class="my-1" @click.prevent="$store.commit('bottlenecks/setSelectedSurvey', survey)" > <a href="#" @click.prevent>{{ survey.date_info }}</a> - </li> - </ul> + </div> + </div> </div> - <div v-if="selectedSurvey && !showSplitscreen" class="ui-element shadow morphtool rounded"> + <div v-if="selectedSurvey && !showSplitscreen" class="ui-element shadow morphtool rounded position-relative bg-white my-auto"> <div class="d-flex flex-row justify-content-between"> <h6 class="my-auto px-2"> {{ selectedBottleneck }} @@ -36,40 +34,13 @@ </template> <style scoped lang="sass"> -.headline - margin-right: $offset - margin-left: $offset - -.morphcontainer - margin-bottom: $offset - margin-left: auto - -.surveylist - text-align: left - margin-bottom: $offset !important - margin-left: $offset - margin-right: $offset - -.surveylist li - margin-left: auto - margin-right: auto - border-style: none - padding-bottom: 0rem - .morphtool - position: relative - background-color: white height: $icon-width - margin-top: auto - margin-bottom: auto z-index: 2 .morphtoolminus - position: absolute top: 0 right: 0 - background-color: white - padding: $small-offset height: $icon-width width: $icon-height z-index: 2