mirror of
https://github.com/ceratic/MediaCollectorLibary.git
synced 2026-05-13 23:56:46 +02:00
Stuff i guess ?
This commit is contained in:
@@ -112,26 +112,57 @@
|
||||
</form>
|
||||
|
||||
<!-- View mode switcher -->
|
||||
<div class="btn-group" role="group">
|
||||
<div class="btn-group me-2" role="group">
|
||||
{% for mode in view_modes %}
|
||||
<a
|
||||
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 director in filters.directors %}&directors[]={{ director }}{% endfor %}"
|
||||
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="btn btn-outline-secondary {{ view_mode == mode ? 'active' : '' }}"
|
||||
title="{{ mode|title }} View"
|
||||
>
|
||||
{% if mode == 'grid' %}
|
||||
<svg class="me-1" width="16" height="16" fill="none" viewBox="0 0 24 24" stroke="currentColor">
|
||||
<svg width="16" height="16" fill="none" viewBox="0 0 24 24" stroke="currentColor">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 6a2 2 0 012-2h2a2 2 0 012 2v2a2 2 0 01-2 2H6a2 2 0 01-2-2V6zM14 6a2 2 0 012-2h2a2 2 0 012 2v2a2 2 0 01-2 2h-2a2 2 0 01-2-2V6zM4 16a2 2 0 012-2h2a2 2 0 012 2v2a2 2 0 01-2 2H6a2 2 0 01-2-2v-2zM14 16a2 2 0 012-2h2a2 2 0 012 2v2a2 2 0 01-2 2h-2a2 2 0 01-2-2v-2z"/>
|
||||
</svg>
|
||||
{% endif %}
|
||||
{% if mode == 'list' %}
|
||||
<svg class="me-1" width="16" height="16" fill="none" viewBox="0 0 24 24" stroke="currentColor">
|
||||
<svg width="16" height="16" fill="none" viewBox="0 0 24 24" stroke="currentColor">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 6h16M4 10h16M4 14h16M4 18h16"/>
|
||||
</svg>
|
||||
{% endif %}
|
||||
{{ mode|title }}
|
||||
{% if mode == 'covers' %}
|
||||
<svg width="16" height="16" fill="none" viewBox="0 0 24 24" stroke="currentColor">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 16l4.586-4.586a2 2 0 012.828 0L16 16m-2-2l1.586-1.586a2 2 0 012.828 0L20 14m-6-6h.01M6 20h12a2 2 0 002-2V6a2 2 0 00-2-2H6a2 2 0 00-2 2v12a2 2 0 002 2z"/>
|
||||
</svg>
|
||||
{% endif %}
|
||||
<span class="d-none d-sm-inline ms-1">{{ mode|title }}</span>
|
||||
</a>
|
||||
{% endfor %}
|
||||
</div>
|
||||
|
||||
<!-- Sort dropdown -->
|
||||
<div class="dropdown">
|
||||
<button class="btn btn-outline-secondary dropdown-toggle" type="button" id="sortDropdown" data-bs-toggle="dropdown" aria-expanded="false">
|
||||
<svg class="me-1" width="16" height="16" fill="none" viewBox="0 0 24 24" stroke="currentColor">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M3 4h13M3 8h9m-9 4h6m4 0l4-4m0 0l4 4m-4-4v12"/>
|
||||
</svg>
|
||||
<span class="d-none d-sm-inline">Sort</span>
|
||||
</button>
|
||||
<ul class="dropdown-menu dropdown-menu-end" aria-labelledby="sortDropdown">
|
||||
{% for key, label in sort_options %}
|
||||
<li>
|
||||
<a class="dropdown-item {% if sort == key %}active{% endif %}"
|
||||
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="float-end mt-1" width="16" height="16" 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>
|
||||
</li>
|
||||
{% endfor %}
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@@ -219,8 +250,22 @@
|
||||
|
||||
{% elseif view_mode == 'covers' %}
|
||||
<!-- Cover grid view -->
|
||||
|
||||
<div class="items">
|
||||
<div class="row g-3">
|
||||
|
||||
|
||||
{% for movie in movies %}
|
||||
|
||||
<figure class="item" style="padding:0px">
|
||||
<a href="{{ path_for('movies.show', {'id': movie.id}) }}" class="text-decoration-none">
|
||||
<img src="/images/{{ movie.poster_url }}" />
|
||||
<figcaption>{{ movie.title }}</figcaption>
|
||||
</a>
|
||||
</figure>
|
||||
<!--
|
||||
|
||||
|
||||
<div class="col-6 col-sm-4 col-md-3 col-lg-2">
|
||||
<div class="card h-100">
|
||||
{% if movie.poster_url %}
|
||||
@@ -245,7 +290,7 @@
|
||||
{% endif %}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>-->
|
||||
{% endfor %}
|
||||
</div>
|
||||
|
||||
@@ -367,6 +412,50 @@
|
||||
</div>
|
||||
|
||||
<style>
|
||||
/* Sort dropdown styles */
|
||||
.dropdown-menu {
|
||||
min-width: 250px;
|
||||
max-height: 400px;
|
||||
overflow-y: auto;
|
||||
}
|
||||
|
||||
.dropdown-item {
|
||||
padding: 0.5rem 1.25rem;
|
||||
white-space: normal;
|
||||
line-height: 1.4;
|
||||
}
|
||||
|
||||
.dropdown-item svg {
|
||||
margin-top: 0.15rem;
|
||||
}
|
||||
|
||||
/* Make sure the dropdown works on mobile */
|
||||
@media (max-width: 575.98px) {
|
||||
.dropdown-menu {
|
||||
position: fixed !important;
|
||||
top: auto !important;
|
||||
left: 1rem !important;
|
||||
right: 1rem !important;
|
||||
width: auto !important;
|
||||
margin-top: 0.5rem;
|
||||
max-height: 70vh;
|
||||
transform: none !important;
|
||||
}
|
||||
|
||||
.dropdown-menu-end {
|
||||
right: 1rem !important;
|
||||
left: 1rem !important;
|
||||
}
|
||||
}
|
||||
|
||||
/* View mode buttons */
|
||||
.btn-group .btn {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
padding: 0.375rem 0.75rem;
|
||||
}
|
||||
|
||||
/* Custom styles for Select2 integration */
|
||||
.select2-container {
|
||||
z-index: 1050; /* Ensure Select2 dropdown appears above other elements */
|
||||
|
||||
Reference in New Issue
Block a user