Ask an upperyear

.vuepress/components/ResourcesGrid.vue

@@ -1,17 +1,13 @@
 <template>
-  <div>
-    <div class="columns row" v-for="i in rowCount">
-      <div class="column resources-grid-column" v-for="j in cols">
-        <resources-grid-item
-          v-if="itemExists(i,j)"
-          :title="getItem(i,j).title"
-          :link="getItem(i,j).link"
-          :iconFileName="getItem(i,j).icon"
-          :desc="getItem(i,j).desc"
-          :color="color"
-        ></resources-grid-item>
-      </div>
-    </div>
+  <div class="resources-grid">
+    <resources-grid-item
+      v-for="item in items"
+      :title="item.title"
+      :link="item.link"
+      :iconFileName="item.icon"
+      :desc="item.desc"
+      :color="color"
+    ></resources-grid-item>
   </div>
 </template>
 
@@ -21,7 +17,7 @@ import ResourcesGridItem from "./ResourcesGridItem";
 export default {
   name: "resources-grid",
   components: {
-    ResourcesGridItem
+    ResourcesGridItem,
   },
   props: {
     items: {
@@ -30,40 +26,18 @@ export default {
     color: {
       type: String,
       required: false,
-      default: '#11991c'
-    }
-  },
-  data() {
-    return {
-      cols: 4
-    };
-  },
-  computed: {
-    rowCount() {
-      const quotient = Math.floor(this.items.length / this.cols);
-      const remainder = this.items.length % this.cols;
-      return quotient + (remainder === 0 ? 0 : 1);
-    }
-  },
-  methods: {
-    itemIndex: function(row, col) {
-      return (row - 1) * this.cols + (col - 1);
+      default: "#11991c",
     },
-    getItem: function(row, col) {
-      return this.items[this.itemIndex(row, col)];
-    },
-    itemExists: function(row, col) {
-      return this.getItem(row, col) != null;
-    }
-  }
+  },
 };
 </script>
 
 
 <style scoped>
-.resources-grid-column {
-  width: 31%;
-  margin-bottom: 36px;
+.resources-grid {
+  display: flex;
+  flex-wrap: wrap;
+  justify-content: center;
 }
 </style>
 

.vuepress/components/ResourcesGridItem.vue

@@ -24,42 +24,39 @@ export default {
   props: {
     link: {
       type: String,
-      required: true
+      required: true,
     },
     iconFileName: {
       type: String,
-      required: true
+      required: true,
     },
     title: {
       type: String,
-      required: true
+      required: true,
     },
     desc: {
       type: String,
-      required: true
+      required: true,
     },
     color: {
       type: String,
       required: false,
-      default: '#11991c'
-    }
+      default: "#11991c",
+    },
   },
   data() {
     return {
-      hovered: false
+      hovered: false,
     };
-  }
+  },
 };
 </script>
 
 <style scoped>
 a {
   text-decoration: none !important;
   min-height: 148px;
-}
-
-.row {
-  display: flex;
+  margin: 0 !important;
 }
 
 .box {
@@ -73,9 +70,11 @@ a {
 }
 
 .box.resource-box {
-  max-width: 172px;
-  height: 100%;
+  height: 212px;
   transition: all 0.2s ease-in-out;
+
+  flex: 1 1 172px;
+  margin: 5px !important;
 }
 
 .box.resource-box:hover {

cssc/pages/resources/anonymousquestions.vue

@@ -0,0 +1,62 @@
+<script>
+/* eslint-disable */
+</script>
+
+<style>
+.content {
+  max-width: 500px;
+  margin: auto;
+}
+</style>
+
+<template>
+  <div class="content">
+    <h1 style="font-size: 50px;"> Ask an Upper Year! </h1>
+    <!-- <form action="https://formspree.io/xwkrdzyg" method="POST">-->
+    	<form action="http://individual.utoronto.ca/cgi-bin/formmail.pl" method="POST">
+	<input type="hidden" name="recipient" value="zain.kazmi@mail.utoronto.ca"/>
+	<li style="list-style-type: none;"><label for="ask_alex">Ask Alex: TA and POST</label>
+      	<input type="checkbox" name="ask alex" text="Ask Alex" id="ask_alex"/>
+      	</li>
+      	<li style="list-style-type: none;">
+      	<label for="ask_jess">Ask Jess</label>
+     	<input type="checkbox" name="Ask Jess" id="ask_jess"/>
+      	</li>
+      	<li style="list-style-type: none;">
+     	<label for="ask_chris">Ask Chris</label>
+      	<input type="checkbox" id="ask_chris" name="Ask Chris" />
+      	</li>
+	<li style="list-style-type: none;">
+      	<label for=Question> Input your Question here </label> 
+      	</li>
+	<li style="list-style-type: none;">
+	<textarea id="Question" name="Question" style="border-style: inset;"></textarea>
+	</li>
+	<li style="list-style-type: none;">
+	<h2 style="font-size: 20px;">Tags:</h2>
+	</li>
+	<li style="list-style-type: none;">
+	<label for="post">Post</label>
+	<input type="checkbox" name="Post" id="post"/>
+	</li>
+	<li style="list-style-type: none;">	
+	<label for="TA_stuff">TA stuff</label>
+	<input type="checkbox" id="TA_stuff" name="TA Stuff" />
+	</li>
+	<li style="list-style-type: none;">
+	<label for="tech">Technology</label>
+	<input type="checkbox" id="tech" name="Tech"/>
+	</li>
+	<input type="submit" value="Submit" name="Submit"/>
+	<input type="reset" value="Reset"/>
+      </form>
+
+  </div>
+</template>
+
+<script>
+export default {
+
+}
+</script>
+~                                                                                                                       ~                                                                                                                       ~