Featured Ribbon

Adds a featured ribbon to featured mods so that they can be visually distinct within the listing.

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.
      */

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;
+}

resources/views/components/mod-card.blade.php

@@ -1,10 +1,9 @@
 @props(['mod', 'versionScope' => 'latestVersion'])
 
-{{--
+<a href="/mod/{{ $mod->id }}/{{ $mod->slug }}" class="mod-list-component relative mx-auto w-full max-w-md md:max-w-2xl">
-    // TODO: Should have some way of visially indicating that a mod is featured. Maybe a sideways ribbon over the thumbnail or something?
+    @if ($mod->featured && !request()->routeIs('home'))
---}}
+        <div class="ribbon z-10">{{ __('Featured!') }}</div>
-
+    @endif
-<a href="/mod/{{ $mod->id }}/{{ $mod->slug }}" class="mod-list-component mx-auto w-full max-w-md md:max-w-2xl">
     <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 }}
+                            {{ $mod->{$versionScope}->sptVersion->version }}
-                                    </span>
+                        </span>
                     </div>
                     <p class="text-sm italic text-slate-600 dark:text-gray-200">
                         By {{ $mod->users->pluck('name')->implode(', ') }}

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))