assemble sample page

Author: Esther Wong

src/components/NavGridSquare.vue

@@ -2,7 +2,7 @@
   <v-container class="nav__grid" fluid>
     <v-col>
       <v-row align="center" justify="center">
-        <v-card v-for="item in gridItems"  :href="item.link" width="15%" height="15%" class="ma-3">
+        <v-card v-for="item in gridItems"  :href="item.link" width="200px" height="200px" class="ma-3">
           <v-img
             :src="item.src"
             class="white--text"

src/components/Sidebar.vue

@@ -77,11 +77,13 @@
   <v-list-item-title>{{ item.title }}</v-list-item-title>
 </template>
 
-<!-- <router-link :to="child.route" class="route"> -->
-  <v-list-item v-for="child in item.children">
+<div v-for="child in item.children">
+<router-link :to="child.route" class="route">
+  <v-list-item v-ripple>
     <v-list-item-title>{{ child.title }}</v-list-item-title>
   </v-list-item>
-<!-- </router-link> -->
+</router-link>
+</div>
 
 </v-list-group>
 
@@ -162,7 +164,8 @@ export default {
           icon: 'mdi-information',
           route: '/about',
           children: [
-            { title: 'History', route: '/', icon: '' },
+          { title: 'Who are we?', route: '/about', icon: '' },
+
             { title: 'FAQ', route: '/about', icon: '' },
             { title: 'Constitution', route: '/', icon: '' },
           ],

src/views/About.vue

@@ -6,29 +6,41 @@
 
 
 
-    <v-app-bar app dark>
-      <v-app-bar-nav-icon class="ma-2" @click.stop="drawer = !drawer"> </v-app-bar-nav-icon>
+      <v-app-bar app dark>
+        <v-app-bar-nav-icon class="ma-2" @click.stop="drawer = !drawer"> </v-app-bar-nav-icon>
+        <div class="flex-grow-1"></div>
+
+        <router-link to="/"
+          ><v-container
+            class="fill-height"
+            fluid
+            style="max-height: 64px; max-width:100px"
+          >
+            <v-img class="ma-8" src="https://github.com/csesoc/csesoc.unsw.edu.au/blob/frontendCombined/src/assets/csesoclogobluewhite.png?raw=true" />
+        </v-container>
+        </router-link>
+         <div class="flex-grow-1"></div>
+        <LoginForm align="right"/>
+      </v-app-bar>
+
+<div class="content">
 
-      <router-link to="/"
-        ><v-container
-          class="fill-height"
-          fluid
-          style="max-height: 64px; max-width:100px"
-        >
-          <v-img class="ma-8" src="https://github.com/csesoc/csesoc.unsw.edu.au/blob/frontendCombined/src/assets/csesoclogobluewhite.png?raw=true" /> </v-container
-      ></router-link>
-
-
-
-
-
-      <LoginForm align="right" />
-    </v-app-bar>
+    <NavGrid id='content-start' :gridItems="gridItems"></NavGrid>
 
+    <h1 class="mt-12"> #!/ABOUT </h1>
+    <p>
+        CSESoc is the principal representative body for computing students on campus. We are one of the biggest and most active societies at UNSW, catering to over 3500 CSE students spanning across degrees in Computer Science, Software Engineering, Bioinformatics and Computer Engineering. We are here to fulfil the needs of computing students and also promote computing in all its forms through weekly social and technical events throughout the year.
 
+We are a society for the students, by the students. As a CSE student, here's how we can help you:
 
-    <NavGrid id='content-start' :gridItems="gridItems"></NavGrid>
-    <ListComponent/>
+We organise and run weekly events, including Trivia, Movie, Poker, and Boardgame Nights, LAN Parties, Workshops, Code Jams, Tech Talks, and our famous Free Weekly BBQ.
+We run a highly successful First Year Camp, offering new CSE students (both undergraduate and postgraduate) a weekend of Trivia, Dance Parties, Scavenger Hunts and general frivolity with the chance to meet and mingle with other newcomers.
+The society is entirely run by CSE student volunteers. All CSE Students are automatically members, and there are plenty of opportunities to get involved with running events and activities.
+We cater to new and returning students alike, with a mix of events designed to have something for everyone. Events are open to all members and nearly all are free to attend.
+We're as passionate about computing as you are; we provide technical events to teach you new skills, as well as a fortnightly magazine to keep you updated on what's new and interesting within the university, school and industry.
+Most of all, we're here to help you settle in and have a great time at UNSW!
+</p>
+</div>
     <Footer/>
   </div>
 </template>
@@ -38,6 +50,7 @@ import NavGrid from '@/components/NavGrid';
 import ListComponent from '@/components/ListComponent';
 import Footer from '@/components/Footer';
 import Sidebar from '@/components/Sidebar.vue';
+import LoginForm from '@/components/LoginForm';
 
 
 export default {
@@ -53,7 +66,8 @@ export default {
     NavGrid,
     ListComponent,
     Footer,
-    Sidebar
+    Sidebar,
+    LoginForm
   },
 
   mounted() {
@@ -111,4 +125,8 @@ export default {
   background: #3a76f8;
   color: #fff;
 }
+
+.content {
+    padding: 2vw 15vw 5vw 15vw;
+}
 </style>

src/views/Home.vue

@@ -10,21 +10,23 @@
 <!-- transparent + no logo until scroll point ??-->
     <v-app-bar app dark>
       <v-app-bar-nav-icon class="ma-2" @click.stop="drawer = !drawer"> </v-app-bar-nav-icon>
+      <div class="flex-grow-1"></div>
 
       <router-link to="/"
         ><v-container
           class="fill-height"
           fluid
           style="max-height: 64px; max-width:100px"
         >
-          <!-- <v-img class="ma-8" src="https://github.com/csesoc/csesoc.unsw.edu.au/blob/frontendCombined/src/assets/csesoclogobluewhite.png?raw=true" />  -->
+          <v-img class="ma-8" src="https://github.com/csesoc/csesoc.unsw.edu.au/blob/frontendCombined/src/assets/csesoclogobluewhite.png?raw=true" /> 
       </v-container>
       </router-link>
        <div class="flex-grow-1"></div>
       <LoginForm align="right"/>
     </v-app-bar>
 
 
+<!-- make header a seperate component! -->
       <header id="showcase">
         <img src="https://github.com/csesoc/csesoc.unsw.edu.au/blob/frontendCombined/src/assets/csesoclogobluewhite.png?raw=true" />
         <a href="#" v-ripple class="button"> Join on spArc </a>
@@ -57,8 +59,10 @@
       <Slider :items="items" class="my-10"/>
 
       <Events/>
-      <h1> #!/RESOURCES </h1>
+      <h1 class="ml-12 mt-12"> #!/RESOURCES </h1>
+      <div class="square">
     <NavGrid id='content-start' :gridItems="gridItems"></NavGrid>
+    </div>
     <Footer/>
   </div>
 </template>
@@ -159,4 +163,8 @@ export default {
   background: rgb(32,62,207);
   color: #fff;
 }
+
+.square {
+    padding: 10px 300px 50px 300px;
+}
 </style>