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

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

@@ -5,7 +5,7 @@
{% endif %}
{% endblock %}
{% block body %}
<div class="container mx-auto mt-2">
<div class="container mx-auto">
<div class="bg-white overflow-hidden">
<div class="overflow-x-auto">
<table class="min-w-full bg-white">

18
templates/base.html.twig
View File

@@ -15,7 +15,7 @@
<body class="bg-gray-50 h-full overflow-hidden" data-controller="menu">
<div data-controller="mercure" data-mercure-topic="notification"></div>
<div data-controller="alert" class="fixed right-0 z-50 flex justify-center w-full">
<div data-controller="alert" class="fixed right-0 z-[60] flex justify-center w-full">
<div data-alert-target="alert" style="display: none;"
class="mt-8 max-w-fit p-4 rounded-lg shadow-lg text-white border-2 border-gray-200 transition-opacity duration-1000 ease-out">
<i data-alert-target="icon" class="fa text-xl mr-2"></i>
@@ -24,11 +24,8 @@
</div>
<!-- Header -->
<header class="bg-green-600 h-16 flex items-center fixed w-full z-30">
<button data-action="click->menu#toggleMenu" class="text-white p-2 md:hidden">
<i class="fas fa-bars"></i>
</button>
<div class="flex justify-center ml-10">
<header class="bg-green-600 h-16 flex items-center fixed w-full z-50">
<div class="flex justify-center ml-4">
<a class="flex flex-row justify-start" href="{{ path('app_manga') }}">
{# <div class="flex items-center"> #}
{# <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" #}
@@ -50,8 +47,11 @@
<img src="{{ asset('img/mangarr_logo.png') }}" alt="Mangarr" class="w-32 shadow-xl">
</a>
</div>
<div class="ml-8 w-60">
<twig:Search/>
<button data-action="click->menu#toggleMenu" class="ml-4 text-white p-2 md:hidden">
<i class="fas fa-bars"></i>
</button>
<div class="ml-4 w-60 relative">
<twig:Search/> <!-- Search component -->
</div>
</header>
@@ -59,7 +59,7 @@
<div class="flex h-full pt-16">
<!-- Sidebar -->
<nav data-menu-target="sidebar" class="w-60 bg-white h-full overflow-y-auto fixed left-0 transform -translate-x-full transition-transform duration-200 ease-in-out md:translate-x-0 z-40">
{% include 'menu/menu.html.twig' %}
{% include 'menu/menu.html.twig' %} <!-- Menu component -->
</nav>
<!-- Main content -->

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>

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

@@ -34,16 +34,18 @@
{% 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>
<a class="flex flex-row" href="{{ path('app_manga_show', {'mangaSlug': manga.slug}) }}">
<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(350) }}</p>
</div>
<p class="text-xs text-gray-400 mt-2">Added: {{ manga.createdAt|date('M d, Y') }}</p>
</div>
<p class="text-xs text-gray-400 mt-2">Added: {{ manga.createdAt|date('M d, Y') }}</p>
</div>
</a>
</div>
{% else %}
<p class="text-center text-gray-500">Aucun manga trouvé.</p>

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

@@ -62,21 +62,39 @@
<div data-controller="table" data-table-open-value="{{ is_first ? 'true' : 'false' }}">
<div class="bg-white rounded-sm shadow mb-4">
<div class="flex items-center justify-between bg-white p-4 rounded-t-sm">
<div class="flex flex-row gap-4">
<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' }}">
<div class="relative flex items-center justify-between bg-white p-4 rounded-t-sm">
<!-- Partie gauche -->
<div class="flex items-center space-x-4">
<i class="fas fa-bookmark text-gray-500 text-3xl w-8"></i>
<h2 class="text-xl font-semibold w-28">Volume {{ '%02d'|format(volume) }}</h2>
<div class="flex items-center w-16">
<span class="px-2 py-1 text-sm rounded w-full text-center
{% if available_chapters|length == 0 %}
bg-red-500 text-white
{% elseif available_chapters|length < total_chapters %}
bg-yellow-500 text-white
{% else %}
bg-green-500 text-white
{% endif %}">
{{ available_chapters|length }} / {{ total_chapters }}
</span>
</div>
</div>
<div class="flex items-center">
<span class="text-gray-600 mr-2">{{ chapters|length }} Chapters</span>
<!-- Chevron centré -->
<div class="absolute left-1/2 top-1/2 transform -translate-x-1/2 -translate-y-1/2">
<i data-table-target="toggleIcon" data-action="click->table#toggle"
class="fas fa-chevron-{{ is_first ? 'up' : 'down' }} cursor-pointer"></i>
class="bg-gray-400 rounded-full font-bold text-sm text-white p-1 hover:bg-green-500 fas fa-chevron-{{ is_first ? 'up' : 'down' }} cursor-pointer"></i>
</div>
<!-- Partie droite -->
<div class="flex space-x-2 text-xl text-bold">
<a href="#" class="w-8 text-center">
<i class="fas fa-search text-gray-500 hover:text-green-500"></i>
</a>
<a href="#" class="w-8 text-center">
<i class="fas fa-download text-gray-500 hover:text-green-500"></i>
</a>
</div>
</div>
@@ -161,9 +179,74 @@
{% endif %}
</tbody>
</table>
<div class="relative flex items-center justify-between bg-white mt-4 mb-2 rounded-t-sm">
<div
class="absolute left-1/2 top-1/2 transform -translate-x-1/2 -translate-y-1/2">
<i data-table-target="toggleIcon" data-action="click->table#toggle"
class="bg-gray-400 rounded-full font-bold text-sm text-white p-1 hover:bg-green-500 fas fa-chevron-up cursor-pointer"></i>
</div>
</div>
</div>
</div>
</div>
{% endfor %}
</div>
{# Modal d'édition #}
<twig:Modal
openTrigger="openEditModal"
closeTrigger="closeEditModal"
title="Edit Manga"
>
{% block content %}
<form id="editForm" method="post" action="">
<div class="mb-4">
<label for="title" class="block text-gray-700 text-sm font-bold mb-2">Title:</label>
<input type="text" id="title" name="title" value="{{ manga.title }}"
class="shadow appearance-none border rounded w-full py-2 px-3 text-gray-700 leading-tight focus:outline-none focus:shadow-outline">
</div>
<div class="mb-4">
<label for="description" class="block text-gray-700 text-sm font-bold mb-2">Description:</label>
<textarea id="description" name="description"
class="shadow appearance-none border rounded w-full py-2 px-3 text-gray-700 leading-tight focus:outline-none focus:shadow-outline"
rows="3">{{ manga.description }}</textarea>
</div>
{# Ajoutez d'autres champs selon vos besoins #}
</form>
{% endblock %}
{% block footer %}
<button type="submit" form="editForm"
class="w-full inline-flex justify-center rounded-md border border-transparent shadow-sm px-4 py-2 bg-blue-600 text-base font-medium text-white hover:bg-blue-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500 sm:ml-3 sm:w-auto sm:text-sm">
Save
</button>
<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>
{% endblock %}
</twig:Modal>
{# Modal de confirmation de suppression #}
<twig:Modal
openTrigger="openDeleteModal"
closeTrigger="closeDeleteModal"
title="Delete Manga"
>
<twig:block name="content">
<p class="text-sm text-gray-500">
Are you sure you want to delete this manga? This action cannot be undone.
</p>
</twig:block>
<twig:block name="footer">
<form id="deleteForm" method="post" action="">
<button type="submit"
class="w-full inline-flex justify-center rounded-md border border-transparent shadow-sm px-4 py-2 bg-red-600 text-base font-medium text-white hover:bg-red-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-red-500 sm:ml-3 sm:w-auto sm:text-sm">
Delete
</button>
</form>
<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>
</twig:block>
</twig:Modal>
{% endblock %}

10
templates/menu/base_menu.html.twig
View File

@@ -1,10 +0,0 @@
<!-- Menu latéral -->
{#<header class="fixed top-0 left-0 z-10 w-full bg-blue-600 p-4 md:hidden">#}
{# <button id="hamburger-button" class="text-white">#}
{# <i class="fas fa-bars"></i>#}
{# </button>#}
{#</header>#}
<div id="menu" class="fixed left-0 h-full w-60 bg-gray-600 text-white hidden md:block">
{{ render(controller('App\\Controller\\MenuController::menu')) }}
</div>

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

@@ -1,4 +1,4 @@
<div id="menu" class="h-full w-full bg-gray-600 text-white overflow-y-auto">
<div id="menu" class="h-full w-full bg-gray-600 text-white">
<nav>
<ul>
<li class="{{ app.request.get('_route') starts with 'app_manga' ? 'border-l-4 border-green-600' : '' }}">
@@ -8,7 +8,7 @@
</a>
{% 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_manga_search') }}" class="hover:text-green-600">Ajouter un nouveau</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>

35
templates/menu/menu_old.html.twig
View File

@@ -1,35 +0,0 @@
<div class="fixed left-0 h-screen w-60">
<h2 class="text-xl font-bold mb-4">Menu</h2>
<form>
<div class="form-group">
<label for="manga-select">Choisissez un manga :</label>
<select id="manga-select" class="form-control w-full">
<option value="" selected disabled>Sélectionnez un manga</option>
{% for manga in availableManga %}
<option value="{{ path('manga_show', { 'mangaSlug': manga.slug }) }}">{{ manga.name }}</option>
{% endfor %}
</select>
</div>
</form>
<div>
<ul>
{% for manga in mangas %}
<li class="my-2">
<a href="{{ path('manga_show', { 'mangaSlug': manga.slug }) }}" class="text-blue-600 hover:text-blue-800">
{{ manga.title }}
</a>
</li>
{% endfor %}
</ul>
</div>
</div>
{% block javascripts %}
<script>
const mangaSelect = document.getElementById('manga-select');
mangaSelect.addEventListener('change', () => {
const selectedUrl = mangaSelect.options[mangaSelect.selectedIndex].value;
window.open(selectedUrl, '_top');
});
</script>
{% endblock %}