UI: Right sidebar UI

assets/javascripts/discourse/components/upcoming-events-list.gjs

@@ -11,8 +11,6 @@ import I18n from "discourse-i18n";
 import or from "truth-helpers/helpers/or";
 import { isNotFullDayEvent } from "../lib/guess-best-date-format";
 
-export const DEFAULT_MONTH_FORMAT = "MMMM YYYY";
-export const DEFAULT_DATE_FORMAT = "dddd, MMM D";
 export const DEFAULT_TIME_FORMAT = "LT";
 const DEFAULT_UPCOMING_DAYS = 180;
 const DEFAULT_COUNT = 8;
@@ -35,8 +33,6 @@ export default class UpcomingEventsList extends Component {
   @tracked hasError = false;
   @tracked eventsByMonth = {};
 
-  monthFormat = this.args.params?.monthFormat ?? DEFAULT_MONTH_FORMAT;
-  dateFormat = this.args.params?.dateFormat ?? DEFAULT_DATE_FORMAT;
   timeFormat = this.args.params?.timeFormat ?? DEFAULT_TIME_FORMAT;
   count = this.args.params?.count ?? DEFAULT_COUNT;
   upcomingDays = this.args.params?.upcomingDays ?? DEFAULT_UPCOMING_DAYS;
@@ -48,14 +44,21 @@ export default class UpcomingEventsList extends Component {
 
   constructor() {
     super(...arguments);
-
     this.appEvents.on("page:changed", this, this.updateEventsList);
   }
 
   get categoryId() {
     return this.router.currentRoute.attributes?.category?.id;
   }
 
+  get hasEmptyResponse() {
+    return (
+      !this.isLoading &&
+      !this.hasError &&
+      Object.keys(this.eventsByMonth).length === 0
+    );
+  }
+
   get title() {
     const categorySlug = this.router.currentRoute.attributes?.category?.slug;
     const titleSetting = this.siteSettings.map_events_title;
@@ -79,14 +82,6 @@ export default class UpcomingEventsList extends Component {
     }
   }
 
-  get hasEmptyResponse() {
-    return (
-      !this.isLoading &&
-      !this.hasError &&
-      Object.keys(this.eventsByMonth).length === 0
-    );
-  }
-
   @action
   async updateEventsList() {
     this.isLoading = true;
@@ -115,20 +110,20 @@ export default class UpcomingEventsList extends Component {
   }
 
   @action
-  formatMonth(month) {
-    return moment(month, "YYYY-MM").format(this.monthFormat);
+  formatTime({ starts_at, ends_at }) {
+    return isNotFullDayEvent(moment(starts_at), moment(ends_at))
+      ? moment(starts_at).format(this.timeFormat)
+      : this.allDayLabel;
   }
 
   @action
-  formatDate(month, day) {
-    return moment(`${month}-${day}`, "YYYY-MM-DD").format(this.dateFormat);
+  startsAtMonth(month, day) {
+    return moment(`${month}-${day}`).format("MMM");
   }
 
   @action
-  formatTime({ starts_at, ends_at }) {
-    return isNotFullDayEvent(moment(starts_at), moment(ends_at))
-      ? moment(starts_at).format(this.timeFormat)
-      : this.allDayLabel;
+  startsAtDay(month, day) {
+    return moment(`${month}-${day}`).format("D");
   }
 
   groupByMonthAndDay(data) {
@@ -183,35 +178,31 @@ export default class UpcomingEventsList extends Component {
         {{#unless this.isLoading}}
           <PluginOutlet @name="upcoming-events-list-container">
             {{#each-in this.eventsByMonth as |month monthData|}}
-              {{#if this.monthFormat}}
-                <h4 class="upcoming-events-list__formatted-month">
-                  {{this.formatMonth month}}
-                </h4>
-              {{/if}}
-
               {{#each-in monthData as |day events|}}
-                <div class="upcoming-events-list__day-section">
-                  <div class="upcoming-events-list__formatted-day">
-                    {{this.formatDate month day}}
-                  </div>
-
-                  {{#each events as |event|}}
-                    <a
-                      class="upcoming-events-list__event"
-                      href={{event.post.url}}
-                    >
+                {{#each events as |event|}}
+                  <a
+                    class="upcoming-events-list__event"
+                    href={{event.post.url}}
+                  >
+                    <div class="upcoming-events-list__event-date">
+                      <div class="month">{{this.startsAtMonth month day}}</div>
+                      <div class="day">{{this.startsAtDay month day}}</div>
+                    </div>
+                    <div class="upcoming-events-list__event-content">
+                      <span
+                        class="upcoming-events-list__event-name"
+                        title={{or event.name event.post.topic.title}}
+                      >
+                        {{or event.name event.post.topic.title}}
+                      </span>
                       {{#if this.timeFormat}}
-                        <div class="upcoming-events-list__event-time">
+                        <span class="upcoming-events-list__event-time">
                           {{this.formatTime event}}
-                        </div>
+                        </span>
                       {{/if}}
-
-                      <div class="upcoming-events-list__event-name">
-                        {{or event.name event.post.topic.title}}
-                      </div>
-                    </a>
-                  {{/each}}
-                </div>
+                    </div>
+                  </a>
+                {{/each}}
               {{/each-in}}
             {{/each-in}}
           </PluginOutlet>

assets/stylesheets/common/upcoming-events-list.scss

@@ -1,43 +1,68 @@
 .upcoming-events-list {
-  &__formatted-month {
-    font-weight: 600;
-  }
-
-  &__day-section {
+  &__event {
+    column-gap: 0.5em;
     display: flex;
-    flex-direction: column;
-    padding-bottom: 0.5rem;
-    gap: 0.5rem;
+    padding: 0.5em;
+    border-radius: var(--d-border-radius);
   }
-
-  &__formatted-day {
-    margin-left: 0.5rem;
-    font-weight: 600;
-    font-size: var(--base-font-size);
+  &__event:last-of-type {
+    margin-bottom: 0.75em;
   }
-
-  &__event {
+  &__event:hover {
+    background-color: var(--primary-50);
+  }
+  &__event-date {
     display: flex;
+    flex-shrink: 0;
     align-items: center;
-    margin-left: 1rem;
-    gap: 0.25rem;
+    justify-content: center;
+    width: 2.5em;
+    height: 2.5em;
+    margin: 0;
+    padding: 0;
+    border: 1px solid var(--primary-low);
+    border-radius: var(--d-button-border-radius);
+    flex-direction: column;
+    background-color: var(--secondary);
+  }
+  &__event-date .month {
+    text-align: center;
+    color: var(--primary);
+    font-size: var(--font-down-3);
+    text-transform: uppercase;
+  }
+  &__event-date .day {
+    text-align: center;
+    color: var(--primary);
+    font-weight: bold;
     font-size: var(--font-down-1);
-    line-height: var(--line-height-medium);
   }
-
+  &__event-content {
+    display: flex;
+    flex-direction: column;
+  }
   &__event-name {
-    width: 70%;
+    display: -webkit-box;
+    -webkit-line-clamp: 1;
+    -webkit-box-orient: vertical;
+    overflow: hidden;
+    color: var(--primary);
   }
-
   &__event-time {
-    width: 30%;
-    text-align: center;
+    font-size: var(--font-down-2);
+    font-weight: 400;
+    color: var(--primary-700);
   }
-
   &__footer {
-    border-top: 1px solid var(--primary-low);
-    padding-top: 0.5em;
-    font-size: var(--font-down-1);
+    margin-top: 1em;
+    font-size: var(--font-down-2);
     line-height: var(--line-height-medium);
+    padding-left: 0.5em;
+  }
+  &__footer a {
+    color: var(--primary-high);
+  }
+  &__footer a:hover {
+    color: var(--primary);
   }
 }

test/javascripts/integration/components/upcoming-events-list-test.gjs

@@ -12,8 +12,6 @@ import {
 } from "discourse/tests/helpers/qunit-helpers";
 import I18n from "discourse-i18n";
 import UpcomingEventsList, {
-  DEFAULT_DATE_FORMAT,
-  DEFAULT_MONTH_FORMAT,
   DEFAULT_TIME_FORMAT,
 } from "../../discourse/components/upcoming-events-list";
 
@@ -73,7 +71,7 @@ module("Integration | Component | upcoming-events-list", function (hooks) {
     );
   });
 
-  test("with events, standard formats", async function (assert) {
+  test("with events", async function (assert) {
     pretender.get("/discourse-post-event/events", twoEventsResponseHandler);
 
     await render(<template><UpcomingEventsList /></template>);
@@ -89,25 +87,22 @@ module("Integration | Component | upcoming-events-list", function (hooks) {
     await waitFor(".loading-container .spinner", { count: 0 });
 
     assert.deepEqual(
-      [...queryAll(".upcoming-events-list__formatted-month")].map(
+      [...queryAll(".upcoming-events-list__event-date .month")].map(
         (el) => el.innerText
       ),
       [
-        moment(tomorrowAllDay).format(DEFAULT_MONTH_FORMAT),
-        moment(nextMonth).format(DEFAULT_MONTH_FORMAT),
+        moment(tomorrowAllDay).format("MMM").toUpperCase(),
+        moment(nextMonth).format("MMM").toUpperCase(),
       ],
-      "it displays the formatted month"
+      "it displays the correct month"
     );
 
     assert.deepEqual(
-      [...queryAll(".upcoming-events-list__formatted-day")].map(
+      [...queryAll(".upcoming-events-list__event-date .day")].map(
         (el) => el.innerText
       ),
-      [
-        moment(tomorrowAllDay).format(DEFAULT_DATE_FORMAT),
-        moment(nextMonth).format(DEFAULT_DATE_FORMAT),
-      ],
-      "it displays the formatted day"
+      [moment(tomorrowAllDay).format("D"), moment(nextMonth).format("D")],
+      "it displays the correct day"
     );
 
     assert.deepEqual(
@@ -224,13 +219,11 @@ module("Integration | Component | upcoming-events-list", function (hooks) {
     );
   });
 
-  test("with events, overridden formats", async function (assert) {
+  test("with events, overridden time format", async function (assert) {
     pretender.get("/discourse-post-event/events", twoEventsResponseHandler);
 
     await render(<template>
-      <UpcomingEventsList
-        @params={{hash monthFormat="" dateFormat="L" timeFormat="LLL"}}
-      />
+      <UpcomingEventsList @params={{hash timeFormat="LLL"}} />
     </template>);
 
     this.appEvents.trigger("page:changed", { url: "/" });
@@ -243,14 +236,6 @@ module("Integration | Component | upcoming-events-list", function (hooks) {
 
     await waitFor(".loading-container .spinner", { count: 0 });
 
-    assert.deepEqual(
-      [...queryAll(".upcoming-events-list__formatted-day")].map(
-        (el) => el.innerText
-      ),
-      [moment(tomorrowAllDay).format("L"), moment(nextMonth).format("L")],
-      "it displays the formatted day"
-    );
-
     assert.deepEqual(
       [...queryAll(".upcoming-events-list__event-time")].map(
         (el) => el.innerText
@@ -271,32 +256,6 @@ module("Integration | Component | upcoming-events-list", function (hooks) {
     );
   });
 
-  test("with events, omitted formats", async function (assert) {
-    pretender.get("/discourse-post-event/events", twoEventsResponseHandler);
-    await render(<template>
-      <UpcomingEventsList @params={{hash monthFormat="" timeFormat=""}} />
-    </template>);
-
-    this.appEvents.trigger("page:changed", { url: "/" });
-
-    assert
-      .dom(".upcoming-events-list__heading")
-      .hasText(
-        I18n.t("discourse_post_event.upcoming_events_list.title"),
-        "it displays the title"
-      );
-
-    await waitFor(".loading-container .spinner", { count: 0 });
-
-    assert
-      .dom(".upcoming-events-list__formatted-month")
-      .doesNotExist("it omits the formatted month when empty");
-
-    assert
-      .dom(".upcoming-events-list__formatted-time")
-      .doesNotExist("it omits the formatted time when empty");
-  });
-
   test("with an error response", async function (assert) {
     pretender.get("/discourse-post-event/events", () => {
       return response(500, {});