Mercurial > gemma
annotate client/src/staging/Staging.vue @ 1213:9d93968db2cd
replaced custom css with bootstrap classes
| author | Markus Kottlaender <markus@intevation.de> |
|---|---|
| date | Mon, 19 Nov 2018 14:13:01 +0100 |
| parents | 8df4ebbc5c3f |
| children | 5a8e8ee9034d |
| rev | line source |
|---|---|
| 1208 | 1 <template> |
|
1213
9d93968db2cd
replaced custom css with bootstrap classes
Markus Kottlaender <markus@intevation.de>
parents:
1208
diff
changeset
|
2 <div v-if="showStagingArea" class="staging-card bg-white mx-auto rounded position-relative"> |
|
9d93968db2cd
replaced custom css with bootstrap classes
Markus Kottlaender <markus@intevation.de>
parents:
1208
diff
changeset
|
3 <div class="p-3"> |
| 1208 | 4 <div |
| 5 @click="$store.commit('application/showStagingArea', !showStagingArea);" | |
|
1213
9d93968db2cd
replaced custom css with bootstrap classes
Markus Kottlaender <markus@intevation.de>
parents:
1208
diff
changeset
|
6 class="ui-element close-showStagingArea position-absolute" |
| 1208 | 7 > |
| 8 <i class="fa fa-close"></i> | |
| 9 </div> | |
| 10 <div class="card-title mb-4 headline"> | |
| 11 <h4>Staging area</h4> | |
| 12 <hr> | |
| 13 </div> | |
| 14 <div class="d-flex flex-row input-group mb-4"></div> | |
| 15 </div> | |
| 16 </div> | |
| 17 </template> | |
| 18 | |
| 19 <script> | |
| 20 import { mapState } from "vuex"; | |
| 21 export default { | |
| 22 computed: { | |
| 23 ...mapState("application", ["showStagingArea"]) | |
| 24 } | |
| 25 }; | |
| 26 </script> | |
| 27 | |
| 28 <style lang="sass" scoped> | |
| 29 .close-showStagingArea | |
| 30 z-index: 2 | |
| 31 right: 0 | |
| 32 top: 7px | |
| 33 height: $icon-width | |
| 34 width: $icon-height | |
| 35 | |
| 36 .staging-card | |
| 37 width: 30rem | |
| 38 height: 28rem | |
| 39 opacity: $slight-transparent | |
| 40 </style> |