Mercurial > gemma

changeset 1455:33dda08d67be

Find changesets by keywords (author, files, the commit message), revision number or hash, or revset expression.
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