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

50
resources/views/tvshows/index.twig
View File

@@ -11,32 +11,6 @@
{% for year in filters.years %}
<input type="hidden" name="years[]" value="{{ year }}">
{% endfor %}
<div class="relative flex-1 max-w-md">
<input
type="text"
name="search"
value="{{ search }}"
placeholder="Search TV shows... (Ctrl+/)"
class="w-full pl-10 pr-4 py-2.5 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-blue-500 bg-white text-gray-900 placeholder-gray-500 shadow-sm transition-colors"
autocomplete="off"
>
<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>
{% if search %}
<button type="button" onclick="clearSearch()" class="absolute right-3 top-1/2 transform -translate-y-1/2 text-gray-400 hover:text-gray-600">
<svg class="h-4 w-4" fill="none" viewBox="0 0 24 24" stroke="currentColor">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12"/>
</svg>
</button>
{% endif %}
</div>
<button type="submit" class="inline-flex items-center px-4 py-2.5 bg-blue-600 text-white font-medium rounded-lg hover:bg-blue-700 focus:outline-none focus:ring-2 focus:ring-blue-500 focus:ring-offset-2 transition-colors shadow-sm">
<svg class="w-4 h-4 mr-2" 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>
Search
</button>
</form>
<!-- Enhanced View mode switcher -->
@@ -66,6 +40,30 @@
</a>
{% endfor %}
</div>
<!-- Sort dropdown -->
<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>
<span class="hidden sm:inline">Sort</span>
</button>
<div x-show="open" @click.away="open = false" class="absolute right-0 z-50 mt-2 w-56 bg-white rounded-md shadow-lg ring-1 ring-black ring-opacity-5">
<div class="py-1">
{% for key, label in sort_options %}
<a class="flex items-center justify-between px-4 py-2 text-sm text-gray-700 hover:bg-gray-100 {{ sort == key ? 'bg-gray-50' : '' }}"
href="?sort={{ key }}&view={{ 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 director in filters.directors %}&directors[]={{ director }}{% endfor %}">
{{ label }}
{% if sort == key %}
<svg class="h-4 w-4 text-blue-600" fill="currentColor" viewBox="0 0 16 16">
<path d="M12.5 15a.5.5 0 0 1-.5-.5v-13a.5.5 0 0 1 1 0v13a.5.5 0 0 1-.5.5zM10 8a.5.5 0 0 1-.5.5H3.707l2.147 2.146a.5.5 0 0 1-.708.708l-3-3a.5.5 0 0 1 0-.708l3-3a.5.5 0 1 1 .708.708L3.707 7.5H9.5a.5.5 0 0 1 .5.5z"/>
</svg>
{% endif %}
</a>
{% endfor %}
</div>
</div>
</div>
{% endblock %}
{% block sidebar %}