Ceratic/MediaCollectorLibary
1
0
Fork 0
mirror of https://github.com/ceratic/MediaCollectorLibary.git synced 2026-05-13 23:56:46 +02:00
Code Issues Packages Projects Releases Wiki Activity

design?

Browse Source
This commit is contained in:
Lars Behrends
2025-11-07 13:42:00 +01:00
parent 3f2f80de11
commit 2da58cfbd0
3 changed files with 38 additions and 68 deletions
Download Patch File Download Diff File Expand all files Collapse all files

28
resources/views/movies/index.twig
View File

@@ -11,29 +11,15 @@
{% for director in filters.directors %}
<input type="hidden" name="directors[]" value="{{ director }}">
{% endfor %}
<div class="relative">
<input
type="text"
name="search"
value="{{ search }}"
placeholder="Search movies..."
class="pl-10 pr-4 py-2 border border-gray-300 rounded-md focus:ring-blue-500 focus:border-blue-500 w-64 bg-gray-800 text-white placeholder-gray-400"
>
<svg class="absolute left-3 top-1/2 transform -translate-y-1/2 text-gray-400 h-5 w-5" fill="none" viewBox="0 0 24 24" stroke="currentColor">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z"/>
</svg>
</div>
<button type="submit" class="bg-blue-600 text-white px-4 py-2 rounded-md hover:bg-blue-700 focus:outline-none focus:ring-2 focus:ring-blue-500 focus:ring-offset-2">
Search
</button>
</form>
<!-- View mode switcher -->
<div class="flex gap-1" role="group">
<!-- Enhanced View mode switcher -->
<div class="flex gap-1 bg-gray-100 rounded-lg p-1" role="group">
{% for mode in view_modes %}
<a
href="?view={{ mode }}&sort={{ sort }}{% if search %}&search={{ search }}{% endif %}{% if pagination.per_page != 24 %}&per_page={{ pagination.per_page }}{% endif %}{% for genre in filters.genres %}&genres[]={{ genre }}{% endfor %}{% for director in filters.directors %}&directors[]={{ director }}{% endfor %}"
class="inline-flex items-center px-3 py-2 border border-gray-300 bg-gray-800 text-gray-300 hover:bg-gray-700 hover:text-white focus:outline-none focus:ring-2 focus:ring-blue-500 focus:ring-offset-2 {{ view_mode == mode ? 'bg-blue-600 border-blue-500 text-white' : '' }}"
href="?view={{ mode }}{% if search %}&search={{ search }}{% endif %}{% if pagination.per_page != 24 %}&per_page={{ pagination.per_page }}{% endif %}{% for genre in filters.genres %}&genres[]={{ genre }}{% endfor %}{% for year in filters.years %}&years[]={{ year }}{% endfor %}"
class="inline-flex items-center px-3 py-2 text-sm font-medium rounded-md transition-all duration-200 {{ view_mode == mode ? 'bg-white text-blue-600 shadow-sm' : 'text-gray-600 hover:text-gray-900 hover:bg-gray-200' }}"
title="{{ mode|title }} View"
>
{% if mode == 'grid' %}
@@ -57,8 +43,8 @@
</div>
<!-- Sort dropdown -->
<div class="relative" x-data="{ open: false }">
<button @click="open = !open" class="inline-flex items-center px-3 py-2 border border-gray-300 rounded-md bg-gray-800 text-gray-300 hover:bg-gray-700 hover:text-white focus:outline-none focus:ring-2 focus:ring-blue-500 focus:ring-offset-2">
<div class="relative gap-1 bg-gray-100 rounded-lg p-1" x-data="{ open: false }">
<button @click="open = !open" class="inline-flex items-center px-3 py-2 text-sm font-medium rounded-md transition-all duration-200 {{ view_mode == mode ? 'bg-white text-blue-600 shadow-sm' : 'text-gray-600 hover:text-gray-900 hover:bg-gray-200' }}">
<svg class="mr-1 h-4 w-4" fill="none" viewBox="0 0 24 24" stroke="currentColor">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M3 4h14M3 8h9m-9 4h6m4 0l4-4m0 0l4 4m-4-4v12"/>
</svg>