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);
-  color: var(--text-color);
+  background: var(--primary-muted-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 {
-  background: var(--primary-muted-color);
-  border-radius: var(--border-radius-inner);
-}
-
-.button--transparent {
+.button--transparent,
+.button--transparent:hover {
   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 {
-  padding: 0 var(--padding-small);
-}
-
+/* A hack to center icons */
 .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.
-// Add new JavaScript/Coffee code in separate files in this directory and they'll automatically
-// be included in the compiled file accessible from http://example.com/assets/application.js
-// It's not advisable to add code directly here, but if you do, it'll appear at the bottom of the
-// the compiled file.
+// This is the Vite entry point of Philomena's clientside code.
+// It is used as a sort of 'manifest' for what to include, and shouldn't
+// have any code on its own.
 //
+// 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,38 +27,39 @@ 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
 
-  .block__content.communication__options
-    .flex.flex--wrap.flex--spaced-out
-      = render PhilomenaWeb.CommentView, "_comment_options.html", comment: @comment, conn: @conn
+  = 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
 
-    = if can?(@conn, :hide, @comment) do
-      .flex__spacer
-      .js-staff-action
-        .communication__options__staff
-          = cond do
-            - @comment.hidden_from_users and not @comment.destroyed_content ->
-              = link(to: Routes.image_comment_hide_path(@conn, :delete, @comment.image_id, @comment), data: [confirm: "Are you sure?"], method: "delete", class: "communication__interaction") do
-                i.fas.fa-check>
-                ' Restore
+      = if can?(@conn, :hide, @comment) do
+        .flex__spacer
+        .js-staff-action
+          .communication__options__staff
+            = cond do
+              - @comment.hidden_from_users and not @comment.destroyed_content ->
+                = link(to: Routes.image_comment_hide_path(@conn, :delete, @comment.image_id, @comment), data: [confirm: "Are you sure?"], method: "delete", class: "communication__interaction") do
+                  i.fas.fa-check>
+                  ' Restore
 
-              = if can?(@conn, :delete, @comment) do
-                = link(to: Routes.image_comment_delete_path(@conn, :create, @comment.image_id, @comment), data: [confirm: "Are you sure?"], method: "post", class: "communication__interaction") do
+                = if can?(@conn, :delete, @comment) do
+                  = link(to: Routes.image_comment_delete_path(@conn, :create, @comment.image_id, @comment), data: [confirm: "Are you sure?"], method: "post", class: "communication__interaction") do
+                    i.fas.fa-times>
+                    ' Delete Contents
+
+              - not @comment.hidden_from_users and not @comment.destroyed_content ->
+                a.button.button--danger.button--transparent.togglable-delete-form-link href="#" data-click-toggle="#inline-del-form-comment-#{@comment.id}"
                   i.fas.fa-times>
-                  ' Delete Contents
+                  ' Delete
 
-            - not @comment.hidden_from_users and not @comment.destroyed_content ->
-              a.button.button--danger.button--transparent.togglable-delete-form-link href="#" data-click-toggle="#inline-del-form-comment-#{@comment.id}"
-                i.fas.fa-times>
-                ' Delete
+              - true ->
 
-            - true ->
+            = if can?(@conn, :show, :ip_address) do
+              .button.button--warning.button--transparent.js-staff-action
+                =<> link_to_ip(@conn, @comment.ip)
+              .button.button--warning.button--transparent.js-staff-action
+                =<> link_to_fingerprint(@conn, @comment.fingerprint)
 
-          = if can?(@conn, :show, :ip_address) do
-            .button.button--warning.button--transparent.js-staff-action
-              =<> link_to_ip(@conn, @comment.ip)
-            .button.button--warning.button--transparent.js-staff-action
-              =<> link_to_fingerprint(@conn, @comment.fingerprint)
-
-        = form_for :comment, Routes.image_comment_hide_path(@conn, :create, @comment.image_id, @comment), [class: "togglable-delete-form hidden flex", id: "inline-del-form-comment-#{@comment.id}"], fn f ->
-          = text_input f, :deletion_reason, class: "input input--wide", placeholder: "Deletion Reason", id: "inline-del-reason-comment-#{@comment.id}", required: true
-          = submit "Delete", class: "button"
+          = form_for :comment, Routes.image_comment_hide_path(@conn, :create, @comment.image_id, @comment), [class: "togglable-delete-form hidden flex", id: "inline-del-form-comment-#{@comment.id}"], fn f ->
+            = text_input f, :deletion_reason, class: "input input--wide", placeholder: "Deletion Reason", id: "inline-del-reason-comment-#{@comment.id}", required: true
+            = submit "Delete", class: "button"

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

@@ -1,23 +1,23 @@
-.flex.flex--normal-gap.flex--centered
-  - 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
+= 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)
-    i.fa.fa-flag>
-    ' Report
+      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
-    i.fa.fa-quote-right
-    ' Quote
+      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
-    i.fa.fa-reply
-    ' Reply
+      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
-    span.owner-options
-      strong
-        a.button.button--primary href=Routes.image_comment_path(@conn, :edit, @comment.image, @comment)
-          i.fas.fa-edit
-          ' Edit
+    = if not @comment.destroyed_content and can?(@conn, :edit, @comment) do
+      a.button 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,39 +1,41 @@
 - 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
 
-  .block__content.communication__options
-    .flex.flex--wrap.flex--spaced-out
-      = render PhilomenaWeb.CommentView, "_comment_options.html", comment: @comment, conn: @conn
+  = 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
 
-    = if can?(@conn, :hide, @comment) do
-      .flex.flex--normal-gap.flex--centered.js-staff-action
-        = cond do
-          - @comment.hidden_from_users and not @comment.destroyed_content ->
-            = link(to: Routes.image_comment_hide_path(@conn, :delete, @comment.image_id, @comment), data: [confirm: "Are you sure?"], method: "delete", class: "button button--success") do
-              i.fas.fa-check>
-              ' Restore
+      = if can?(@conn, :hide, @comment) do
+        .flex.flex--normal-gap.flex--centered.js-staff-action
+          = cond do
+            - @comment.hidden_from_users and not @comment.destroyed_content ->
+              = link(to: Routes.image_comment_hide_path(@conn, :delete, @comment.image_id, @comment), data: [confirm: "Are you sure?"], method: "delete", class: "button button--success") do
+                i.fas.fa-check>
+                ' Restore
 
-            = if can?(@conn, :delete, @comment) do
-              = link(to: Routes.image_comment_delete_path(@conn, :create, @comment.image_id, @comment), data: [confirm: "Are you sure?"], method: "post", class: "button button--danger button--transparent") do
+              = if can?(@conn, :delete, @comment) do
+                = link(to: Routes.image_comment_delete_path(@conn, :create, @comment.image_id, @comment), data: [confirm: "Are you sure?"], method: "post", class: "button button--danger button--transparent") do
+                  i.fas.fa-times>
+                  ' Delete Contents
+
+            - not @comment.hidden_from_users and not @comment.destroyed_content ->
+              a.button.button--danger.button--transparent.togglable-delete-form-link href="#" data-click-toggle="#inline-del-form-comment-#{@comment.id}"
                 i.fas.fa-times>
-                ' Delete Contents
+                ' Delete
 
-          - not @comment.hidden_from_users and not @comment.destroyed_content ->
-            a.button.button--danger.button--transparent.togglable-delete-form-link href="#" data-click-toggle="#inline-del-form-comment-#{@comment.id}"
-              i.fas.fa-times>
-              ' Delete
+            - true ->
 
-          - true ->
+          = if can?(@conn, :show, :ip_address) do
+            .button.button--warning.button--transparent.js-staff-action
+              =<> link_to_ip(@conn, @comment.ip)
+            .button.button--warning.button--transparent.js-staff-action
+              =<> link_to_fingerprint(@conn, @comment.fingerprint)
 
-        = if can?(@conn, :show, :ip_address) do
-          .button.button--warning.button--transparent.js-staff-action
-            =<> link_to_ip(@conn, @comment.ip)
-          .button.button--warning.button--transparent.js-staff-action
-            =<> link_to_fingerprint(@conn, @comment.fingerprint)
-
-        = form_for :comment, Routes.image_comment_hide_path(@conn, :create, @comment.image_id, @comment), [class: "togglable-delete-form hidden flex", id: "inline-del-form-comment-#{@comment.id}"], fn f ->
-          = text_input f, :deletion_reason, class: "input input--wide", placeholder: "Deletion Reason", id: "inline-del-reason-comment-#{@comment.id}", required: true
-          = submit "Delete", class: "button"
+          = form_for :comment, Routes.image_comment_hide_path(@conn, :create, @comment.image_id, @comment), [class: "togglable-delete-form hidden flex", id: "inline-del-form-comment-#{@comment.id}"], fn f ->
+            = text_input f, :deletion_reason, class: "input input--wide", placeholder: "Deletion Reason", id: "inline-del-reason-comment-#{@comment.id}", required: true
+            = submit "Delete", class: "button"

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
-  strong.comment_deleted
-    ' Deletion reason:
-    =<> @object.deletion_reason
+- contents = if deleted do
+  = if @object.destroyed_content and can?(@conn, :hide, @object) do
+    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
-      | (
-      = @object.deleted_by.name
-      | )
-  = if can?(@conn, :hide, @object) do
-    = if @object.destroyed_content do
-      br
-      strong.comment_deleted>
-        | This #{@name}'s contents have been destroyed.
-    - else
-      br
-      =<> @body
+      span
+        i.fa.fa-user>
+        strong Moderator:
+        =<> @object.deleted_by.name
+  = if not @object.destroyed_content and can?(@conn, :hide, @object) do
+    =<> @body
 - else
   =<> @body
 
-.flex.flex__grow.hidden--mobile
-  .flex.flex__fixed.spacing--right
+- hidden_if_deleted = if deleted, do: "hidden", else: ""
+- 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,16 +63,19 @@
           ' Posted
           =< pretty_time(@object.created_at)
           = options
-      = title
+      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
-    = avatar
+    div class=hidden_if_deleted
+      = avatar
     .flex__column.flex--small-gap
       span.communication__sender-name
         = username
-      = title
+      div class=hidden_if_deleted
+        = title
   span.communication__post-time
     ' Posted
     = pretty_time(@object.created_at)

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