Mercurial > gemma

comparison client/src/systemconfiguration/systemconfiguration.vue @ 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 9aa545585bdd
children ca628dce90dd
comparison
equal deleted inserted replaced
886:b1489669ba52 887:aae517757923
1 <template> 1 <template>
2 <div class="d-flex flex-row"> 2 <div class="d-flex flex-row">
3 <div class="card sysconfig"> 3 <div class="card sysconfig">
4 <div class="card-header shadow-sm text-white bg-info mb-6"> 4 <div class="card-header shadow-sm text-white bg-info mb-6">
5 Systemconfiguration 5 Systemconfiguration
6 </div> 6 </div>
7 <div class="card-body"> 7 <div class="card-body config">
8 <h4>Bottleneck Areas stroke-color</h4> 8 <section class="configsection">
9 <compact-picker v-model="strokeColor" /> 9 <h4 class="card-title">Bottleneck Areas stroke-color</h4>
10 <h4>Bottleneck Areas fill-color</h4> 10 <compact-picker v-model="strokeColor" />
11 <chrome-picker v-model="fillColor" /> 11 </section>
12 <div class="sendbutton"> 12 <section>
13 <a @click.prevent="submit" class="btn btn-info">Send</a> 13 <h4 class="card-title">Bottleneck Areas fill-color</h4>
14 <chrome-picker v-model="fillColor" />
15 </section>
16 <div class="sendbutton">
17 <a @click.prevent="submit" class="btn btn-info">Send</a>
18 </div>
19 </div> <!-- card-body -->
14 </div> 20 </div>
15 </div> <!-- card-body -->
16 </div> 21 </div>
17 </div>
18 </template> 22 </template>
19 23
20 <style lang="scss"> 24 <style scoped lang="scss">
25 .config {
26 text-align: left;
27 }
28 .configsection {
29 margin-bottom: $large-offset;
30 }
21 .sendbutton { 31 .sendbutton {
22 position: absolute; 32 position: absolute;
23 right: $large-offset; 33 right: $offset;
24 bottom: $large-offset; 34 bottom: $offset;
25 } 35 }
26 .inputs { 36 .inputs {
27 margin-left: auto; 37 margin-left: auto;
28 margin-right: auto; 38 margin-right: auto;
29 } 39 }
30 .sysconfig { 40 .sysconfig {
31 margin-top: $offset; 41 margin-top: $offset;
32 margin-left: 30vw; 42 margin-left: auto;
33 margin-right: auto; 43 margin-right: auto;
34 width: 60vw; 44 width: 30vw;
35 max-width: 500px;
36 mind-heigth: 500px;
37 height: 80vh;
38 } 45 }
39 </style> 46 </style>
40 47
41 <script> 48 <script>
42 import { Chrome } from "vue-color"; 49 import { Chrome } from "vue-color";