@@ -3,14 +3,16 @@ | |||||
--secondary-bg: #F7F9FA; | --secondary-bg: #F7F9FA; | ||||
--text: #4C555E; | --text: #4C555E; | ||||
--text-light: #1D262E; | --text-light: #1D262E; | ||||
--text-lighter: #28323B; | |||||
--outline: #DFE3E8; | |||||
} | } | ||||
body { | body { | ||||
margin: 0; | margin: 0; | ||||
} | } | ||||
main { | |||||
/* background: blue; */ | |||||
h2 { | |||||
color: var(--text); | |||||
} | } | ||||
main .panel { | main .panel { | ||||
@@ -101,9 +103,41 @@ menu.sidebar svg { | |||||
} | } | ||||
} | } | ||||
.page { | |||||
.page.loading { | |||||
width: 100%; | width: 100%; | ||||
display: flex; | display: flex; | ||||
justify-content: center; | justify-content: center; | ||||
align-items: center; | align-items: center; | ||||
} | } | ||||
.page { | |||||
padding: 0 2%; | |||||
width: 100%; | |||||
} | |||||
.page section { | |||||
margin-top: 50px; | |||||
margin: auto; | |||||
max-width: 700px; | |||||
} | |||||
#home.page section:first-of-type { | |||||
margin-top: 100px; | |||||
} | |||||
#home .announce { | |||||
/* background: grey; */ | |||||
min-height: 150px; | |||||
border: 1px solid var(--outline); | |||||
/* border-radius: 4px; */ | |||||
} | |||||
.page section { | |||||
color: var(--text); | |||||
} | |||||
.page section h3 { | |||||
margin-left: 10px; | |||||
color: var(--text-lighter); | |||||
} |
@@ -4,11 +4,11 @@ | |||||
<side-bar :role="user.status" :active="active"> | <side-bar :role="user.status" :active="active"> | ||||
</side-bar> | </side-bar> | ||||
<div v-if="loading" class="page"> | |||||
<div v-if="loading" class="page loading"> | |||||
<spinner></spinner> | <spinner></spinner> | ||||
</div> | </div> | ||||
<div v-else-if="!loading"></div> | |||||
<home :user="user" v-else-if="active == 1" /> | |||||
</div> | </div> | ||||
</template> | </template> | ||||
@@ -16,6 +16,7 @@ | |||||
<script> | <script> | ||||
import SideBar from "./sidebar.vue" | import SideBar from "./sidebar.vue" | ||||
import Spinner from "./spinner.vue" | import Spinner from "./spinner.vue" | ||||
import Home from "./home.vue" | |||||
const user = { | const user = { | ||||
firstName: "test", | firstName: "test", | ||||
@@ -24,6 +25,8 @@ const user = { | |||||
status: 1, | status: 1, | ||||
} | } | ||||
// Used to check the current section of the app generally without a regex match | |||||
// each time. | |||||
function active() { | function active() { | ||||
if (this.hash == '' || this.hash == '#') { | if (this.hash == '' || this.hash == '#') { | ||||
return 1 | return 1 | ||||
@@ -41,11 +44,11 @@ function active() { | |||||
} | } | ||||
export default { | export default { | ||||
components: {SideBar, Spinner}, | |||||
computed: {active}, | |||||
components: { SideBar, Spinner, Home }, | |||||
computed: { active }, | |||||
data() { | data() { | ||||
return { | return { | ||||
loading: true, user: user, hash: '' | |||||
loading: false, user: user, hash: '' | |||||
} | } | ||||
}, | }, | ||||
created() { | created() { | ||||
@@ -1,2 +1,17 @@ | |||||
<template> | <template> | ||||
<div id="home" class="page"> | |||||
<h2>Welcome, {{user.firstName + " " + user.lastName}}</h2> | |||||
<section class="announce"> | |||||
<h3>Announcements</h3> | |||||
</section> | |||||
</div> | |||||
</template> | </template> | ||||
<script> | |||||
export default { | |||||
props: ['user'], | |||||
} | |||||
</script> |