deleted comments styling

assets/css/elements/button.css

@@ -6,7 +6,7 @@
   }
 
   .button--$(type) a {
-    color: var(--$(type)-link-color);
+    color: inherit;
   }
 
   .button--$(type).button--important {
@@ -17,7 +17,8 @@
   .button--$(type):hover,
   .button--$(type):active,
   .button--$(type).selected {
-    background: var(--$(type)-dark-color) !important;
+    color: var(--text-color) !important;
+    background: var(--$(type)-dark-color);
     border-radius: var(--border-radius-inner);
   }
 
@@ -38,6 +39,63 @@
   }
 }
 
+@define-mixin button-block-type $type {
+  .block--$(type) .button:not([class*="button--"]) {
+    color: var(--$(type)-link-color) !important;
+    border-color: var(--$(type)-border-color);
+    background: var(--$(type)-muted-color);
+  }
+
+  .block--$(type) .button:not([class*="button--"]) a {
+    color: inherit;
+  }
+
+  .block--$(type) .button--important:not([class*="button--"]) {
+    color: var(--text-color) !important;
+    background: var(--$(type)-color);
+  }
+
+  .block--$(type) .button:not([class*="button--"]):hover,
+  .block--$(type) .button:not([class*="button--"]):active,
+  .block--$(type) .button:not([class*="button--"]).selected {
+    color: var(--text-color) !important;
+    background: var(--$(type)-dark-color);
+    border-radius: var(--border-radius-inner);
+  }
+
+  .block--$(type) .button__group:not([class*="button--"]),
+  .block--$(type)
+    .button__group--single:not([class*="button--"])
+    .block--$(type)
+    .button__group--standalone:not([class*="button--"]) {
+    border-color: var(--$(type)-color);
+    background: var(--$(type)-dark-color);
+  }
+
+  .block--$(type) .button__group:not([class*="button--"]) a,
+  .block--$(type)
+    .button__group--single:not([class*="button--"])
+    a
+    .block--$(type)
+    .button__group--standalone:not([class*="button--"])
+    a {
+    color: var(--$(type)-link-color);
+  }
+
+  .block--$(type) .button__group:not([class*="button--"]) a:hover,
+  .block--$(type)
+    .button__group--single:not([class*="button--"])
+    a:hover
+    .block--$(type)
+    .button__group--standalone:not([class*="button--"])
+    a:hover {
+    @mixin animated-transition;
+    color: var(--text-color);
+    background: var(--$(type)-color);
+    border-radius: var(--border-radius-inner);
+  }
+}
+
 .button {
   @mixin animated-transition;
   display: flex;
@@ -45,8 +103,8 @@
   width: fit-content;
   font-weight: bold;
   font-size: var(--font-size);
-  background: var(--primary-dark-color);
+  background: var(--primary-muted-color);
-  color: var(--text-color);
+  color: var(--link-color);
   border-radius: var(--border-radius-inner);
   padding: 0 var(--padding-small);
   overflow: hidden;
@@ -58,6 +116,7 @@
 .button:hover,
 .button:active {
   @mixin animated-transition;
+  color: var(--text-color);
   background: var(--primary-dark-color);
   border-radius: var(--border-radius-inner);
   cursor: pointer;
@@ -99,6 +158,7 @@
   margin-right: var(--padding-normal);
   background: var(--secondary-dark-color);
   line-height: var(--button-group-height);
+  padding: 0 var(--padding-small);
 }
 
 .button__group:last-child,
@@ -115,11 +175,6 @@
   line-height: var(--button-group-small-height);
 }
 
-.block__header__buttons .button {
-  color: var(--link-color);
-  border-width: 0 !important;
-}
-
 .button__group .button {
   border: 0;
   border-right: var(--secondary-color);
@@ -145,15 +200,19 @@
   border-width: 0;
 }
 
