Mercurial > gemma
changeset 1211:55eae66af749
relayouting soundingresults
author | Thomas Junk <thomas.junk@intevation.de> |
---|---|
date | Mon, 19 Nov 2018 13:42:20 +0100 |
parents | f14293893430 |
children | 387826a2efd3 |
files | client/src/application/assets/application.sass client/src/imports/Imports.vue |
diffstat | 2 files changed, 25 insertions(+), 10 deletions(-) [+] |
line wrap: on
line diff
--- a/client/src/application/assets/application.sass Mon Nov 19 13:38:43 2018 +0100 +++ b/client/src/application/assets/application.sass Mon Nov 19 13:42:20 2018 +0100 @@ -35,6 +35,9 @@ $xx-large-offset: 5rem $x-small-offset: 0.25rem +.w-90 + width: 90% + .debug border: 1px solid red
--- a/client/src/imports/Imports.vue Mon Nov 19 13:38:43 2018 +0100 +++ b/client/src/imports/Imports.vue Mon Nov 19 13:42:20 2018 +0100 @@ -1,19 +1,17 @@ <template> <div :class="importStyle"> - <div @click="$store.commit('application/showImportSoundingResults', false);" class="ui-element close-imports"> + <div + @click="$store.commit('application/showImportSoundingResults', false);" + class="ui-element close-imports" + > <i class="fa fa-close"></i> </div> - <h4>Import soundingresults</h4> - <hr class="mb-0"> - <div class="p-3"> + <hr class="mr-auto ml-auto mb-0 w-90"> + <div v-if="editState" class="p-3"> <div class="d-flex flex-row input-group mb-4"> <div class=""> - <label - for="bottleneck" - class="label-text" - id="bottlenecklabel" - >Bottleneck</label> + <label for="bottleneck" class="label-text" id="bottlenecklabel">Bottleneck</label> </div> <input id="bottleneck" @@ -50,6 +48,8 @@ >{{option}}</option> </select> </div> + </div> + <div class="uploadsection mr-auto ml-auto mt-4 mb-4"> <div class="d-flex flex-row input-group mb-4"> <div class="custom-file"> <input @@ -63,6 +63,7 @@ </div> <div class="downloadbtn text-right"> <a + v-if="editState" download="meta.json" :href="dataLink " class="btn btn-outline-info mr-2" @@ -83,12 +84,14 @@ import { displayError, displayInfo } from "../application/lib/errors.js"; import { mapState } from "vuex"; -const defaultLabel = "Choose file"; +const defaultLabel = "Choose .zip-file"; +const IMPORTSTATE = { UPLOAD: "UPLOAD", EDIT: "EDIT" }; export default { name: "imports", data() { return { + importState: IMPORTSTATE.UPLOAD, depthReference: "", bottleneck: "", importDate: "", @@ -130,6 +133,12 @@ }, computed: { ...mapState("application", ["showImportSoundingResults"]), + editState() { + return this.importState === IMPORTSTATE.EDIT; + }, + uploadState() { + return this.importState === IMPORTSTATE.UPLOAD; + }, importStyle() { return [ "ui-element shadow imports", @@ -179,6 +188,8 @@ </script> <style lang="sass" scoped> +.uploadsection + width: 90% .imports position: relative background-color: #ffffff @@ -190,6 +201,7 @@ background: #fff margin-left: $offset margin-top: -$offset + width: 90% .importscollapsed width: 0