Add scss and styles
This commit is contained in:
parent
40d723b29e
commit
270424e3fc
66
package-lock.json
generated
66
package-lock.json
generated
@ -1833,6 +1833,17 @@
|
||||
}
|
||||
}
|
||||
},
|
||||
"clone-deep": {
|
||||
"version": "4.0.1",
|
||||
"resolved": "https://registry.npmjs.org/clone-deep/-/clone-deep-4.0.1.tgz",
|
||||
"integrity": "sha512-neHB9xuzh/wk0dIHweyAXv2aPGZIVk3pLMe+/RNzINf17fe0OG96QroktYAUm7SM1PBnzTabaLboqqxDyMU+SQ==",
|
||||
"dev": true,
|
||||
"requires": {
|
||||
"is-plain-object": "^2.0.4",
|
||||
"kind-of": "^6.0.2",
|
||||
"shallow-clone": "^3.0.0"
|
||||
}
|
||||
},
|
||||
"collection-visit": {
|
||||
"version": "1.0.0",
|
||||
"resolved": "https://registry.npmjs.org/collection-visit/-/collection-visit-1.0.0.tgz",
|
||||
@ -3522,9 +3533,9 @@
|
||||
}
|
||||
},
|
||||
"jquery": {
|
||||
"version": "3.4.1",
|
||||
"resolved": "https://registry.npmjs.org/jquery/-/jquery-3.4.1.tgz",
|
||||
"integrity": "sha512-36+AdBzCL+y6qjw5Tx7HgzeGCzC81MDDgaUP8ld2zhx58HdqXGoBd+tHdrBMiyjGQs0Hxs/MLZTu/eHNJJuWPw==",
|
||||
"version": "3.5.1",
|
||||
"resolved": "https://registry.npmjs.org/jquery/-/jquery-3.5.1.tgz",
|
||||
"integrity": "sha512-XwIBPqcMn57FxfT+Go5pzySnm4KWkT1Tv7gjrpT1srtf8Weynl6R273VJ5GjkRb51IzMp5nbaPjJXMWeju2MKg==",
|
||||
"dev": true
|
||||
},
|
||||
"js-tokens": {
|
||||
@ -5259,6 +5270,46 @@
|
||||
"ret": "~0.1.10"
|
||||
}
|
||||
},
|
||||
"sass": {
|
||||
"version": "1.26.5",
|
||||
"resolved": "https://registry.npmjs.org/sass/-/sass-1.26.5.tgz",
|
||||
"integrity": "sha512-FG2swzaZUiX53YzZSjSakzvGtlds0lcbF+URuU9mxOv7WBh7NhXEVDa4kPKN4hN6fC2TkOTOKqiqp6d53N9X5Q==",
|
||||
"dev": true,
|
||||
"requires": {
|
||||
"chokidar": ">=2.0.0 <4.0.0"
|
||||
}
|
||||
},
|
||||
"sass-loader": {
|
||||
"version": "8.0.2",
|
||||
"resolved": "https://registry.npmjs.org/sass-loader/-/sass-loader-8.0.2.tgz",
|
||||
"integrity": "sha512-7o4dbSK8/Ol2KflEmSco4jTjQoV988bM82P9CZdmo9hR3RLnvNc0ufMNdMrB0caq38JQ/FgF4/7RcbcfKzxoFQ==",
|
||||
"dev": true,
|
||||
"requires": {
|
||||
"clone-deep": "^4.0.1",
|
||||
"loader-utils": "^1.2.3",
|
||||
"neo-async": "^2.6.1",
|
||||
"schema-utils": "^2.6.1",
|
||||
"semver": "^6.3.0"
|
||||
},
|
||||
"dependencies": {
|
||||
"schema-utils": {
|
||||
"version": "2.6.6",
|
||||
"resolved": "https://registry.npmjs.org/schema-utils/-/schema-utils-2.6.6.tgz",
|
||||
"integrity": "sha512-wHutF/WPSbIi9x6ctjGGk2Hvl0VOz5l3EKEuKbjPlB30mKZUzb9A5k9yEXRX3pwyqVLPvpfZZEllaFq/M718hA==",
|
||||
"dev": true,
|
||||
"requires": {
|
||||
"ajv": "^6.12.0",
|
||||
"ajv-keywords": "^3.4.1"
|
||||
}
|
||||
},
|
||||
"semver": {
|
||||
"version": "6.3.0",
|
||||
"resolved": "https://registry.npmjs.org/semver/-/semver-6.3.0.tgz",
|
||||
"integrity": "sha512-b39TBaTSfV6yBrapU89p5fKekE2m/NwnDocOVruQFS1/veMgdzuPcnOM34M6CwxW8jH/lxEa5rBoDeUwu5HHTw==",
|
||||
"dev": true
|
||||
}
|
||||
}
|
||||
},
|
||||
"schema-utils": {
|
||||
"version": "1.0.0",
|
||||
"resolved": "https://registry.npmjs.org/schema-utils/-/schema-utils-1.0.0.tgz",
|
||||
@ -5327,6 +5378,15 @@
|
||||
"safe-buffer": "^5.0.1"
|
||||
}
|
||||
},
|
||||
"shallow-clone": {
|
||||
"version": "3.0.1",
|
||||
"resolved": "https://registry.npmjs.org/shallow-clone/-/shallow-clone-3.0.1.tgz",
|
||||
"integrity": "sha512-/6KqX+GVUdqPuPPd2LxDDxzX6CAbjJehAAOKlNpqqUpAqPM6HeL8f+o3a+JsyGjn2lv0WY8UsTgUJjU9Ok55NA==",
|
||||
"dev": true,
|
||||
"requires": {
|
||||
"kind-of": "^6.0.2"
|
||||
}
|
||||
},
|
||||
"shebang-command": {
|
||||
"version": "1.2.0",
|
||||
"resolved": "https://registry.npmjs.org/shebang-command/-/shebang-command-1.2.0.tgz",
|
||||
|
||||
@ -31,12 +31,14 @@
|
||||
"chai": "^4.2.0",
|
||||
"css-loader": "^3.5.2",
|
||||
"dateformat": "^3.0.3",
|
||||
"jquery": "^3.4.1",
|
||||
"jquery": "^3.5.1",
|
||||
"mocha": "^7.1.1",
|
||||
"mocha-junit-reporter": "^1.23.3",
|
||||
"nyc": "^15.0.0",
|
||||
"prettier": "^1.19.1",
|
||||
"raw-loader": "^4.0.0",
|
||||
"sass": "^1.26.5",
|
||||
"sass-loader": "^8.0.2",
|
||||
"style-loader": "^1.1.3",
|
||||
"ts-loader": "^6.2.2",
|
||||
"ts-node": "^8.8.1",
|
||||
|
||||
@ -1,5 +1,5 @@
|
||||
<template>
|
||||
<main id="dashboard">
|
||||
<main id="dashboard" v-on:keyup.76="toggleLogs">
|
||||
<section id="dashboard-primary">
|
||||
<hdr></hdr>
|
||||
<village-state-list />
|
||||
@ -21,6 +21,7 @@ import QuickActions from './QuickActions';
|
||||
import VillageStateList from './VillageStateList';
|
||||
import LogList from './LogList';
|
||||
import { mapState } from 'vuex';
|
||||
import { Mutations } from './Store';
|
||||
export default {
|
||||
components: {
|
||||
'hdr': Header,
|
||||
@ -37,6 +38,11 @@ export default {
|
||||
computed: mapState({
|
||||
isLogsVisible: state => state.views.logs,
|
||||
}),
|
||||
methods: {
|
||||
toggleLogs() {
|
||||
this.$store.commit(Mutations.toggleLogs);
|
||||
},
|
||||
},
|
||||
};
|
||||
</script>
|
||||
|
||||
|
||||
@ -3,14 +3,19 @@
|
||||
<h1 class="title">
|
||||
[{{ shared.name }}] {{ villageName }}
|
||||
<span class="version">- {{ shared.version }}</span>
|
||||
<a href="#" v-on:click.prevent="pause()">
|
||||
</h1>
|
||||
<p>
|
||||
<a href="#" v-on:click.prevent="pause">
|
||||
pause <span v-if="shared.pauseSeconds" v-text="shared.pauseSeconds"></span>
|
||||
</a>
|
||||
</h1>
|
||||
<a href="#" v-on:click.prevent="toggleLogs">logs</a>
|
||||
</p>
|
||||
</section>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { Mutations } from './Store';
|
||||
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
@ -27,6 +32,9 @@ export default {
|
||||
pause() {
|
||||
this.shared.pause();
|
||||
},
|
||||
toggleLogs() {
|
||||
this.$store.commit(Mutations.toggleLogs);
|
||||
},
|
||||
},
|
||||
};
|
||||
</script>
|
||||
|
||||
@ -1,8 +1,8 @@
|
||||
<template>
|
||||
<section class="log-list">
|
||||
<p><strong>Logs</strong>, <a href="#" v-on:click.prevent="close">close</a></p>
|
||||
<p class="summary"><strong>Logs</strong>, <a href="#" v-on:click.prevent="close">close</a></p>
|
||||
<table class="log-table">
|
||||
<tr v-for="record in logs" class="log-record">
|
||||
<tr v-for="record in logs" :class="rowClasses(record)">
|
||||
<td v-text="record.level"></td>
|
||||
<td v-text="formatDate(record.ts)"></td>
|
||||
<td v-text="record.message"></td>
|
||||
@ -23,6 +23,12 @@ export default {
|
||||
}),
|
||||
},
|
||||
methods: {
|
||||
rowClasses(record) {
|
||||
return {
|
||||
error: record.level === 'error' || undefined,
|
||||
warning: record.level === 'warn' || undefined,
|
||||
};
|
||||
},
|
||||
formatDate(ts) {
|
||||
const d = new Date(ts * 1000);
|
||||
return dateFormat(d, 'HH:MM:ss');
|
||||
@ -34,18 +40,23 @@ export default {
|
||||
};
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
<style scoped lang="scss">
|
||||
@import 'style';
|
||||
.summary {
|
||||
@include with-padding;
|
||||
}
|
||||
.log-list {
|
||||
background-color: white;
|
||||
}
|
||||
.log-table {
|
||||
width: 100%;
|
||||
border-collapse: collapse;
|
||||
margin: 6px auto 0;
|
||||
}
|
||||
.log-record > td {
|
||||
border-top: 1px solid #ddd;
|
||||
border-left: 1px solid #ddd;
|
||||
padding: 2px 4px;
|
||||
@extend %table;
|
||||
|
||||
.error {
|
||||
color: $error-color;
|
||||
}
|
||||
|
||||
.warning {
|
||||
color: $waring-color;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
@ -49,11 +49,12 @@ export default {
|
||||
};
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
<style scoped lang="scss">
|
||||
@import 'style';
|
||||
.good {
|
||||
color: green;
|
||||
color: $success-color;
|
||||
}
|
||||
.bad {
|
||||
color: red;
|
||||
color: $error-color;
|
||||
}
|
||||
</style>
|
||||
|
||||
@ -5,6 +5,7 @@ import { LogStorage } from '../Storage/LogStorage';
|
||||
export enum Mutations {
|
||||
showLogs = 'showLogs',
|
||||
hideLogs = 'hideLogs',
|
||||
toggleLogs = 'toggleLogs',
|
||||
updateLogs = 'updateLogs',
|
||||
}
|
||||
|
||||
@ -23,6 +24,9 @@ export function createStore() {
|
||||
[Mutations.hideLogs](state) {
|
||||
state.views.logs = false;
|
||||
},
|
||||
[Mutations.toggleLogs](state) {
|
||||
state.views.logs = !state.views.logs;
|
||||
},
|
||||
[Mutations.updateLogs](state, { logs }) {
|
||||
state.logs = logs;
|
||||
},
|
||||
|
||||
@ -59,7 +59,8 @@ export default {
|
||||
};
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
<style scoped lang="scss">
|
||||
@import 'style';
|
||||
.task-list {
|
||||
margin-top: 8px;
|
||||
margin-bottom: 8px;
|
||||
@ -72,14 +73,7 @@ export default {
|
||||
overflow-x: hidden;
|
||||
}
|
||||
.task-table {
|
||||
width: 100%;
|
||||
border-collapse: collapse;
|
||||
margin: 6px auto 0;
|
||||
}
|
||||
.task-item > td {
|
||||
border-top: 1px solid #ddd;
|
||||
border-left: 1px solid #ddd;
|
||||
padding: 2px 4px;
|
||||
@extend %table;
|
||||
}
|
||||
.this-village {
|
||||
color: blue;
|
||||
|
||||
@ -41,11 +41,12 @@ export default {
|
||||
};
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
<style scoped lang="scss">
|
||||
@import 'style';
|
||||
.warning {
|
||||
color: orange;
|
||||
color: $waring-color;
|
||||
}
|
||||
.bad {
|
||||
color: red;
|
||||
color: $error-color;
|
||||
}
|
||||
</style>
|
||||
|
||||
22
src/DashboardView/style.scss
Normal file
22
src/DashboardView/style.scss
Normal file
@ -0,0 +1,22 @@
|
||||
$component-padding-x: 4px;
|
||||
$component-padding-y: 2px;
|
||||
|
||||
$success-color: #1fb840;
|
||||
$error-color: #dc3545;
|
||||
$waring-color: #d49e00;
|
||||
|
||||
@mixin with-padding {
|
||||
padding: $component-padding-y $component-padding-x;
|
||||
}
|
||||
|
||||
%table {
|
||||
width: 100%;
|
||||
border-collapse: collapse;
|
||||
margin: 6px auto 0;
|
||||
|
||||
td {
|
||||
border-top: 1px solid #ddd;
|
||||
border-left: 1px solid #ddd;
|
||||
@include with-padding
|
||||
}
|
||||
}
|
||||
@ -23,8 +23,8 @@ module.exports = (env = {}) => ({
|
||||
},
|
||||
},
|
||||
{
|
||||
test: /\.css$/,
|
||||
use: ['style-loader', 'css-loader'],
|
||||
test: /\.(c|sc|sa)ss$/i,
|
||||
use: ['style-loader', 'css-loader', 'sass-loader'],
|
||||
},
|
||||
{
|
||||
test: /\.vue$/,
|
||||
|
||||
Loading…
Reference in New Issue
Block a user