Mercurial > gemma
changeset 892:81b84ad962f8
morphtool streamlined
author | Thomas Junk <thomas.junk@intevation.de> |
---|---|
date | Tue, 02 Oct 2018 14:34:57 +0200 |
parents | 074ce4891466 |
children | 5ea4c3f5d2a7 |
files | client/src/application/Morphtool.vue |
diffstat | 1 files changed, 37 insertions(+), 13 deletions(-) [+] |
line wrap: on
line diff
--- a/client/src/application/Morphtool.vue Tue Oct 02 13:40:53 2018 +0200 +++ b/client/src/application/Morphtool.vue Tue Oct 02 14:34:57 2018 +0200 @@ -2,48 +2,72 @@ <div v-if="selectedBottleneck || selectedMorph" class="morphcontainer"> <div v-if="surveyList && !drawmode" class="ui-element card card-body shadow"> <div class="headline"> - <h5>{{selectedBottleneck.get("objnam")}}</h5> + <h4>{{selectedBottleneck.get("objnam")}}</h4> + <hr> + <div @click="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 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="selectedMorph" @click="clearSelection" class="ui-element shadow morphtool"> + <div class="d-flex flex-row justify-content-between"> + <i class="fa fa-close"></i> + <h6>{{selectedBottleneck.get("objnam")}}</h6> </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; +<style scoped lang="scss"> +.headline { + margin-right: $offset; margin-left: $offset; } +.morphcontainer { + margin-bottom: $offset; + margin-left: auto; + margin-right: auto; + border-radius: $border-radius; +} .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; padding: $small-offset; border-radius: $border-radius; height: $icon-width; - width: $icon-height; margin-right: $offset; + margin-top: auto; + margin-bottom: auto; z-index: 2; } + +.morphcontainer i { + margin-right: $small-offset; +} + .morphtoolminus { position: absolute; - bottom: 0; - left: 0; + top: 0; + right: 0; background-color: white; padding: $small-offset; border-radius: $border-radius;