Merge pull request #17 from Brian-E-Nguyen/recent-photos

Recent Photos

src/components/PhotoCard.vue

@@ -0,0 +1,62 @@
+<template>
+  <v-dialog v-model="dialog" width="750">
+    <template v-slot:activator="{ on, attrs }">
+      <v-img
+        :src="photo"
+        class="photo_card"
+        v-bind="attrs"
+        v-on="on"
+        aspect-ratio="1"
+      >
+        <template v-slot:placeholder>
+          <v-row class="fill-height ma-0" align="center" justify="center">
+            <v-progress-circular
+              indeterminate
+              color="grey lighten-5"
+            ></v-progress-circular>
+          </v-row>
+        </template>
+      </v-img>
+    </template>
+    <center>
+      <v-img
+        @click="dialog = false"
+        :src="photo"
+        width="750px"
+        v-bind="attrs"
+        v-on="on"
+        class="photo_card_popup"
+      >
+      </v-img>
+    </center>
+  </v-dialog>
+</template>
+
+<script>
+export default {
+  name: 'PhotoCard',
+  data: () => ({
+    dialog: false,
+  }),
+  props: {
+    photo: String,
+  },
+};
+</script>
+
+<style>
+.photo_card {
+  transition: 0.5s ease;
+  border-radius: 3%;
+  border-style: solid;
+  border-color: #e2e2e2;
+}
+.photo_card:hover {
+  transition: 0.5s ease;
+  box-shadow: rgba(0, 0, 0, 0.55) 0px 5px 15px;
+  cursor: pointer;
+}
+.photo_card_popup:hover {
+  cursor: pointer;
+}
+</style>

src/components/RecentPhotos.vue

@@ -0,0 +1,44 @@
+<template>
+  <div>
+    <h1 id="recent_photos_header">Recent Photos</h1>
+    <v-row class="fill-height">
+      <v-col v-for="(photo, i) in photos" :key="i" cols="12" md="6" lg="4">
+        <PhotoCard :photo="photo" /> </v-col
+    ></v-row>
+    <center>
+      <router-link to="/photos" class="photos_btn_hover">
+        <v-btn x-large class="photos_btn">View More Photos</v-btn>
+      </router-link>
+    </center>
+  </div>
+</template>
+
+<script>
+import PhotoCard from './PhotoCard';
+
+export default {
+  name: 'RecentPhotos',
+  components: {
+    PhotoCard,
+  },
+  data: () => ({
+    photos: [
+      'https://res.cloudinary.com/buraiyen/image/upload/v1637183817/CSULB_TC_Website/6F3E6219-7561-4D01-AA4A-B13A735CCE80_kjncp4.jpg',
+      'https://res.cloudinary.com/buraiyen/image/upload/v1637183822/CSULB_TC_Website/IMG_9996_bdgkjf.jpg',
+      'https://res.cloudinary.com/buraiyen/image/upload/v1637183820/CSULB_TC_Website/IMG_0040_txeaj1.jpg',
+    ],
+  }),
+};
+</script>
+
+<style>
+#recent_photos_header {
+  color: #2f86a6;
+}
+.photos_btn {
+  margin: 4rem 0px;
+}
+.photos_btn_hover:hover {
+  text-decoration: none;
+}
+</style>

src/views/HomeView.vue

@@ -5,6 +5,7 @@
       <v-container>
         <Introduction />
         <UpcomingEvents />
+        <RecentPhotos />
         <Quote />
       </v-container>
     </v-card>
@@ -16,6 +17,8 @@ import Carousel from '../components/Carousel/Carousel.vue';
 import Introduction from '../components/Introduction';
 import UpcomingEvents from '../components/UpcomingEvents';
 import Quote from '../components/Quote';
+import RecentPhotos from '../components/RecentPhotos';
+// import PhotoCard from '../components/PhotoCard.vue';
 
 export default {
   name: 'Home',
@@ -25,6 +28,7 @@ export default {
     Introduction,
     UpcomingEvents,
     Quote,
+    RecentPhotos,
   },
 };
 Carousel;