videon/videon-frontend
3
0
Fork 0
Code Pull Requests Releases Activity

Rewritten stuff

Browse Source
This commit is contained in:
Pünkösd Marcell
2020-11-25 01:45:05 +01:00
parent 0e9c16dfea
commit 3bf484890a
10 changed files with 212 additions and 287 deletions
Download Patch File Download Diff File Expand all files Collapse all files

111
src/views/Dashboard.vue
View File

@@ -1,106 +1,57 @@
<template>
<div id="dashboard-container">
<div class="page-container md-layout-column" id="dashboard-container">
<md-toolbar class="md-primary">
<div id="head" class="text-right">
<ejs-button id="toggle" ref="togglebtn" class="e-btn e-info text-white" cssClass="e-flat"
isToggle="true" v-on:click.native="openSidebar"><i class="e-icons e-menu"></i> Menu
</ejs-button>
<md-button class="md-icon-button" @click="showNavigation = true">
<md-icon>menu</md-icon>
</md-button>
<span class="md-title">VideON</span>
</div>
</md-toolbar>
<md-drawer :md-active.sync="showNavigation" md-swipeable>
<md-toolbar class="md-transparent" md-elevation="0">
<span class="md-title">VideON</span>
</md-toolbar>
<ejs-sidebar id="sidebar" ref="sidebar" type="Push" target="#maincontent" position="Right"
enablePersistence="true">
<div id="close-holder" class="text-right m-2"><a @click.prevent="closeClick" class="text-white"><i class="e-icons e-close"></i></a></div>
<div id="sidebar-content" class="m-3 text-white">
Welcome {{ username }}!
<ejs-button cssClass='e-block e-danger my-2'>Logout</ejs-button>
</div>
</ejs-sidebar>
<md-list>
<md-list-item>
<md-avatar class="md-avatar-icon">J</md-avatar>
<span class="md-list-item-text">Joska</span>
</md-list-item>
<md-list-item>
<md-button class="md-raised md-accent">Logout</md-button>
</md-list-item>
<div id="maincontent" class="content">
<div>
</md-list>
<div>Main content</div>
</md-drawer>
<md-content id="diagram-container">
<ejs-diagram id="diagram" width='100%' height='100%'></ejs-diagram>
</md-content>
</div>
</div>
</div>
</template>
<script>
export default {
name: 'Dashboard',
components: {},
data() {
return {
username: "Test"
}
},
methods: {
openSidebar: function () {
if (this.$refs.togglebtn.$el.classList.contains('e-active')) {
this.$refs.togglebtn.Content = 'Open';
this.$refs.sidebar.hide();
} else {
this.$refs.togglebtn.Content = 'Close';
this.$refs.sidebar.show();
}
},
closeClick: function () {
this.$refs.sidebar.hide();
this.$refs.togglebtn.$el.classList.remove('e-active');
this.$refs.togglebtn.Content = 'Open';
}
}
data: () => ({
showNavigation: false
})
}
</script>
<style scoped>
#head {
background: #00897B;
width: 100%;
}
#toggle, #container .e-btn.e-info:hover, #toggle:focus { /* csslint allow: adjoining-classes*/
background: #00695C;
box-shadow: none;
border-radius: 0;
height: 39px;
width: 100px;
}
#sidebar {
background-color: #26A69A;
}
#toggle {
color: white;
}
.content {
height: calc(100% - 39px);
}
#dashboard-container {
height: 100%;
}
.e-menu:before{
content:'\e99a';
font-size: 1.2em;
#diagram-container {
height: calc(100% - 64px);
}
.e-close:before{
content:'\eb36';
font-size: 1.2em;
}
#sidebar-content {
font-size: 1rem;
}
</style>

43
src/views/Welcome.vue
View File

@@ -1,20 +1,20 @@
<template>
<div id="welcome">
<b-container>
<b-row align-h="center">
<b-col md="6" lg="4" cols="12">
<b-card class="my-5">
<div class="text-center">
<h1>VideON</h1>
</div>
<login-box-content/>
</b-card>
<div class="text-center text-muted">
Copyright 2020 by VideON Team
</div>
</b-col>
</b-row>
</b-container>
<div class="md-layout md-alignment-center-center">
<div class="md-layout-item" id="welcome-banner">
<span class="md-display-3">VideON</span>
</div>
</div>
<div class="md-layout md-alignment-center-center">
<md-card class="md-layout-item md-size-25 md-medium-size-50 md-small-size-100 md-elevation-5">
<login-box-content/>
</md-card>
</div>
<div class="md-layout md-alignment-center-center">
<div class="md-layout-item" id="welcome-footer">
<span class="md-caption">Copyright 2020 by <b>VideON Team</b></span>
</div>
</div>
</div>
</template>
@@ -23,12 +23,23 @@ import LoginBoxContent from "@/components/LoginBoxContent";
export default {
name: "Welcome",
components: {LoginBoxContent}
components: {
LoginBoxContent
}
}
</script>
<style scoped>
#welcome {
}
#welcome-banner {
padding: 3rem 0 5rem 0;
text-align: center;
}
#welcome-footer {
padding: 3rem 0 0 0;
text-align: center;
}
</style>