Merge pull request #21 from Brian-E-Nguyen/card-wrapper

Card wrapper

src/components/UI/CardWrapper.vue

@@ -0,0 +1,20 @@
+<template>
+  <v-card outlined elevation="3" class="card_wrapper">
+    <v-container class="card_wrapper_content">
+      <slot></slot>
+    </v-container>
+  </v-card>
+</template>
+
+<script>
+export default {};
+</script>
+
+<style>
+.card_wrapper {
+  margin: 2% 5%;
+}
+.card_wrapper_content {
+  margin: 100px;
+}
+</style>

src/views/AboutView.vue

@@ -1,43 +1,49 @@
 <template>
   <div id="about">
-    <v-card class="about_card" outlined elevation="5">
-      <v-container>
-        <h1 id="about_header">About Us</h1>
-        <h2 class="about_subheader">The Tzu Chi Foundation</h2>
-        <p>
-          The Tzu Chi Foundation (<em>tzu</em> - "compassionate", <em>chi</em> -
-          "relief") is a global relief organization whose main missions are
-          charity, education, medicine, and humanistic culture. The organization
-          was founded in Taiwan by Dharma Master Cheng in 1966, and it began as
-          a group of 30 housewives who saved money everyday, which would then be
-          donated to those in need. This incentivized others to follow their
-          acts of compassion. The organization expanded throughout the years and
-          became a major organization to provide relief services. The Tzu Chi
-          Foundation today consists of over 10 million members worldwide in over
-          50 countries. In 2020, Tzu Chi has provided aid to 125 countries,
-          donated over 2 million medical masks, provided food to over 70
-          thousand households, and benefitted 17,335 students from their
-          tutoring program
-        </p>
-        <p>
-          For more information about the Tzu Chi Foundation:
-          <a href="">click here to visit Tzu Chi USA's website</a>
-        </p>
-        <h2 class="about_subheader">CSULB Tzu Ching</h2>
-        <p>
-          The Tzu Chi Foundation consists of collegiate chapters throughout the
-          world. CSULB Tzu Ching (<em>tzu</em> - "compassionate",
-          <em>ching</em> - "youth") was founded in 2014 and consists of many
-          students from diverse backgrounds, majors, ethnicities, and more. Our
-          general meetings are once a month and we provide diverse range of
-          events for members to attend, such as food-packing events, medical
-          outreaches, senior center visits, and socials. Go Beach! Go Tzu Ching!
-        </p>
-      </v-container>
-    </v-card>
+    <CardWrapper>
+      <h1 id="about_header">About Us</h1>
+      <h2 class="about_subheader">The Tzu Chi Foundation</h2>
+      <p>
+        The Tzu Chi Foundation (<em>tzu</em> - "compassionate", <em>chi</em> -
+        "relief") is a global relief organization whose main missions are
+        charity, education, medicine, and humanistic culture. The organization
+        was founded in Taiwan by Dharma Master Cheng in 1966, and it began as a
+        group of 30 housewives who saved money everyday, which would then be
+        donated to those in need. This incentivized others to follow their acts
+        of compassion. The organization expanded throughout the years and became
+        a major organization to provide relief services. The Tzu Chi Foundation
+        today consists of over 10 million members worldwide in over 50
+        countries. In 2020, Tzu Chi has provided aid to 125 countries, donated
+        over 2 million medical masks, provided food to over 70 thousand
+        households, and benefitted 17,335 students from their tutoring program
+      </p>
+      <p>
+        For more information about the Tzu Chi Foundation:
+        <a href="">click here to visit Tzu Chi USA's website</a>
+      </p>
+      <h2 class="about_subheader">CSULB Tzu Ching</h2>
+      <p>
+        The Tzu Chi Foundation consists of collegiate chapters throughout the
+        world. CSULB Tzu Ching (<em>tzu</em> - "compassionate", <em>ching</em> -
+        "youth") was founded in 2014 and consists of many students from diverse
+        backgrounds, majors, ethnicities, and more. Our general meetings are
+        once a month and we provide diverse range of events for members to
+        attend, such as food-packing events, medical outreaches, senior center
+        visits, and socials. Go Beach! Go Tzu Ching!
+      </p>
+    </CardWrapper>
   </div>
 </template>
 
+<script>
+import CardWrapper from '../components/UI/CardWrapper';
+export default {
+  components: {
+    CardWrapper,
+  },
+};
+</script>
+
 <style scoped>
 #about_header {
   text-align: center;
@@ -47,7 +53,4 @@
 .about_subheader {
   color: #3babd4;
 }
-.about_card {
-  margin: 5% 15%;
-}
 </style>

src/views/EventsView.vue

@@ -1,29 +1,29 @@
 <template>
