initial commit

src/views/EventSingle.vue

@@ -0,0 +1,105 @@
+<template>
+  <div class="event-single">
+    <section class="hero is-primary">
+      <div class="hero-body">
+        <div class="container">
+          <h1 class="title">
+            {{ event.name }}
+          </h1>
+          <h2 class="subtitle">
+            <strong>Date:</strong> {{ event.date }}
+            <br>
+            <strong>Time:</strong> {{ event.time }}
+          </h2>
+        </div>
+      </div>
+    </section>
+    <section class="event-content">
+      <div class="container">
+        <p class="is-size-4 description">{{ event.description }}</p>
+        <p class="is-size-4">Location: {{ event.location }}</p>
+        <p class="is-size-4">Category: {{ event.category }}</p>
+        <div class="event-images columns is-multiline has-text-centered"></div>
+          <div class="event-images columns is-multiline has-text-centered">
+            <div v-for="image in event.images" :key="image.id" class="column is-one-third">
+              <img :src="image" :alt="event.name">
+            </div>
+          </div>
+      </div>
+    </section>
+  </div>
+</template>
+<script>
+export default {
+  name: 'EventSingle',
+  data() {
+    return {
+      events: [{
+          id: 1,
+          name: 'Charity Ball',
+          category: 'Fundraising',
+          description: 'Spend an elegant night of dinner and dancing with us as we raise money for our new rescue farm.',
+          featuredImage: 'https://placekitten.com/500/500',
+          images: [
+            'https://placekitten.com/500/500',
+            'https://placekitten.com/500/500',
+            'https://placekitten.com/500/500',
+          ],
+          location: '1234 Fancy Ave',
+          date: '12-25-2019',
+          time: '11:30'
+        },
+        {
+          id: 2,
+          name: 'Rescue Center Goods Drive',
+          category: 'Adoptions',
+          description: 'Come to our donation drive to help us replenish our stock of pet food, toys, bedding, etc. We will have live bands, games, food trucks, and much more.',
+          featuredImage: 'https://placekitten.com/500/500',
+          images: [
+            'https://placekitten.com/500/500'
+          ],
+          location: '1234 Dog Alley',
+          date: '11-21-2019',
+          time: '12:00'
+        },
+        {
+          id: 3,
+          name: 'Rescue Center Goods Drive',
+          category: 'Adoptions',
+          description: 'Come to our donation drive to help us replenish our stock of pet food, toys, bedding, etc. We will have live bands, games, food trucks, and much more.',
+          featuredImage: 'https://placekitten.com/500/500',
+          images: [
+            'https://placekitten.com/500/500'
+          ],
+          location: '1234 Dog Alley',
+          date: '11-21-2019',
+          time: '12:00'
+        }
+      ],
+      event: {}
+    }
+  },
+  created () {
+    const ID = Number(this.$route.params.id);
+    let event = this.events.find(my_event => my_event.id === ID);
+    this.event = event;
+  }
+}
+</script>
+<style lang="scss" scoped>
+.event-single {
+  margin-top: 30px;
+}
+
+.hero {
+  margin-bottom: 70px;
+}
+
+.event-images {
+  margin-top: 50px;
+}
+
+.description {
+  margin-bottom: 30px
+}
+</style>