update Event show

Sun-Mountain · Jun 5, 2023 · 617caba · 617caba
1 parent 7ca0c1c
commit 617caba
Show file tree

Hide file tree

Showing 3 changed files with 21 additions and 1 deletion.
diff --git a/frontend/src/assets/stylesheets/base/variables.scss b/frontend/src/assets/stylesheets/base/variables.scss
@@ -29,6 +29,8 @@ $user-stats: $color-info-blue;
 $event-stats: $color-success-green;
 
 // Events
+$date-color: $color-sonic-silver;
+$description-color: $color-cadet-blue-crayola;
 $edit-link-color: $color-info-blue;
 $edit-link-hover: $color-fed-blue;
 

diff --git a/frontend/src/assets/stylesheets/components/events.scss b/frontend/src/assets/stylesheets/components/events.scss
@@ -1,4 +1,13 @@
 .event-container {
+  #event-date {
+    color: $date-color;
+  }
+
+  .no-description {
+    color: $description-color;
+    font-style: italic;
+  }
+
   .event-actions-container {
     display: flex;
     justify-content: space-between;

diff --git a/frontend/src/views/events/StagedEvent.vue b/frontend/src/views/events/StagedEvent.vue
@@ -1,6 +1,9 @@
 <template>
   <v-container class="event-container">
     <h2>{{ stagedEvent.event_title }}</h2>
+    <div id="event-date">
+      {{ stagedEvent.start_date }} {{ stagedEvent.end_date ? `- ${stagedEvent.end_date}` : null }}
+    </div>
     <div className="event-actions-container" v-show="stagedEvent.user_id === currentUser.id">
       <router-link className="edit-link" :to="editLink">
         <v-icon size="16px" color="info" icon="mdi:mdi-square-edit-outline" /> Edit
@@ -13,7 +16,13 @@
         Cancel Event
       </v-btn>
     </div>
-    {{ stagedEvent}}
+    <h3>About</h3>
+    <div id="description-container" :class="{ 'no-description': !stagedEvent.description }">
+      {{ stagedEvent.description ?
+        stagedEvent.description :
+        'No description has been given for the event.'
+      }}
+    </div>
   </v-container>
 </template>