Style home page

assets/main.css

@@ -3,14 +3,16 @@
 	--secondary-bg: #F7F9FA;
 	--text: #4C555E;
 	--text-light: #1D262E;
+	--text-lighter: #28323B;
+	--outline: #DFE3E8;
 }
 
 body {
 	margin: 0;
 }
 
-main {
-	/* background: blue; */
+h2 {
+	color: var(--text);
 }
 
 main .panel {
@@ -101,9 +103,41 @@ menu.sidebar svg {
   }
 }
 
-.page {
+.page.loading {
 	width: 100%;
 	display: flex;
 	justify-content: 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);
+}

components/app.vue

@@ -4,11 +4,11 @@
 <side-bar :role="user.status" :active="active">
 </side-bar>
 
-<div v-if="loading" class="page">
+<div v-if="loading" class="page loading">
 <spinner></spinner>
 </div>
 
-<div v-else-if="!loading"></div>
+<home :user="user" v-else-if="active == 1" />
 
 </div>
 </template>
@@ -16,6 +16,7 @@
 <script>
 import SideBar from "./sidebar.vue"
 import Spinner from "./spinner.vue"
+import Home from "./home.vue"
 
 const user = {
  	firstName: "test",
@@ -24,6 +25,8 @@ const user = {
 	status: 1,
  }
 
+// Used to check the current section of the app generally without a regex match
+// each time.
 function active() {
 	if (this.hash == '' || this.hash == '#') {
 		return 1
@@ -41,11 +44,11 @@ function active() {
 }
 
 export default {
-	components: {SideBar, Spinner},
-	computed: {active},
+	components: { SideBar, Spinner, Home },
+	computed: { active },
 	data() {
 		return {
-			loading: true, user: user, hash: ''
+			loading: false, user: user, hash: ''
 		}
 	},
 	created() {

components/home.vue

@@ -1,2 +1,17 @@
 <template>
+<div id="home" class="page">
+
+<h2>Welcome, {{user.firstName + " " + user.lastName}}</h2>
+
+<section class="announce">
+<h3>Announcements</h3>
+</section>
+
+</div>
 </template>
+
+<script>
+export default {
+	props: ['user'],
+}
+</script>