From e3d1e7490107d56dce6c0e74c21d19e8fb3de911 Mon Sep 17 00:00:00 2001
From: Refringe <me@refringe.com>
Date: Fri, 16 Aug 2024 00:11:47 -0400
Subject: [PATCH] Featured Ribbon

Adds a featured ribbon to featured mods so that they can be visually distinct within the listing.
---
 app/Livewire/Mod/Index.php                    |  2 --
 resources/css/app.css                         | 21 +++++++++++++++++++
 resources/views/components/mod-card.blade.php | 13 ++++++------
 resources/views/mod/show.blade.php            |  5 ++++-
 4 files changed, 31 insertions(+), 10 deletions(-)

diff --git a/app/Livewire/Mod/Index.php b/app/Livewire/Mod/Index.php
index 482b24d..74f4daf 100644
--- a/app/Livewire/Mod/Index.php
+++ b/app/Livewire/Mod/Index.php
@@ -15,8 +15,6 @@ class Index extends Component
 {
     use WithPagination;
 
-    // TODO: These `Url` properties should be saved to the browser's local storage to persist the filters.
-
     /**
      * The search query value.
      */
diff --git a/resources/css/app.css b/resources/css/app.css
index 839dc3f..b64ffef 100644
--- a/resources/css/app.css
+++ b/resources/css/app.css
@@ -87,3 +87,24 @@ main a:not(.mod-list-component):not(.tab):not([role="menuitem"]) {
         @apply my-2 ml-7 text-gray-800 dark:text-gray-300;
     }
 }
+
+.ribbon {
+    font-size: 18px;
+    font-weight: bold;
+    color: #fff;
+}
+
+.ribbon {
+    --f: .5em;
+    position: absolute;
+    top: 0;
+    left: 0;
+    line-height: 1.5;
+    padding-inline: 1lh;
+    padding-bottom: var(--f);
+    border-image: conic-gradient(#0008 0 0) 51%/var(--f);
+    clip-path: polygon(100% calc(100% - var(--f)), 100% 100%, calc(100% - var(--f)) calc(100% - var(--f)), var(--f) calc(100% - var(--f)), 0 100%, 0 calc(100% - var(--f)), 999px calc(100% - var(--f) - 999px), calc(100% - 999px) calc(100% - var(--f) - 999px));
+    transform: translate(calc((cos(45deg) - 1) * 100%), -100%) rotate(-45deg);
+    transform-origin: 100% 100%;
+    background-color: #0e7490;
+}
diff --git a/resources/views/components/mod-card.blade.php b/resources/views/components/mod-card.blade.php
index e83c48d..0f1f22e 100644
--- a/resources/views/components/mod-card.blade.php
+++ b/resources/views/components/mod-card.blade.php
@@ -1,10 +1,9 @@
 @props(['mod', 'versionScope' => 'latestVersion'])
 
-{{--
-    // TODO: Should have some way of visially indicating that a mod is featured. Maybe a sideways ribbon over the thumbnail or something?
---}}
-
-<a href="/mod/{{ $mod->id }}/{{ $mod->slug }}" class="mod-list-component mx-auto w-full max-w-md md:max-w-2xl">
+<a href="/mod/{{ $mod->id }}/{{ $mod->slug }}" class="mod-list-component relative mx-auto w-full max-w-md md:max-w-2xl">
+    @if ($mod->featured && !request()->routeIs('home'))
+        <div class="ribbon z-10">{{ __('Featured!') }}</div>
+    @endif
     <div class="flex flex-col group h-full w-full bg-white dark:bg-gray-950 rounded-xl shadow-md dark:shadow-gray-950 drop-shadow-2xl overflow-hidden hover:shadow-lg hover:bg-gray-50 dark:hover:bg-black hover:shadow-gray-400 dark:hover:shadow-black transition-all duration-200">
         <div class="h-auto md:h-full md:flex">
             <div class="h-auto md:h-full md:shrink-0 overflow-hidden">
@@ -20,8 +19,8 @@
                     <div class="flex justify-between items-center space-x-3">
                         <h3 class="block mt-1 text-lg leading-tight font-medium text-black dark:text-white group-hover:underline">{{ $mod->name }}</h3>
                         <span class="badge-version {{ $mod->{$versionScope}->sptVersion->color_class }} inline-flex items-center rounded-md px-2 py-1 text-xs font-medium text-nowrap">
-                                        {{ $mod->{$versionScope}->sptVersion->version }}
-                                    </span>
+                            {{ $mod->{$versionScope}->sptVersion->version }}
+                        </span>
                     </div>
                     <p class="text-sm italic text-slate-600 dark:text-gray-200">
                         By {{ $mod->users->pluck('name')->implode(', ') }}
diff --git a/resources/views/mod/show.blade.php b/resources/views/mod/show.blade.php
index e7e8ae2..0e25f2b 100644
--- a/resources/views/mod/show.blade.php
+++ b/resources/views/mod/show.blade.php
@@ -10,7 +10,10 @@
         <div class="lg:col-span-2 flex flex-col gap-6">
 
             {{-- Main Mod Details Card --}}
-            <div class="p-4 sm:p-6 text-center sm:text-left bg-white dark:bg-gray-950 rounded-xl shadow-md dark:shadow-gray-950 drop-shadow-2xl">
+            <div class="relative p-4 sm:p-6 text-center sm:text-left bg-white dark:bg-gray-950 rounded-xl shadow-md dark:shadow-gray-950 drop-shadow-2xl">
+                @if ($mod->featured)
+                    <div class="ribbon z-10">{{ __('Featured!') }}</div>
+                @endif
                 <div class="flex flex-col sm:flex-row gap-4 sm:gap-6">
                     <div class="grow-0 shrink-0 flex justify-center items-center">
                         @if (empty($mod->thumbnail))