Prettying up the Event Show

Author: Gregg

src/components/BaseIcon.vue

@@ -28,11 +28,11 @@ export default {
 .icon-wrapper {
   display: inline-flex;
   align-items: center;
-  color: rgba(0, 0, 0, 0.4);
   font-size: 1rem;
   font-weight: 600;
 }
 .icon {
+  color: rgba(0, 0, 0, 0.4);
   stroke: currentColor;
   stroke-width: 2;
   stroke-linecap: round;

src/views/EventShow.vue

@@ -1,5 +1,28 @@
 <template>
-  <h1>Showing event {{ event.title }}</h1>
+  <div>
+    <div class="event-header">
+      <span class="eyebrow">@{{ event.time }} on {{ event.date }}</span>
+      <h1 class="title">{{ event.title }}</h1>
+      <h5>Organized by {{ event.organizer }}</h5>
+      <h5>Category: {{ event.category }}</h5>
+    </div>
+
+    <BaseIcon name="map"><h2>Location</h2></BaseIcon>
+
+    <address>{{ event.___location }}</address>
+
+    <h2>Event details</h2>
+    <p>{{ event.description }}</p>
+
+    <h2>Attendees
+      <span class="badge -fill-gradient">{{ event.attendees.length }}</span>
+    </h2>
+    <ul class="list-group">
+      <li v-for="(attendee, index) in event.attendees" :key="index" class="list-item">
+        <b>{{ attendee.name }}</b>
+      </li>
+    </ul>
+  </div>
 </template>
 <script>
 import EventService from '@/services/EventService.js'
@@ -22,3 +45,23 @@ export default {
   }
 }
 </script>
+<style scoped>
+.___location {
+  margin-bottom: 0;
+}
+.___location > .icon {
+  margin-left: 10px;
+}
+.event-header > .title {
+  margin: 0;
+}
+.list-group {
+  margin: 0;
+  padding: 0;
+  list-style: none;
+}
+.list-group > .list-item {
+  padding: 1em 0;
+  border-bottom: solid 1px #e5e5e5;
+}
+</style>