colgora/Mangarr
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Added:

Browse Source 
- toolbar refactor
This commit is contained in:
Djeone1
2024-06-29 18:13:43 +02:00
parent 858a5bed06
commit b4f0811bca
20 changed files with 432 additions and 193 deletions
Download Patch File Download Diff File Expand all files Collapse all files

45
templates/activity/index.html.twig
View File

@@ -1,41 +1,8 @@
{% extends 'base.html.twig' %}
{% block toolbar %}
{% set left_group %}
<twig:ToolBarButton icon="sync-alt" text="Tout actualiser" action="refresh"/>
<twig:ToolBarButton icon="rss" text="Synchro RSS" action="syncRss"/>
<twig:Divider/>
<twig:ToolBarButton icon="search" text="Rechercher tout" action="search"/>
<twig:ToolBarButton icon="user-plus" text="Importation manuelle" action="import"/>
<twig:Divider/>
<twig:ToolBarButton icon="wrench" text="Modifier Mangas" action="editMangas"/>
{% endset %}
{% set right_group %}
<twig:ToolBarButton icon="th-large" text="Options" action="showOptions"/>
<twig:DropdownMenu
icon="eye"
text="Vue"
items="{{ toolbarItems.viewOptions }}"
/>
<twig:Divider/>
<twig:DropdownMenu
icon="sort"
text="Trier"
items="{{ toolbarItems.sortItems }}"
/>
<twig:DropdownMenu
icon="filter"
text="Filtre"
items="{{ toolbarItems.filterItems }}"
/>
{% endset %}
<twig:Toolbar
left_group="{{ left_group }}"
right_group="{{ right_group }}"
data-action="click@window->toolbar#clickOutside"
/>
{% if toolbar is defined %}
<twig:Toolbar toolbar="{{ toolbar }}"/>
{% endif %}
{% endblock %}
{% block body %}
<div class="container mx-auto mt-2">
@@ -80,8 +47,8 @@
</div>
</div>
{# <div class="mt-6 ml-4 flex justify-between items-center">#}
{# <span class="text-sm text-gray-600">Total des enregistrements: {{ status|length }}</span>#}
{# </div>#}
{# <div class="mt-6 ml-4 flex justify-between items-center"> #}
{# <span class="text-sm text-gray-600">Total des enregistrements: {{ status|length }}</span> #}
{# </div> #}
</div>
{% endblock %}

39
templates/components/Toolbar.html.twig
View File

@@ -2,10 +2,45 @@
<div class="bg-gray-800 p-3 min-h-14" {{ stimulus_controller('toolbar') }}>
<div class="flex flex-row items-center justify-between">
<div class="flex mr-2 items-center">
{{ left_group|raw }}
{% for element in toolbar.leftGroup %}
{% if element.type == 'button' %}
<twig:ToolBarButton
icon="{{ element.icon }}"
text="{{ element.text }}"
action="{{ element.action }}"
/>
{% elseif element.type == 'divider' %}
<twig:Divider/>
{% elseif element.type == 'dropdown' %}
<twig:DropdownMenu
icon="{{ element.icon }}"
text="{{ element.text }}"
action="{{ element.action }}"
items="{{ element.additionalProperties.items }}"
/>
{% endif %}
{% endfor %}
</div>
<div class="flex mr-2 items-center">
{{ right_group|raw }}
{% for element in toolbar.rightGroup %}
{% if element.type == 'button' %}
<twig:ToolBarButton
icon="{{ element.icon }}"
text="{{ element.text }}"
action="{{ element.action }}"
/>
{% elseif element.type == 'divider' %}
<twig:Divider/>
{% elseif element.type == 'dropdown' %}
<twig:DropdownMenu
icon="{{ element.icon }}"
text="{{ element.text }}"
action="{{ element.action }}"
items="{{ element.additionalProperties.items }}"
/>
{% endif %}
{% endfor %}
</div>
</div>
</div>

142
templates/manga/index.html.twig
View File

@@ -1,62 +1,94 @@
{% extends 'base.html.twig' %}
{% block toolbar %}
{% set left_group %}
<twig:ToolBarButton icon="sync-alt" text="Tout actualiser" action="refresh"/>
<twig:ToolBarButton icon="rss" text="Synchro RSS" action="syncRss"/>
<twig:Divider/>
<twig:ToolBarButton icon="search" text="Rechercher tout" action="search"/>
<twig:ToolBarButton icon="user-plus" text="Importation manuelle" action="import"/>
<twig:Divider/>
<twig:ToolBarButton icon="wrench" text="Modifier Mangas" action="editMangas"/>
{% endset %}
{% set right_group %}
<twig:ToolBarButton icon="th-large" text="Options" action="showOptions"/>
<twig:DropdownMenu
icon="eye"
text="Vue"
items="{{ toolbarItems.viewOptions }}"
/>
<twig:Divider/>
<twig:DropdownMenu
icon="sort"
text="Trier"
items="{{ toolbarItems.sortItems }}"
/>
<twig:DropdownMenu
icon="filter"
text="Filtre"
items="{{ toolbarItems.filterItems }}"
/>
{% endset %}
<twig:Toolbar
left_group="{{ left_group }}"
right_group="{{ right_group }}"
data-action="click@window->toolbar#clickOutside"
/>
{% if toolbar %}
<twig:Toolbar toolbar="{{ toolbar }}"/>
{% endif %}
{% endblock %}
{% block body %}
<div class="w-full p-4 grid sm:grid-cols-2 md:grid-cols-3 lg:grid-cols-4 xl:grid-cols-8 2xl:grid-cols-12 gap-4">
{% for manga in mangas %}
<div
class="bg-white overflow-hidden border border-gray-200 hover:shadow-2xl hover:border-gray-400 transition-all duration-300 flex flex-col">
<a href="{{ path('app_manga_show', { 'mangaSlug': manga.slug }) }}"
class="block relative w-full pb-[150%] overflow-hidden">
<img src="{{ manga.imageUrl ?? 'https://placehold.co/150x220' }}" alt="{{ manga.title }}"
class="absolute top-0 left-0 w-full h-full object-cover">
</a>
<div class="p-2 flex flex-col justify-between flex-grow">
<div>
<h3 class="text-sm font-semibold truncate">{{ manga.title }}</h3>
<p class="text-xs text-gray-500">{{ manga.publicationYear }}</p>
{% if currentView == 'poster' %}
{# Vue poster actuelle #}
<div class="w-full p-4 grid sm:grid-cols-2 md:grid-cols-3 lg:grid-cols-4 xl:grid-cols-8 2xl:grid-cols-12 gap-4">
{% for manga in mangas %}
<div
class="bg-white overflow-hidden border border-gray-200 hover:shadow-2xl hover:border-gray-400 transition-all duration-300 flex flex-col">
<a href="{{ path('app_manga_show', { 'mangaSlug': manga.slug }) }}"
class="block relative w-full pb-[150%] overflow-hidden">
<img src="{{ manga.imageUrl ?? 'https://placehold.co/150x220' }}" alt="{{ manga.title }}"
class="absolute top-0 left-0 w-full h-full object-cover">
</a>
<div class="p-2 flex flex-col justify-between flex-grow">
<div>
<h3 class="text-sm font-semibold truncate">{{ manga.title }}</h3>
<p class="text-xs text-gray-500">{{ manga.publicationYear }}</p>
</div>
<p class="text-xs text-gray-400 mt-1">Added: {{ manga.createdAt|date('M d, Y') }}</p>
</div>
<p class="text-xs text-gray-400 mt-1">Added: {{ manga.createdAt|date('M d, Y') }}</p>
</div>
</div>
{% else %}
<p class="col-span-full text-center text-gray-500">Aucun manga trouvé.</p>
{% endfor %}
</div>
{% else %}
<p class="col-span-full text-center text-gray-500">Aucun manga trouvé.</p>
{% endfor %}
</div>
{% elseif currentView == 'resume' %}
{# Vue résumé #}
<div class="w-full p-4 space-y-4">
{% for manga in mangas %}
<div
class="bg-white overflow-hidden border border-gray-200 hover:shadow-lg hover:border-gray-400 transition-all duration-300 flex">
<img src="{{ manga.imageUrl ?? 'https://placehold.co/150x220' }}" alt="{{ manga.title }}"
class="w-32 h-48 object-cover">
<div class="p-4 flex flex-col justify-between flex-grow">
<div>
<h3 class="text-lg font-semibold">{{ manga.title }}</h3>
<p class="text-sm text-gray-500">{{ manga.publicationYear }}</p>
<p class="text-sm text-gray-600 mt-2">{{ manga.description|truncate(200) }}</p>
</div>
<p class="text-xs text-gray-400 mt-2">Added: {{ manga.createdAt|date('M d, Y') }}</p>
</div>
</div>
{% else %}
<p class="text-center text-gray-500">Aucun manga trouvé.</p>
{% endfor %}
</div>
{% elseif currentView == 'table' %}
<div class="p-4">
<table class="min-w-full bg-white">
<thead>
<tr class="bg-gray-100 text-gray-600 uppercase text-sm leading-normal">
<th class="py-3 px-6 text-left">Manga Title</th>
{# <th class="py-3 px-6 text-center">Volumes</th> #}
<th class="py-3 px-6 text-center">Chapters</th>
</tr>
</thead>
<tbody class="text-gray-600 text-sm">
{% for manga in mangas %}
<tr class="border-b border-gray-200 hover:bg-gray-100">
<td class="py-3 px-6 text-left whitespace-nowrap">
<div class="flex items-center">
<span class="font-medium">{{ manga.title }}</span>
</div>
</td>
{# <td class="py-3 px-6 text-center"> #}
{# {{ manga.volumes|length }} #}
{# </td> #}
<td class="py-3 px-6 text-center">
{% set total_chapters = manga.chapters|length %}
{% set available_chapters = manga.chapters|filter(chapter => chapter.cbzPath is not null)|length %}
<div class="flex items-center justify-center">
<div class="w-48 bg-gray-200 rounded-full h-2.5">
<div class="bg-blue-600 h-2.5 rounded-full"
style="width: {{ (available_chapters / total_chapters * 100)|round }}%"></div>
</div>
<span class="ml-2">{{ available_chapters }} / {{ total_chapters }}</span>
</div>
</td>
</tr>
{% else %}
<tr>
<td colspan="6" class="py-3 px-6 text-center">Aucun manga trouvé.</td>
</tr>
{% endfor %}
</tbody>
</table>
</div>
{% endif %}
{% endblock %}

57
templates/manga/show_chapters.html.twig
View File

@@ -1,41 +1,8 @@
{% extends 'base.html.twig' %}
{% block toolbar %}
{% set left_group %}
<twig:ToolBarButton icon="sync-alt" text="Tout actualiser" action="refresh"/>
<twig:ToolBarButton icon="rss" text="Synchro RSS" action="syncRss"/>
<twig:Divider/>
<twig:ToolBarButton icon="search" text="Rechercher tout" action="search"/>
<twig:ToolBarButton icon="user-plus" text="Importation manuelle" action="import"/>
<twig:Divider/>
<twig:ToolBarButton icon="wrench" text="Modifier Mangas" action="editMangas"/>
{% endset %}
{% set right_group %}
<twig:ToolBarButton icon="th-large" text="Options" action="showOptions"/>
<twig:DropdownMenu
icon="eye"
text="Vue"
items="{{ toolbarItems.viewOptions }}"
/>
<twig:Divider/>
<twig:DropdownMenu
icon="sort"
text="Trier"
items="{{ toolbarItems.sortItems }}"
/>
<twig:DropdownMenu
icon="filter"
text="Filtre"
items="{{ toolbarItems.filterItems }}"
/>
{% endset %}
<twig:Toolbar
left_group="{{ left_group }}"
right_group="{{ right_group }}"
data-action="click@window->toolbar#clickOutside"
/>
{% if toolbar is defined %}
<twig:Toolbar toolbar="{{ toolbar }}"/>
{% endif %}
{% endblock %}
{% block body %}
<div class="relative">
@@ -100,18 +67,21 @@
<i class="fas fa-bookmark text-gray-500 text-3xl"></i>
<h2 class="text-xl font-semibold">Volume {{ '%02d'|format(volume) }}</h2>
<div class="flex items-center">
<span class="px-2 py-1 text-sm rounded {{ available_chapters|length > 0 ? 'bg-green-500 text-white' : 'bg-red-500 text-white' }}">
<span
class="px-2 py-1 text-sm rounded {{ available_chapters|length > 0 ? 'bg-green-500 text-white' : 'bg-red-500 text-white' }}">
{{ available_chapters|length }} / {{ total_chapters }}
</span>
</div>
</div>
<div class="flex items-center">
<span class="text-gray-600 mr-2">{{ chapters|length }} Chapters</span>
<i data-table-target="toggleIcon" data-action="click->table#toggle" class="fas fa-chevron-{{ is_first ? 'up' : 'down' }} cursor-pointer"></i>
<i data-table-target="toggleIcon" data-action="click->table#toggle"
class="fas fa-chevron-{{ is_first ? 'up' : 'down' }} cursor-pointer"></i>
</div>
</div>
<div data-table-target="body" class="p-4 border-t" {{ not is_first ? 'style="display: none;"' : '' }}>
<div data-table-target="body"
class="p-4 border-t" {{ not is_first ? 'style="display: none;"' : '' }}>
<table class="min-w-full table-auto">
<thead>
<tr>
@@ -134,7 +104,8 @@
</a>
</td>
<td class="px-4 py-2 flex justify-end gap-2">
<a href="{{ path('download_cbz', {chapterId: chapters|first.id}) }}" class="text-gray-500 hover:text-green-500">
<a href="{{ path('download_cbz', {chapterId: chapters|first.id}) }}"
class="text-gray-500 hover:text-green-500">
<i class="fas fa-download"></i>
</a>
</td>
@@ -169,7 +140,8 @@
data-url="{{ path('add_chapter', {id: chapter.id}) }}"
>
<span class="text-gray-500 hover:text-green-500">
<i data-download-chapter-target="icon" class="fas fa-search"></i>
<i data-download-chapter-target="icon"
class="fas fa-search"></i>
</span>
</button>
{% else %}
@@ -179,7 +151,8 @@
</span>
</button>
{% endif %}
<a href="{{ path('download_cbz', {chapterId: chapter.id}) }}" class="text-gray-500 hover:text-green-500">
<a href="{{ path('download_cbz', {chapterId: chapter.id}) }}"
class="text-gray-500 hover:text-green-500">
<i class="fas fa-download"></i>
</a>
</td>

2
templates/menu/menu.html.twig
View File

@@ -9,7 +9,7 @@
{% if app.request.get('_route') starts with 'app_manga' %}
<ul class="ml-8 mt-2 space-y-4">
<li><a href="{{ path('app_manga_new') }}" class="hover:text-green-600">Ajouter un nouveau</a></li>
<li><a href="{{ path('app_import') }}" class="hover:text-green-600">Import bibliothèque</a></li>
<li><a href="{{ path('app_manga_import') }}" class="hover:text-green-600">Import bibliothèque</a></li>
<li><a href="#" class="hover:text-green-600">Découvrir</a></li>
</ul>
{% endif %}