feat(EpisodeOptions): number of results in pill

This commit is contained in:
2025-04-21 23:39:30 -05:00
parent cf3659fdd1
commit c4c3610714
2 changed files with 75 additions and 67 deletions

View File

@@ -8,7 +8,7 @@
<div class="flex flex-row w-full gap-2">
<twig:Card title="" contentClass="flex flex-col gap-4 justify-between w-full text-gray-50">
<div class="p-4 flex flex-row gap-6">
<img class="w-24" src="{{ results.media.poster }}" />
<img class="w-40" src="{{ results.media.poster }}" />
<div class="w-full flex flex-col">
<h3 class="mb-4 text-xl font-medium leading-tight font-bold text-gray-50">
{{ results.media.title }} - {{ results.media.year }}
@@ -32,8 +32,7 @@
season: season,
episode: episode['episode_number'],
active: active,
}) }}>
</div>
}) }}></div>
{% endfor %}
{% endfor %}
{% endif %}

View File

@@ -4,6 +4,11 @@
<div class="flex flex-col gap-4 grow">
<h4 class="text-md font-bold">{{ results.episode }}. {{ results.media.title }}</h4>
<p>{{ results.media.description }}</p>
<span>
<small class="py-1 px-1.5 grow-0 font-bold bg-green-600 rounded-lg hover:cursor-pointer hover:bg-green-700 text-white"
{{ stimulus_action('tv-results', 'toggleList', 'click') }}
>{{ results.results|length }} results</small>
</span>
</div>
<div class="flex flex-col items-end hover:cursor-pointer"
{{ stimulus_action('tv_results', 'toggleList', 'click') }}>
@@ -12,69 +17,73 @@
</svg>
</div>
</div>
<table class="divide-y divide-gray-200 dark:divide-gray-50 dark:bg-transparent rounded-lg hidden"
data-tv-results-target="list"
>
<thead>
<tr class="dark:bg-stone-600 overflow-hidden rounded-md">
<th scope="col"
class="px-6 py-3 text-start text-xs font-medium text-stone-500 uppercase dark:text-gray-50">
Size
</th>
<th scope="col"
class="px-6 py-3 text-start text-xs font-medium text-gray-500 uppercase dark:text-gray-50">
Resolution
</th>
<th scope="col"
class="px-6 py-3 text-start text-xs font-medium text-gray-500 uppercase dark:text-gray-50">
Codec
</th>
<th scope="col"
class="px-6 py-3 text-start text-xs font-medium text-gray-500 uppercase dark:text-gray-50">
Seeders
</th>
<th scope="col"
class="px-6 py-3 text-start text-xs font-medium text-gray-500 uppercase dark:text-gray-50">
Provider
</th>
<th scope="col"
class="px-6 py-3 text-start text-xs font-medium text-gray-500 uppercase dark:text-gray-50">
Language
</th>
<th scope="col"
class="px-6 py-3 text-start text-xs font-medium text-gray-500 uppercase dark:text-gray-50">
</th>
</tr>
</thead>
<tbody class="divide-y divide-gray-200 dark:divide-gray-50">
{% for result in results.results %}
<tr>
<td class="px-6 py-4 whitespace-nowrap text-sm font-medium text-gray-800 dark:text-gray-50">
{{ result.size }}
</td>
<td class="px-6 py-4 whitespace-nowrap text-sm font-medium text-gray-800 dark:text-gray-50">
{{ result.resolution }}
</td>
<td class="px-6 py-4 whitespace-nowrap text-sm font-medium text-gray-800 dark:text-gray-50">
{{ result.codec }}
</td>
<td class="px-6 py-4 whitespace-nowrap text-sm font-medium text-gray-800 dark:text-gray-50">
{{ result.seeders }}
</td>
<td class="px-6 py-4 whitespace-nowrap text-sm font-medium text-gray-800 dark:text-gray-50">
{{ result.provider }}
</td>
<td class="px-6 py-4 whitespace-nowrap text-sm font-medium text-gray-800 dark:text-gray-50">
{{ result.languageFlags }}
</td>
<td class="px-6 py-4 whitespace-nowrap text-sm text-end text-gray-800 dark:text-gray-50">
<span class="p-1.5 bg-green-600 rounded-md">
<span class="text-gray-50">Download</span>
</span>
<input class="ml-1" type="checkbox" name="select" />
</td>
<div class="inline-block overflow-hidden rounded-lg">
<table class="w-full text-sm text-left rtl:text-right text-gray-500 dark:text-gray-400 hidden"
data-tv-results-target="list"
>
<thead class="text-xs text-gray-700 uppercase bg-gray-50 dark:bg-gray-700 dark:text-gray-400">
<tr class="dark:bg-stone-600 overflow-hidden">
<th scope="col"
class="px-6 py-4 font-medium text-gray-900 whitespace-nowrap dark:text-white">
Size
</th>
<th scope="col"
class="px-6 py-4 font-medium text-gray-900 whitespace-nowrap dark:text-white">
Resolution
</th>
<th scope="col"
class="px-6 py-4 font-medium text-gray-900 whitespace-nowrap dark:text-white">
Codec
</th>
<th scope="col"
class="px-6 py-4 font-medium text-gray-900 whitespace-nowrap dark:text-white">
Seeders
</th>
<th scope="col"
class="px-6 py-4 font-medium text-gray-900 whitespace-nowrap dark:text-white">
Provider
</th>
<th scope="col"
class="px-6 py-4 font-medium text-gray-900 whitespace-nowrap dark:text-white">
Language
</th>
<th scope="col"
class="px-6 py-4 font-medium text-gray-900 whitespace-nowrap dark:text-white">
</th>
</tr>
{% endfor %}
</tbody>
</table>
</thead>
<tbody>
{% for result in results.results %}
<tr class="bg-white border-b dark:bg-slate-700 dark:border-gray-600 border-gray-200">
<td class="px-6 py-4 whitespace-nowrap text-sm font-medium text-gray-800 dark:text-gray-50">
{{ result.size }}
</td>
<td class="px-6 py-4 whitespace-nowrap text-sm font-medium text-gray-800 dark:text-gray-50">
{{ result.resolution }}
</td>
<td class="px-6 py-4 whitespace-nowrap text-sm font-medium text-gray-800 dark:text-gray-50">
{{ result.codec }}
</td>
<td class="px-6 py-4 whitespace-nowrap text-sm font-medium text-gray-800 dark:text-gray-50">
{{ result.seeders }}
</td>
<td class="px-6 py-4 whitespace-nowrap text-sm font-medium text-gray-800 dark:text-gray-50">
{{ result.provider }}
</td>
<td class="px-6 py-4 whitespace-nowrap text-sm font-medium text-gray-800 dark:text-gray-50">
{{ result.languageFlags }}
</td>
<td class="px-6 py-4 whitespace-nowrap text-sm text-end text-gray-800 dark:text-gray-50 flex flex-row gap-2 items-center justify-end">
<span class="p-1.5 bg-green-600 rounded-md text-gray-50">
Download
</span>
<label for="select">
<input id="select" type="checkbox" name="select" />
</label>
</td>
</tr>
{% endfor %}
</tbody>
</table>
</div>
</div>