From 0a6d43e23a54d8d79c50d42a2e158f53d0ce018d Mon Sep 17 00:00:00 2001 From: "Luna D." Date: Fri, 21 Feb 2025 23:45:10 +0100 Subject: [PATCH 1/5] move communication text below avatar on mobile --- assets/css/views/communications.css | 24 +++++++++++++++++++ .../templates/admin/report/show.html.slime | 11 +++++---- .../templates/comment/_comment.html.slime | 11 +++++---- .../comment/_comment_with_image.html.slime | 14 ++++++----- .../image/comment/history/index.html.slime | 13 +++++----- .../templates/message/_message.html.slime | 14 +++++------ .../templates/post/_post.html.slime | 11 +++++---- .../templates/post/preview/create.html.slime | 10 ++++---- .../topic/post/history/index.html.slime | 13 +++++----- 9 files changed, 80 insertions(+), 41 deletions(-) diff --git a/assets/css/views/communications.css b/assets/css/views/communications.css index 25dd4fab..87453f9e 100644 --- a/assets/css/views/communications.css +++ b/assets/css/views/communications.css @@ -107,3 +107,27 @@ span.communication__sender__stats, .communication--destroyed { background-color: var(--destroyed-content-color); } + +/* Mobile layout fixes */ +@media (max-width: $min-desktop-width) { + .communication__body { + display: grid; + grid-template-columns: repeat(2, auto) repeat(3, 1fr); + grid-template-rows: repeat(2, auto) repeat(3, 1fr); + } + + .communication__body:first-child { + grid-area: 1 / 1 / 2 / 2; + } + + .communication__body__sender { + width: calc(100vw - 12px - 125px); + grid-area: 1 / 2 / 2 / 3; + } + + .communication__body__text { + margin-top: var(--padding-normal); + display: block; + grid-area: 2 / 1 / 3 / 3; + } +} diff --git a/lib/philomena_web/templates/admin/report/show.html.slime b/lib/philomena_web/templates/admin/report/show.html.slime index 20835cdd..0acf02e9 100644 --- a/lib/philomena_web/templates/admin/report/show.html.slime +++ b/lib/philomena_web/templates/admin/report/show.html.slime @@ -4,12 +4,15 @@ p article.block.communication .block__content.flex.flex--no-wrap - .flex__fixed.spacing-right + .flex__fixed.spacing-right.hide-mobile = render PhilomenaWeb.UserAttributionView, "_anon_user_avatar.html", object: @report, conn: @conn .flex__grow.communication__body - span.communication__body__sender-name = render PhilomenaWeb.UserAttributionView, "_anon_user.html", object: @report, awards: true, conn: @conn - br - = render PhilomenaWeb.UserAttributionView, "_anon_user_title.html", object: @report, conn: @conn + .flex__fixed.spacing-right.hide-desktop + = render PhilomenaWeb.UserAttributionView, "_anon_user_avatar.html", object: @report, conn: @conn + .communication__body__sender + span.communication__body__sender-name = render PhilomenaWeb.UserAttributionView, "_anon_user.html", object: @report, awards: true, conn: @conn + br + = render PhilomenaWeb.UserAttributionView, "_anon_user_title.html", object: @report, conn: @conn .communication__body__text =<> @body diff --git a/lib/philomena_web/templates/comment/_comment.html.slime b/lib/philomena_web/templates/comment/_comment.html.slime index 1ec574dd..982099da 100644 --- a/lib/philomena_web/templates/comment/_comment.html.slime +++ b/lib/philomena_web/templates/comment/_comment.html.slime @@ -22,12 +22,15 @@ article.block.communication id="comment_#{@comment.id}" = submit "Delete", class: "button" .block__content.flex.flex--no-wrap class=communication_body_class(@comment) - .flex__fixed.spacing-right + .flex__fixed.spacing-right.hide-mobile = render PhilomenaWeb.UserAttributionView, "_anon_user_avatar.html", object: @comment, conn: @conn .flex__grow.communication__body - span.communication__body__sender-name = render PhilomenaWeb.UserAttributionView, "_anon_user.html", object: @comment, awards: true, conn: @conn - br - = render PhilomenaWeb.UserAttributionView, "_anon_user_title.html", object: @comment, conn: @conn + .flex__fixed.spacing-right.hide-desktop + = render PhilomenaWeb.UserAttributionView, "_anon_user_avatar.html", object: @comment, conn: @conn + .communication__body__sender + span.communication__body__sender-name = render PhilomenaWeb.UserAttributionView, "_anon_user.html", object: @comment, awards: true, conn: @conn + br + = render PhilomenaWeb.UserAttributionView, "_anon_user_title.html", object: @comment, conn: @conn .communication__body__text = if @comment.hidden_from_users do strong.comment_deleted diff --git a/lib/philomena_web/templates/comment/_comment_with_image.html.slime b/lib/philomena_web/templates/comment/_comment_with_image.html.slime index fce128bf..d5898685 100644 --- a/lib/philomena_web/templates/comment/_comment_with_image.html.slime +++ b/lib/philomena_web/templates/comment/_comment_with_image.html.slime @@ -1,15 +1,17 @@ article.block.communication id="comment_#{@comment.id}" .block__content.flex.flex--no-wrap class=communication_body_class(@comment) - .flex__fixed.spacing-right + .flex__fixed.spacing-right.hide-mobile .post-image-container = render PhilomenaWeb.ImageView, "_image_container.html", image: @comment.image, size: :thumb_tiny, conn: @conn .flex__grow.communication__body - span.communication__body__sender-name = render PhilomenaWeb.UserAttributionView, "_anon_user.html", object: @comment, awards: true, conn: @conn - br - - = render PhilomenaWeb.UserAttributionView, "_anon_user_title.html", object: @comment, conn: @conn - + .flex__fixed.spacing-right.hide-desktop + .post-image-container + = render PhilomenaWeb.ImageView, "_image_container.html", image: @comment.image, size: :thumb_tiny, conn: @conn + .communication__body__sender + span.communication__body__sender-name = render PhilomenaWeb.UserAttributionView, "_anon_user.html", object: @comment, awards: true, conn: @conn + br + = render PhilomenaWeb.UserAttributionView, "_anon_user_title.html", object: @comment, conn: @conn .communication__body__text = if @comment.hidden_from_users do strong.comment_deleted diff --git a/lib/philomena_web/templates/image/comment/history/index.html.slime b/lib/philomena_web/templates/image/comment/history/index.html.slime index bb27e827..2d392b3b 100644 --- a/lib/philomena_web/templates/image/comment/history/index.html.slime +++ b/lib/philomena_web/templates/image/comment/history/index.html.slime @@ -9,15 +9,16 @@ h1 = for version <- @versions do article.block.communication .block__content.flex.flex--no-wrap - .flex__fixed.spacing-right + .flex__fixed.spacing-right.hide-mobile = render PhilomenaWeb.UserAttributionView, "_anon_user_avatar.html", object: @comment, conn: @conn .flex__grow.communication__body - span.communication__body__sender-name = render PhilomenaWeb.UserAttributionView, "_anon_user.html", object: @comment, awards: true, conn: @conn - br - - = render PhilomenaWeb.UserAttributionView, "_anon_user_title.html", object: @comment, conn: @conn - + .flex__fixed.spacing-right.hide-desktop + = render PhilomenaWeb.UserAttributionView, "_anon_user_avatar.html", object: @comment, conn: @conn + .communication__body__sender + span.communication__body__sender-name = render PhilomenaWeb.UserAttributionView, "_anon_user.html", object: @comment, awards: true, conn: @conn + br + = render PhilomenaWeb.UserAttributionView, "_anon_user_title.html", object: @comment, conn: @conn .communication__body__text = for edit <- version.difference do = case edit do diff --git a/lib/philomena_web/templates/message/_message.html.slime b/lib/philomena_web/templates/message/_message.html.slime index 9f750121..8701d538 100644 --- a/lib/philomena_web/templates/message/_message.html.slime +++ b/lib/philomena_web/templates/message/_message.html.slime @@ -14,16 +14,16 @@ article.block.communication ' Approve .block__content.flex.flex--no-wrap - .flex__fixed.spacing-right + .flex__fixed.spacing-right.hide-mobile = render PhilomenaWeb.UserAttributionView, "_user_avatar.html", object: %{user: @message.from}, conn: @conn, class: "avatar--100px" .flex__grow.communication__body - - span.communication__body__sender-name = render PhilomenaWeb.UserAttributionView, "_user.html", object: %{user: @message.from}, badges: true, conn: @conn - br - - = render PhilomenaWeb.UserAttributionView, "_user_title.html", object: %{user: @message.from}, conn: @conn - + .flex__fixed.spacing-right.hide-desktop + = render PhilomenaWeb.UserAttributionView, "_user_avatar.html", object: %{user: @message.from}, conn: @conn, class: "avatar--100px" + .communication__body__sender + span.communication__body__sender-name = render PhilomenaWeb.UserAttributionView, "_user.html", object: %{user: @message.from}, badges: true, conn: @conn + br + = render PhilomenaWeb.UserAttributionView, "_user_title.html", object: %{user: @message.from}, conn: @conn .communication__body__text = @body diff --git a/lib/philomena_web/templates/post/_post.html.slime b/lib/philomena_web/templates/post/_post.html.slime index fc41fa73..ab5adcd7 100644 --- a/lib/philomena_web/templates/post/_post.html.slime +++ b/lib/philomena_web/templates/post/_post.html.slime @@ -22,12 +22,15 @@ article.block.communication id="post_#{@post.id}" = submit "Delete", class: "button" .block__content.flex.flex--no-wrap class=communication_body_class(@post) - .flex__fixed.spacing-right + .flex__fixed.spacing-right.hide-mobile = render PhilomenaWeb.UserAttributionView, "_anon_user_avatar.html", object: @post, conn: @conn .flex__grow.communication__body - span.communication__body__sender-name = render PhilomenaWeb.UserAttributionView, "_anon_user.html", object: @post, awards: true, conn: @conn - br - = render PhilomenaWeb.UserAttributionView, "_anon_user_title.html", object: @post, conn: @conn + .flex__fixed.spacing-right.hide-desktop + = render PhilomenaWeb.UserAttributionView, "_anon_user_avatar.html", object: @post, conn: @conn + .communication__body__sender + span.communication__body__sender-name = render PhilomenaWeb.UserAttributionView, "_anon_user.html", object: @post, awards: true, conn: @conn + br + = render PhilomenaWeb.UserAttributionView, "_anon_user_title.html", object: @post, conn: @conn .communication__body__text = if @post.hidden_from_users do strong.comment_deleted diff --git a/lib/philomena_web/templates/post/preview/create.html.slime b/lib/philomena_web/templates/post/preview/create.html.slime index 469efc80..452cda34 100644 --- a/lib/philomena_web/templates/post/preview/create.html.slime +++ b/lib/philomena_web/templates/post/preview/create.html.slime @@ -1,10 +1,12 @@ .block.flex - .flex__fixed.spacing-right + .flex__fixed.spacing-right.hide-mobile = render PhilomenaWeb.UserAttributionView, "_anon_user_avatar.html", object: @post, conn: @conn .flex__grow.communication__body - span.communication__body__sender-name - = render PhilomenaWeb.UserAttributionView, "_anon_user.html", object: @post, conn: @conn, awards: true - + .flex__fixed.spacing-right.hide-desktop + = render PhilomenaWeb.UserAttributionView, "_anon_user_avatar.html", object: @post, conn: @conn + .communication__body__sender + span.communication__body__sender-name + = render PhilomenaWeb.UserAttributionView, "_anon_user.html", object: @post, conn: @conn, awards: true .communication__body__text = @body diff --git a/lib/philomena_web/templates/topic/post/history/index.html.slime b/lib/philomena_web/templates/topic/post/history/index.html.slime index e455ff57..25625f00 100644 --- a/lib/philomena_web/templates/topic/post/history/index.html.slime +++ b/lib/philomena_web/templates/topic/post/history/index.html.slime @@ -8,15 +8,16 @@ h1 = for version <- @versions do article.block.communication .block__content.flex.flex--no-wrap - .flex__fixed.spacing-right + .flex__fixed.spacing-right.hide-mobile = render PhilomenaWeb.UserAttributionView, "_anon_user_avatar.html", object: @post, conn: @conn .flex__grow.communication__body - span.communication__body__sender-name = render PhilomenaWeb.UserAttributionView, "_anon_user.html", object: @post, awards: true, conn: @conn - br - - = render PhilomenaWeb.UserAttributionView, "_anon_user_title.html", object: @post, conn: @conn - + .flex__fixed.spacing-right.hide-desktop + = render PhilomenaWeb.UserAttributionView, "_anon_user_avatar.html", object: @post, conn: @conn + .communication__body__sender + span.communication__body__sender-name = render PhilomenaWeb.UserAttributionView, "_anon_user.html", object: @post, awards: true, conn: @conn + br + = render PhilomenaWeb.UserAttributionView, "_anon_user_title.html", object: @post, conn: @conn .communication__body__text = for edit <- version.difference do = case edit do From b66826c2467f8f0ae440aa9fbd541ca83d11985f Mon Sep 17 00:00:00 2001 From: "Luna D." Date: Fri, 21 Feb 2025 23:56:50 +0100 Subject: [PATCH 2/5] review fixed --- assets/css/views/communications.css | 7 ++++++- lib/philomena_web/templates/admin/report/show.html.slime | 4 ++-- lib/philomena_web/templates/comment/_comment.html.slime | 4 ++-- .../templates/comment/_comment_with_image.html.slime | 4 ++-- .../templates/image/comment/history/index.html.slime | 4 ++-- lib/philomena_web/templates/message/_message.html.slime | 4 ++-- lib/philomena_web/templates/post/_post.html.slime | 4 ++-- lib/philomena_web/templates/post/preview/create.html.slime | 4 ++-- .../templates/topic/post/history/index.html.slime | 4 ++-- 9 files changed, 22 insertions(+), 17 deletions(-) diff --git a/assets/css/views/communications.css b/assets/css/views/communications.css index 87453f9e..62eb88aa 100644 --- a/assets/css/views/communications.css +++ b/assets/css/views/communications.css @@ -108,6 +108,11 @@ span.communication__sender__stats, background-color: var(--destroyed-content-color); } +.communication__body__avatar { + flex: 0 0 auto; + margin-right: 12px; +} + /* Mobile layout fixes */ @media (max-width: $min-desktop-width) { .communication__body { @@ -116,7 +121,7 @@ span.communication__sender__stats, grid-template-rows: repeat(2, auto) repeat(3, 1fr); } - .communication__body:first-child { + .communication__body__avatar { grid-area: 1 / 1 / 2 / 2; } diff --git a/lib/philomena_web/templates/admin/report/show.html.slime b/lib/philomena_web/templates/admin/report/show.html.slime index 0acf02e9..35bf25a0 100644 --- a/lib/philomena_web/templates/admin/report/show.html.slime +++ b/lib/philomena_web/templates/admin/report/show.html.slime @@ -4,10 +4,10 @@ p article.block.communication .block__content.flex.flex--no-wrap - .flex__fixed.spacing-right.hide-mobile + .communication__body__avatar.hide-mobile = render PhilomenaWeb.UserAttributionView, "_anon_user_avatar.html", object: @report, conn: @conn .flex__grow.communication__body - .flex__fixed.spacing-right.hide-desktop + .communication__body__avatar.hide-desktop = render PhilomenaWeb.UserAttributionView, "_anon_user_avatar.html", object: @report, conn: @conn .communication__body__sender span.communication__body__sender-name = render PhilomenaWeb.UserAttributionView, "_anon_user.html", object: @report, awards: true, conn: @conn diff --git a/lib/philomena_web/templates/comment/_comment.html.slime b/lib/philomena_web/templates/comment/_comment.html.slime index 982099da..de82e79c 100644 --- a/lib/philomena_web/templates/comment/_comment.html.slime +++ b/lib/philomena_web/templates/comment/_comment.html.slime @@ -22,10 +22,10 @@ article.block.communication id="comment_#{@comment.id}" = submit "Delete", class: "button" .block__content.flex.flex--no-wrap class=communication_body_class(@comment) - .flex__fixed.spacing-right.hide-mobile + .communication__body__avatar.hide-mobile = render PhilomenaWeb.UserAttributionView, "_anon_user_avatar.html", object: @comment, conn: @conn .flex__grow.communication__body - .flex__fixed.spacing-right.hide-desktop + .communication__body__avatar.hide-desktop = render PhilomenaWeb.UserAttributionView, "_anon_user_avatar.html", object: @comment, conn: @conn .communication__body__sender span.communication__body__sender-name = render PhilomenaWeb.UserAttributionView, "_anon_user.html", object: @comment, awards: true, conn: @conn diff --git a/lib/philomena_web/templates/comment/_comment_with_image.html.slime b/lib/philomena_web/templates/comment/_comment_with_image.html.slime index d5898685..c82885cd 100644 --- a/lib/philomena_web/templates/comment/_comment_with_image.html.slime +++ b/lib/philomena_web/templates/comment/_comment_with_image.html.slime @@ -1,11 +1,11 @@ article.block.communication id="comment_#{@comment.id}" .block__content.flex.flex--no-wrap class=communication_body_class(@comment) - .flex__fixed.spacing-right.hide-mobile + .communication__body__avatar.hide-mobile .post-image-container = render PhilomenaWeb.ImageView, "_image_container.html", image: @comment.image, size: :thumb_tiny, conn: @conn .flex__grow.communication__body - .flex__fixed.spacing-right.hide-desktop + .communication__body__avatar.hide-desktop .post-image-container = render PhilomenaWeb.ImageView, "_image_container.html", image: @comment.image, size: :thumb_tiny, conn: @conn .communication__body__sender diff --git a/lib/philomena_web/templates/image/comment/history/index.html.slime b/lib/philomena_web/templates/image/comment/history/index.html.slime index 2d392b3b..b850c552 100644 --- a/lib/philomena_web/templates/image/comment/history/index.html.slime +++ b/lib/philomena_web/templates/image/comment/history/index.html.slime @@ -9,11 +9,11 @@ h1 = for version <- @versions do article.block.communication .block__content.flex.flex--no-wrap - .flex__fixed.spacing-right.hide-mobile + .communication__body__avatar.hide-mobile = render PhilomenaWeb.UserAttributionView, "_anon_user_avatar.html", object: @comment, conn: @conn .flex__grow.communication__body - .flex__fixed.spacing-right.hide-desktop + .communication__body__avatar.hide-desktop = render PhilomenaWeb.UserAttributionView, "_anon_user_avatar.html", object: @comment, conn: @conn .communication__body__sender span.communication__body__sender-name = render PhilomenaWeb.UserAttributionView, "_anon_user.html", object: @comment, awards: true, conn: @conn diff --git a/lib/philomena_web/templates/message/_message.html.slime b/lib/philomena_web/templates/message/_message.html.slime index 8701d538..87393460 100644 --- a/lib/philomena_web/templates/message/_message.html.slime +++ b/lib/philomena_web/templates/message/_message.html.slime @@ -14,11 +14,11 @@ article.block.communication ' Approve .block__content.flex.flex--no-wrap - .flex__fixed.spacing-right.hide-mobile + .communication__body__avatar.hide-mobile = render PhilomenaWeb.UserAttributionView, "_user_avatar.html", object: %{user: @message.from}, conn: @conn, class: "avatar--100px" .flex__grow.communication__body - .flex__fixed.spacing-right.hide-desktop + .communication__body__avatar.hide-desktop = render PhilomenaWeb.UserAttributionView, "_user_avatar.html", object: %{user: @message.from}, conn: @conn, class: "avatar--100px" .communication__body__sender span.communication__body__sender-name = render PhilomenaWeb.UserAttributionView, "_user.html", object: %{user: @message.from}, badges: true, conn: @conn diff --git a/lib/philomena_web/templates/post/_post.html.slime b/lib/philomena_web/templates/post/_post.html.slime index ab5adcd7..f4a8aa0b 100644 --- a/lib/philomena_web/templates/post/_post.html.slime +++ b/lib/philomena_web/templates/post/_post.html.slime @@ -22,10 +22,10 @@ article.block.communication id="post_#{@post.id}" = submit "Delete", class: "button" .block__content.flex.flex--no-wrap class=communication_body_class(@post) - .flex__fixed.spacing-right.hide-mobile + .communication__body__avatar.hide-mobile = render PhilomenaWeb.UserAttributionView, "_anon_user_avatar.html", object: @post, conn: @conn .flex__grow.communication__body - .flex__fixed.spacing-right.hide-desktop + .communication__body__avatar.hide-desktop = render PhilomenaWeb.UserAttributionView, "_anon_user_avatar.html", object: @post, conn: @conn .communication__body__sender span.communication__body__sender-name = render PhilomenaWeb.UserAttributionView, "_anon_user.html", object: @post, awards: true, conn: @conn diff --git a/lib/philomena_web/templates/post/preview/create.html.slime b/lib/philomena_web/templates/post/preview/create.html.slime index 452cda34..cc36ffbc 100644 --- a/lib/philomena_web/templates/post/preview/create.html.slime +++ b/lib/philomena_web/templates/post/preview/create.html.slime @@ -1,9 +1,9 @@ .block.flex - .flex__fixed.spacing-right.hide-mobile + .communication__body__avatar.hide-mobile = render PhilomenaWeb.UserAttributionView, "_anon_user_avatar.html", object: @post, conn: @conn .flex__grow.communication__body - .flex__fixed.spacing-right.hide-desktop + .communication__body__avatar.hide-desktop = render PhilomenaWeb.UserAttributionView, "_anon_user_avatar.html", object: @post, conn: @conn .communication__body__sender span.communication__body__sender-name diff --git a/lib/philomena_web/templates/topic/post/history/index.html.slime b/lib/philomena_web/templates/topic/post/history/index.html.slime index 25625f00..4048f99e 100644 --- a/lib/philomena_web/templates/topic/post/history/index.html.slime +++ b/lib/philomena_web/templates/topic/post/history/index.html.slime @@ -8,11 +8,11 @@ h1 = for version <- @versions do article.block.communication .block__content.flex.flex--no-wrap - .flex__fixed.spacing-right.hide-mobile + .communication__body__avatar.hide-mobile = render PhilomenaWeb.UserAttributionView, "_anon_user_avatar.html", object: @post, conn: @conn .flex__grow.communication__body - .flex__fixed.spacing-right.hide-desktop + .communication__body__avatar.hide-desktop = render PhilomenaWeb.UserAttributionView, "_anon_user_avatar.html", object: @post, conn: @conn .communication__body__sender span.communication__body__sender-name = render PhilomenaWeb.UserAttributionView, "_anon_user.html", object: @post, awards: true, conn: @conn From e6debbe7497a16479b478bf923b24bb8890b03e0 Mon Sep 17 00:00:00 2001 From: Liam Date: Fri, 21 Feb 2025 18:33:57 -0500 Subject: [PATCH 3/5] Reduce size of avatars in reduced-width view --- assets/css/common/measurements.css | 1 + assets/css/views/communications.css | 2 +- assets/css/views/profiles.css | 13 +++++++++++++ 3 files changed, 15 insertions(+), 1 deletion(-) diff --git a/assets/css/common/measurements.css b/assets/css/common/measurements.css index da613005..3135fcba 100644 --- a/assets/css/common/measurements.css +++ b/assets/css/common/measurements.css @@ -41,4 +41,5 @@ $image-large-size: 512px; --block-header-sub-height: 26px; --block-spacing: 6px; --media-box-header-height: 22px; + --reduced-communication-avatar-size: 75px; } diff --git a/assets/css/views/communications.css b/assets/css/views/communications.css index 62eb88aa..3901f24c 100644 --- a/assets/css/views/communications.css +++ b/assets/css/views/communications.css @@ -126,7 +126,7 @@ span.communication__sender__stats, } .communication__body__sender { - width: calc(100vw - 12px - 125px); + width: calc(100vw - 12px - var(--reduced-communication-avatar-size)); grid-area: 1 / 2 / 2 / 3; } diff --git a/assets/css/views/profiles.css b/assets/css/views/profiles.css index 3a0caeaf..05cf8b63 100644 --- a/assets/css/views/profiles.css +++ b/assets/css/views/profiles.css @@ -130,3 +130,16 @@ td.table--stats__sparkline { width: 125px; height: 125px; } + +/* Mobile layout fixes */ +@media (max-width: $min-desktop-width) { + .avatar--100px { + width: var(--reduced-communication-avatar-size); + height: var(--reduced-communication-avatar-size); + } + + .avatar--125px { + width: var(--reduced-communication-avatar-size); + height: var(--reduced-communication-avatar-size); + } +} From 66b23ae24fe6b0dba29957c44984cb11967b1e1f Mon Sep 17 00:00:00 2001 From: Liam Date: Fri, 21 Feb 2025 21:45:38 -0500 Subject: [PATCH 4/5] Distinguish content communication row in reduced-width view --- assets/.stylelintrc.yml | 2 +- assets/css/common/measurements.css | 2 +- assets/css/views/communications.css | 52 ++++++++++++++++++- .../templates/admin/report/show.html.slime | 2 +- .../templates/comment/_comment.html.slime | 4 +- .../comment/_comment_with_image.html.slime | 2 +- .../image/comment/history/index.html.slime | 2 +- .../templates/message/_message.html.slime | 4 +- .../templates/post/_post.html.slime | 4 +- .../templates/post/preview/create.html.slime | 2 +- .../topic/post/history/index.html.slime | 2 +- 11 files changed, 63 insertions(+), 15 deletions(-) diff --git a/assets/.stylelintrc.yml b/assets/.stylelintrc.yml index 3de2a658..c4eba511 100644 --- a/assets/.stylelintrc.yml +++ b/assets/.stylelintrc.yml @@ -20,7 +20,7 @@ rules: font-family-no-duplicate-names: true keyframe-block-no-duplicate-selectors: true no-duplicate-at-import-rules: true - no-duplicate-selectors: true + no-duplicate-selectors: null color-no-invalid-hex: true function-calc-no-unspaced-operator: true named-grid-areas-no-invalid: true diff --git a/assets/css/common/measurements.css b/assets/css/common/measurements.css index 3135fcba..a0581e07 100644 --- a/assets/css/common/measurements.css +++ b/assets/css/common/measurements.css @@ -41,5 +41,5 @@ $image-large-size: 512px; --block-header-sub-height: 26px; --block-spacing: 6px; --media-box-header-height: 22px; - --reduced-communication-avatar-size: 75px; + --reduced-communication-avatar-size: 50px; } diff --git a/assets/css/views/communications.css b/assets/css/views/communications.css index 3901f24c..f4ac4baa 100644 --- a/assets/css/views/communications.css +++ b/assets/css/views/communications.css @@ -113,6 +113,37 @@ span.communication__sender__stats, margin-right: 12px; } +/* Override padding from block__content, so we can do it on a per-element basis */ +.communication__content { + padding: 0; +} + +.communication__body__avatar, +.communication__body__sender, +.communication__body__text { + padding: var(--block-spacing); +} + +.communication__body__avatar { + /* Remove space between the avatar and the sender name */ + padding-right: 0; +} + +.communication__body__text { + /* Remove space above and below text row */ + padding-top: 0; + margin-bottom: 0; + + /* Text is right of avatar, remove space before */ + padding-left: 0; +} + +.communication__body__sender { + /* Remove space between the avatar and the sender name */ + padding-left: 0; + padding-bottom: 0; +} + /* Mobile layout fixes */ @media (max-width: $min-desktop-width) { .communication__body { @@ -121,18 +152,35 @@ span.communication__sender__stats, grid-template-rows: repeat(2, auto) repeat(3, 1fr); } + .communication__content { + background-color: var(--background-odd-color); + } + .communication__body__avatar { grid-area: 1 / 1 / 2 / 2; } .communication__body__sender { - width: calc(100vw - 12px - var(--reduced-communication-avatar-size)); + /* 8px body padding + 2px borders + 12px article padding + 12px avatar margin */ + width: calc(100vw - 34px - var(--reduced-communication-avatar-size)); grid-area: 1 / 2 / 2 / 3; } .communication__body__text { - margin-top: var(--padding-normal); display: block; grid-area: 2 / 1 / 3 / 3; + border-top: var(--border); + background-color: var(--background-color); + + /* Restore padding since text now aligns with left of parent */ + margin-top: 0; + padding-left: var(--block-spacing); + padding-bottom: 6px; + } + + .communication__body__text .paragraph:last-child { + /* BEM not practical due to nature of markdown generation */ + /* Remove space below last paragraph */ + margin-bottom: 0; } } diff --git a/lib/philomena_web/templates/admin/report/show.html.slime b/lib/philomena_web/templates/admin/report/show.html.slime index 35bf25a0..c0b462b6 100644 --- a/lib/philomena_web/templates/admin/report/show.html.slime +++ b/lib/philomena_web/templates/admin/report/show.html.slime @@ -3,7 +3,7 @@ p = link_to_reported_thing @report.reportable article.block.communication - .block__content.flex.flex--no-wrap + .block__content.communication__content.flex.flex--no-wrap .communication__body__avatar.hide-mobile = render PhilomenaWeb.UserAttributionView, "_anon_user_avatar.html", object: @report, conn: @conn .flex__grow.communication__body diff --git a/lib/philomena_web/templates/comment/_comment.html.slime b/lib/philomena_web/templates/comment/_comment.html.slime index de82e79c..8ac3285d 100644 --- a/lib/philomena_web/templates/comment/_comment.html.slime +++ b/lib/philomena_web/templates/comment/_comment.html.slime @@ -1,6 +1,6 @@ article.block.communication id="comment_#{@comment.id}" = if not @comment.approved and not @comment.hidden_from_users and (can?(@conn, :hide, @comment) or @comment.user_id == @conn.assigns.current_user.id) do - .block__content + .block__content.communication__content .block.block--fixed.block--danger p i.fas.fa-exclamation-triangle> @@ -21,7 +21,7 @@ article.block.communication id="comment_#{@comment.id}" = text_input f, :deletion_reason, class: "input input--wide", placeholder: "Deletion Reason", id: "inline-reject-reason-comment-#{@comment.id}", required: true = submit "Delete", class: "button" - .block__content.flex.flex--no-wrap class=communication_body_class(@comment) + .block__content.communication__content.flex.flex--no-wrap class=communication_body_class(@comment) .communication__body__avatar.hide-mobile = render PhilomenaWeb.UserAttributionView, "_anon_user_avatar.html", object: @comment, conn: @conn .flex__grow.communication__body diff --git a/lib/philomena_web/templates/comment/_comment_with_image.html.slime b/lib/philomena_web/templates/comment/_comment_with_image.html.slime index c82885cd..3c3d9fe0 100644 --- a/lib/philomena_web/templates/comment/_comment_with_image.html.slime +++ b/lib/philomena_web/templates/comment/_comment_with_image.html.slime @@ -1,5 +1,5 @@ article.block.communication id="comment_#{@comment.id}" - .block__content.flex.flex--no-wrap class=communication_body_class(@comment) + .block__content.communication__content.flex.flex--no-wrap class=communication_body_class(@comment) .communication__body__avatar.hide-mobile .post-image-container = render PhilomenaWeb.ImageView, "_image_container.html", image: @comment.image, size: :thumb_tiny, conn: @conn diff --git a/lib/philomena_web/templates/image/comment/history/index.html.slime b/lib/philomena_web/templates/image/comment/history/index.html.slime index b850c552..32eb0ada 100644 --- a/lib/philomena_web/templates/image/comment/history/index.html.slime +++ b/lib/philomena_web/templates/image/comment/history/index.html.slime @@ -8,7 +8,7 @@ h1 = for version <- @versions do article.block.communication - .block__content.flex.flex--no-wrap + .block__content.communication__content.flex.flex--no-wrap .communication__body__avatar.hide-mobile = render PhilomenaWeb.UserAttributionView, "_anon_user_avatar.html", object: @comment, conn: @conn diff --git a/lib/philomena_web/templates/message/_message.html.slime b/lib/philomena_web/templates/message/_message.html.slime index 87393460..2820d5ce 100644 --- a/lib/philomena_web/templates/message/_message.html.slime +++ b/lib/philomena_web/templates/message/_message.html.slime @@ -1,6 +1,6 @@ article.block.communication = if not @message.approved and (can?(@conn, :approve, @message) or @message.from_id == @conn.assigns.current_user.id) do - .block__content + .block__content.communication__content .block.block--fixed.block--danger p i.fas.fa-exclamation-triangle> @@ -13,7 +13,7 @@ article.block.communication i.fas.fa-check> ' Approve - .block__content.flex.flex--no-wrap + .block__content.communication__content.flex.flex--no-wrap .communication__body__avatar.hide-mobile = render PhilomenaWeb.UserAttributionView, "_user_avatar.html", object: %{user: @message.from}, conn: @conn, class: "avatar--100px" diff --git a/lib/philomena_web/templates/post/_post.html.slime b/lib/philomena_web/templates/post/_post.html.slime index f4a8aa0b..8f986124 100644 --- a/lib/philomena_web/templates/post/_post.html.slime +++ b/lib/philomena_web/templates/post/_post.html.slime @@ -1,6 +1,6 @@ article.block.communication id="post_#{@post.id}" = if not @post.approved and not @post.hidden_from_users and (can?(@conn, :hide, @post) or @post.user_id == @conn.assigns.current_user.id) do - .block__content + .block__content.communication__content .block.block--fixed.block--danger p i.fas.fa-exclamation-triangle> @@ -21,7 +21,7 @@ article.block.communication id="post_#{@post.id}" = text_input f, :deletion_reason, class: "input input--wide", placeholder: "Deletion Reason", id: "inline-reject-reason-post-#{@post.id}", required: true = submit "Delete", class: "button" - .block__content.flex.flex--no-wrap class=communication_body_class(@post) + .block__content.communication__content.flex.flex--no-wrap class=communication_body_class(@post) .communication__body__avatar.hide-mobile = render PhilomenaWeb.UserAttributionView, "_anon_user_avatar.html", object: @post, conn: @conn .flex__grow.communication__body diff --git a/lib/philomena_web/templates/post/preview/create.html.slime b/lib/philomena_web/templates/post/preview/create.html.slime index cc36ffbc..2c07907b 100644 --- a/lib/philomena_web/templates/post/preview/create.html.slime +++ b/lib/philomena_web/templates/post/preview/create.html.slime @@ -1,4 +1,4 @@ -.block.flex +.block.flex.communication__content .communication__body__avatar.hide-mobile = render PhilomenaWeb.UserAttributionView, "_anon_user_avatar.html", object: @post, conn: @conn diff --git a/lib/philomena_web/templates/topic/post/history/index.html.slime b/lib/philomena_web/templates/topic/post/history/index.html.slime index 4048f99e..2d0876a0 100644 --- a/lib/philomena_web/templates/topic/post/history/index.html.slime +++ b/lib/philomena_web/templates/topic/post/history/index.html.slime @@ -7,7 +7,7 @@ h1 = for version <- @versions do article.block.communication - .block__content.flex.flex--no-wrap + .block__content.flex.flex--no-wrap.communication__content .communication__body__avatar.hide-mobile = render PhilomenaWeb.UserAttributionView, "_anon_user_avatar.html", object: @post, conn: @conn From 7e62461097740f1dfbf3e64f110f139dc112dd0c Mon Sep 17 00:00:00 2001 From: "Luna D." Date: Sat, 22 Feb 2025 17:12:08 +0100 Subject: [PATCH 5/5] center avatar if banners wrap --- assets/css/views/communications.css | 6 ++++++ 1 file changed, 6 insertions(+) diff --git a/assets/css/views/communications.css b/assets/css/views/communications.css index f4ac4baa..81a1fce9 100644 --- a/assets/css/views/communications.css +++ b/assets/css/views/communications.css @@ -158,12 +158,18 @@ span.communication__sender__stats, .communication__body__avatar { grid-area: 1 / 1 / 2 / 2; + align-self: center; } .communication__body__sender { /* 8px body padding + 2px borders + 12px article padding + 12px avatar margin */ width: calc(100vw - 34px - var(--reduced-communication-avatar-size)); grid-area: 1 / 2 / 2 / 3; + padding-bottom: 6px; + } + + .communication__body__sender > .label--block { + margin-bottom: 0; } .communication__body__text {