add new navigation design (vuetify framework) - modify colors, font - delete Header.vue, Footer.vue
This commit is contained in:
parent
45248ccb4b
commit
e83bfd6e5a
67
frontend/package-lock.json
generated
67
frontend/package-lock.json
generated
@ -6560,6 +6560,12 @@
|
||||
}
|
||||
}
|
||||
},
|
||||
"interpret": {
|
||||
"version": "1.2.0",
|
||||
"resolved": "https://registry.npm.taobao.org/interpret/download/interpret-1.2.0.tgz",
|
||||
"integrity": "sha1-1QYaYiS+WOgIOYX1AU2EQ1lXYpY=",
|
||||
"dev": true
|
||||
},
|
||||
"invariant": {
|
||||
"version": "2.2.4",
|
||||
"resolved": "https://registry.npmjs.org/invariant/-/invariant-2.2.4.tgz",
|
||||
@ -9542,6 +9548,15 @@
|
||||
"readable-stream": "^2.0.2"
|
||||
}
|
||||
},
|
||||
"rechoir": {
|
||||
"version": "0.6.2",
|
||||
"resolved": "https://registry.npm.taobao.org/rechoir/download/rechoir-0.6.2.tgz",
|
||||
"integrity": "sha1-hSBLVNuoLVdC4oyWdW70OvUOM4Q=",
|
||||
"dev": true,
|
||||
"requires": {
|
||||
"resolve": "^1.1.6"
|
||||
}
|
||||
},
|
||||
"redent": {
|
||||
"version": "1.0.0",
|
||||
"resolved": "https://registry.npmjs.org/redent/-/redent-1.0.0.tgz",
|
||||
@ -9943,6 +9958,15 @@
|
||||
"resolved": "https://registry.npmjs.org/safer-buffer/-/safer-buffer-2.1.2.tgz",
|
||||
"integrity": "sha512-YZo3K82SD7Riyi0E1EQPojLz7kpepnSQI9IyPbHHg1XXXevb5dJI7tpyN2ADxGcQbHG7vcyRHk0cbwqcQriUtg=="
|
||||
},
|
||||
"sass": {
|
||||
"version": "1.26.5",
|
||||
"resolved": "https://registry.npm.taobao.org/sass/download/sass-1.26.5.tgz",
|
||||
"integrity": "sha1-LXrs+7q/ophWfI8GYVtuJNLWgJk=",
|
||||
"dev": true,
|
||||
"requires": {
|
||||
"chokidar": ">=2.0.0 <4.0.0"
|
||||
}
|
||||
},
|
||||
"sass-graph": {
|
||||
"version": "2.2.5",
|
||||
"resolved": "https://registry.npmjs.org/sass-graph/-/sass-graph-2.2.5.tgz",
|
||||
@ -10346,6 +10370,17 @@
|
||||
"integrity": "sha512-mRz/m/JVscCrkMyPqHc/bczi3OQHkLTqXHEFu0zDhK/qfv3UcOA4SVmRCLmos4bhjr9ekVQubj/R7waKapmiQg==",
|
||||
"dev": true
|
||||
},
|
||||
"shelljs": {
|
||||
"version": "0.8.4",
|
||||
"resolved": "https://registry.npm.taobao.org/shelljs/download/shelljs-0.8.4.tgz?cache=0&sync_timestamp=1587787497223&other_urls=https%3A%2F%2Fregistry.npm.taobao.org%2Fshelljs%2Fdownload%2Fshelljs-0.8.4.tgz",
|
||||
"integrity": "sha1-3naE/ut2f4cWsyYHiooAh1iQ48I=",
|
||||
"dev": true,
|
||||
"requires": {
|
||||
"glob": "^7.0.0",
|
||||
"interpret": "^1.0.0",
|
||||
"rechoir": "^0.6.2"
|
||||
}
|
||||
},
|
||||
"signal-exit": {
|
||||
"version": "3.0.3",
|
||||
"resolved": "https://registry.npmjs.org/signal-exit/-/signal-exit-3.0.3.tgz",
|
||||
@ -11738,6 +11773,24 @@
|
||||
"resolved": "https://registry.npmjs.org/vue-apexcharts/-/vue-apexcharts-1.5.3.tgz",
|
||||
"integrity": "sha512-ImbvQxgwbLMrEc9/veDIJ7lzncf1fJDSNqqK0x2YDNUCq5tE9uqM4Gb/ZYUB5WlDM3vDpzwDEmsidWcaO6/WXQ=="
|
||||
},
|
||||
"vue-cli-plugin-vuetify": {
|
||||
"version": "2.0.5",
|
||||
"resolved": "https://registry.npm.taobao.org/vue-cli-plugin-vuetify/download/vue-cli-plugin-vuetify-2.0.5.tgz",
|
||||
"integrity": "sha1-Cbp4koZT/H44Aeo35RIPlXQT3aQ=",
|
||||
"dev": true,
|
||||
"requires": {
|
||||
"semver": "^7.1.2",
|
||||
"shelljs": "^0.8.3"
|
||||
},
|
||||
"dependencies": {
|
||||
"semver": {
|
||||
"version": "7.3.2",
|
||||
"resolved": "https://registry.npm.taobao.org/semver/download/semver-7.3.2.tgz?cache=0&sync_timestamp=1586886225130&other_urls=https%3A%2F%2Fregistry.npm.taobao.org%2Fsemver%2Fdownload%2Fsemver-7.3.2.tgz",
|
||||
"integrity": "sha1-YElisFK4HtB4aq6EOJ/7pw/9OTg=",
|
||||
"dev": true
|
||||
}
|
||||
}
|
||||
},
|
||||
"vue-eslint-parser": {
|
||||
"version": "7.0.0",
|
||||
"resolved": "https://registry.npmjs.org/vue-eslint-parser/-/vue-eslint-parser-7.0.0.tgz",
|
||||
@ -11830,6 +11883,20 @@
|
||||
"integrity": "sha512-4gDntzrifFnCEvyoO8PqyJDmguXgVPxKiIxrBKjIowvL9l+N66196+72XVYR8BBf1Uv1Fgt3bGevJ+sEmxfZzw==",
|
||||
"dev": true
|
||||
},
|
||||
"vuetify": {
|
||||
"version": "2.2.27",
|
||||
"resolved": "https://registry.npm.taobao.org/vuetify/download/vuetify-2.2.27.tgz",
|
||||
"integrity": "sha1-ooy2dzt8Vc2OnO3KwGEzuIbI7uQ="
|
||||
},
|
||||
"vuetify-loader": {
|
||||
"version": "1.4.3",
|
||||
"resolved": "https://registry.npm.taobao.org/vuetify-loader/download/vuetify-loader-1.4.3.tgz",
|
||||
"integrity": "sha1-3xMjxVi+CYkId+X76BezpxpsU40=",
|
||||
"dev": true,
|
||||
"requires": {
|
||||
"loader-utils": "^1.2.0"
|
||||
}
|
||||
},
|
||||
"watchpack": {
|
||||
"version": "1.6.1",
|
||||
"resolved": "https://registry.npmjs.org/watchpack/-/watchpack-1.6.1.tgz",
|
||||
|
||||
@ -14,7 +14,8 @@
|
||||
"sass-loader": "^8.0.2",
|
||||
"vue": "^2.6.11",
|
||||
"vue-apexcharts": "^1.5.3",
|
||||
"vue-router": "^3.1.6"
|
||||
"vue-router": "^3.1.6",
|
||||
"vuetify": "^2.2.11"
|
||||
},
|
||||
"devDependencies": {
|
||||
"@vue/cli-plugin-babel": "~4.3.0",
|
||||
@ -23,7 +24,11 @@
|
||||
"babel-eslint": "^10.1.0",
|
||||
"eslint": "^6.7.2",
|
||||
"eslint-plugin-vue": "^6.2.2",
|
||||
"vue-template-compiler": "^2.6.11"
|
||||
"sass": "^1.19.0",
|
||||
"sass-loader": "^8.0.0",
|
||||
"vue-cli-plugin-vuetify": "~2.0.5",
|
||||
"vue-template-compiler": "^2.6.11",
|
||||
"vuetify-loader": "^1.3.0"
|
||||
},
|
||||
"eslintConfig": {
|
||||
"root": true,
|
||||
|
||||
@ -6,6 +6,8 @@
|
||||
<meta name="viewport" content="width=device-width,initial-scale=1.0">
|
||||
<link rel="icon" href="<%= BASE_URL %>favicon.ico">
|
||||
<title><%= htmlWebpackPlugin.options.title %></title>
|
||||
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Roboto:100,300,400,500,700,900">
|
||||
<link href="https://cdn.jsdelivr.net/npm/@mdi/font@4.x/css/materialdesignicons.min.css" rel="stylesheet">
|
||||
</head>
|
||||
<body style="margin:0px">
|
||||
<noscript>
|
||||
|
||||
@ -1,46 +1,147 @@
|
||||
<template>
|
||||
<div class="app">
|
||||
<div>
|
||||
<Header />
|
||||
</div>
|
||||
<div class="Site-content">
|
||||
<v-app id="geotimetracking">
|
||||
<!-- Side navigation menu -->
|
||||
<v-navigation-drawer v-model="drawer" app clipped class="main_accent">
|
||||
<v-list dense>
|
||||
<v-list-item link to="/">
|
||||
<v-list-item-action>
|
||||
<v-icon>mdi-view-dashboard</v-icon>
|
||||
</v-list-item-action>
|
||||
<v-list-item-content>
|
||||
<v-list-item-title>Home</v-list-item-title>
|
||||
</v-list-item-content>
|
||||
</v-list-item>
|
||||
<v-list-item link to="/timerecords" v-bind:class="{'d-none':!login}">
|
||||
<v-list-item-action>
|
||||
<v-icon>mdi-clock</v-icon>
|
||||
</v-list-item-action>
|
||||
<v-list-item-content>
|
||||
<v-list-item-title>Time Records</v-list-item-title>
|
||||
</v-list-item-content>
|
||||
</v-list-item>
|
||||
<v-list-item link to="/weeksummary" v-bind:class="{'d-none':!login}">
|
||||
<v-list-item-action>
|
||||
<v-icon>mdi-chart-bar</v-icon>
|
||||
</v-list-item-action>
|
||||
<v-list-item-content>
|
||||
<v-list-item-title>Week Summary</v-list-item-title>
|
||||
</v-list-item-content>
|
||||
</v-list-item>
|
||||
<v-list-item link to="/about">
|
||||
<v-list-item-action>
|
||||
<v-icon>mdi-information-outline</v-icon>
|
||||
</v-list-item-action>
|
||||
<v-list-item-content>
|
||||
<v-list-item-title>About</v-list-item-title>
|
||||
</v-list-item-content>
|
||||
</v-list-item>
|
||||
</v-list>
|
||||
</v-navigation-drawer>
|
||||
|
||||
<!-- Top menu bar -->
|
||||
<v-app-bar app clipped-left class="main" elevation="10">
|
||||
<v-app-bar-nav-icon @click.stop="drawer = !drawer" />
|
||||
<v-img src="./assets/logo.svg" max-height="100%" max-width="100" contain></v-img>
|
||||
<v-toolbar-title>Geo Timetracking</v-toolbar-title>
|
||||
<v-spacer></v-spacer>
|
||||
<!-- Menu with account icon -->
|
||||
<v-menu
|
||||
v-model="menu"
|
||||
:close-on-content-click="false"
|
||||
:nudge-width="200"
|
||||
offset-y
|
||||
>
|
||||
<template v-slot:activator="{ on }">
|
||||
<v-btn
|
||||
icon
|
||||
v-on="on"
|
||||
>
|
||||
<v-icon>mdi-account</v-icon>
|
||||
</v-btn>
|
||||
</template>
|
||||
|
||||
<v-card>
|
||||
<v-list>
|
||||
<v-list-item>
|
||||
<v-list-item-avatar>
|
||||
<img src="https://cdn.vuetifyjs.com/images/john.jpg" alt="John">
|
||||
</v-list-item-avatar>
|
||||
|
||||
<v-list-item-content>
|
||||
<v-list-item-title>John Doe</v-list-item-title>
|
||||
<v-list-item-subtitle>Admin</v-list-item-subtitle>
|
||||
</v-list-item-content>
|
||||
|
||||
<v-list-item-action>
|
||||
<v-btn
|
||||
:class="fav ? 'red--text' : ''"
|
||||
icon
|
||||
@click="fav = !fav"
|
||||
>
|
||||
<v-icon>mdi-heart</v-icon>
|
||||
</v-btn>
|
||||
</v-list-item-action>
|
||||
</v-list-item>
|
||||
</v-list>
|
||||
|
||||
<v-divider></v-divider>
|
||||
|
||||
<v-list>
|
||||
<v-list-item>
|
||||
<v-list-item-action>
|
||||
<v-switch v-model="message" color="primary" :input-value="login" @change="login= !login"></v-switch>
|
||||
</v-list-item-action>
|
||||
<v-list-item-title>View as Guest</v-list-item-title>
|
||||
</v-list-item>
|
||||
</v-list>
|
||||
|
||||
<v-card-actions>
|
||||
<v-spacer></v-spacer>
|
||||
|
||||
<v-btn text @click="menu = false">Cancel</v-btn>
|
||||
<v-btn color="primary" text @click="menu = false">Save</v-btn>
|
||||
</v-card-actions>
|
||||
</v-card>
|
||||
</v-menu>
|
||||
</v-app-bar>
|
||||
|
||||
<!-- Routed pages are inserted here -->
|
||||
<v-content>
|
||||
<router-view />
|
||||
</div>
|
||||
<div>
|
||||
<Footer />
|
||||
</div>
|
||||
</v-content>
|
||||
|
||||
<!-- Footer on bottom -->
|
||||
<v-footer app class="main">
|
||||
<span>© 2020 Team TacocaT</span>
|
||||
</v-footer>
|
||||
</v-app>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
|
||||
<script>
|
||||
import Footer from './components/layout/Footer';
|
||||
import Header from './components/layout/Header';
|
||||
export default {
|
||||
name:"app",
|
||||
components: {
|
||||
Footer,
|
||||
Header
|
||||
props: {
|
||||
source: String
|
||||
},
|
||||
data: () => ({
|
||||
drawer: null,
|
||||
login: true
|
||||
}),
|
||||
created() {
|
||||
this.$vuetify.theme.dark = true;
|
||||
}
|
||||
}
|
||||
};
|
||||
</script>
|
||||
|
||||
|
||||
<style scoped>
|
||||
|
||||
.app {
|
||||
display: flex;
|
||||
min-height: 100vh;
|
||||
flex-direction: column;
|
||||
font-family: 'Montserrat', sans-serif;
|
||||
|
||||
-webkit-font-smoothing: antialiased;
|
||||
-moz-osx-font-smoothing: grayscale;
|
||||
background-color: #131313;
|
||||
.link {
|
||||
color: #f1f1f1f1;
|
||||
text-decoration: none;
|
||||
}
|
||||
.Site-content {
|
||||
flex: 1;
|
||||
.v-application {
|
||||
font-family: 'Montserrat', sans-serif;
|
||||
background-color: var(--v-background-base) !important;
|
||||
}
|
||||
|
||||
|
||||
</style>
|
||||
|
||||
@ -1,41 +0,0 @@
|
||||
footer
|
||||
<template>
|
||||
<div class="footer">
|
||||
<h3>Links</h3>
|
||||
<u><router-link to="/">Home</router-link></u>
|
||||
<br>
|
||||
<u><router-link to="/about">About</router-link></u>
|
||||
<br>
|
||||
<u><router-link to="/timerecords">Time Records</router-link></u>
|
||||
<br>
|
||||
<u><router-link to="/weeksummary">Week Summary</router-link></u>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
name: "Footer"
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.footer {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
flex-direction: column;
|
||||
|
||||
flex-wrap: wrap;
|
||||
height: 10vh;
|
||||
background: #272727;
|
||||
color: #f1f1f1f1;
|
||||
text-align: center;
|
||||
padding: 10px;
|
||||
}
|
||||
|
||||
.footer a {
|
||||
font-family: 'Montserrat', sans-serif;
|
||||
color: #f1f1f1f1;
|
||||
padding-right: 5px;
|
||||
text-decoration: none;
|
||||
}
|
||||
</style>
|
||||
@ -1,43 +0,0 @@
|
||||
<template>
|
||||
<div class="header">
|
||||
<div>
|
||||
<u><router-link to="/"><img alt="Vue logo" src="../../assets/logo.svg"></router-link></u>
|
||||
</div>
|
||||
<div>
|
||||
<u><router-link to="/signin">Sign In</router-link></u>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
name: "Header"
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.header {
|
||||
display: flex;
|
||||
height: 10vh;
|
||||
justify-content: space-between;
|
||||
background: #272727;
|
||||
color: #f1f1f1f1;
|
||||
|
||||
padding: 10px;
|
||||
}
|
||||
|
||||
.header a {
|
||||
font-family: 'Montserrat', sans-serif;
|
||||
color: #f1f1f1f1;
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
.header img {
|
||||
float: left;
|
||||
height: 7vh;
|
||||
width: auto;
|
||||
/* padding: 5px; */
|
||||
|
||||
}
|
||||
|
||||
</style>
|
||||
@ -1,10 +1,12 @@
|
||||
import Vue from "vue";
|
||||
import App from "./App.vue";
|
||||
import router from "./router";
|
||||
import vuetify from './plugins/vuetify';
|
||||
|
||||
Vue.config.productionTip = false;
|
||||
|
||||
new Vue({
|
||||
router,
|
||||
vuetify,
|
||||
render: h => h(App)
|
||||
}).$mount("#app");
|
||||
|
||||
27
frontend/src/plugins/vuetify.js
Normal file
27
frontend/src/plugins/vuetify.js
Normal file
@ -0,0 +1,27 @@
|
||||
import Vue from 'vue';
|
||||
import Vuetify from 'vuetify/lib';
|
||||
|
||||
Vue.use(Vuetify);
|
||||
|
||||
export default new Vuetify({
|
||||
theme: {
|
||||
options: {
|
||||
customProperties: true
|
||||
},
|
||||
themes: {
|
||||
dark: {
|
||||
primary: '#0096ff',
|
||||
secondary: '#b0bec5',
|
||||
accent: '#8c9eff',
|
||||
error: '#b71c1c',
|
||||
|
||||
|
||||
main: '#272727',
|
||||
main_accent: '#202020',
|
||||
footer: '#404040',
|
||||
background: '#131313',
|
||||
},
|
||||
},
|
||||
dark:true
|
||||
},
|
||||
});
|
||||
@ -37,6 +37,48 @@ export default {
|
||||
end: "25.04.2020 / 16:30",
|
||||
time: "2:30",
|
||||
type: "Paid"
|
||||
},
|
||||
{
|
||||
id: 4,
|
||||
start: "25.04.2020 / 8:00",
|
||||
end: "25.04.2020 / 13:00",
|
||||
time: "5:00",
|
||||
type: "Paid"
|
||||
},
|
||||
{
|
||||
id: 5,
|
||||
start: "25.04.2020 / 13:00",
|
||||
end: "25.04.2020 / 14:00",
|
||||
time: "1:00",
|
||||
type: "Lunch"
|
||||
},
|
||||
{
|
||||
id: 6,
|
||||
start: "25.04.2020 / 14:00 ",
|
||||
end: "25.04.2020 / 16:30",
|
||||
time: "2:30",
|
||||
type: "Paid"
|
||||
},
|
||||
{
|
||||
id: 7,
|
||||
start: "25.04.2020 / 8:00",
|
||||
end: "25.04.2020 / 13:00",
|
||||
time: "5:00",
|
||||
type: "Paid"
|
||||
},
|
||||
{
|
||||
id: 8,
|
||||
start: "25.04.2020 / 13:00",
|
||||
end: "25.04.2020 / 14:00",
|
||||
time: "1:00",
|
||||
type: "Lunch"
|
||||
},
|
||||
{
|
||||
id: 9,
|
||||
start: "25.04.2020 / 14:00 ",
|
||||
end: "25.04.2020 / 16:30",
|
||||
time: "2:30",
|
||||
type: "Paid"
|
||||
}
|
||||
]
|
||||
}
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
<template>
|
||||
<div>
|
||||
<h3 align='center'>Weeky Summary</h3>
|
||||
<h3 align='center'>Week Summary</h3>
|
||||
<div id="chart">
|
||||
<apexchart type="bar" height="350" :options="chartOptions" :series="series"></apexchart>
|
||||
</div>
|
||||
|
||||
5
frontend/vue.config.js
Normal file
5
frontend/vue.config.js
Normal file
@ -0,0 +1,5 @@
|
||||
module.exports = {
|
||||
"transpileDependencies": [
|
||||
"vuetify"
|
||||
]
|
||||
}
|
||||
Loading…
Reference in New Issue
Block a user