-.block__header__buttons .button:hover {
+.button--transparent,
-  background: var(--primary-muted-color);
+.button--transparent:hover {
-  border-radius: var(--border-radius-inner);
-}
-
-.button--transparent {
   background: 0 !important;
 }
 
+@mixin button-block-type primary;
+@mixin button-block-type secondary;
+@mixin button-block-type success;
+@mixin button-block-type warning;
+@mixin button-block-type danger;
+@mixin button-block-type information;
+@mixin button-block-type special;
+
 @mixin button-type primary;
 @mixin button-type secondary;
 @mixin button-type success;

assets/css/views/communication.css

@@ -105,6 +105,19 @@
   white-space: nowrap;
 }
 
+.communication--deleted .communication__sender-block {
+  background: var(--danger-color);
+}
+
+.communication__body__text--deleted {
+  display: flex;
+  flex-flow: column;
+  margin-top: var(--padding-normal);
+  background: var(--danger-muted-color);
+  padding: var(--padding-normal) var(--padding-small);
+  gap: var(--padding-small);
+}
+
 @mixin if-mobile {
   .communication__options {
     flex-flow: column;
@@ -146,4 +159,16 @@
     flex-direction: column;
     gap: var(--padding-small);
   }
+
+  .communication__body__text--deleted {
+    margin-top: 0;
+  }
+
+  .communication__body__text--deleted:first-child {
+    margin-bottom: var(--padding-normal);
+  }
+
+  .communication--deleted > .communication__post-time {
+    background: var(--danger-dark-color);
+  }
 }

assets/css/views/pagination.css

@@ -4,22 +4,20 @@
   line-height: inherit;
 }
 
