UX: Events UI Edits (#641)

This PR restyles the current events post UI: Minimize size of invitee avatars move CTA buttons to bottom remove invitee header & show more button (show more is in ellipses drop down) restyle border restyle month & date size & spacing increase font size for title add "0 going" placeholder to prevent jumpiness when invitees are rendered --------- Co-authored-by: Joffrey JAFFEUX <[email protected]>
discourse · Dec 3, 2024 · 725ae51 · 725ae51
1 parent d75e316
commit 725ae51
Show file tree

Hide file tree

Showing 6 changed files with 157 additions and 89 deletions.
diff --git a/assets/javascripts/discourse/components/discourse-post-event/dates.gjs b/assets/javascripts/discourse/components/discourse-post-event/dates.gjs
@@ -7,6 +7,7 @@ import { service } from "@ember/service";
 import { htmlSafe } from "@ember/template";
 import { applyLocalDates } from "discourse/lib/local-dates";
 import { cook } from "discourse/lib/text";
+import icon from "discourse-common/helpers/d-icon";
 import guessDateFormat from "../../lib/guess-best-date-format";
 
 export default class DiscoursePostEventDates extends Component {
@@ -76,9 +77,7 @@ export default class DiscoursePostEventDates extends Component {
   }
 
   <template>
-    <section
-      class="event__section event-dates"
-      {{didInsert this.computeDates}}
-    >{{this.htmlDates}}</section>
+    <section class="event__section event-dates" {{didInsert this.computeDates}}>
+      {{icon "clock"}}{{this.htmlDates}}</section>
   </template>
 }
diff --git a/assets/javascripts/discourse/components/discourse-post-event/index.gjs b/assets/javascripts/discourse/components/discourse-post-event/index.gjs
@@ -67,6 +67,10 @@ export default class DiscoursePostEvent extends Component {
     return this.currentUser && this.args.event.can_act_on_discourse_post_event;
   }
 
+  get watchingInviteeStatus() {
+    return this.args.event.watchingInvitee?.status;
+  }
+
   <template>
     <div
       class={{concatClass
@@ -108,12 +112,6 @@ export default class DiscoursePostEvent extends Component {
             />
           </header>
 
-          {{#if @event.canUpdateAttendance}}
-            <section class="event__section event-actions">
-              <Status @event={{@event}} />
-            </section>
-          {{/if}}
-
           <PluginOutlet
             @name="discourse-post-event-info"
             @outletArgs={{hash
@@ -122,11 +120,15 @@ export default class DiscoursePostEvent extends Component {
               Url=(component Url url=@event.url)
               Dates=(component Dates event=@event)
               Invitees=(component Invitees event=@event)
+              Status=(component Status event=@event)
             }}
           >
             <Url @url={{@event.url}} />
             <Dates @event={{@event}} />
             <Invitees @event={{@event}} />
+            {{#if @event.canUpdateAttendance}}
+              <Status @event={{@event}} />
+            {{/if}}
           </PluginOutlet>
         {{/if}}
       </div>

diff --git a/assets/javascripts/discourse/components/discourse-post-event/invitees.gjs b/assets/javascripts/discourse/components/discourse-post-event/invitees.gjs
@@ -2,6 +2,7 @@ import Component from "@glimmer/component";
 import { action } from "@ember/object";
 import { service } from "@ember/service";
 import DButton from "discourse/components/d-button";
+import icon from "discourse-common/helpers/d-icon";
 import i18n from "discourse-common/helpers/i18n";
 import PostEventInvitees from "../modal/post-event-invitees";
 import Invitee from "./invitee";
@@ -70,11 +71,21 @@ export default class DiscoursePostEventInvitees extends Component {
               @action={{this.showAllInvitees}}
             />
           </div>
-          <ul class="event-invitees-avatars">
-            {{#each @event.sampleInvitees as |invitee|}}
-              <Invitee @invitee={{invitee}} />
-            {{/each}}
-          </ul>
+          <div class="event-invitees-avatars-container">
+            {{icon "users"}}
+            <ul class="event-invitees-avatars">
+              {{#each @event.sampleInvitees as |invitee|}}
+                <Invitee @invitee={{invitee}} />
+              {{/each}}
+            </ul>
+          </div>
+        </section>
+      {{else}}
+        <section class="event__section event-invitees no-rsvp">
+          <p class="no-rsvp-description">{{i18n
+              "discourse_post_event.models.invitee.status.going_count.other"
+              count="0"
+            }}</p>
         </section>
       {{/if}}
     {{/unless}}

diff --git a/assets/javascripts/discourse/components/discourse-post-event/status.gjs b/assets/javascripts/discourse/components/discourse-post-event/status.gjs
@@ -12,10 +12,6 @@ export default class DiscoursePostEventStatus extends Component {
   @service discoursePostEventApi;
   @service siteSettings;
 
-  get watchingInviteeStatus() {
-    return this.args.event.watchingInvitee?.status;
-  }
-
   get eventButtons() {
     return this.siteSettings.event_participation_buttons.split("|");
   }
@@ -36,6 +32,10 @@ export default class DiscoursePostEventStatus extends Component {
     return this.args.event.watchingInvitee && this.args.event.isPublic;
   }
 
+  get watchingInviteeStatus() {
+    return this.args.event.watchingInvitee?.status;
+  }
+
   @action
   async leaveEvent() {
     try {
@@ -107,9 +107,9 @@ export default class DiscoursePostEventStatus extends Component {
   }
 
   <template>
-    <div
+    <section
       class={{concatClass
-        "event-status"
+        "event__section event-actions event-status"
         (if
           this.watchingInviteeStatus
           (concat "status-" this.watchingInviteeStatus)
@@ -177,6 +177,6 @@ export default class DiscoursePostEventStatus extends Component {
           {{/unless}}
         {{/if}}
       </PluginOutlet>
-    </div>
+    </section>
   </template>
 }