Mercurial > gemma

changeset 887:aae517757923

Find changesets by keywords (author, files, the commit message), revision number or hash, or revset expression.
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>