mirror of
https://github.com/philomena-dev/philomena.git
synced 2025-02-23 13:44:32 +01:00
move communication text below avatar on mobile
This commit is contained in:
parent
7673183d6f
commit
0a6d43e23a
9 changed files with 80 additions and 41 deletions
|
@ -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;
|
||||
}
|
||||
}
|
||||
|
|
|
@ -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
|
||||
|
||||
|
|
|
@ -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
|
||||
|
|
|
@ -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
|
||||
|
|
|
@ -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
|
||||
|
|
|
@ -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
|
||||
|
||||
|
|
|
@ -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
|
||||
|
|
|
@ -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
|
||||
|
|
|
@ -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
|
||||
|
|
Loading…
Reference in a new issue