Mercurial > gemma

changeset 4414:b5290f4a35f4

Find changesets by keywords (author, files, the commit message), revision number or hash, or revset expression.
color_settings: improving layout breaks of color settings with bigger boxes
author Thomas Junk <thomas.junk@intevation.de>
date Wed, 18 Sep 2019 10:37:54 +0200
parents a554d7ca26ee
children 8dde014af77b
files client/src/components/systemconfiguration/ColorSettings.vue
diffstat 1 files changed, 11 insertions(+), 7 deletions(-) [+]
line wrap: on
line diff
--- a/client/src/components/systemconfiguration/ColorSettings.vue	Tue Sep 17 17:24:03 2019 +0200
+++ b/client/src/components/systemconfiguration/ColorSettings.vue	Wed Sep 18 10:37:54 2019 +0200
@@ -2,7 +2,7 @@
   <div class="d-flex flex-column py-3">
     <div class="px-3 container-fluid">
       <div class="row">
-        <div v-for="f in features" :key="f.key" class="col-sm-2 mt-2">
+        <div v-for="f in features" :key="f.key" class="col-sm-3 mt-2 mb-4">
           <div v-if="f.fillColor" class="card mt-3">
             <div class="card-header small text-center">
               <span v-translate="{ layerName: f.name }"
@@ -36,28 +36,29 @@
               </div>
             </div>
           </div>
-          <div class="mt-2">
+          <div class="d-flex text-right mt-2 mb-4">
             <a
               @click.prevent="submit(f)"
-              class="btn btn-info btn-sm text-white"
+              class="w-50 btn btn-info btn-sm text-white"
             >
               <translate>Send</translate>
             </a>
             <a
               @click.prevent="reset(f)"
-              class="btn btn-outline-info btn-sm ml-2"
+              class="w-50 btn btn-outline-info btn-sm ml-2"
             >
               <translate>Reset to defaults</translate>
             </a>
           </div>
+          <hr />
         </div>
-        <div class="col-sm-2 align-self-end px-1">
-          <a @click.prevent="resetAll" class="btn btn-outline-info btn-sm"
+        <div class="d-flex col-sm-3 align-self-end text-right savebuttons">
+          <a @click.prevent="resetAll" class="w-50 btn btn-outline-info btn-sm"
             ><translate>Reset all to defaults</translate>
           </a>
           <a
             @click.prevent="saveAll"
-            class="btn btn-info ml-1 btn-sm text-white "
+            class="w-50 btn btn-info ml-1 btn-sm text-white "
             ><translate>Send all</translate>
           </a>
         </div>
@@ -67,6 +68,9 @@
 </template>
 
 <style lang="sass" scoped>
+.savebuttons
+ position:relative
+ top: -4em;
 /deep/
   .card
     overflow: hidden