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

- début refonte graphique

Browse Source 
- début MangaDbProvider
This commit is contained in:
Jérémy Guillot
2024-06-05 00:05:28 +02:00
parent 2f9ff7facb
commit 9595831aa3
23 changed files with 607 additions and 515 deletions
Download Patch File Download Diff File Expand all files Collapse all files

58
templates/base.html.twig
View File

@@ -1,59 +1,31 @@
<!DOCTYPE html>
<html>
<html lang="">
<head>
<meta charset="UTF-8">
<title>{% block title %}Welcome!{% endblock %}</title>
<title>{% block title %}Mangarr{% endblock %}</title>
<link rel="icon"
href="data:image/svg+xml,<svg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 128 128%22><text y=%221.2em%22 font-size=%2296%22>⚫️</text></svg>">
{% block stylesheets %}
{{ encore_entry_link_tags('app') }}
{{ encore_entry_link_tags('app') }}
{{ encore_entry_link_tags('app') }}
{% endblock %}
</head>
<body>
<body class="h-screen">
<div class="w-full bg-green-600 h-16">
<div class="fixed w-full bg-green-600 h-16">
<a href="{{ path('app_manga') }}">
<span class="">Mangarr</span>
</a>
</div>
<div class="max-w-7xl flex">
<div x-data="{ activeItem: { main: null, sub: null } }" class="block w-1/5 bg-gray-700 w-56 flex flex-col justify-center pl-8">
<div class="py-4">
<button @click="activeItem.main = activeItem.main === 'mangas' ? null : 'mangas'" class="w-full text-left">
<span :class="{'text-green-600 bg-gray-800': activeItem.main === 'mangas'}">Mangas</span>
</button>
<div x-show="activeItem.main === 'mangas'" class="pl-6">
<button @click="activeItem.sub = 'add-new'" class="py-4 block w-full text-left hover:text-green-600">
<span :class="{'text-green-600': activeItem.sub === 'add-new'}">Add New</span>
</button>
<button @click="activeItem.sub = 'import'" class="py-4 block w-full text-left hover:text-green-600">
<span :class="{'text-green-600': activeItem.sub === 'import'}">Import</span>
</button>
</div>
</div>
<button @click="activeItem.main = 'calendar'" class="pb-4 block w-full text-left hover:text-green-600">
<span :class="{'text-green-600': activeItem.main === 'calendar'}">Calendar</span>
</button>
<button @click="activeItem.main = 'settings'" class="pb-4 block w-full text-left hover:text-green-600">
<span :class="{'text-green-600': activeItem.main === 'settings'}">Settings</span>
</button>
</div>
{# {% include 'menu/base_menu.html.twig' %} #}
<main class="mx-auto flex">
<div class="p-4">
{% block body %}
{# {{ wo_render_breadcrumbs() }}#}
{% endblock %}
</div>
</main>
<div class="w-screen pt-16 flex bg-white">
{% include 'menu/menu.html.twig' %}
{% block body %}{% endblock %}
</div>
{% block javascripts %}
{{ encore_entry_script_tags('app') }}
<script src="https://kit.fontawesome.com/42e345444d.js" crossorigin="anonymous"></script>
<script defer src="https://cdn.jsdelivr.net/npm/alpinejs@3.13.3/dist/cdn.min.js"></script>
{{ encore_entry_script_tags('app') }}
{{ encore_entry_script_tags('app') }}
{{ encore_entry_script_tags('app') }}
{% endblock %}
<script src="https://kit.fontawesome.com/42e345444d.js" crossorigin="anonymous"></script>
</body>
</html>

80
templates/manga/add_new.html.twig Normal file
View File

@@ -0,0 +1,80 @@
{% extends 'base.html.twig' %}
{% block body %}
<div class="container w-full ml-60 p-4">
<form>
<div class="form-group">
<div class="relative h-10 w-72 min-w-[200px]">
<label for="manga-select"></label>
<select id="manga-select"
class="peer h-full w-full rounded-[7px] border border-blue-gray-200 border-t-transparent
bg-transparent px-3 py-2.5 font-sans text-sm font-normal text-blue-gray-700 outline
outline-0 transition-all placeholder-shown:border placeholder-shown:border-blue-gray-200
placeholder-shown:border-t-blue-gray-200 empty:!bg-gray-900 focus:border-2
focus:border-gray-900 focus:border-t-transparent focus:outline-0 disabled:border-0
disabled:bg-blue-gray-50">
{% for manga in availableManga %}
<option
value="{{ path('manga_show', { 'mangaSlug': manga.slug }) }}">{{ manga.name }}</option>
{% endfor %}
</select>
<label
class="before:content[' '] after:content[' '] pointer-events-none absolute left-0 -top-1.5 flex
h-full w-full select-none text-[11px] font-normal leading-tight text-blue-gray-400
transition-all before:pointer-events-none before:mt-[6.5px] before:mr-1 before:box-border
before:block before:h-1.5 before:w-2.5 before:rounded-tl-md before:border-t before:border-l
before:border-blue-gray-200 before:transition-all after:pointer-events-none after:mt-[6.5px]
after:ml-1 after:box-border after:block after:h-1.5 after:w-2.5 after:flex-grow
after:rounded-tr-md after:border-t after:border-r after:border-blue-gray-200
after:transition-all peer-placeholder-shown:text-sm peer-placeholder-shown:leading-[3.75]
peer-placeholder-shown:text-blue-gray-500 peer-placeholder-shown:before:border-transparent
peer-placeholder-shown:after:border-transparent peer-focus:text-[11px] peer-focus:leading-tight
peer-focus:text-gray-900 peer-focus:before:border-t-2 peer-focus:before:border-l-2
peer-focus:before:border-gray-900 peer-focus:after:border-t-2 peer-focus:after:border-r-2
peer-focus:after:border-gray-900 peer-disabled:text-transparent
peer-disabled:before:border-transparent peer-disabled:after:border-transparent
peer-disabled:peer-placeholder-shown:text-blue-gray-500">
Select a Manga
</label>
</div>
</div>
</form>
</div>
<div class="container w-full p-4">
<form>
<div class="relative w-full min-w-[200px] h-10">
<input
class="peer w-full h-full bg-transparent text-blue-gray-700 font-sans font-normal outline outline-0
focus:outline-0 disabled:bg-blue-gray-50 disabled:border-0 transition-all placeholder-shown:border
placeholder-shown:border-blue-gray-200 placeholder-shown:border-t-blue-gray-200 border focus:border-2
border-t-transparent focus:border-t-transparent text-sm px-3 py-2.5 rounded-[7px] border-blue-gray-200
focus:border-gray-900" placeholder=" "/>
<label class="flex w-full h-full select-none pointer-events-none absolute left-0 font-normal
!overflow-visible truncate peer-placeholder-shown:text-blue-gray-500 leading-tight
peer-focus:leading-tight peer-disabled:text-transparent peer-disabled:peer-placeholder-shown:text-blue-gray-500
transition-all -top-1.5 peer-placeholder-shown:text-sm text-[11px] peer-focus:text-[11px]
before:content[' '] before:block before:box-border before:w-2.5 before:h-1.5
before:mt-[6.5px] before:mr-1 peer-placeholder-shown:before:border-transparent before:rounded-tl-md
before:border-t peer-focus:before:border-t-2 before:border-l peer-focus:before:border-l-2
before:pointer-events-none before:transition-all peer-disabled:before:border-transparent after:content[' ']
after:block after:flex-grow after:box-border after:w-2.5 after:h-1.5 after:mt-[6.5px] after:ml-1
peer-placeholder-shown:after:border-transparent after:rounded-tr-md after:border-t peer-focus:after:border-t-2
after:border-r peer-focus:after:border-r-2 after:pointer-events-none after:transition-all peer-disabled:after:border-transparent
peer-placeholder-shown:leading-[3.75] text-gray-500 peer-focus:text-gray-900 before:border-blue-gray-200
peer-focus:before:!border-gray-900 after:border-blue-gray-200 peer-focus:after:!border-gray-900">
Manga
</label>
</div>
</form>
</div>
{% endblock %}
{% 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 %}

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

@@ -1,19 +1,20 @@
{% extends 'base.html.twig' %}
{% block title %}Liste des mangas{% endblock %}
{% block body %}
<h1>Liste des mangas</h1>
<ul>
<div class="container w-full ml-60 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 %}
<li>
<div class="bg-white overflow-hidden border-gray-300 hover:shadow-2xl hover:border transition-shadow duration-300">
<a href="{{ path('manga_show', { 'mangaSlug': manga.slug }) }}">
{{ manga.title }}
<img src="{{ manga.imageUrl ?? 'https://placehold.co/150x220' }}" alt="{{ manga.title }}" class="w-full">
{# <img src="https://placehold.co/150x220" alt="{{ manga.title }}" class="w-full">#}
</a>
</li>
<div class="p-4">
<p class="text-lg font-semibold">{{ manga.title }}</p>
<p class="text-gray-600">Auteur</p>
<p class="text-gray-500">Ajouter: Jun 2 2024</p>
</div>
</div>
{% else %}
<li>Aucun manga trouvé.</li>
<p class="col-span-full text-center text-gray-500">Aucun manga trouvé.</p>
{% endfor %}
</ul>
</div>
{% endblock %}

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

@@ -3,33 +3,40 @@
{% block title %}{{ manga.title }} - Chapitre {{ chapter.number }}{% endblock %}
{% block body %}
<h1 class="text-center text-3xl my-4">{{ manga.title }} - Chapitre {{ chapter.number }}</h1>
<div class="container w-full ml-60 p-4">
<h1 class="text-center text-3xl my-4">{{ manga.title }} - Chapitre {{ chapter.number }}</h1>
<div class="flex justify-center my-4">
{% if currentPage.number > 1 %}
<a href="{{ path('read_chapter_page', { 'mangaSlug': manga.slug, 'chapterNumber': chapter.number, 'pageNumber': currentPage.number - 1 }) }}" class="bg-blue-500 text-white px-4 py-2 rounded hover:bg-blue-600 mr-4">&laquo; Précédent</a>
{% endif %}
{% if currentPage.number < pages|length %}
<a href="{{ path('read_chapter_page', { 'mangaSlug': manga.slug, 'chapterNumber': chapter.number, 'pageNumber': currentPage.number + 1 }) }}" class="bg-blue-500 text-white px-4 py-2 rounded hover:bg-blue-600">Suivant &raquo;</a>
{% endif %}
</div>
<div class="flex justify-center my-4">
{% if currentPage.number > 1 %}
<a href="{{ path('read_chapter_page', { 'mangaSlug': manga.slug, 'chapterNumber': chapter.number, 'pageNumber': currentPage.number - 1 }) }}"
class="bg-blue-500 text-white px-4 py-2 rounded hover:bg-blue-600 mr-4">&laquo; Précédent</a>
{% endif %}
{% if currentPage.number < pages|length %}
<a href="{{ path('read_chapter_page', { 'mangaSlug': manga.slug, 'chapterNumber': chapter.number, 'pageNumber': currentPage.number + 1 }) }}"
class="bg-blue-500 text-white px-4 py-2 rounded hover:bg-blue-600">Suivant &raquo;</a>
{% endif %}
</div>
<div class="page-container flex justify-center">
{% if currentPage.number < pages|length %}
<a href="{{ path('read_chapter_page', {'mangaSlug': manga.slug, 'chapterNumber': chapter.number, 'pageNumber': currentPage.number + 1}) }}">
<div class="page-container flex justify-center">
{% if currentPage.number < pages|length %}
<a href="{{ path('read_chapter_page', {'mangaSlug': manga.slug, 'chapterNumber': chapter.number, 'pageNumber': currentPage.number + 1}) }}">
<img src="{{ asset(currentPage.imageLocalUrl) }}" alt="Page {{ currentPage.number }}"
class="shadow-lg">
</a>
{% else %}
<img src="{{ asset(currentPage.imageLocalUrl) }}" alt="Page {{ currentPage.number }}" class="shadow-lg">
</a>
{% else %}
<img src="{{ asset(currentPage.imageLocalUrl) }}" alt="Page {{ currentPage.number }}" class="shadow-lg">
{% endif %}
</div>
{% endif %}
</div>
<div class="flex justify-center my-4">
{% if currentPage.number > 1 %}
<a href="{{ path('read_chapter_page', { 'mangaSlug': manga.slug, 'chapterNumber': chapter.number, 'pageNumber': currentPage.number - 1 }) }}" class="bg-blue-500 text-white px-4 py-2 rounded hover:bg-blue-600 mr-4">&laquo; Précédent</a>
{% endif %}
{% if currentPage.number < pages|length %}
<a href="{{ path('read_chapter_page', { 'mangaSlug': manga.slug, 'chapterNumber': chapter.number, 'pageNumber': currentPage.number + 1 }) }}" class="bg-blue-500 text-white px-4 py-2 rounded hover:bg-blue-600">Suivant &raquo;</a>
{% endif %}
<div class="flex justify-center my-4">
{% if currentPage.number > 1 %}
<a href="{{ path('read_chapter_page', { 'mangaSlug': manga.slug, 'chapterNumber': chapter.number, 'pageNumber': currentPage.number - 1 }) }}"
class="bg-blue-500 text-white px-4 py-2 rounded hover:bg-blue-600 mr-4">&laquo; Précédent</a>
{% endif %}
{% if currentPage.number < pages|length %}
<a href="{{ path('read_chapter_page', { 'mangaSlug': manga.slug, 'chapterNumber': chapter.number, 'pageNumber': currentPage.number + 1 }) }}"
class="bg-blue-500 text-white px-4 py-2 rounded hover:bg-blue-600">Suivant &raquo;</a>
{% endif %}
</div>
</div>
{% endblock %}
{% endblock %}

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

@@ -1,9 +1,6 @@
{% extends 'base.html.twig' %}
{% block title %}Chapitres de {{ manga.title }}{% endblock %}
{% block body %}
<div class="container mx-auto px-4">
<div class="container w-full ml-60 p-4">
<h1 class="text-4xl font-bold mb-8">Chapitres de {{ manga.title }}</h1>
<ul class="list-disc pl-5">
@@ -64,4 +61,4 @@
});
</script>
{% endblock %}
{% endblock %}
{% endblock %}

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

@@ -1,10 +1,10 @@
<!-- 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>
{#<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>#}
<aside id="menu" class="fixed top-0 left-0 z-10 h-full w-64 bg-gray-800 text-white p-4 hidden md:block">
<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')) }}
</aside>
</div>

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

@@ -1,35 +1,32 @@
<div class="fixed top-0 left-0 h-screen w-64 bg-gray-100 p-6">
<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>
<div id="menu" class="fixed left-0 h-full w-60 bg-gray-600 text-white hidden md:block">
<aside class="h-full">
<nav>
<ul>
<li class="mb-4 border-l-4 border-green-600">
<div class="flex pl-8 p-4 items-center text-green-600 bg-gray-800">
<i class="fas fa-book mr-2"></i>
<span>Mangas</span>
</div>
<ul class="ml-14 mt-2 space-y-4">
<li><a href="{{ path('add_new_manga') }}" class="hover:text-green-600">Ajouter un nouveau</a></li>
<li><a href="#" class="hover:text-green-600">Import bibliothèque</a></li>
<li><a href="#" class="hover:text-green-600">Collections</a></li>
<li><a href="#" class="hover:text-green-600">Découvrir</a></li>
</ul>
</li>
{% endfor %}
</ul>
</div>
<li class="mb-4 pl-8 flex items-center hover:text-green-600">
<i class="fas fa-calendar-alt mr-2"></i>
<span>Calendrier</span>
</li>
<li class="mb-4 pl-8 flex items-center hover:text-green-600">
<i class="fas fa-cog mr-2"></i>
<span>Paramètres</span>
</li>
<li class="mb-4 pl-8 flex items-center hover:text-green-600">
<i class="fas fa-desktop mr-2"></i>
<span>Système</span>
</li>
</ul>
</nav>
</aside>
</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 %}

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

@@ -0,0 +1,35 @@
<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 %}