Mercurial > gemma
changeset 1218:b0c98a31cb4e
staging layout
author | Thomas Junk <thomas.junk@intevation.de> |
---|---|
date | Mon, 19 Nov 2018 15:25:00 +0100 |
parents | ba8cd80d68b6 |
children | 53981be1abe6 |
files | client/src/staging/Staging.vue |
diffstat | 1 files changed, 33 insertions(+), 7 deletions(-) [+] |
line wrap: on
line diff
--- a/client/src/staging/Staging.vue Mon Nov 19 15:20:22 2018 +0100 +++ b/client/src/staging/Staging.vue Mon Nov 19 15:25:00 2018 +0100 @@ -1,8 +1,5 @@ <template> - <div - v-if="showStagingArea" - class="ui-element staging-card bg-white mx-auto rounded position-relative" - > + <div v-if="showStagingArea" :class="stagingAreaStyle"> <div class="p-3"> <div @click="$store.commit('application/showStagingArea', !showStagingArea);" @@ -19,6 +16,7 @@ <thead> <tr> <th>Name</th> + <th>Location</th> <th>Datatype</th> <th>Importdate</th> <th>ImportID</th> @@ -28,6 +26,7 @@ <tbody> <tr v-for="data in filteredData" :key="data.id"> <td>{{data.name}}</td> + <td>{{data.location}}</td> <td>{{data.date}}</td> <td>{{data.type}}</td> <td>{{data.importID}}</td> @@ -53,6 +52,7 @@ id: 1, name: "B1", date: "2018-11-19", + location: "bla", status: "Not approved", importID: "123456789", type: "bottleneck" @@ -61,6 +61,7 @@ id: 2, name: "B2", date: "2018-11-19", + location: "bla", status: "Not approved", importID: "123456789", type: "bottleneck" @@ -69,6 +70,7 @@ id: 3, name: "s1", date: "2018-11-13", + location: "bla", status: "Not approved", importID: "987654321", type: "soundingresult" @@ -77,6 +79,7 @@ id: 4, name: "s2", date: "2018-11-13", + location: "bla", status: "Not approved", importID: "987654321", type: "soundingresult" @@ -88,6 +91,15 @@ ...mapState("application", ["showStagingArea"]), filteredData() { return demodata; + }, + stagingAreaStyle() { + return [ + "ui-element staging-card bg-white mx-auto rounded position-relative", + { + stagingcollapsed: !this.showStagingArea, + stagingextended: this.showStagingArea + } + ]; } } }; @@ -101,11 +113,25 @@ height: $icon-width width: $icon-height +.stagingcollapsed + width: 0 + height: 0 + transition: $transition-fast + +.stagingextended + min-width: 600px + .staging-card - width: 30rem - height: 28rem + position: relative + background-color: #ffffff + padding-top: $offset opacity: $slight-transparent - min-width: 600px + transition: left 0.3s ease + overflow: hidden + background: #fff + margin-left: $offset !important + margin-top: -$offset !important + width: 90% .table th, td