From c4f6eba0622d7bd913064dc72a73b2a439b377b8 Mon Sep 17 00:00:00 2001 From: Joffrey JAFFEUX Date: Fri, 8 Nov 2024 13:24:54 +0900 Subject: [PATCH] UX: Events UI Edits 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 --- .../components/discourse-post-event/dates.gjs | 3 +- .../components/discourse-post-event/index.gjs | 20 +- .../discourse-post-event/invitees.gjs | 22 ++- .../discourse-post-event/status.gjs | 6 +- .../models/discourse-post-event-invitee.js | 12 ++ .../common/discourse-post-event.scss | 185 +++++++++++++----- .../mobile/discourse-post-event.scss | 6 - spec/system/post_event_spec.rb | 3 +- 8 files changed, 181 insertions(+), 76 deletions(-) diff --git a/assets/javascripts/discourse/components/discourse-post-event/dates.gjs b/assets/javascripts/discourse/components/discourse-post-event/dates.gjs index 2fde3e7e0..158d135d2 100644 --- 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 { @@ -79,6 +80,6 @@ export default class DiscoursePostEventDates extends Component {
{{this.htmlDates}}
+ >{{icon "far-clock"}}{{this.htmlDates}} } diff --git a/assets/javascripts/discourse/components/discourse-post-event/index.gjs b/assets/javascripts/discourse/components/discourse-post-event/index.gjs index 1c8c9e649..339d451d2 100644 --- a/assets/javascripts/discourse/components/discourse-post-event/index.gjs +++ b/assets/javascripts/discourse/components/discourse-post-event/index.gjs @@ -2,6 +2,7 @@ import Component from "@glimmer/component"; import { hash } from "@ember/helper"; import { service } from "@ember/service"; import { modifier } from "ember-modifier"; +import { or } from "truth-helpers"; import PluginOutlet from "discourse/components/plugin-outlet"; import concatClass from "discourse/helpers/concat-class"; import replaceEmoji from "discourse/helpers/replace-emoji"; @@ -108,12 +109,6 @@ export default class DiscoursePostEvent extends Component { /> - {{#if @event.canUpdateAttendance}} -
- -
- {{/if}} - - + {{#if + (or + @event.watchingInvitee.isGoing + @event.watchingInvitee.isInterested + ) + }} + + {{/if}} + {{#if @event.canUpdateAttendance}} + + {{/if}} {{/if}} diff --git a/assets/javascripts/discourse/components/discourse-post-event/invitees.gjs b/assets/javascripts/discourse/components/discourse-post-event/invitees.gjs index a3bb470b3..ac592e272 100644 --- 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,22 @@ export default class DiscoursePostEventInvitees extends Component { @action={{this.showAllInvitees}} /> - +
+ {{icon "users"}} + +
+ + {{else}} +
+
+
+

0 going

+
+
{{/if}} {{/unless}} diff --git a/assets/javascripts/discourse/components/discourse-post-event/status.gjs b/assets/javascripts/discourse/components/discourse-post-event/status.gjs index 056177769..f7edbe1fa 100644 --- a/assets/javascripts/discourse/components/discourse-post-event/status.gjs +++ b/assets/javascripts/discourse/components/discourse-post-event/status.gjs @@ -107,9 +107,9 @@ export default class DiscoursePostEventStatus extends Component { } } diff --git a/assets/javascripts/discourse/models/discourse-post-event-invitee.js b/assets/javascripts/discourse/models/discourse-post-event-invitee.js index 7c6db7079..a55444f75 100644 --- a/assets/javascripts/discourse/models/discourse-post-event-invitee.js +++ b/assets/javascripts/discourse/models/discourse-post-event-invitee.js @@ -15,6 +15,18 @@ export default class DiscoursePostEventInvitee { this.user = this.#initUserModel(args.user); } + isGoing() { + return this.status === "going"; + } + + isInterested() { + return this.status === "interested"; + } + + isNotGoing() { + return this.status === "not_going"; + } + #initUserModel(user) { if (!user || user instanceof User) { return user; diff --git a/assets/stylesheets/common/discourse-post-event.scss b/assets/stylesheets/common/discourse-post-event.scss index 4bdee323e..b5a462a79 100644 --- a/assets/stylesheets/common/discourse-post-event.scss +++ b/assets/stylesheets/common/discourse-post-event.scss @@ -1,15 +1,14 @@ $interested: #fb985d; +$show-interested: inherit; .discourse-post-event { display: flex; + max-width: 35rem; + justify-content: center; .event__section { padding: 0.5em 1em; - &:not(:last-child) { - border-bottom: 1px solid var(--primary-low); - } - &:first-child { border-top: 1px solid var(--primary-low); } @@ -28,14 +27,16 @@ $interested: #fb985d; } .discourse-post-event-widget { - border: 5px solid var(--primary-low); + box-shadow: 0px 0px 0px 3px var(--primary-100); + border: 1px solid var(--primary-300); display: flex; background: var(--secondary); margin: 5px 0; flex-direction: column; flex: 1 0 auto; - max-width: 100%; + max-width: calc(100% - 2px - 6px); box-sizing: border-box; + border-radius: var(--d-button-border-radius); .widget-dropdown { margin: 0; @@ -66,15 +67,15 @@ $interested: #fb985d; } .event-header { + column-gap: 1em; display: flex; - align-items: center; - padding: 0 1em; - height: 75px; + align-items: flex-start; + padding: 0.5em 1em; + margin-top: 0.5em; .more-dropdown { margin-left: auto; align-self: flex-start; - margin-top: 1em; &.has-no-actions { display: none; @@ -102,21 +103,33 @@ $interested: #fb985d; .event-date { display: flex; + flex-shrink: 0; + align-items: center; + justify-content: center; + width: 3em; + height: 3em; + margin: 0; + padding: 0; + border: 1px solid var(--primary-low); + border-radius: var(--d-button-border-radius); flex-direction: column; - width: auto; - margin-right: 1em; .month { text-align: center; color: red; - font-size: var(--font-down-1); + font-size: 0.6875rem; + line-height: 0.75rem; + letter-spacing: 0.0125rem; + font-weight: 400; text-transform: uppercase; } .day { text-align: center; - font-weight: 500; - font-size: var(--font-up-2); + font-size: 1.25rem; + font-weight: 400; + line-height: 1.5rem; + letter-spacing: 0.2px; } } @@ -127,21 +140,38 @@ $interested: #fb985d; margin-right: 0.5rem; .name { - font-weight: 700; @include ellipsis; max-width: 45vw; + font-size: 1.25rem; + line-height: 1.5rem; + letter-spacing: 0; + font-weight: 400; + white-space: initial; + margin-bottom: 0.25rem; } .status-and-creators { display: flex; align-items: center; color: var(--primary-medium); - font-size: var(--font-down-1); - margin: 0.25em 0; + font-size: 0.75rem; + line-height: 1rem; + letter-spacing: 0.0125rem; + font-weight: 400; + margin: 0; .separator { margin: 0 0.25em; } + .created-by { + margin-right: 0.25em; + } + + .username { + margin-left: 0.25em; + color: var(--primary); + } + .creators { display: flex; align-items: center; @@ -173,12 +203,20 @@ $interested: #fb985d; display: flex; justify-content: space-between; align-items: center; - height: 60px; - padding: 0 1em; + padding: 0.5em 1em; + flex-wrap: wrap; + border-top: 1px solid var(--primary-low); - .event-status { + &.event-status { margin: 0; + gap: 0.5em; + .btn { + flex: 1; + } + .interested-button { + display: $show-interested; + } &.status-going .going-button .d-icon { color: var(--success); } @@ -188,6 +226,9 @@ $interested: #fb985d; &.status-not_going .not-going-button .d-icon { color: var(--danger); } + .not-going-button span { + white-space: nowrap; + } } } @@ -205,7 +246,7 @@ $interested: #fb985d; flex-direction: column; .header { - display: flex; + display: none; justify-content: space-between; align-items: center; margin-bottom: 1em; @@ -233,14 +274,13 @@ $interested: #fb985d; .event-invitees-avatars { padding: 0; margin: 0; + gap: 0.25em; display: flex; flex-wrap: wrap; width: 100%; .event-invitee { list-style: none; - margin-right: 0.5em; - margin-bottom: 0.5em; opacity: 0.25; &.status-going, @@ -249,15 +289,19 @@ $interested: #fb985d; opacity: 1; } - &.status-going .avatar-flair { + &.status-interested { + display: $show-interested; + } + + &.status-going .avatar-flair .d-icon { color: var(--success); } - &.status-not_going .avatar-flair { + &.status-not_going .avatar-flair .d-icon { color: var(--danger); } - &.status-interested .avatar-flair { + &.status-interested .avatar-flair .d-icon { color: $interested; } } @@ -265,6 +309,11 @@ $interested: #fb985d; .topic-invitee-avatar { position: relative; display: inline-block; + padding-right: 0.5em; + + .avatar { + width: 1.5rem; + } .avatar-flair { position: absolute; @@ -272,13 +321,13 @@ $interested: #fb985d; bottom: 0; background: var(--secondary); border-radius: 50%; - height: 16px; - width: 16px; + height: 1rem; + width: 1rem; display: flex; align-items: center; justify-content: center; color: var(--primary-medium); - border: 1px solid var(--primary-low); + box-shadow: 0 0 0 1px var(--primary-100); .d-icon { font-size: var(--font-down-3); @@ -293,12 +342,18 @@ $interested: #fb985d; } .event-url, - .event-dates { - display: flex; + .event-dates, + .event-invitees-avatars-container { + display: grid; + grid-template-columns: 3em 1fr; + grid-column-gap: 1em; align-items: center; + height: min-content; .d-icon { color: var(--primary-high); + margin: 0 auto; + padding: 0; } } @@ -308,32 +363,56 @@ $interested: #fb985d; @include ellipsis; } } +} - .event-dates { - // hardcoded as cooking date is async and will change height after initial rendering otherwise - // not ideal but a decent low tech solution - height: 24px; - - .participants { - margin-left: 0.5em; - color: var(--primary-medium); - } +.event-dates { + // hardcoded as cooking date is async and will change height after initial rendering otherwise + // not ideal but a decent low tech solution + height: 24px; - .date { - color: var(--primary-high); - margin-left: 1em; + .participants { + margin-left: 0.5em; + color: var(--primary-medium); + } - .discourse-local-date { - .d-icon { - display: none; - } - } + .discourse-local-date { + .d-icon { + display: none; } + } - .separator { - color: var(--primary-high); - margin: 0 0.5em; - text-align: center; + .separator { + color: var(--primary-high); + margin: 0 0.5em; + text-align: center; + } +} + +.discourse-post-event { + .cooked-date, + .participants, + .event-url .url, + .no-rsvp-description { + font-size: 0.875rem; + line-height: 1.25rem; + letter-spacing: 0.00625rem; + font-weight: 400; + border-bottom: none; + margin: 0; + } + .event__section.no-rsvp { + height: calc(48px - 1em); + display: flex; + align-items: center; + } + .event-invitees-status { + margin-left: 4em; + .no-rsvp-description { + color: var(--primary-medium); + font-size: 0.75rem; + line-height: 1rem; + letter-spacing: 0.0125rem; + font-weight: 400; } } } diff --git a/assets/stylesheets/mobile/discourse-post-event.scss b/assets/stylesheets/mobile/discourse-post-event.scss index 9ea431f9d..d698bddd7 100644 --- a/assets/stylesheets/mobile/discourse-post-event.scss +++ b/assets/stylesheets/mobile/discourse-post-event.scss @@ -3,12 +3,6 @@ border-width: 1px; } - .event-header, - .event-actions, - .event-dates { - padding: 0 0.3em; - } - .event-dates { .date { max-width: 75vw; diff --git a/spec/system/post_event_spec.rb b/spec/system/post_event_spec.rb index 2f292addf..483cdde86 100644 --- a/spec/system/post_event_spec.rb +++ b/spec/system/post_event_spec.rb @@ -56,7 +56,8 @@ expect(page).to have_css(".discourse-post-event .status-and-creators .status.public") page.find(".going-button").click - page.find(".event-invitees .show-all").click + page.find(".discourse-post-event-more-menu-trigger").click + page.find(".show-all-participants").click page.find(".d-modal input.filter").fill_in(with: "jan") page.find(".d-modal .add-invitee").click