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

Added:

Browse Source 
- new simpler modal without bootstrap
- new loadingbutton component
- cleanupsome old code
- toolbar adjusments
This commit is contained in:
Jérémy Guillot
2024-06-30 12:44:41 +02:00
parent b4f0811bca
commit ba30d3102d
23 changed files with 403 additions and 302 deletions
Download Patch File Download Diff File Expand all files Collapse all files

34
templates/components/BootstrapModal.html.twig
View File

@@ -1,34 +0,0 @@
<div {{ attributes.defaults({
class: 'modal fade',
tabindex: '-1',
'aria-hidden': 'true',
id: id ? id : false,
}) }}
data-controller="bootstrap-modal"
data-bs-backdrop="false"
>
<div class="fixed top-0 left-0 w-full h-full outline-none" tabindex="-1" role="dialog">
<div class="modal-dialog mt-44 relative w-auto pointer-events-none max-w-lg my-8 mx-auto px-4 sm:px-0"
role="document">
<div class="relative flex flex-col w-full pointer-events-auto bg-white border border-gray-300 rounded-sm">
<div class="flex items-start justify-between p-4 border-b border-gray-300 rounded-t">
<div class="modal-header w-full">
{% block modal_header %}{% endblock %}
</div>
</div>
<div class="relative flex p-4">
<div class="modal-body">
{% block modal_body %}{% endblock %}
</div>
</div>
<div class="flex items-center justify-end p-4 border-t border-gray-300">
{% if block('modal_footer') %}
<div class="modal-footer">
{% block modal_footer %}{% endblock %}
</div>
{% endif %}
</div>
</div>
</div>
</div>
</div>

1
templates/components/DropdownMenu.html.twig
View File

@@ -6,6 +6,7 @@
text="{{ text }}"
action="toggle"
data-dropdown-target="button"
controller="dropdown"
/>
<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">

17
templates/components/LoadingButton.html.twig Normal file
View File

