From 1d9f195207b85ee179c6475233b9dadf15da82a7 Mon Sep 17 00:00:00 2001 From: Kris Date: Thu, 1 Jun 2023 11:17:44 -0400 Subject: [PATCH] UX: adjust various avatars due to size changes (#21890) --- .../discourse/app/widgets/topic-map.js | 4 +- .../stylesheets/common/base/compose.scss | 6 +-- .../stylesheets/common/base/topic-post.scss | 22 ++++++++--- .../common/components/user-card.scss | 38 +++++++++++-------- .../mobile/components/user-card.scss | 9 +++-- 5 files changed, 47 insertions(+), 32 deletions(-) diff --git a/app/assets/javascripts/discourse/app/widgets/topic-map.js b/app/assets/javascripts/discourse/app/widgets/topic-map.js index 4fe51192c19..dfeaddfde78 100644 --- a/app/assets/javascripts/discourse/app/widgets/topic-map.js +++ b/app/assets/javascripts/discourse/app/widgets/topic-map.js @@ -263,7 +263,7 @@ createWidget("topic-map-summary", { }) ); - return [nav, h("ul.clearfix", contents)]; + return [nav, h("ul", contents)]; }, }); @@ -311,7 +311,7 @@ createWidget("topic-map-expanded", { let avatars; if (attrs.participants && attrs.participants.length > 0) { - avatars = h("section.avatars.clearfix", [ + avatars = h("section.avatars", [ h("h3", I18n.t("topic_map.participants_title")), renderParticipants.call(this, attrs.userFilters, attrs.participants), ]); diff --git a/app/assets/stylesheets/common/base/compose.scss b/app/assets/stylesheets/common/base/compose.scss index f556c5b26d1..638292941c4 100644 --- a/app/assets/stylesheets/common/base/compose.scss +++ b/app/assets/stylesheets/common/base/compose.scss @@ -120,11 +120,9 @@ html.composer-open { width: auto; max-width: 100%; - .avatar { - width: 20px; - } - .action-title { + display: flex; + align-items: center; line-height: normal; @include ellipsis; } diff --git a/app/assets/stylesheets/common/base/topic-post.scss b/app/assets/stylesheets/common/base/topic-post.scss index 378a6bea32c..cd6b9e55e2c 100644 --- a/app/assets/stylesheets/common/base/topic-post.scss +++ b/app/assets/stylesheets/common/base/topic-post.scss @@ -674,10 +674,18 @@ aside.quote { border-top: none; // would cause double top border .avatars { - > div { - float: left; + display: flex; + flex-wrap: wrap; + align-items: center; + box-sizing: border-box; + a { + display: block; position: relative; - margin: 3px 0; + } + + .avatar { + width: 2.5em; + height: 2.5em; } .post-count { position: absolute; @@ -692,8 +700,7 @@ aside.quote { } .avatar { - float: left; - margin-right: 4px; + margin-right: 0.33em; } section { @@ -701,12 +708,15 @@ aside.quote { } ul { + display: flex; + flex-wrap: wrap; margin: 0; list-style: none; } h3 { - margin-bottom: 4px; + width: 100%; + margin-bottom: 0.33em; color: var(--primary); line-height: var(--line-height-large); font-weight: normal; diff --git a/app/assets/stylesheets/common/components/user-card.scss b/app/assets/stylesheets/common/components/user-card.scss index 495d12d5959..c72ad5b79ce 100644 --- a/app/assets/stylesheets/common/components/user-card.scss +++ b/app/assets/stylesheets/common/components/user-card.scss @@ -1,8 +1,10 @@ @use "sass:math"; -$card_width: 580px; -$avatar_width: 120px; -$avatar_margin: -50px; // negative margin makes avatars extend above cards +.user-card { + --card-width: 39em; + --avatar-width: 8em; + --avatar-margin: -3.3em; // extends the avatar above the card +} .animated-placeholder { height: 20px; @@ -10,8 +12,8 @@ $avatar_margin: -50px; // negative margin makes avatars extend above cards } .card-avatar-placeholder { - width: $avatar_width; - height: $avatar_width; + width: var(--avatar-width); + height: var(--avatar-width); border-radius: 100%; position: relative; overflow: hidden; @@ -26,15 +28,15 @@ $avatar_margin: -50px; // negative margin makes avatars extend above cards var(--primary-low) 18%, var(--primary-very-low) 33% ); - height: $avatar_width; - width: $card_width; + height: var(--avatar-width); + width: var(--card-width); } } // shared styles for user and group cards .user-card, .group-card { - width: $card_width; + width: var(--card-width); box-shadow: shadow("card"); color: var(--primary); background: var(--secondary) center center; @@ -140,12 +142,16 @@ $avatar_margin: -50px; // negative margin makes avatars extend above cards .first-row { display: flex; .avatar-placeholder { - width: $avatar_width; - height: $avatar_width; + width: var(--avatar-width); + height: var(--avatar-width); } .user-card-avatar { - margin-top: $avatar_margin; - max-height: $avatar_width; + margin-top: var(--avatar-margin); + max-height: var(--avatar-width); + } + .avatar { + width: 100%; + height: 100%; } .new-user a { color: var(--primary-low-mid); @@ -257,18 +263,18 @@ $avatar_margin: -50px; // negative margin makes avatars extend above cards .first-row { display: flex; .group-card-avatar { - margin-top: $avatar_margin; + margin-top: var(--avatar-margin); } .avatar-flair { display: flex; background-size: contain; background-repeat: no-repeat; - width: $avatar_width; - height: $avatar_width; + width: var(--avatar-width); + height: var(--avatar-width); color: var(--primary); .d-icon { margin: auto; - font-size: math.div($avatar_width, 1.5); + font-size: math.div(var(--avatar-width), 1.5); } &.rounded { border-radius: 50%; diff --git a/app/assets/stylesheets/mobile/components/user-card.scss b/app/assets/stylesheets/mobile/components/user-card.scss index 2b218327cbf..f114ed1647e 100644 --- a/app/assets/stylesheets/mobile/components/user-card.scss +++ b/app/assets/stylesheets/mobile/components/user-card.scss @@ -1,5 +1,3 @@ -$avatar_width: 120px; - // shared styles for user and group cards .user-card, .group-card { @@ -12,13 +10,16 @@ $avatar_width: 120px; .first-row { flex-wrap: wrap; .names { - flex: 1 1 calc(100% - #{$avatar_width}); + flex: 1 1 auto; box-sizing: border-box; } + .user-card-avatar { + flex: 0 0 auto; + } .usercard-controls { + width: 100%; // always wraps to next line --usercard-control-margin: 0.25em; display: flex; - flex: 1; flex-wrap: wrap; margin: 1em calc(var(--usercard-control-margin) * -1) 0; li {