Mercurial > gemma

comparison client/src/components/Logs.vue @ 1605:ef5cc5f1c757

Find changesets by keywords (author, files, the commit message), revision number or hash, or revset expression.
refac: extracted spacer component
author Thomas Junk <thomas.junk@intevation.de>
date Mon, 17 Dec 2018 15:45:39 +0100
parents 0ded4c56978e
children f2d24dceecc7
comparison
equal deleted inserted replaced
1604:32a34151d9d7 1605:ef5cc5f1c757
1 <template> 1 <template>
2 <div class="main d-flex flex-column"> 2 <div class="main d-flex flex-column">
3 <div class="d-flex flex-row"> 3 <div class="d-flex flex-row">
4 <div :class="spacer"></div> 4 <Spacer></Spacer>
5 <div class="card logs shadow-xs mt-3 mr-3"> 5 <div class="card logs shadow-xs mt-3 mr-3">
6 <h6 6 <h6
7 class="mb-0 py-2 px-3 border-bottom d-flex text-info align-items-center" 7 class="mb-0 py-2 px-3 border-bottom d-flex text-info align-items-center"
8 > 8 >
9 <font-awesome-icon class="mr-2 fa-fw" icon="book"></font-awesome-icon> 9 <font-awesome-icon class="mr-2 fa-fw" icon="book"></font-awesome-icon>
89 height: 90%; 89 height: 90%;
90 overflow: auto; 90 overflow: auto;
91 transition: $transition-fast; 91 transition: $transition-fast;
92 } 92 }
93 93
94 .spacer {
95 height: 90vh;
96 }
97
98 .spacer-collapsed {
99 min-width: $icon-width + $offset;
100 transition: $transition-fast;
101 }
102
103 .spacer-expanded {
104 min-width: $sidebar-width + $offset;
105 }
106
107 .statusline { 94 .statusline {
108 position: absolute; 95 position: absolute;
109 right: 0; 96 right: 0;
110 margin-right: 9rem; 97 margin-right: 9rem;
111 bottom: -0.5rem; 98 bottom: -0.5rem;
131 * Thomas Junk <thomas.junk@intevation.de> 118 * Thomas Junk <thomas.junk@intevation.de>
132 */ 119 */
133 import { mapState } from "vuex"; 120 import { mapState } from "vuex";
134 import { HTTP } from "../lib/http.js"; 121 import { HTTP } from "../lib/http.js";
135 import "../../node_modules/highlight.js/styles/paraiso-dark.css"; 122 import "../../node_modules/highlight.js/styles/paraiso-dark.css";
123 import Spacer from "./Spacer";
136 import Vue from "vue"; 124 import Vue from "vue";
137 import VueHighlightJS from "vue-highlightjs"; 125 import VueHighlightJS from "vue-highlightjs";
138 Vue.use(VueHighlightJS); 126 Vue.use(VueHighlightJS);
139 127
140 const ACCESSLOG = "accesslog"; 128 const ACCESSLOG = "accesslog";
141 const ERRORLOG = "errorlog"; 129 const ERRORLOG = "errorlog";
142 130
143 export default { 131 export default {
144 name: "logs", 132 name: "logs",
133 components: {
134 Spacer
135 },
145 mounted() { 136 mounted() {
146 this.fetch("system/log/apache2/access.log", ACCESSLOG); 137 this.fetch("system/log/apache2/access.log", ACCESSLOG);
147 }, 138 },
148 data() { 139 data() {
149 return { 140 return {
181 errorlogStyle() { 172 errorlogStyle() {
182 return { 173 return {
183 active: this.currentLog == ERRORLOG, 174 active: this.currentLog == ERRORLOG,
184 "nav-link": true 175 "nav-link": true
185 }; 176 };
186 },
187 spacer() {
188 return [
189 "spacer ml-3",
190 {
191 "spacer-expanded": this.showSidebar,
192 "spacer-collapsed": !this.showSidebar
193 }
194 ];
195 } 177 }
196 } 178 }
197 }; 179 };
198 </script> 180 </script>