-.pagination span {
+/* A hack to center icons */
-  padding: 0 var(--padding-small);
-}
-
 .pagination i {
   font-size: 0.8rem !important;
+  height: 0.7rem;
 }
 
 .pagination a,
 .pagination span {
   display: grid;
   grid-template-columns: auto;
-  gap: var(--padding-tiny);
+  gap: var(--padding-small);
   align-items: center;
-  padding: 0 var(--padding-small);
   font-weight: bold;
+  padding: 0 var(--padding-small);
 }
 
 .pagination .with-icon {

assets/js/app.ts

@@ -1,9 +1,8 @@
-// This is a manifest file that'll be compiled into including all the files listed below.
+// This is the Vite entry point of Philomena's clientside code.
-// Add new JavaScript/Coffee code in separate files in this directory and they'll automatically
+// It is used as a sort of 'manifest' for what to include, and shouldn't
-// be included in the compiled file accessible from http://example.com/assets/application.js
+// have any code on its own.
-// It's not advisable to add code directly here, but if you do, it'll appear at the bottom of the
-// the compiled file.
 //
+// Only edit this file as described by the comment about CSS development below.
 
 // Our code
 import './ujs';

lib/philomena_web/templates/comment/_comment.html.slime

@@ -1,6 +1,7 @@
 - options = render PhilomenaWeb.CommentView, "_comment_link.html", comment: @comment, conn: @conn 
+- block_class = if @comment.hidden_from_users, do: "block--danger", else: ""
 
-article.block.communication id="comment_#{@comment.id}"
+article.block.communication id="comment_#{@comment.id}" class=block_class
   = 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.block--fixed.block--danger
@@ -26,6 +27,7 @@ article.block.communication id="comment_#{@comment.id}"
   .block__content.flex.flex--no-wrap class=communication_body_class(@comment)
     = render PhilomenaWeb.CommunicationView, "_body.html", object: @comment, body: @body, conn: @conn, name: "comment", options: options
 
+  = if not @comment.hidden_from_users or can?(@conn, :edit, @comment) do
     .block__content.communication__options
       .flex.flex--wrap.flex--spaced-out
         = render PhilomenaWeb.CommentView, "_comment_options.html", comment: @comment, conn: @conn

lib/philomena_web/templates/comment/_comment_options.html.slime

@@ -1,23 +1,23 @@
+= if not @comment.hidden_from_users or can?(@conn, :hide, @comment) do
   .flex.flex--normal-gap.flex--centered
+    = if not @comment.hidden_from_users do
       - link_path = Routes.image_path(@conn, :show, @comment.image) <> "#comment_#{@comment.id}"
       - safe_author = PhilomenaWeb.PostView.markdown_safe_author(@comment)
       - quote_body = if @comment.hidden_from_users, do: "", else: @comment.body
 
-  a.button.button--primary href=Routes.image_comment_report_path(@conn, :new, @comment.image, @comment)
+      a.button href=Routes.image_comment_report_path(@conn, :new, @comment.image, @comment)
         i.fa.fa-flag>
         ' Report
 
-  a.button.button--primary.post-reply.post-reply-quote href=link_path data-reply-url=link_path data-author=safe_author data-post=quote_body
+      a.button.post-reply.post-reply-quote href=link_path data-reply-url=link_path data-author=safe_author data-post=quote_body
         i.fa.fa-quote-right
         ' Quote
 
-  a.button.button--primary.post-reply href=link_path data-reply-url=link_path data-author=safe_author
+      a.button.post-reply href=link_path data-reply-url=link_path data-author=safe_author
         i.fa.fa-reply
         ' Reply
 
-  = if can?(@conn, :edit, @comment) do
+    = if not @comment.destroyed_content and can?(@conn, :edit, @comment) do
-    span.owner-options
+      a.button href=Routes.image_comment_path(@conn, :edit, @comment.image, @comment)
-      strong
-        a.button.button--primary href=Routes.image_comment_path(@conn, :edit, @comment.image, @comment)
         i.fas.fa-edit
         ' Edit

lib/philomena_web/templates/comment/_comment_with_image.html.slime

@@ -1,9 +1,11 @@
 - options = render PhilomenaWeb.CommentView, "_comment_link.html", comment: @comment, conn: @conn 
+- block_class = if @comment.hidden_from_users, do: "block--danger", else: ""
 
-article.block.communication id="comment_#{@comment.id}"
+article.block.communication id="comment_#{@comment.id}" class=block_class
   .block__content.flex.flex--no-wrap class=communication_body_class(@comment)
     = render PhilomenaWeb.CommunicationView, "_body.html", object: @comment, image: @comment.image, body: @body, conn: @conn, name: "comment", options: options
 
+  = if not @comment.hidden_from_users or can?(@conn, :edit, @comment) do
     .block__content.communication__options
       .flex.flex--wrap.flex--spaced-out
         = render PhilomenaWeb.CommentView, "_comment_options.html", comment: @comment, conn: @conn

lib/philomena_web/templates/communication/_body.html.slime

@@ -1,5 +1,6 @@
 - anon = is_nil(assigns[:noanon]) or @noanon == false
 - options = if is_nil(assigns[:options]), do: "", else: @options
+- deleted = Map.has_key?(@object, :hidden_from_users) and @object.hidden_from_users == true
 
 - avatar = cond do
   - not is_nil(assigns[:image]) ->
@@ -20,27 +21,38 @@
 - else
   = render PhilomenaWeb.UserAttributionView, "_user_title.html", object: @object, conn: @conn
 
-- contents = if Map.has_key?(@object, :hidden_from_users) and @object.hidden_from_users == true do
+- contents = if deleted do
-  strong.comment_deleted
+  = if @object.destroyed_content and can?(@conn, :hide, @object) do
-    ' Deletion reason:
+    div.communication__body__text--deleted
+      span
+        i.fa.fa-eye-slash>
+        strong
+          ' Not shown to users, this
+          => @name
+          | is destroyed.
+  div.communication__body__text--deleted
+    span
+      i.fa.fa-trash-can>
+      strong This #{@name} has been deleted.
+    span
+      i.fa.fa-circle-info>
+      strong Reason:
       =<> @object.deletion_reason
     = if can?(@conn, :hide, @object) and not is_nil(@object.deleted_by) do
-      | (
+      span
-      = @object.deleted_by.name
+        i.fa.fa-user>
-      | )
+        strong Moderator:
-  = if can?(@conn, :hide, @object) do
+        =<> @object.deleted_by.name
-    = if @object.destroyed_content do
+  = if not @object.destroyed_content and can?(@conn, :hide, @object) do
-      br
-      strong.comment_deleted>
-        | This #{@name}'s contents have been destroyed.
-    - else
-      br
     =<> @body
 - else
   =<> @body
 
-.flex.flex__grow.hidden--mobile
+- hidden_if_deleted = if deleted, do: "hidden", else: ""
-  .flex.flex__fixed.spacing--right
+- deleted_class = if deleted, do: "communication--deleted", else: ""
+
+.flex.flex__grow.hidden--mobile class=deleted_class
+  .flex.flex__fixed.spacing--right class=hidden_if_deleted
     = avatar
   .flex__grow.communication__body
     .communication__sender-block
@@ -51,15 +63,18 @@
           ' Posted
           =< pretty_time(@object.created_at)
           = options
+      div class=hidden_if_deleted
         = title
     .communication__body__text
       = contents
-.flex.flex__column.flex__grow.hidden--desktop
+.flex.flex__column.flex__grow.hidden--desktop class=deleted_class
   .communication__sender-block
+    div class=hidden_if_deleted
       = avatar
     .flex__column.flex--small-gap
       span.communication__sender-name
         = username
+      div class=hidden_if_deleted
         = title
   span.communication__post-time
     ' Posted

lib/philomena_web/templates/pagination/_pagination.html.slime

@@ -4,11 +4,11 @@
   nav.pagination.hidden--mobile
     = if not first_page?(@page) do
       = link to: first_page_path(@page, @route, params), class: "with-icon" do
-        i.fa.fa-backward>
+        i.fa.fa-angles-left>
         ' First
       .separator--vertical.separator--secondary
       = link to: prev_page_path(@page, @route, params), class: "js-prev with-icon" do
-        i.fa.fa-chevron-left>
+        i.fa.fa-angle-left>
         ' Prev
       .separator--vertical.separator--secondary
 
@@ -32,29 +32,29 @@
       .separator--vertical.separator--secondary
       = link to: next_page_path(@page, @route, params), class: "js-next with-icon" do
         ' Next
-        i.fa.fa-chevron-right
+        i.fa.fa-angle-right
       .separator--vertical.separator--secondary
       = link to: last_page_path(@page, @route, params), class: "with-icon" do
         ' Last
-        i.fa.fa-fast-forward
+        i.fa.fa-angles-right
 
   nav.pagination.hidden--desktop
     = if first_page?(@page) do
       span.with-icon
-        i.fa.fa-backward>
+        i.fa.fa-angles-left>
         ' First
       .separator--vertical.separator--secondary
       span.with-icon
-        i.fa.fa-chevron-left>
+        i.fa.fa-angle-left>
         ' Prev
       .separator--vertical.separator--secondary
     - else
       = link to: first_page_path(@page, @route, params), class: "with-icon" do
-        i.fa.fa-backward>
+        i.fa.fa-angles-left>
         ' First
       .separator--vertical.separator--secondary
       = link to: prev_page_path(@page, @route, params), class: "js-prev with-icon" do
-        i.fa.fa-chevron-left>
+        i.fa.fa-angle-left>
         ' Prev
       .separator--vertical.separator--secondary
 
@@ -84,17 +84,17 @@
       .separator--vertical.separator--secondary
       span.with-icon
         ' Next
-        i.fa.fa-chevron-right
+        i.fa.fa-angle-right
       .separator--vertical.separator--secondary
       span.with-icon
         ' Last
-        i.fa.fa-fast-forward
+        i.fa.fa-angles-right
     - else
       .separator--vertical.separator--secondary
       = link to: next_page_path(@page, @route, params), class: "js-next with-icon" do
         ' Next
-        i.fa.fa-chevron-right
+        i.fa.fa-angle-right
       .separator--vertical.separator--secondary
       = link to: last_page_path(@page, @route, params), class: "with-icon" do
         ' Last
-        i.fa.fa-fast-forward
+        i.fa.fa-angles-right