Mercurial > gemma
changeset 3199:25a26f666ee8
statistics: layout
author | Thomas Junk <thomas.junk@intevation.de> |
---|---|
date | Wed, 08 May 2019 15:54:40 +0200 |
parents | b0328646e34f |
children | f7d7fdc58cad |
files | client/src/components/Statistics.vue |
diffstat | 1 files changed, 58 insertions(+), 37 deletions(-) [+] |
line wrap: on
line diff
--- a/client/src/components/Statistics.vue Wed May 08 15:26:59 2019 +0200 +++ b/client/src/components/Statistics.vue Wed May 08 15:54:40 2019 +0200 @@ -9,7 +9,9 @@ <UIBoxHeader icon="chart-line" :title="label" :closeCallback="close" /> <div class="box-body"> <UISpinnerOverlay v-if="loading" /> - <div class="mb-3 d-flex flex-row justify-content-between"> + <div + class="mb-3 d-flex flex-row justify-content-between align-items-center" + > <div> <input :value="$options.BOTTLENECKS" type="radio" v-model="type" /> <small class="ml-1 text-muted"> @@ -32,7 +34,7 @@ <div class="d-flex flex-column"> <select @change="entrySelected" - class="form-control font-weight-bold" + class="form-control form-control-sm font-weight-bold" v-model="selectedEntry" > <option :value="null">{{ empty }}</option> @@ -45,41 +47,55 @@ </select> </div> <div class="d-flex flex-column mt-3"> - <div class="d-flex flex-column mb-3"> - <small class="my-auto text-muted" - ><translate>Type</translate></small - > - <select v-model="selectedFrequency" class="form-control"> - <option - v-for="(option, index) in $options.FREQUENCIES" - :value="option" - :key="index" - ><translate>{{ option }}</translate></option + <div class="d-flex flex-row w-100"> + <div class="d-flex flex-column mb-3 w-50 mr-1"> + <small class="my-auto text-muted" + ><translate>Type</translate></small + > + <select + v-model="selectedFrequency" + class="form-control form-control-sm" > - </select> + <option + v-for="(option, index) in $options.FREQUENCIES" + :value="option" + :key="index" + ><translate>{{ option }}</translate></option + > + </select> + </div> + <div class="d-flex flex-column mb-3 w-50 ml-1"> + <small class="my-auto text-muted" + ><translate>LOS</translate></small + > + <select v-model="los" class="form-control form-control-sm"> + <option value="1">1</option> + <option value="2">2</option> + <option value="3">3</option> + </select> + </div> </div> - <div class="d-flex flex-column mb-3"> - <small class="my-auto text-muted"><translate>LOS</translate></small> - <select v-model="los" class="form-control"> - <option value="1">1</option> - <option value="2">2</option> - <option value="3">3</option> - </select> - </div> - <div class="d-flex flex-column mb-3"> - <small for="from" class="my-auto text-muted" - ><translate>Date from</translate></small - ><input - id="from" - v-model="fromDate" - class="form-control" - type="date" - /> - </div> - <div class="d-flex flex-column"> - <small for="to" class="my-auto text-muted" - ><translate>Date to</translate></small - ><input id="to" v-model="toDate" class="form-control" type="date" /> + <div class="d-flex flex-row w-100"> + <div class="d-flex flex-column w-50 mr-1"> + <small for="from" class="my-auto text-muted" + ><translate>Date from</translate></small + ><input + id="from" + v-model="fromDate" + class="form-control form-control-sm" + type="date" + /> + </div> + <div class="d-flex flex-column w-50 ml-1"> + <small for="to" class="my-auto text-muted" + ><translate>Date to</translate></small + ><input + id="to" + v-model="toDate" + class="form-control form-control-sm" + type="date" + /> + </div> </div> </div> <div class="mt-3"> @@ -96,6 +112,13 @@ </div> </template> +<style lang="scss" scoped> +input, +select { + font-size: 0.8em; +} +</style> + <script> /* This is Free Software under GNU Affero General Public License v >= 3.0 * without warranty, see README.md and license for details. @@ -296,5 +319,3 @@ } }; </script> - -<style></style>