move communication text below avatar on mobile

This commit is contained in:
Luna D. 2025-02-21 23:45:10 +01:00
parent 7673183d6f
commit 0a6d43e23a
No known key found for this signature in database
GPG key ID: 4B1C63448394F688
9 changed files with 80 additions and 41 deletions

View file

@ -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;
}
}

View file

@ -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

View file

@ -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

View file

@ -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

View file

@ -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

View file

@ -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

View file

@ -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

View file

@ -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

View file

@ -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