merge

discourse · Dec 3, 2024 · 1f4ab2c · 1f4ab2c
2 parents 5cd3452 + d14f7c1
commit 1f4ab2c
Show file tree

Hide file tree

Showing 2 changed files with 67 additions and 44 deletions.
diff --git a/assets/javascripts/discourse/components/upcoming-events-list.gjs b/assets/javascripts/discourse/components/upcoming-events-list.gjs
@@ -7,12 +7,10 @@ import ConditionalLoadingSpinner from "discourse/components/conditional-loading-
 import DButton from "discourse/components/d-button";
 import PluginOutlet from "discourse/components/plugin-outlet";
 import { ajax } from "discourse/lib/ajax";
-import I18n from "discourse-i18n";
+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,16 +33,15 @@ 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;
 
-  emptyMessage = I18n.t("discourse_post_event.upcoming_events_list.empty");
-  allDayLabel = I18n.t("discourse_post_event.upcoming_events_list.all_day");
-  errorMessage = I18n.t("discourse_post_event.upcoming_events_list.error");
-  viewAllLabel = I18n.t("discourse_post_event.upcoming_events_list.view_all");
+  title = i18n("discourse_post_event.upcoming_events_list.title");
+  emptyMessage = i18n("discourse_post_event.upcoming_events_list.empty");
+  allDayLabel = i18n("discourse_post_event.upcoming_events_list.all_day");
+  errorMessage = i18n("discourse_post_event.upcoming_events_list.error");
+  viewAllLabel = i18n("discourse_post_event.upcoming_events_list.view_all");
 
   constructor() {
     super(...arguments);
@@ -115,20 +112,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) {

diff --git a/assets/stylesheets/common/upcoming-events-list.scss b/assets/stylesheets/common/upcoming-events-list.scss
@@ -1,43 +1,69 @@
 .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;
+    font-size: var(--font-down-1);
+    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);
   }
 }