Mercurial > gemma
changeset 887:aae517757923
fix: layout systemconfig
author | Thomas Junk <thomas.junk@intevation.de> |
---|---|
date | Mon, 01 Oct 2018 17:41:00 +0200 |
parents | b1489669ba52 |
children | 2e2ac0b88af9 |
files | client/src/systemconfiguration/systemconfiguration.vue |
diffstat | 1 files changed, 29 insertions(+), 22 deletions(-) [+] |
line wrap: on
line diff
--- a/client/src/systemconfiguration/systemconfiguration.vue Mon Oct 01 17:29:33 2018 +0200 +++ b/client/src/systemconfiguration/systemconfiguration.vue Mon Oct 01 17:41:00 2018 +0200 @@ -1,27 +1,37 @@ <template> - <div class="d-flex flex-row"> - <div class="card sysconfig"> - <div class="card-header shadow-sm text-white bg-info mb-6"> - Systemconfiguration - </div> - <div class="card-body"> - <h4>Bottleneck Areas stroke-color</h4> - <compact-picker v-model="strokeColor" /> - <h4>Bottleneck Areas fill-color</h4> - <chrome-picker v-model="fillColor" /> - <div class="sendbutton"> - <a @click.prevent="submit" class="btn btn-info">Send</a> + <div class="d-flex flex-row"> + <div class="card sysconfig"> + <div class="card-header shadow-sm text-white bg-info mb-6"> + Systemconfiguration + </div> + <div class="card-body config"> + <section class="configsection"> + <h4 class="card-title">Bottleneck Areas stroke-color</h4> + <compact-picker v-model="strokeColor" /> + </section> + <section> + <h4 class="card-title">Bottleneck Areas fill-color</h4> + <chrome-picker v-model="fillColor" /> + </section> + <div class="sendbutton"> + <a @click.prevent="submit" class="btn btn-info">Send</a> + </div> + </div> <!-- card-body --> </div> - </div> <!-- card-body --> </div> - </div> </template> -<style lang="scss"> +<style scoped lang="scss"> +.config { + text-align: left; +} +.configsection { + margin-bottom: $large-offset; +} .sendbutton { position: absolute; - right: $large-offset; - bottom: $large-offset; + right: $offset; + bottom: $offset; } .inputs { margin-left: auto; @@ -29,12 +39,9 @@ } .sysconfig { margin-top: $offset; - margin-left: 30vw; + margin-left: auto; margin-right: auto; - width: 60vw; - max-width: 500px; - mind-heigth: 500px; - height: 80vh; + width: 30vw; } </style>