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

Added:

Browse Source 
- toolbar and fixes
This commit is contained in:
Jérémy Guillot
2024-06-29 14:51:10 +02:00
parent b04055ec22
commit 858a5bed06
20 changed files with 404 additions and 68 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -1,19 +1,41 @@
{% extends 'base.html.twig' %}
{% block toolbar %}
<div class="bg-gray-800 p-3 min-h-14">
<div class="flex flex-row items-center justify-between">
<div class="flex mr-2 items-center">
<twig:ToolBarButton icon="sync-alt" text="Tout actualiser"/>
<twig:ToolBarButton icon="search" text="Rechercher le manga"/>
<div class="min-h-14 mx-4 border-r opacity-50 border-green-500"></div>
<twig:ToolBarButton icon="sitemap" text="Aperçu renommage"/>
<twig:ToolBarButton icon="user-plus" text="Importation manuelle"/>
<div class="min-h-14 mx-4 border-r opacity-50 border-green-500"></div>
<twig:ToolBarButton icon="wrench" text="Éditer"/>
<twig:ToolBarButton icon="trash-can" text="Supprimer"/>
</div>
</div>
</div>
{% 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"
/>
{% endblock %}
{% block body %}
<div class="container mx-auto mt-2">

2
templates/components/Divider.html.twig Normal file
View File

@@ -0,0 +1,2 @@
{# templates/components/Divider.html.twig #}
<div class="min-h-14 mx-4 border-r opacity-50 border-green-500"></div>

29
templates/components/DropdownMenu.html.twig Normal file
View File

@@ -0,0 +1,29 @@
{# templates/components/DropdownMenu.html.twig #}
<div {{ attributes }} >
<div data-controller="dropdown" class="relative inline-block">
<twig:ToolBarButton
icon="{{ icon }}"
text="{{ text }}"
action="toggle"
data-dropdown-target="button"
/>
<div class="absolute left-0 mt-2 w-max z-10 bg-gray-800 rounded-sm shadow-lg hidden"
data-dropdown-target="menu" data-controller="toolbar">
<div class="py-1">
{% for item in items %}
<a href="#"
class="block px-4 py-2 text-sm text-white hover:text-green-500"
data-action="toolbar#{{ item.action }}"
{% if item.data is defined %}
{% for key, value in item.data %}
data-{{ key }}="{{ value }}"
{% endfor %}
{% endif %}
>
{{ item.text }}
</a>
{% endfor %}
</div>
</div>
</div>
</div>

2
templates/components/MangaSearch.html.twig
View File

@@ -35,7 +35,7 @@
<span>{{ manga.title }}</span>
<span class="text-2xl text-gray-500 ml-2">({{ manga.publicationYear }})</span>
</div>
<a href="{{ path('manga_show', { 'mangaSlug': manga.slug }) }}"
<a href="{{ path('app_manga_show', { 'mangaSlug': manga.slug }) }}"
class="text-gray-400 hover:text-gray-500">
<i class="fas fa-external-link-alt"></i>
</a>

4
templates/components/Search.html.twig
View File

@@ -16,7 +16,7 @@
<li class="px-4 py-2 text-gray-400">Mangas existants</li>
{% for manga in this.mangas %}
<li class="px-4 py-2 hover:bg-gray-600 cursor-pointer">
<a class="flex items-center" href="{{ path('manga_show', { 'mangaSlug': manga.slug }) }}">
<a class="flex items-center" href="{{ path('app_manga_show', { 'mangaSlug': manga.slug }) }}">
<img src="{{ manga.imageUrl ?? 'https://placehold.co/40x60' }}" alt="{{ manga.title }}"
class="w-10 h-15 object-cover mr-4">
<span>{{ manga.title }} ({{ manga.publicationYear }})</span>
@@ -26,7 +26,7 @@
{% else %}
<li class="px-4 py-2 text-gray-400">Aucun manga trouvé.</li>
<li class="px-4 py-2 hover:bg-gray-600 cursor-pointer">
<a class="flex items-center" href="{{ path('add_new_manga', {query: query}) }}">
<a class="flex items-center" href="{{ path('app_manga_new', {query: query}) }}">
<span>Ajouter {{ query }}</span>
</a>
</li>

10
templates/components/ToolBarButton.html.twig
View File

@@ -1,5 +1,11 @@
<div{{ attributes }}>
<button class="flex flex-col justify-around min-h-14 w-min ml-4 items-center text-white group">
{# templates/components/ToolbarButton.html.twig #}
<div {{ attributes }}>
<button
class="flex flex-col justify-around min-h-14 w-min ml-4 items-center text-white group"
{% if action %}
{{ stimulus_action('dropdown', action) }}
{% endif %}
>
<i class="fas fa-{{ icon }} text-xl group-hover:text-green-500"></i>
<span class="text-xs">{{ text }}</span>
</button>

11
templates/components/Toolbar.html.twig Normal file
View File

@@ -0,0 +1,11 @@
{# templates/components/Toolbar.html.twig #}
<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 }}
</div>
<div class="flex mr-2 items-center">
{{ right_group|raw }}
</div>
</div>
</div>

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

@@ -1,31 +1,49 @@
{% extends 'base.html.twig' %}
{% block toolbar %}
<div class="bg-gray-800 p-3 min-h-14">
<div class="flex flex-row items-center justify-between">
<div class="flex mr-2 items-center">
<twig:ToolBarButton icon="sync-alt" text="Tout actualiser"/>
<twig:ToolBarButton icon="rss" text="Synchro RSS"/>
<div class="min-h-14 mx-4 border-r opacity-50 border-green-500"></div>
<twig:ToolBarButton icon="search" text="Rechercher tout"/>
<twig:ToolBarButton icon="user-plus" text="Importation manuelle"/>
<div class="min-h-14 mx-4 border-r opacity-50 border-green-500"></div>
<twig:ToolBarButton icon="wrench" text="Modifier Mangas"/>
</div>
<div class="flex mr-2 items-center">
<twig:ToolBarButton icon="th-large" text="Options"/>
<div class="min-h-14 mx-4 border-r opacity-50 border-green-500"></div>
<twig:ToolBarButton icon="eye" text="Vue"/>
<twig:ToolBarButton icon="sort" text="Trier"/>
<twig:ToolBarButton icon="filter" text="Filtre"/>
</div>
</div>
</div>
{% 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"
/>
{% 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">
<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>

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

@@ -1,19 +1,41 @@
{% extends 'base.html.twig' %}
{% block toolbar %}
<div class="bg-gray-800 p-3 min-h-14">
<div class="flex flex-row items-center justify-between">
<div class="flex mr-2 items-center">
<twig:ToolBarButton icon="sync-alt" text="Tout actualiser"/>
<twig:ToolBarButton icon="search" text="Rechercher le manga"/>
<div class="min-h-14 mx-4 border-r opacity-50 border-green-500"></div>
<twig:ToolBarButton icon="sitemap" text="Aperçu renommage"/>
<twig:ToolBarButton icon="user-plus" text="Importation manuelle"/>
<div class="min-h-14 mx-4 border-r opacity-50 border-green-500"></div>
<twig:ToolBarButton icon="wrench" text="Éditer"/>
<twig:ToolBarButton icon="trash-can" text="Supprimer"/>
</div>
</div>
</div>
{% 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"
/>
{% endblock %}
{% block body %}
<div class="relative">