censor works in work galleries when marked as Mature (#796)

BanchanArt · Apr 1, 2024 · 54f7687 · 54f7687
1 parent ac75b77
commit 54f7687
Show file tree

Hide file tree

Showing 2 changed files with 16 additions and 5 deletions.
diff --git a/lib/banchan_web/components/work_gallery/work_gallery.css b/lib/banchan_web/components/work_gallery/work_gallery.css
@@ -2,13 +2,23 @@ ul {
   @apply gap-0 sm:gap-1 columns-2 sm:columns-3 md:columns-4;
 
   & > li {
-    @apply my-0 sm:mb-1 relative sm:hover:scale-105 sm:hover:z-10 cursor-pointer transition-all w-full;
+    @apply my-0 sm:mb-1 relative sm:hover:scale-105 sm:hover:z-10 cursor-pointer transition-all w-full overflow-hidden;
 
     break-inside: avoid-column;
-  }
 
-  & img {
-    @apply m-auto object-scale-down;
+    & img {
+      @apply m-auto object-scale-down;
+    }
+
+    &.mature {
+      & span {
+        @apply absolute top-2 left-2 flex flex-row items-center px-1 py-px text-xs font-bold bg-opacity-75 border rounded-md bg-error text-error-content border-base-100 border-opacity-10 cursor-pointer;
+      }
+
+      & img {
+        @apply blur-lg;
+      }
+    }
   }
 
   & :deep(bc-icon) {

diff --git a/lib/banchan_web/components/work_gallery/work_gallery.ex b/lib/banchan_web/components/work_gallery/work_gallery.ex
@@ -26,13 +26,14 @@ defmodule BanchanWeb.Components.WorkGallery do
         {/if}
         {#for work <- @works}
           {#if Works.first_previewable_upload(work) || @show_non_media}
-            <li>
+            <li class={mature: work.mature}>
               <LiveRedirect to={~p"/studios/#{work.studio.handle}/works/#{work.public_id}"}>
                 {#if Works.first_previewable_upload(work)}
                   <img
                     src={~p"/studios/#{work.studio.handle}/works/#{work.public_id}/upload/#{Works.first_previewable_upload(work).upload_id}/preview"}
                     alt={work.title}
                   />
+                  <span :if={work.mature} title="Mature">M</span>
                 {#else}
                   <div>
                     <Icon name="file-up" size={32} label={Enum.at(work.uploads, 0).upload.name}>