Mercurial > gemma
changeset 886:b1489669ba52
morphtool layout fixed
author | Thomas Junk <thomas.junk@intevation.de> |
---|---|
date | Mon, 01 Oct 2018 17:29:33 +0200 |
parents | ea580cab3ce2 |
children | aae517757923 |
files | client/src/application/Morphtool.vue |
diffstat | 1 files changed, 30 insertions(+), 23 deletions(-) [+] |
line wrap: on
line diff
--- a/client/src/application/Morphtool.vue Mon Oct 01 17:08:31 2018 +0200 +++ b/client/src/application/Morphtool.vue Mon Oct 01 17:29:33 2018 +0200 @@ -1,42 +1,49 @@ <template> - <div v-if="selectedBottleneck || selectedMorph"> - <div v-if="surveyList" class="ui-element card card-body shadow"> - <div class="headline"> - <h5>{{selectedBottleneck.get("objnam")}}</h5> - </div> - <ul class="list-group"> - <li v-for="survey of surveyList.surveys" :key="survey.data_info" - class="list-group-item" @click.prevent="selectSurvey(survey)"> - <a href="#" @click.prevent="" - >{{survey.date_info}}</a> - </li> - </ul> - <div @click="clearSelection" - class="float-left ui-element d-flex shadow morphtoolminus"> - <i class="fa fa-minus morphtoolsminus"></i> - </div> + <div v-if="selectedBottleneck || selectedMorph" class="morphcontainer"> + <div v-if="surveyList" class="ui-element card card-body shadow"> + <div class="headline"> + <h5>{{selectedBottleneck.get("objnam")}}</h5> + </div> + <ul class="list-group surveylist"> + <li v-for="survey of surveyList.surveys" :key="survey.data_info" class="list-group-item" @click.prevent="selectSurvey(survey)"> + <a href="#" @click.prevent="">{{survey.date_info}}</a> + </li> + </ul> + <div @click="clearSelection" class="float-left ui-element d-flex shadow morphtoolminus"> + <i class="fa fa-minus morphtoolsminus"></i> + </div> + </div> + <div v-else @click="clearSelection" class="float-right ui-element d-flex shadow morphtool"> + <i class="fa fa-object-ungroup"></i> + </div> </div> - <div v-else @click="clearSelection" class="float-right ui-element d-flex shadow morphtool"> - <i class="fa fa-object-ungroup"></i> - </div> - </div> </template> <style lang="scss"> +.morphcontainer { + position: relative; + margin-bottom: $offset; + margin-left: $offset; +} +.surveylist { + margin-bottom: $offset !important; + margin-left: $offset; + margin-right: $offset; +} .morphtool { position: relative; background-color: white; padding: $small-offset; border-radius: $border-radius; - margin-left: $offset; height: $icon-width; width: $icon-height; - margin-bottom: $offset; margin-right: $offset; z-index: 2; } .morphtoolminus { - position: relative; + position: absolute; + bottom: 0; + left: 0; background-color: white; padding: $small-offset; border-radius: $border-radius;