w33b/hstream
1
0
Fork 1
Code Issues 1 Pull Requests Actions Packages Projects Releases Wiki Activity

Add type icons to downloads search page

Browse Source
This commit is contained in:
w33b
2025-10-15 19:33:37 +02:00
parent 6c44d83e6b
commit 71bcf277f6
1 changed files with 64 additions and 11 deletions
Download Patch File Download Diff File Expand all files Collapse all files

75
resources/views/livewire/downloads-search.blade.php
View File

@@ -1,5 +1,5 @@
<div class="py-3 relative">
<div class="mx-auto sm:px-6 lg:px-8 space-y-6 max-w-[100%] xl:max-w-[80%] 2xl:max-w-[50%] relative z-10">
<div class="mx-auto sm:px-6 lg:px-8 space-y-6 max-w-[100%] lg:max-w-[90%] xl:max-w-[80%] 2xl:max-w-[60%] relative z-10">
<!-- Search Filter -->
<div class="p-4 sm:p-8 bg-white/30 dark:bg-neutral-950/40 shadow sm:rounded-lg backdrop-blur relative z-100">
<div class="grid grid-cols-1 sm:grid-cols-3 gap-4 ">
@@ -36,7 +36,8 @@
</div>
</div>
<div x-data="{ open: @entangle('isOpen') }" x-on:click.away="open = false" class="relative right-2 left-0 sm:left-2 transition-all">
<div x-data="{ open: @entangle('isOpen') }" x-on:click.away="open = false"
class="relative right-2 left-0 sm:left-2 transition-all">
<div class="absolute inset-y-0 left-2 flex items-center pl-3 pointer-events-none">
<i class="fa-solid fa-filter text-gray-500 dark:text-gray-400"></i>
</div>
@@ -44,8 +45,9 @@
class="inline-flex w-full p-4 pl-10 text-sm text-gray-900 border border-gray-300 rounded-lg bg-gray-50 focus:ring-rose-800 focus:border-rose-900 dark:bg-neutral-900 dark:border-neutral-600 dark:placeholder-gray-400 dark:text-white dark:focus:ring-rose-800 dark:focus:border-rose-900"
wire:click="toggleDropdown">
Select Type
<svg class="absolute -mr-1 h-5 w-5 text-gray-500 right-4 top-4" xmlns="http://www.w3.org/2000/svg"
viewBox="0 0 20 20" fill="currentColor" aria-hidden="true">
<svg class="absolute -mr-1 h-5 w-5 text-gray-500 right-4 top-4"
xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor"
aria-hidden="true">
<path fill-rule="evenodd"
d="M5.293 7.293a1 1 0 011.414 0L10 10.586l3.293-3.293a1 1 0 111.414 1.414l-4 4a1 1 0 01-1.414 0l-4-4a1 1 0 010-1.414z"
clip-rule="evenodd" />
@@ -93,7 +95,7 @@
</div>
</div>
<div
class="relative pt-5 mx-auto sm:px-6 lg:px-8 space-y-6 text-gray-900 dark:text-white max-w-[100%] xl:max-w-[80%] 2xl:max-w-[50%]">
class="relative pt-5 mx-auto sm:px-6 lg:px-8 space-y-6 text-gray-900 dark:text-white max-w-[100%] lg:max-w-[90%] xl:max-w-[80%] 2xl:max-w-[60%]">
<div class="flex flex-col">
<div class="overflow-x-auto sm:-mx-6 lg:-mx-8">
<div class="inline-block min-w-full py-2 sm:px-6 lg:px-8">
@@ -105,9 +107,10 @@
<div
class="flex bg-white/30 dark:bg-neutral-950/40 backdrop-blur font-medium dark:border-neutral-500 border-b rounded-tl-lg rounded-tr-lg">
<div class="flex-1 px-6 py-4 hidden sm:block">Title</div>
<div class="w-28 px-6 py-4 hidden sm:block">Size</div>
<div class="w-32 px-6 py-4 hidden sm:block">Date</div>
<div class="w-32 px-6 py-4">Download</div>
<div class="w-20 px-6 py-4 hidden text-center sm:block">Type</div>
<div class="w-28 px-6 py-4 hidden text-center sm:block">Size</div>
<div class="w-32 px-6 py-4 hidden text-center sm:block">Date</div>
<div class="w-32 px-6 py-4 text-center">Download</div>
</div>
@php
@@ -128,8 +131,58 @@
{{ $title }}
</div>
<!-- Type -->
<div class="w-20 whitespace-nowrap flex justify-center">
<span class="block sm:hidden pr-2">
Type:
</span>
<div class="flex justify-center">
@if ($download->type === 'FHD' || $download->type === 'FHDi')
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24"
class="text-sky-500" viewBox="0 0 24 24" fill="none"
stroke="currentColor" stroke-width="2" stroke-linecap="round"
stroke-linejoin="round"
class="icon icon-tabler icons-tabler-outline icon-tabler-badge-hd">
<path stroke="none" d="M0 0h24v24H0z" fill="none" />
<path
d="M3 5m0 2a2 2 0 0 1 2 -2h14a2 2 0 0 1 2 2v10a2 2 0 0 1 -2 2h-14a2 2 0 0 1 -2 -2z" />
<path d="M14 9v6h1a2 2 0 0 0 2 -2v-2a2 2 0 0 0 -2 -2h-1z" />
<path d="M7 15v-6" />
<path d="M10 15v-6" />
<path d="M7 12h3" />
</svg>
@else
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24"
class="text-rose-600" viewBox="0 0 24 24" fill="none"
stroke="currentColor" stroke-width="2" stroke-linecap="round"
stroke-linejoin="round"
class="icon icon-tabler icons-tabler-outline icon-tabler-badge-4k">
<path stroke="none" d="M0 0h24v24H0z" fill="none" />
<path
d="M3 5m0 2a2 2 0 0 1 2 -2h14a2 2 0 0 1 2 2v10a2 2 0 0 1 -2 2h-14a2 2 0 0 1 -2 -2z" />
<path d="M7 9v2a1 1 0 0 0 1 1h1" />
<path d="M10 9v6" />
<path d="M14 9v6" />
<path d="M17 9l-2 3l2 3" />
<path d="M15 12h-1" />
</svg>
@endif
@if ($download->type === 'FHDi' || $download->type === 'UHDi')
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" class="text-yellow-600"
viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"
stroke-linecap="round" stroke-linejoin="round">
<path
d="M9.225 18.412a1.595 1.595 0 0 1 -1.225 .588c-.468 0 -.914 -.214 -1.225 -.588l-4.361 -5.248a1.844 1.844 0 0 1 0 -2.328l4.361 -5.248a1.595 1.595 0 0 1 1.225 -.588c.468 0 .914 .214 1.225 .588l4.361 5.248a1.844 1.844 0 0 1 0 2.328l-4.361 5.248z" />
<path d="M17 5l4.586 5.836a1.844 1.844 0 0 1 0 2.328l-4.586 5.836" />
<path d="M13 5l4.586 5.836a1.844 1.844 0 0 1 0 2.328l-4.586 5.836" />
</svg>
@endif
</div>
</div>
<!-- Size -->
<div class="w-28 whitespace-nowrap flex">
<div class="w-28 whitespace-nowrap flex justify-center">
<span class="block sm:hidden">
Size:
</span>
@@ -137,7 +190,7 @@
</div>
<!-- Date -->
<div class="w-32 whitespace-nowrap flex">
<div class="w-32 whitespace-nowrap flex justify-center">
<span class="block sm:hidden">
Date:
</span>
@@ -145,7 +198,7 @@
</div>
<!-- Download -->
<div class="w-32 whitespace-nowrap">
<div class="w-32 whitespace-nowrap flex justify-center">
@php
if (in_array($download->type, ['FHD', 'FHDi'])) {
$downloadURL =