Mercurial > gemma

comparison client/src/components/Systemconfiguration.vue @ 1606:a4d8f284db93

Find changesets by keywords (author, files, the commit message), revision number or hash, or revset expression.
spacer in admin interface added
author Thomas Junk <thomas.junk@intevation.de>
date Mon, 17 Dec 2018 15:54:27 +0100
parents 0ded4c56978e
children f2d24dceecc7
comparison
equal deleted inserted replaced
1605:ef5cc5f1c757 1606:a4d8f284db93
1 <template> 1 <template>
2 <div class="d-flex flex-row"> 2 <div class="d-flex flex-row">
3 <div :class="spacerStyle"></div> 3 <Spacer></Spacer>
4 <div class="card sysconfig mt-3 shadow-xs"> 4 <div class="card sysconfig mt-3 shadow-xs">
5 <h6 5 <h6
6 class="mb-0 py-2 px-3 border-bottom d-flex text-info align-items-center" 6 class="mb-0 py-2 px-3 border-bottom d-flex text-info align-items-center"
7 > 7 >
8 <font-awesome-icon icon="wrench" class="mr-2"></font-awesome-icon> 8 <font-awesome-icon icon="wrench" class="mr-2"></font-awesome-icon>
55 .sysconfig { 55 .sysconfig {
56 margin-right: $offset; 56 margin-right: $offset;
57 width: 100%; 57 width: 100%;
58 height: 100%; 58 height: 100%;
59 } 59 }
60
61 .spacer {
62 height: 100vh;
63 }
64
65 .spacer-collapsed {
66 min-width: $icon-width + $offset;
67 transition: $transition-fast;
68 }
69
70 .spacer-expanded {
71 min-width: $sidebar-width + $offset;
72 }
73 </style> 60 </style>
74 61
75 <script> 62 <script>
76 /* This is Free Software under GNU Affero General Public License v >= 3.0 63 /* This is Free Software under GNU Affero General Public License v >= 3.0
77 * without warranty, see README.md and license for details. 64 * without warranty, see README.md and license for details.
91 import { Compact } from "vue-color"; 78 import { Compact } from "vue-color";
92 79
93 import { HTTP } from "../lib/http"; 80 import { HTTP } from "../lib/http";
94 import { displayError } from "../lib/errors.js"; 81 import { displayError } from "../lib/errors.js";
95 import { mapState } from "vuex"; 82 import { mapState } from "vuex";
83 import Spacer from "./Spacer";
84
96 export default { 85 export default {
97 name: "systemconfiguration", 86 name: "systemconfiguration",
98 data() { 87 data() {
99 return { 88 return {
100 sent: false, 89 sent: false,
103 currentConfig: null 92 currentConfig: null
104 }; 93 };
105 }, 94 },
106 components: { 95 components: {
107 "chrome-picker": Chrome, 96 "chrome-picker": Chrome,
108 "compact-picker": Compact 97 "compact-picker": Compact,
98 Spacer
109 }, 99 },
110 computed: { 100 computed: {
111 ...mapState("application", ["showSidebar"]), 101 ...mapState("application", ["showSidebar"])
112 spacerStyle() {
113 return [
114 "spacer ml-3",
115 {
116 "spacer-expanded": this.showSidebar,
117 "spacer-collapsed": !this.showSidebar
118 }
119 ];
120 }
121 }, 102 },
122 methods: { 103 methods: {
123 submit() { 104 submit() {
124 HTTP.put("/system/style/Bottlenecks/stroke", this.strokeColor.rgba, { 105 HTTP.put("/system/style/Bottlenecks/stroke", this.strokeColor.rgba, {
125 headers: { 106 headers: {