From 41349acfdbd75a6597e20cde5455d9fa04d996e0 Mon Sep 17 00:00:00 2001 From: Luna D Date: Fri, 2 Jun 2023 19:37:03 +0200 Subject: [PATCH] ui improvements --- assets/css/common/_blocks.scss | 12 ++++++ assets/css/common/_buttons.scss | 11 +++++ assets/css/views/_approval.scss | 7 ++++ .../admin/approval/_approvals.html.slime | 4 +- .../templates/image/_description.html.slime | 11 ++--- .../templates/image/_source.html.slime | 40 ++++++++++--------- .../templates/image/_tags.html.slime | 23 ++++++----- .../views/admin/approval_view.ex | 22 ++++++++++ 8 files changed, 94 insertions(+), 36 deletions(-) diff --git a/assets/css/common/_blocks.scss b/assets/css/common/_blocks.scss index 907d9486..883302a8 100644 --- a/assets/css/common/_blocks.scss +++ b/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 { diff --git a/assets/css/common/_buttons.scss b/assets/css/common/_buttons.scss index 8598627b..7f4da42f 100644 --- a/assets/css/common/_buttons.scss +++ b/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; + } } diff --git a/assets/css/views/_approval.scss b/assets/css/views/_approval.scss index 97348d38..6e1bc45f 100644 --- a/assets/css/views/_approval.scss +++ b/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; diff --git a/lib/philomena_web/templates/admin/approval/_approvals.html.slime b/lib/philomena_web/templates/admin/approval/_approvals.html.slime index 44ef14cb..b254f6dd 100644 --- a/lib/philomena_web/templates/admin/approval/_approvals.html.slime +++ b/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) diff --git a/lib/philomena_web/templates/image/_description.html.slime b/lib/philomena_web/templates/image/_description.html.slime index 70764761..7f5b2533 100644 --- a/lib/philomena_web/templates/image/_description.html.slime +++ b/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 diff --git a/lib/philomena_web/templates/image/_source.html.slime b/lib/philomena_web/templates/image/_source.html.slime index e8fcab7e..f1be8bcc 100644 --- a/lib/philomena_web/templates/image/_source.html.slime +++ b/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 diff --git a/lib/philomena_web/templates/image/_tags.html.slime b/lib/philomena_web/templates/image/_tags.html.slime index a66ecfad..3c11c0c4 100644 --- a/lib/philomena_web/templates/image/_tags.html.slime +++ b/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 - | ) diff --git a/lib/philomena_web/views/admin/approval_view.ex b/lib/philomena_web/views/admin/approval_view.ex index d8a78b11..03b0f3c2 100644 --- a/lib/philomena_web/views/admin/approval_view.ex +++ b/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