ui improvements

assets/css/common/_blocks.scss

@@ -94,6 +94,18 @@ a.block__header--single-item, .block__header a {
   padding: 0 ($header_spacing * 0.5) 0 $header_spacing;
 }
 
+.block__header__buttons {
+  display: flex;
+  flex-direction: row;
+  line-height: 100%;
+  align-items: center;
+  background: 0;
+}
+
+.block__tagbox {
+  padding-top: $block_spacing + 5px;
+}
+
 .block__header--light {
   background: $block_header_light_color;
   a, .header__span {

assets/css/common/_buttons.scss

@@ -23,6 +23,13 @@
   }
 }
 
+.button--inline {
+  padding: 0.25rem;
+  border: 0;
+  border-radius: 0.25rem;
+  font-weight: 100;
+}
+
 .button--bold {
   font-weight: bold;
 }
@@ -88,4 +95,8 @@
     background-color: $button_danger_hover_background;
     border-color: $button_danger_hover_border;
   }
+
+  &.button--inline {
+    color: $button_danger_hover_border !important;
+  }
 }

assets/css/views/_approval.scss

@@ -30,6 +30,13 @@
   margin-bottom: auto;
 }
 
+.approval-items__details {
+  display: grid;
+  grid-template-columns: auto auto;
+  gap: var(--padding-normal);
+  line-height: 100%;
+}
+
 @media (max-width: $min_px_width_for_desktop_layout) {
   .approval-grid {
     grid-template-columns: 1fr;

lib/philomena_web/templates/admin/approval/_approvals.html.slime

@@ -13,7 +13,9 @@
       .approval-grid
         .approval-items--main
           span = link ">>#{image.id}", to: Routes.image_path(@conn, :show, image)
-          span = image_thumb(@conn, image)
+          .approval-items__details class=class_for_image(image)
+            span = image_thumb(@conn, image)
+            span = warning_text(image)
           span
             = if image.user do
               = link image.user.name, to: Routes.profile_path(@conn, :show, image.user)

lib/philomena_web/templates/image/_description.html.slime

@@ -1,15 +1,16 @@
 .block
-  .block__header
+  .block__header.flex
     span.block__header__title
       i.fas.fa-file-lines>
       ' Description
+    = if can?(@conn, :edit_description, @image) do
+      .block__header__buttons
+        a.button.button--inline#edit-description href="#" data-click-focus="#description" data-click-hide=".image-description" data-click-show="#description-form" title="Edit description" accessKey="d"
+          i.fas.fa-edit>
+          ' Edit
   .block__content
     p
       = if String.length(@body) > 0 do
         == @body
       - else
         em No description provided.
-    = if can?(@conn, :edit_description, @image) do
-      a.button#edit-description href="#" data-click-focus="#description" data-click-hide=".image-description" data-click-show="#description-form" title="Edit description" accessKey="d"
-        i.fas.fa-edit>
-        ' Edit

lib/philomena_web/templates/image/_source.html.slime

@@ -38,13 +38,33 @@
         ' You can't edit the source on this image.
 
   .block#image-source
-    .block__header
+    .block__header.flex
       span.block__header__title
         i.fas.fa-link>
         = if !has_sources || length(@image.sources) == 1 do
           ' Source
         - else
           ' Sources
+
+      .block__header__buttons
+        a.button.button--inline#edit-source data-click-focus=".js-image-source" data-click-hide="#image-source" data-click-show="#source-form" title="Edit source" accessKey="s"
+          i.fas.fa-edit
+          = if has_sources do
+            ' Add/Edit
+          - else
+            ' Add
+        = if @source_change_count > 0 do
+          a.button.button--link.button--inline href=Routes.image_source_change_path(@conn, :index, @image) title="Source history"
+            i.fa.fa-history>
+            spanspan.hide-mobile> History
+            | (
+            = @source_change_count
+            | )
+        = if can?(@conn, :hide, @image) and not hide_staff_tools?(@conn) do
+          = form_for @changeset, Routes.image_source_history_path(@conn, :delete, @image), [method: "delete"], fn _f ->
+            a.button.button--state-danger.button--inline type="submit" data-confirm="Are you really, really sure?" title="Wipe sources"
+              i.fas.fa-eraser>
+              ' Wipe
     .block__content.flex.flex--wrap.flex--column
       .image_sources
         = if has_sources do
@@ -65,21 +85,3 @@
             i.fa.fa-unlink
           .image_source__link
             em> not provided yet
-      .flex
-        a.button#edit-source data-click-focus=".js-image-source" data-click-hide="#image-source" data-click-show="#source-form" title="Edit source" accessKey="s"
-          i.fas.fa-edit>
-          = if has_sources do
-            ' Add/Edit
-          - else
-            ' Add
-        = if @source_change_count > 0 do
-          a.button.button--link.button--separate-left href=Routes.image_source_change_path(@conn, :index, @image) title="Source history"
-            i.fa.fa-history>
-            | History (
-            = @source_change_count
-            | )
-        = if can?(@conn, :hide, @image) and not hide_staff_tools?(@conn) do
-          = form_for @changeset, Routes.image_source_history_path(@conn, :delete, @image), [method: "delete"], fn _f ->
-            button.button.button--state-danger.button--separate-left type="submit" data-confirm="Are you really, really sure?" title="Wipe sources"
-              i.fas.fa-eraser>
-              ' Wipe

lib/philomena_web/templates/image/_tags.html.slime

@@ -57,18 +57,19 @@
         ' You can't edit the tags on this image.
 
   .block.tagsauce
-    .block__header
+    .block__header.flex
       span.block__header__title
         i.fas.fa-tag>
         ' Tags
-    .block__content
+      .block__header__buttons
+        a.button.button--inline.js-tag-sauce-toggle#edit-tags data-click-toggle=".tagsauce, .js-imageform" data-click-focus=".js-taginput-plain:not(.hidden), .js-taginput-input" title="Edit tags" accessKey="t"
+          i.fas.fa-edit>
+          ' Edit
+        = if @tag_change_count > 0 do
+          a.button.button--link.button--inline href=Routes.image_tag_change_path(@conn, :index, @image) title="Tag history"
+            i.fa.fa-history>
+            | History (
+            = @tag_change_count
+            | )
+    .block__content.block__tagbox
       = render PhilomenaWeb.TagView, "_tag_list.html", tags: tags, conn: @conn
-      a.button.js-tag-sauce-toggle#edit-tags data-click-toggle=".tagsauce, .js-imageform" data-click-focus=".js-taginput-plain:not(.hidden), .js-taginput-input" title="Edit tags" accessKey="t"
-        i.fas.fa-edit>
-        ' Edit
-      = if @tag_change_count > 0 do
-        a.button.button--link.button--separate-left href=Routes.image_tag_change_path(@conn, :index, @image) title="Tag history"
-          i.fa.fa-history>
-          | History (
-          = @tag_change_count
-          | )

lib/philomena_web/views/admin/approval_view.ex

@@ -13,4 +13,26 @@ defmodule PhilomenaWeb.Admin.ApprovalView do
       conn: conn
     )
   end
+
+  def class_for_image(%{processed: false}), do: "block--warning"
+  def class_for_image(%{thumbnails_generated: false}), do: "block--warning"
+
+  def class_for_image(%{image_is_animated: a, image_duration: d, image_format: "png"})
+      when a or d > 0.04,
+      do: "block--danger"
+
+  def class_for_image(%{image_format: "svg"}), do: "block--warning"
+  def class_for_image(%{image_format: f}) when f in ["webm", "gif"], do: "block--danger"
+  def class_for_image(_), do: ""
+
+  def warning_text(%{processed: false}), do: "(not processed)"
+  def warning_text(%{thumbnails_generated: false}), do: "(not processed)"
+
+  def warning_text(%{image_is_animated: a, image_duration: d, image_format: "png"})
+      when a or d > 0.04,
+      do: "(animated png)"
+
+  def warning_text(%{image_format: "svg"}), do: "(svg)"
+  def warning_text(%{image_format: f}) when f in ["webm", "gif"], do: "(video)"
+  def warning_text(_), do: ""
 end