Mercurial > gemma
changeset 3710:017827d9bb14
client: available fairway depth dialog: improved type selection
clickable radio button labels and cross browser style from bootstrap
| author | Markus Kottlaender <markus@intevation.de> |
|---|---|
| date | Thu, 20 Jun 2019 11:49:51 +0200 |
| parents | d4a8d084eab4 |
| children | 3d2b8f542d89 |
| files | client/src/components/fairway/AvailableFairwayDepthDialogue.vue |
| diffstat | 1 files changed, 49 insertions(+), 16 deletions(-) [+] |
line wrap: on
line diff
--- a/client/src/components/fairway/AvailableFairwayDepthDialogue.vue Thu Jun 20 11:16:14 2019 +0200 +++ b/client/src/components/fairway/AvailableFairwayDepthDialogue.vue Thu Jun 20 11:49:51 2019 +0200 @@ -10,23 +10,50 @@ <div class="box-body"> <UISpinnerOverlay v-if="loading" /> <div class="mb-2 d-flex justify-content-between align-items-center"> - <div> - <input :value="$options.BOTTLENECK" type="radio" v-model="type" /> - <small class="ml-1 text-muted"> + <div class="custom-control custom-radio custom-control-inline mr-2"> + <input + :value="$options.BOTTLENECK" + type="radio" + v-model="type" + id="type-bottleneck" + class="custom-control-input" + /> + <label + class="custom-control-label small d-flex align-items-center" + for="type-bottleneck" + > <translate>Bottlenecks</translate> - </small> + </label> </div> - <div> - <input :value="$options.STRETCH" type="radio" v-model="type" /> - <small class="ml-1 text-muted"> + <div class="custom-control custom-radio custom-control-inline mr-2"> + <input + :value="$options.STRETCH" + type="radio" + v-model="type" + id="type-stretch" + class="custom-control-input" + /> + <label + class="custom-control-label small d-flex align-items-center" + for="type-stretch" + > <translate>Stretches</translate> - </small> + </label> </div> - <div> - <input :value="$options.SECTION" type="radio" v-model="type" /> - <small class="ml-1 text-muted"> + <div class="custom-control custom-radio custom-control-inline"> + <input + :value="$options.SECTION" + type="radio" + v-model="type" + id="type-section" + class="custom-control-input" + /> + <label + class="custom-control-label small d-flex align-items-center" + for="type-section" + > <translate>Sections</translate> - </small> + </label> </div> </div> <select @@ -214,11 +241,17 @@ </div> </template> -<style lang="scss" scoped> +<style lang="sass" scoped> input, -select { - font-size: 0.8em; -} +select + font-size: 0.8em + +.custom-control + padding-left: 1.2rem + .custom-control-label + &::before, + &::after + left: -1.2rem </style> <script>