updating latest tutorials

tutorials/events-app/src/components/EventsList.vue

@@ -0,0 +1,31 @@
+<template>
+  <div class="events container">
+    <h2 class="subtitle is-3">
+      Check out our incoming events
+    </h2>
+    <div class="columns is-multiline">
+      <div class="column is-one-quarter">
+        <EventCard />
+      </div>
+    </div>
+  </div>
+</template>
+<script>
+import EventCard from '@/components/EventCard';
+export default {
+  name: 'EventsList',
+  components: {
+    EventCard
+  },
+  data() {
+    return {
+    };
+  },
+};
+</script>
+<style lang="scss" scoped>
+.events {
+  margin-top: 100px;
+  text-align: center;
+}
+</style>

tutorials/events-app/src/components/partials/Nav.vue

@@ -4,7 +4,8 @@
       <a class="navbar-item" href="/">
         <strong class="is-size-4">Animal Rescue League</strong>
       </a>
-      <a role="button" class="navbar-burger burger" aria-label="menu" aria-expanded="false" data-target="navbarBasicExample">
+      <a role="button" class="navbar-burger burger" aria-label="menu" aria-expanded="false"
+        data-target="navbarBasicExample">
         <span aria-hidden="true"></span>
         <span aria-hidden="true"></span>
         <span aria-hidden="true"></span>
@@ -23,25 +24,49 @@
             </a>
           </div>
         </div>
+        <div class="navbar-item" id="live-time" v-if="timeReady">
+          {{ time }}
+        </div>
       </div>
     </div>
   </nav>
 </template>
 <script>
+import moment from 'moment'
 export default {
-  name: 'Nav'
+  name: 'Nav',
+  data: () => {
+    return {
+      time: '',
+      timeReady: false,
+    }
+  },
+  methods: {
+    getTime () {
+      // console.log('Getting current time');
+      return moment().format('HH:mm:ss')
+    }
+  },
+  mounted () {
+    setInterval(() => {
+      this.time = this.getTime(), 1000
+    });
+    this.timeReady = true;
+  }
 }
 </script>
 <style lang="scss">
-  nav {
-    margin-top: 25px;
-    margin-bottom: 30px;
-    a {
-      font-weight: bold;
-      color: #2c3e50;
-      &.router-link-exact-active{
-        color: #d88d00;
-      }
+nav {
+  margin-top: 25px;
+  margin-bottom: 30px;
+
+  a {
+    font-weight: bold;
+    color: #2c3e50;
+
+    &.router-link-exact-active {
+      color: #d88d00;
     }
   }
+}
 </style>

tutorials/events-app/src/views/Home.vue

@@ -10,58 +10,41 @@
             Make sure you check out the upcoming events below:
           </h2>
           <div class="button-block">
-            <button class="button is-xl is-dark" v-if="dataReady">{{date}}</button>
+            <button class="button is-xl is-dark">Sign Up to Browse Events</button>
           </div>
         </div>
-        <!-- <h1 >{{ date }}</h1> -->
-        <h1 v-if="dataReady">{{ date }}</h1>
       </div>
     </section>
+    <EventsList />
     <!-- <img class="blurify" src="https://cdn.auth0.com/blog/vue-meetup/event-banner.png"> -->
   </div>
 </template>
 <script>
-import moment from 'moment'
+import Vue from 'vue'
+import vBlur from 'v-blur'
+import EventsList from '@/components/EventsList'
+
+Vue.use(vBlur)
+
 export default {
   name: 'home',
-  // components: {},
-  created() {
-    // console.log(this);
-    // console.log(this.$moment().format("HH:mm:ss"));
-    // this.date = moment().format("HH:mm:ss");
+  components: {
+    EventsList
   },
-  data: function() {
+  data: () => {
     return {
-      date: '',
-      dd: '',
-      ddd: '',
-      dataReady: false
+      isBlurred: true,
+      disableBlur: {
+        isBlurred: false,
+      }
     }
-  },
-  methods: {
-    async logger () {
-      console.log("a string");
-      this.dd = "a first string";
-    },
-    getTime () {
-      console.log("getting time");
-      return moment().format("HH:mm:ss");
-    },
-  },
-  mounted() {
-    console.log("a second string");
-    // await this.logger();
-    setInterval(() => {
-      this.date = this.getTime(), 1000
-  });
-    this.dataReady = true;
   }
 }
 </script>
 <style lang="scss" scoped>
 .hero {
   text-align: center;
-  background-image: url('https://cdn.auth0.com/blog/vue-meetup/event-banner.png');
+  // background-image: url('https://cdn.auth0.com/blog/vue-meetup/event-banner.png');
   background-image: url('https://face4pets.files.wordpress.com/2018/01/shelter-data-1.jpg');
   background-size: cover;
   background-position: center;