Mercurial > gemma
changeset 1455:33dda08d67be
unified layout for adminsection
author | Thomas Junk <thomas.junk@intevation.de> |
---|---|
date | Mon, 03 Dec 2018 12:02:17 +0100 |
parents | 5e8bb2b96232 |
children | 024de29c8325 |
files | client/src/assets/application.scss client/src/components/Sidebar.vue client/src/components/admin/Importqueue.vue client/src/components/admin/Logs.vue client/src/components/admin/Systemconfiguration.vue client/src/components/admin/importschedule/Importschedule.vue client/src/components/admin/importschedule/Importscheduledetail.vue client/src/components/admin/usermanagement/Userdetail.vue client/src/components/admin/usermanagement/Usermanagement.vue |
diffstat | 9 files changed, 86 insertions(+), 54 deletions(-) [+] |
line wrap: on
line diff
--- a/client/src/assets/application.scss Mon Dec 03 11:00:54 2018 +0100 +++ b/client/src/assets/application.scss Mon Dec 03 12:02:17 2018 +0100 @@ -103,3 +103,12 @@ .fix-trans-space:before { content: " "; } + +.closebutton { + position: absolute; + right: $offset; +} + +.headline { + font-weight: bold; +}
--- a/client/src/components/Sidebar.vue Mon Dec 03 11:00:54 2018 +0100 +++ b/client/src/components/Sidebar.vue Mon Dec 03 12:02:17 2018 +0100 @@ -195,5 +195,6 @@ .sidebarextended { max-height: 35rem; max-width: $sidebar-width; + min-width: $sidebar-width; } </style>
--- a/client/src/components/admin/Importqueue.vue Mon Dec 03 11:00:54 2018 +0100 +++ b/client/src/components/admin/Importqueue.vue Mon Dec 03 12:02:17 2018 +0100 @@ -1,11 +1,12 @@ <template> <div class="d-flex flex-row"> <div :class="spacerStyle"></div> - <div class="mt-3 mx-auto"> - <div class="card importqueuecard"> - <div class="card-header shadow-sm text-white bg-info mb-3"> - <translate>Importqueue</translate> - </div> + <div class="mt-3"> + <div class="card importqueuecard shadow-xs"> + <h6 class="mb-0 py-2 px-3 border-bottom d-flex text-info align-items-center"> + <font-awesome-icon icon="tasks" class="mr-2"></font-awesome-icon> + <translate class="headline">Importqueue</translate> + </h6> <div class="card-body importcardbody"> <div class="card-body importcardbody"> <div class="searchandfilter d-flex flex-row">
--- a/client/src/components/admin/Logs.vue Mon Dec 03 11:00:54 2018 +0100 +++ b/client/src/components/admin/Logs.vue Mon Dec 03 12:02:17 2018 +0100 @@ -2,7 +2,7 @@ <div class="main d-flex flex-column"> <div class="d-flex flex-row"> <div :class="spacer"></div> - <div class="logoutput text-left bg-white shadow mt-3 mx-3"> + <div class="logoutput text-left bg-white shadow-xs mt-3 mx-3"> <pre id="code" v-highlightjs="logs"><code class="bash hljs hljs-string"></code></pre> </div> </div>
--- a/client/src/components/admin/Systemconfiguration.vue Mon Dec 03 11:00:54 2018 +0100 +++ b/client/src/components/admin/Systemconfiguration.vue Mon Dec 03 12:02:17 2018 +0100 @@ -1,9 +1,11 @@ <template> <div class="d-flex flex-row"> - <div class="card sysconfig mt-3 mx-auto"> - <div class="card-header shadow-sm text-white bg-info mb-6"> - <translate>Systemconfiguration</translate> - </div> + <div :class="spacerStyle"></div> + <div class="card sysconfig mt-3 shadow-xs"> + <h6 class="mb-0 py-2 px-3 border-bottom d-flex text-info align-items-center"> + <font-awesome-icon icon="wrench" class="mr-2"></font-awesome-icon> + <translate class="headline">Systemconfiguration</translate> + </h6> <div class="card-body config"> <section class="configsection"> <h4 class="card-title"> @@ -18,7 +20,7 @@ <chrome-picker v-model="fillColor"/> </section> <div class="sendbutton"> - <a @click.prevent="submit" class="btn btn-info"> + <a @click.prevent="submit" class="btn btn-info text-white"> <translate>Send</translate> </a> </div> @@ -50,6 +52,20 @@ .sysconfig { width: 30vw; + height: 100%; +} + +.spacer { + height: 100vh; +} + +.spacer-collapsed { + min-width: $icon-width + $offset; + transition: $transition-fast; +} + +.spacer-expanded { + min-width: $sidebar-width + $offset; } </style> @@ -73,6 +89,7 @@ import { HTTP } from "../../lib/http"; import { displayError } from "../../lib/errors.js"; +import { mapState } from "vuex"; export default { name: "systemconfiguration", data() { @@ -83,7 +100,22 @@ currentConfig: null }; }, - components: { "chrome-picker": Chrome, "compact-picker": Compact }, + components: { + "chrome-picker": Chrome, + "compact-picker": Compact + }, + computed: { + ...mapState("application", ["showSidebar"]), + spacerStyle() { + return [ + "spacer ml-3", + { + "spacer-expanded": this.showSidebar, + "spacer-collapsed": !this.showSidebar + } + ]; + } + }, methods: { submit() { HTTP.put("/system/style/Bottlenecks/stroke", this.strokeColor.rgba, {
--- a/client/src/components/admin/importschedule/Importschedule.vue Mon Dec 03 11:00:54 2018 +0100 +++ b/client/src/components/admin/importschedule/Importschedule.vue Mon Dec 03 12:02:17 2018 +0100 @@ -2,10 +2,11 @@ <div class="d-flex flex-row"> <div :class="spacerStyle"></div> <div class="mt-3"> - <div class="card schedulecard"> - <div class="card-header shadow-sm text-white bg-info mb-3"> - <translate>Importschedule</translate> - </div> + <div class="card schedulecard shadow-xs"> + <h6 class="mb-0 py-2 px-3 border-bottom d-flex text-info align-items-center"> + <font-awesome-icon icon="clock" class="mr-2"></font-awesome-icon> + <translate class="headline">Importschedule</translate> + </h6> <div class="card-body schedulecardbody"> <div class="card-body schedulecardbody"> <div class="searchandfilter d-flex flex-row">
--- a/client/src/components/admin/importschedule/Importscheduledetail.vue Mon Dec 03 11:00:54 2018 +0100 +++ b/client/src/components/admin/importschedule/Importscheduledetail.vue Mon Dec 03 12:02:17 2018 +0100 @@ -1,11 +1,12 @@ <template> - <div v-if="importScheduleDetailVisible"> - <div class="card"> - <div class="card-header shadow-sm text-white bg-info mb-3"> - <span @click="closeDetailview" class="pull-right"> + <div class="importscheduledetails" v-if="importScheduleDetailVisible"> + <div class="card shadow-xs"> + <h6 class="mb-0 py-2 px-3 border-bottom d-flex text-info align-items-center"> + <translate>New import</translate> + <span @click="closeDetailview" class="closebutton"> <font-awesome-icon icon="times"></font-awesome-icon> </span> - </div> + </h6> <div class="card-body"> <h1>lalala</h1> <form @submit.prevent="save" class="ml-3"></form> @@ -31,5 +32,9 @@ }; </script> -<style> +<style lang="scss" scoped> +.importscheduledetails { + margin-top: $offset; + margin-left: $offset; +} </style>
--- a/client/src/components/admin/usermanagement/Userdetail.vue Mon Dec 03 11:00:54 2018 +0100 +++ b/client/src/components/admin/usermanagement/Userdetail.vue Mon Dec 03 12:02:17 2018 +0100 @@ -1,12 +1,12 @@ <template> <div class="userdetails h-100 mt-3 mr-auto shadow fadeIn animated"> <div class="card"> - <div class="card-header shadow-sm text-white bg-info mb-3"> + <h6 class="mb-0 py-2 px-3 border-bottom d-flex text-info align-items-center"> {{ this.cardHeader }} - <span @click="closeDetailview" class="pull-right"> + <span @click="closeDetailview" class="closebutton"> <font-awesome-icon icon="times"></font-awesome-icon> </span> - </div> + </h6> <div class="card-body"> <form @submit.prevent="save" class="ml-3"> <div class="formfields">
--- a/client/src/components/admin/usermanagement/Usermanagement.vue Mon Dec 03 11:00:54 2018 +0100 +++ b/client/src/components/admin/usermanagement/Usermanagement.vue Mon Dec 03 12:02:17 2018 +0100 @@ -5,9 +5,10 @@ <div class="d-flex flex-row"> <div :class="userlistStyle"> <div class="card"> - <div class="card-header shadow-sm text-white bg-info mb-3"> - <translate>Users</translate> - </div> + <h6 class="mb-0 py-2 px-3 border-bottom d-flex text-info align-items-center"> + <font-awesome-icon icon="users-cog" class="mr-2"></font-awesome-icon> + <translate class="headline">Users</translate> + </h6> <div class="card-body"> <table id="datatable" :class="tableStyle"> <thead> @@ -85,6 +86,7 @@ .spacer { height: 100vh; + margin-left: $offset; } .spacer-collapsed { @@ -92,33 +94,14 @@ transition: $transition-fast; } -@media screen and (min-width: 600px) { - .spacer-expanded { - min-width: $icon-width + $offset; - } -} -@media screen and (max-width: 1650px) { - .spacer-expanded { - min-width: $sidebar-width + $offset; - } +.spacer-expanded { + min-width: $sidebar-width + $offset; } .main { height: 100vh; } -@media screen and (min-width: 600px) { - .content { - margin-left: $sidebar-width; - margin-right: auto; - } -} -@media screen and (min-width: 1650px) { - .content { - margin-left: $sidebar-width; - margin-right: auto; - } -} .icon { font-size: large; } @@ -196,13 +179,13 @@ }, computed: { ...mapGetters("usermanagement", ["isUserDetailsVisible"]), - ...mapState("application", ["showSidebar", "showUsermenu"]), + ...mapState("application", ["showSidebar"]), spacerStyle() { return [ - "spacer ml-3", + "spacer", { - "spacer-expanded": this.showUsermenu && this.showSidebar, - "spacer-collapsed": !this.showUsermenu && this.showSidebar + "spacer-expanded": this.showSidebar, + "spacer-collapsed": !this.showSidebar } ]; }, @@ -239,7 +222,7 @@ }, userlistStyle() { return [ - "userlist mt-3 mr-3 shadow", + "userlist mt-3 mr-3 shadow-xs", { userlistsmall: this.isUserDetailsVisible, userlistextended: !this.isUserDetailsVisible