Merge pull request #425 from philomena-dev/mobilecomms

move communication text below avatar on mobile

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

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

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

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);
+  }
+}

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
 

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

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

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

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
 

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

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

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