-  <div>
-    <v-container
-      ><h1 id="events_header">Events</h1>
-      <v-checkbox
-        v-model="isCondensed"
-        :label="`Condensed view: ${isCondensed.toString()}`"
-      ></v-checkbox>
-      <div v-if="isCondensed">
-        <EventTimelineCondensed month="November 2021" :events="november" />
-      </div>
-      <div v-else>
-        <EventTimeline month="November 2021" :events="november" />
-      </div>
-    </v-container>
-  </div>
+  <CardWrapper>
+    <h1 id="events_header">Events</h1>
+    <v-checkbox
+      v-model="isCondensed"
+      :label="`Condensed view: ${isCondensed.toString()}`"
+    ></v-checkbox>
+    <div v-if="isCondensed">
+      <EventTimelineCondensed month="November 2021" :events="november" />
+    </div>
+    <div v-else>
+      <EventTimeline month="November 2021" :events="november" />
+    </div>
+  </CardWrapper>
 </template>
 
 <script>
 import EventTimeline from '../components/Events/EventTimeline';
 import EventTimelineCondensed from '../components/Events/Condensed/EventTimelineCondensed';
+import CardWrapper from '../components/UI/CardWrapper';
 
 export default {
   components: {
     EventTimeline,
     EventTimelineCondensed,
+    CardWrapper,
   },
   data: () => ({
     isCondensed: false,

src/views/HomeView.vue

@@ -1,14 +1,12 @@
 <template>
   <div>
     <Carousel />
-    <v-card class="home_card" outlined elevation="15">
-      <v-container>
-        <Introduction />
-        <UpcomingEvents />
-        <RecentPhotos />
-        <Quote />
-      </v-container>
-    </v-card>
+    <CardWrapper>
+      <Introduction />
+      <UpcomingEvents />
+      <RecentPhotos />
+      <Quote />
+    </CardWrapper>
   </div>
 </template>
 
@@ -19,6 +17,7 @@ import UpcomingEvents from '../components/UpcomingEvents';
 import Quote from '../components/Quote';
 import RecentPhotos from '../components/RecentPhotos';
 // import PhotoCard from '../components/PhotoCard.vue';
+import CardWrapper from '../components/UI/CardWrapper.vue';
 
 export default {
   name: 'Home',
@@ -29,6 +28,7 @@ export default {
     UpcomingEvents,
     Quote,
     RecentPhotos,
+    CardWrapper,
   },
 };
 Carousel;

src/views/PhotosView.vue

@@ -1,20 +1,23 @@
 <template>
-  <v-container>
+  <CardWrapper>
     <h1 id="photos_header">Photos</h1>
     <h3 id="photos_subheader">
       Get a glimpse at what we do in our organization!
     </h3>
     <div v-for="(event, i) in events" :key="i">
       <PhotoGallery :event="event" />
     </div>
-  </v-container>
+  </CardWrapper>
 </template>
 
 <script>
 import PhotoGallery from '../components/PhotoGallery.vue';
+import CardWrapper from '../components/UI/CardWrapper';
+
 export default {
   components: {
     PhotoGallery,
+    CardWrapper,
   },
   data: () => ({
     events: [

src/views/TeamView.vue

@@ -1,46 +1,46 @@
 <template>
-  <div>
-    <v-container>
-      <h1 id="team_header">2021-2022 Team</h1>
-      <div class="section_spacer">
-        <h2 class="team_subheader">Officers</h2>
-        <v-row>
-          <v-col
-            cols="12"
-            lg="4"
-            md="6"
-            sm="12"
-            v-for="(officer, i) in officers"
-            :key="i"
-          >
-            <TeamMemberCard :member="officer" />
-          </v-col>
-        </v-row>
-      </div>
-      <div>
-        <h2 class="team_subheader">Advisors</h2>
-        <v-row>
-          <v-col
-            cols="12"
-            lg="4"
-            md="6"
-            sm="12"
-            v-for="(advisor, i) in advisors"
-            :key="i"
-          >
-            <TeamMemberCard :member="advisor" />
-          </v-col>
-        </v-row>
-      </div>
-    </v-container>
-  </div>
+  <CardWrapper>
+    <h1 id="team_header">2021-2022 Team</h1>
+    <div class="section_spacer">
+      <h2 class="team_subheader">Officers</h2>
+      <v-row>
+        <v-col
+          cols="12"
+          lg="4"
+          md="6"
+          sm="12"
+          v-for="(officer, i) in officers"
+          :key="i"
+        >
+          <TeamMemberCard :member="officer" />
+        </v-col>
+      </v-row>
+    </div>
+    <div>
+      <h2 class="team_subheader">Advisors</h2>
+      <v-row>
+        <v-col
+          cols="12"
+          lg="4"
+          md="6"
+          sm="12"
+          v-for="(advisor, i) in advisors"
+          :key="i"
+        >
+          <TeamMemberCard :member="advisor" />
+        </v-col>
+      </v-row>
+    </div>
+  </CardWrapper>
 </template>
 
 <script>
 import TeamMemberCard from '../components/TeamMemberCard';
+import CardWrapper from '../components/UI/CardWrapper';
 export default {
   components: {
     TeamMemberCard,
+    CardWrapper,
   },
   data: () => ({
     officers: [