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 da613005..a0581e07 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: 50px; } diff --git a/assets/css/views/communications.css b/assets/css/views/communications.css index 25dd4fab..81a1fce9 100644 --- a/assets/css/views/communications.css +++ b/assets/css/views/communications.css @@ -107,3 +107,86 @@ span.communication__sender__stats, .communication--destroyed { background-color: var(--destroyed-content-color); } + +.communication__body__avatar { + flex: 0 0 auto; + 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 { + display: grid; + grid-template-columns: repeat(2, auto) repeat(3, 1fr); + 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; + 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 { + 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/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); + } +} diff --git a/lib/philomena_web/templates/admin/report/show.html.slime b/lib/philomena_web/templates/admin/report/show.html.slime index 20835cdd..c0b462b6 100644 --- a/lib/philomena_web/templates/admin/report/show.html.slime +++ b/lib/philomena_web/templates/admin/report/show.html.slime @@ -3,13 +3,16 @@ p = link_to_reported_thing @report.reportable article.block.communication - .block__content.flex.flex--no-wrap - .flex__fixed.spacing-right + .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 - 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__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 + 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..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,13 +21,16 @@ 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) - .flex__fixed.spacing-right + .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 - 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__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 + 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..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,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 + .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 .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 - + .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 + 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..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,16 +8,17 @@ h1 = for version <- @versions do article.block.communication - .block__content.flex.flex--no-wrap - .flex__fixed.spacing-right + .block__content.communication__content.flex.flex--no-wrap + .communication__body__avatar.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 - + .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 + 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..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,17 +13,17 @@ article.block.communication i.fas.fa-check> ' Approve - .block__content.flex.flex--no-wrap - .flex__fixed.spacing-right + .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" .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 - + .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 + 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..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,13 +21,16 @@ 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) - .flex__fixed.spacing-right + .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 - 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__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 + 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..2c07907b 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 +.block.flex.communication__content + .communication__body__avatar.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 - + .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, 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..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,16 +7,17 @@ h1 = for version <- @versions do article.block.communication - .block__content.flex.flex--no-wrap - .flex__fixed.spacing-right + .block__content.flex.flex--no-wrap.communication__content + .communication__body__avatar.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 - + .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 + br + = render PhilomenaWeb.UserAttributionView, "_anon_user_title.html", object: @post, conn: @conn .communication__body__text = for edit <- version.difference do = case edit do