Browse Source

Style home page

master
Immanuel Onyeka 2 years ago
parent
commit
ef8c781e27
3 changed files with 60 additions and 8 deletions
  1. +37
    -3
      assets/main.css
  2. +8
    -5
      components/app.vue
  3. +15
    -0
      components/home.vue

+ 37
- 3
assets/main.css View File

@@ -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);
}

+ 8
- 5
components/app.vue View File

@@ -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() {


+ 15
- 0
components/home.vue View File

@@ -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>

Loading…
Cancel
Save