spt/forge
spt/forge
0
0
Fork 0
mirror of https://github.com/sp-tarkov/forge.git synced 2025-02-13 04:30:41 -05:00
Code Issues Packages Projects Releases Wiki Activity

Featured Ribbon

Browse Source 
Adds a featured ribbon to featured mods so that they can be visually distinct within the listing.
This commit is contained in:
Refringe 2024-08-16 00:11:47 -04:00
parent 189275fb0c
commit e3d1e74901
Signed by: Refringe
SSH Key Fingerprint: SHA256:t865XsQpfTeqPRBMN2G6+N8wlDjkgUCZF3WGW6O9N/k
4 changed files with 31 additions and 10 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
app/Livewire/Mod/Index.php
View File

@ -15,8 +15,6 @@ class Index extends Component
{ {
use WithPagination; use WithPagination;
// TODO: These `Url` properties should be saved to the browser's local storage to persist the filters.
/** /**
* The search query value. * The search query value.
*/ */

21
resources/css/app.css
View File

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

9
resources/views/components/mod-card.blade.php
View File

@ -1,10 +1,9 @@
@props(['mod', 'versionScope' => 'latestVersion']) @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="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:flex">
<div class="h-auto md:h-full md:shrink-0 overflow-hidden"> <div class="h-auto md:h-full md:shrink-0 overflow-hidden">

5
resources/views/mod/show.blade.php
View File

@ -10,7 +10,10 @@
<div class="lg:col-span-2 flex flex-col gap-6"> <div class="lg:col-span-2 flex flex-col gap-6">
{{-- Main Mod Details Card --}} {{-- 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="flex flex-col sm:flex-row gap-4 sm:gap-6">
<div class="grow-0 shrink-0 flex justify-center items-center"> <div class="grow-0 shrink-0 flex justify-center items-center">
@if (empty($mod->thumbnail)) @if (empty($mod->thumbnail))