Mercurial > gemma
changeset 1151:a499f450420e
feat: Import sounding results UI improvements
| author | Thomas Junk <thomas.junk@intevation.de> |
|---|---|
| date | Tue, 13 Nov 2018 11:50:14 +0100 |
| parents | 7acd24889f1d |
| children | 7cb06f85a905 |
| files | client/src/imports/Imports.vue |
| diffstat | 1 files changed, 21 insertions(+), 13 deletions(-) [+] |
line wrap: on
line diff
--- a/client/src/imports/Imports.vue Tue Nov 13 11:44:46 2018 +0100 +++ b/client/src/imports/Imports.vue Tue Nov 13 11:50:14 2018 +0100 @@ -6,11 +6,16 @@ class="card-header shadow-sm text-white bg-info mb-3" >Import of sounding results</div> <div class="card-body importcardbody"> - <div class="input-group mb-4"> - <div class="input-group-prepend"> - <span class="input-group-text" id="bottlenecklabel">Bottleneck</span> + <div class="d-flex flex-row input-group mb-4"> + <div class=""> + <label + for="bottleneck" + class="label-text" + id="bottlenecklabel" + >Bottleneck</label> </div> <input + id="bottleneck" type="text" class="form-control" placeholder="Name of Bottleneck" @@ -19,12 +24,13 @@ v-model="bottleneck" > </div> - <div class="input-group mb-4"> - <div class="input-group-prepend"> - <span class="input-group-text" id="importdatelabel">Date</span> + <div class="d-flex flex-row input-group mb-4"> + <div class=""> + <label class="label-text" for="importdate" id="importdatelabel">Date</label> </div> <input - type="text" + id="importdate" + type="date" class="form-control" placeholder="Date of import" aria-label="bottleneck" @@ -32,9 +38,9 @@ v-model="importDate" > </div> - <div class="input-group mb-4"> - <div class="input-group-prepend"> - <label class="input-group-text" for="inputGroupSelect01">Depth reference</label> + <div class="d-flex flex-row input-group mb-5"> + <div class=""> + <label class="label-text" for="depthreference">Depth reference</label> </div> <select v-model="depthReference" class="custom-select" id="depthreference"> <option @@ -43,7 +49,7 @@ >{{option}}</option> </select> </div> - <div class="input-group mb-4"> + <div class="input-group mb-5"> <div class="custom-file"> <input type="file" class="custom-file-input" id="inputGroupFile04"> <label class="custom-file-label" for="inputGroupFile04">Choose file</label> @@ -114,8 +120,10 @@ </script> <style lang="scss" scoped> -.input-group-text { +.label-text { width: 10rem; + text-align: left; + line-height: 2.25rem; } .importcard { height: 100%; @@ -129,7 +137,7 @@ .imports { background-color: white; width: 40rem; - height: 25rem; + height: 28rem; margin-left: auto; margin-right: auto; margin-top: $offset;