Mercurial > gemma
changeset 4414:b5290f4a35f4
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