@@ -0,0 +1,17 @@
{# templates/components/LoadingButton.html.twig #}
<button {{ attributes }}
{% if type is defined %}type="{{ type }}"{% endif %}
{% if form is defined %}form="{{ form }}" data-loading-button-form-value="{{ form }}"{% endif %}
data-controller="loading-button"
data-action="click->loading-button#startLoading"
class="bg-{{ color|default('green') }}-500 hover:bg-{{ color|default('green') }}-600 text-sm text-white font-bold py-2 px-4 rounded flex items-center justify-center"
>
<span data-loading-button-target="text">{{ text }}</span>
<span data-loading-button-target="loader" class="hidden">
<svg class="animate-spin h-5 w-5 text-white" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24">
<circle class="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" stroke-width="4"></circle>
<path class="opacity-75" fill="currentColor"
d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"></path>
</svg>
</span>
</button>

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

@@ -22,43 +22,92 @@
{% if this.mangas %}
<div data-loading="addClass(opacity-50)" class="mt-3">
{% for manga in this.mangas %}
<div class="flex w-full bg-white shadow-lg mb-8 hover:bg-green-50" data-bs-toggle="modal"
data-bs-target="#mangaModal{{ loop.index }}-{{ manga.slug }}">
<a href="#" class="flex-none w-48 relative">
<img src="{{ manga.imageUrl ?? 'https://placehold.co/150x220' }}" alt="{{ manga.title }}"
class="w-full h-full -z-10 object-cover" style="width: 150px; height: 220px;">
</a>
<div class="w-full p-4 flex flex-col justify-between leading-normal">
<div class="mb-2">
<div class="flex w-full text-xl font-bold text-gray-900 mb-4 items-center justify-between">
<div class="flex items-center">
<span>{{ manga.title }}</span>
<span class="text-2xl text-gray-500 ml-2">({{ manga.publicationYear }})</span>
<div {{ stimulus_controller('addmanga', { 'index': loop.index })}}>
<div class="flex w-full bg-white shadow-lg mb-8 hover:bg-green-50"
data-action="click->addmanga#openModal">
<a href="#" class="flex-none w-48 relative">
<img src="{{ manga.imageUrl ?? 'https://placehold.co/150x220' }}" alt="{{ manga.title }}"
class="w-full h-full -z-10 object-cover" style="width: 150px; height: 220px;">
</a>
<div class="w-full p-4 flex flex-col justify-between leading-normal">
<div class="mb-2">
<div
class="flex w-full text-xl font-bold text-gray-900 mb-4 items-center justify-between">
<div class="flex items-center">
<span>{{ manga.title }}</span>
<span class="text-2xl text-gray-500 ml-2">({{ manga.publicationYear }})</span>
</div>
<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>
</div>
<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>
</div>
{% for genre in manga.genres %}
<span
class="bg-gray-200 text-gray-800 text-xs font-semibold mr-2 px-2.5 py-0.5 rounded">
{% for genre in manga.genres %}
<span
class="bg-gray-200 text-gray-800 text-xs font-semibold mr-2 px-2.5 py-0.5 rounded">
{{ genre }}
</span>
{% endfor %}
</div>
<div class="mb-2">
<p class="text-gray-700 text-sm">{{ manga.description|truncate(250) }}</p>
</div>
<div class="flex items-center">
{% endfor %}
</div>
<div class="mb-2">
<p class="text-gray-700 text-sm">{{ manga.description|truncate(250) }}</p>
</div>
<div class="flex items-center">
<span class="text-gray-600 text-sm mr-2">
<i class="fas fa-star text-yellow-500"></i>
{{ manga.rating }}
</span>
</div>
</div>
</div>
<twig:Modal
openTrigger="openAddMangaModal{{ loop.index }}"
closeTrigger="closeAddMangaModal{{ loop.index }}"
title="Add Manga"
modalId="manga-modal-{{ loop.index }}"
>
{% block content %}
<form id="manga-{{ loop.index }}" action="{{ path('app_manga_add') }}" method="POST">
<input type="hidden" name="title" value="{{ manga.title }}">
<input type="hidden" name="slug" value="{{ manga.slug }}">
<input type="hidden" name="description" value="{{ manga.description }}">
<input type="hidden" name="imageUrl" value="{{ manga.imageUrl }}">
<input type="hidden" name="status" value="{{ manga.status }}">
<input type="hidden" name="genres" value="{{ manga.genres|join(',') }}">
<input type="hidden" name="author" value="{{ manga.author }}">
<input type="hidden" name="publicationYear" value="{{ manga.publicationYear }}">
<input type="hidden" name="rating" value="{{ manga.rating }}">
<input type="hidden" name="externalId" value="{{ manga.externalId }}">
<div class="flex justify-between">
<img src="{{ manga.imageUrl ?? 'https://placehold.co/150x220' }}"
alt="{{ manga.title }}"
class="img-fluid mb-2"
style="width: 150px; height: 220px;"
>
<div class="ml-4">
<p>{{ manga.description|truncate(250) }}</p>
<p><strong>Année de publication:</strong> {{ manga.publicationYear }}</p>
<p><strong>Genres:</strong> {{ manga.genres|join(', ') }}</p>
<p><strong>Note:</strong> {{ manga.rating }}</p>
</div>
</div>
</form>
{% endblock %}
{% block footer %}
<button type="button" data-action="modal#close" class="mt-3 w-full inline-flex justify-center rounded-md border border-gray-300 shadow-sm px-4 py-2 bg-white text-base font-medium text-gray-700 hover:bg-gray-50 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500 sm:mt-0 sm:ml-3 sm:w-auto sm:text-sm">
Cancel
</button>
{{ component('LoadingButton', {
text: 'Add ' ~ manga.title,
type: 'submit',
form: 'manga-' ~ loop.index,
color: 'green'
}) }}
{% endblock %}
</twig:Modal>
</div>
{{ component('NewMangaForm', {manga: manga, index: loop.index}) }}
{% endfor %}
</div>
{% endif %}

33
templates/components/Modal.html.twig Normal file
View File

@@ -0,0 +1,33 @@
{# templates/components/Modal.html.twig #}
<div
{{ attributes }}
data-controller="modal"
data-modal-open-trigger-value="{{ openTrigger }}"
data-modal-close-trigger-value="{{ closeTrigger }}"
{% if modalId is defined %}id="{{ modalId }}"{% endif %}
>
<div data-modal-target="modal" class="fixed inset-0 z-50 overflow-y-auto hidden" aria-labelledby="modal-title" role="dialog" aria-modal="true">
<div class="flex items-end justify-center min-h-screen pt-4 px-4 pb-20 text-center sm:block sm:p-0">
{# Backdrop #}
<div data-action="click->modal#close" class="fixed inset-0 bg-gray-500 bg-opacity-75 transition-opacity" aria-hidden="true"></div>
{# Centrage vertical trick #}
<span class="hidden sm:inline-block sm:align-middle sm:h-screen" aria-hidden="true">&#8203;</span>
{# Modal panel #}
<div class="inline-block align-bottom bg-white rounded-sm text-left overflow-hidden shadow-xl transform transition-all sm:my-8 sm:align-middle sm:max-w-lg sm:w-full">
<div class="bg-white px-4 pt-5 pb-4 sm:p-6 sm:pb-4">
<h3 class="text-lg leading-6 font-medium text-gray-900" id="modal-title">
{{ title }}
</h3>
<div class="mt-2">
{{ block('content') }}
</div>
</div>
<div class="bg-gray-50 px-4 py-3 sm:px-6 sm:flex sm:flex-row-reverse">
{{ block('footer') }}
</div>
</div>
</div>
</div>
</div>

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

@@ -1,3 +1,4 @@
{# templates/components/Search.html.twig #}
<div{{ attributes }}>
<div class="flex items-center py">
<i class="fas fa-search text-white"></i>
@@ -10,7 +11,7 @@
</div>
{% if query %}
<div id="searchResults" class="fixed min-w-60 ml-8 mt-2 rounded-sm shadow-lg max-h-60 overflow-y-auto">
<div id="searchResults" class="absolute left-0 right-0 min-w-60 ml-8 mt-2 rounded-sm shadow-lg max-h-60 overflow-y-auto z-50">
<ul class="bg-gray-700 text-white">
{% if this.mangas is not empty %}
<li class="px-4 py-2 text-gray-400">Mangas existants</li>
@@ -26,7 +27,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('app_manga_new', {query: query}) }}">
<a class="flex items-center" href="{{ path('app_manga_search', {query: query}) }}">
<span>Ajouter {{ query }}</span>
</a>
</li>

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

@@ -3,7 +3,7 @@
<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) }}
{{ stimulus_action(controller|default('toolbar'), action) }}
{% endif %}
>
<i class="fas fa-{{ icon }} text-xl group-hover:text-green-500"></i>