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

Added:

Browse Source 
- only body block is scrollable
This commit is contained in:
Jérémy Guillot
2024-06-26 17:29:14 +02:00
parent 8ad03f2657
commit d52b724df5
2 changed files with 89 additions and 86 deletions
Download Patch File Download Diff File Expand all files Collapse all files

39
templates/base.html.twig
View File

@@ -1,5 +1,5 @@
<!DOCTYPE html> <!DOCTYPE html>
<html lang=""> <html lang="" class="h-full">
<head> <head>
<meta charset="UTF-8"> <meta charset="UTF-8">
<title>{% block title %}Mangarr{% endblock %}</title> <title>{% block title %}Mangarr{% endblock %}</title>
@@ -12,10 +12,9 @@
{{ encore_entry_script_tags('app') }} {{ encore_entry_script_tags('app') }}
{% endblock %} {% endblock %}
</head> </head>
<body class="bg-gray-50 h-screen overflow-hidden"> <body class="bg-gray-50 h-full overflow-hidden">
<div data-controller="mercure" <div data-controller="mercure" data-mercure-topic="notification"></div>
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-50 flex justify-center w-full">
<div data-alert-target="alert" style="display: none;" <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"> 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">
@@ -23,8 +22,9 @@
<span data-alert-target="message"></span> <span data-alert-target="message"></span>
</div> </div>
</div> </div>
<div class="h-full">
<div class="fixed flex flex-row justify-start items-center w-full z-10 bg-green-600 h-16 z-30"> <!-- Header -->
<header class="bg-green-600 h-16 flex items-center fixed w-full z-30">
<div class="flex justify-center ml-10"> <div class="flex justify-center ml-10">
<a class="flex flex-row justify-start" href="{{ path('app_manga') }}"> <a class="flex flex-row justify-start" href="{{ path('app_manga') }}">
{# <div class="flex items-center"> #} {# <div class="flex items-center"> #}
@@ -50,22 +50,29 @@
<div class="ml-8 w-60"> <div class="ml-8 w-60">
<twig:Search/> <twig:Search/>
</div> </div>
</div> </header>
{# <div class="pt-16 flex bg-white"> #}
<div class="fixed left-0 h-full mt-16"> <!-- Main content area -->
<div class="flex h-full pt-16">
<!-- Sidebar -->
<nav class="w-60 bg-white h-full overflow-y-auto fixed left-0">
{% include 'menu/menu.html.twig' %} {% include 'menu/menu.html.twig' %}
</div> </nav>
<div class="flex flex-col ml-60 overflow-y-auto h-full">
<div class="fixed w-full overflow-hidden top-16 z-20"> <!-- Main content -->
<main class="flex-1 flex flex-col overflow-hidden ml-60 w-full">
<!-- Toolbar -->
<div class="bg-white shadow z-20 w-full">
{% block toolbar %} {% block toolbar %}
{% endblock %} {% endblock %}
</div> </div>
<div class="z-10 bg-gray-50 mt-36">
<!-- Scrollable content -->
<div class="flex-1 overflow-y-auto bg-gray-50 w-full">
{% block body %} {% block body %}
{% endblock %} {% endblock %}
</div> </div>
</div> </main>
{# </div> #}
</div> </div>
</body> </body>
</html> </html>

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

@@ -1,48 +1,44 @@
<div id="menu" class="h-full w-60 bg-gray-600 text-white hidden md:block"> <div id="menu" class="h-full w-full bg-gray-600 text-white overflow-y-auto">
<aside class="h-full">
<nav> <nav>
<ul> <ul>
<li class="mb-4 border-l-4 border-green-600"> <li class="mb-4 border-l-4 border-green-600">
<div class="pl-8 p-4 items-center text-green-600 bg-gray-800"> <div class="pl-4 p-4 items-center text-green-600 bg-gray-800">
<a class="flex items-center" href="{{ path('app_manga') }}"> <a class="flex items-center" href="{{ path('app_manga') }}">
<i class="fas fa-book mr-2"></i> <i class="fas fa-book mr-2"></i>
<span>Mangas</span> <span>Mangas</span>
</a> </a>
</div> </div>
<ul class="ml-14 mt-2 space-y-4"> <ul class="ml-8 mt-2 space-y-4">
<li><a href="{{ path('add_new_manga') }}" class="hover:text-green-600">Ajouter un nouveau</a> <li><a href="{{ path('add_new_manga') }}" class="hover:text-green-600">Ajouter un nouveau</a></li>
</li> <li><a href="{{ path('app_import') }}" class="hover:text-green-600">Import bibliothèque</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">Collections</a></li>
<li><a href="#" class="hover:text-green-600">Découvrir</a></li> <li><a href="#" class="hover:text-green-600">Découvrir</a></li>
</ul> </ul>
</li> </li>
<li class="mb-4 pl-8 flex items-center hover:text-green-600"> <li class="mb-4 pl-4 flex items-center hover:text-green-600">
<i class="fas fa-calendar-alt mr-2"></i> <i class="fas fa-calendar-alt mr-2"></i>
<span>Calendrier</span> <span>Calendrier</span>
</li> </li>
<li class="mb-4 pl-8 hover:text-green-600"> <li class="mb-4 pl-4 hover:text-green-600">
<a href="{{ path('app_activity') }}"> <a href="{{ path('app_activity') }}">
<div data-controller="activity" class="flex flew-row justify-between"> <div data-controller="activity" class="flex flex-row justify-between items-center">
<div class="flex flex-row"> <div class="flex flex-row items-center">
<i class="fas fa-clock mr-2"></i> <i class="fas fa-clock mr-2"></i>
<span>Activité</span> <span>Activité</span>
</div> </div>
{# TODO le texte doit être blanc au survol #}
<span data-activity-target="activity" <span data-activity-target="activity"
class="bg-green-500 rounded px-2 mr-4 hover:text-white hidden"></span> class="bg-green-500 rounded px-2 mr-2 hover:text-white hidden"></span>
</div> </div>
</a> </a>
</li> </li>
<li class="mb-4 pl-8 flex items-center hover:text-green-600"> <li class="mb-4 pl-4 flex items-center hover:text-green-600">
<i class="fas fa-cog mr-2"></i> <i class="fas fa-cog mr-2"></i>
<span>Paramètres</span> <span>Paramètres</span>
</li> </li>
<li class="mb-4 pl-8 flex items-center hover:text-green-600"> <li class="mb-4 pl-4 flex items-center hover:text-green-600">
<i class="fas fa-desktop mr-2"></i> <i class="fas fa-desktop mr-2"></i>
<span>Système</span> <span>Système</span>
</li> </li>
</ul> </ul>
</nav> </nav>
</aside>
</div> </div>