Added:
- only body block is scrollable
This commit is contained in:
Jérémy Guillot
@@ -1,5 +1,5 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="">
|
||||
<html lang="" class="h-full">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<title>{% block title %}Mangarr{% endblock %}</title>
|
||||
@@ -12,10 +12,9 @@
|
||||
{{ encore_entry_script_tags('app') }}
|
||||
{% endblock %}
|
||||
</head>
|
||||
<body class="bg-gray-50 h-screen overflow-hidden">
|
||||
<div data-controller="mercure"
|
||||
data-mercure-topic="notification">
|
||||
</div>
|
||||
<body class="bg-gray-50 h-full overflow-hidden">
|
||||
<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-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">
|
||||
@@ -23,49 +22,57 @@
|
||||
<span data-alert-target="message"></span>
|
||||
</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">
|
||||
<div class="flex justify-center ml-10">
|
||||
<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" #}
|
||||
{# x="0px" y="0px" width="50" height="50" viewBox="-40 -90 500 500"> #}
|
||||
{# <path cx="100" cy="100" r="150" fill="white" stroke="green" stroke-width="15" #}
|
||||
{# d="M448 160A240 240 0 0 1 208 400A240 240 0 0 1 -32 160A240 240 0 0 1 448 160z"/> #}
|
||||
{# <g transform="translate(28, -15) scale(0.9)"> #}
|
||||
{# <g> #}
|
||||
{# <path style="fill:#16A34A; stroke:black; stroke-width:3;" #}
|
||||
{# d="M68.955 285.752c45.294 0.882 84.544 7.654 113.51 19.587a4.037 4.037 0 0 0 5.571 -3.73l0.016 -216.52a4.032 4.032 0 0 0 -2.544 -3.749L70.525 35.586a4.032 4.032 0 0 0 -5.525 3.749v242.384a4.032 4.032 0 0 0 3.955 4.034"/> #}
|
||||
{# <path style="fill:green; stroke:black; stroke-width:3;" #}
|
||||
{# d="M398.374 74.04a4.048 4.048 0 0 0 -3.565 -0.63l-40.667 12.158a4.032 4.032 0 0 0 -2.88 3.864v209.165s0.181 3.299 -3.293 3.299h-6.592c-32.806 0 -93.773 3.405 -133.496 26.213l-7.883 4.514 -7.883 -4.514c-39.723 -22.806 -100.688 -26.213 -133.496 -26.213H50.208c-1.568 0 -1.472 -1.885 -1.472 -1.883V89.434a4.032 4.032 0 0 0 -2.878 -3.864L5.189 73.411A4.032 4.032 0 0 0 0 77.274V330.336c0 1.138 0.482 2.224 1.325 2.99a4.032 4.032 0 0 0 3.104 1.026c12.086 -1.186 30.984 -2.597 52.363 -2.597 46.957 0 84.691 6.858 109.146 19.837 3.592 1.885 24.422 13.109 34.064 13.109s30.47 -11.224 34.062 -13.109c24.454 -12.979 62.19 -19.837 109.146 -19.837 21.378 0 40.275 1.411 52.362 2.597a4.032 4.032 0 0 0 4.429 -4.014V77.274a4.048 4.048 0 0 0 -1.626 -3.234"/> #}
|
||||
{# <path style="fill:#16A34A; stroke:black; stroke-width:3;" #}
|
||||
{# d="M213.75 304.962a4.048 4.048 0 0 0 3.782 0.378c28.965 -11.933 68.216 -18.707 113.51 -19.587a4.032 4.032 0 0 0 3.957 -4.032V39.334a4.032 4.032 0 0 0 -5.525 -3.749l-114.986 45.755a4.032 4.032 0 0 0 -2.542 3.749l0.016 216.52a4.032 4.032 0 0 0 1.789 3.352"/> #}
|
||||
{# </g> #}
|
||||
{# </g> #}
|
||||
{# </svg> #}
|
||||
{# </div> #}
|
||||
<img src="{{ asset('img/mangarr_logo.png') }}" alt="Mangarr" class="w-32 shadow-xl">
|
||||
</a>
|
||||
</div>
|
||||
<div class="ml-8 w-60">
|
||||
<twig:Search/>
|
||||
</div>
|
||||
|
||||
<!-- Header -->
|
||||
<header class="bg-green-600 h-16 flex items-center fixed w-full z-30">
|
||||
<div class="flex justify-center ml-10">
|
||||
<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" #}
|
||||
{# x="0px" y="0px" width="50" height="50" viewBox="-40 -90 500 500"> #}
|
||||
{# <path cx="100" cy="100" r="150" fill="white" stroke="green" stroke-width="15" #}
|
||||
{# d="M448 160A240 240 0 0 1 208 400A240 240 0 0 1 -32 160A240 240 0 0 1 448 160z"/> #}
|
||||
{# <g transform="translate(28, -15) scale(0.9)"> #}
|
||||
{# <g> #}
|
||||
{# <path style="fill:#16A34A; stroke:black; stroke-width:3;" #}
|
||||
{# d="M68.955 285.752c45.294 0.882 84.544 7.654 113.51 19.587a4.037 4.037 0 0 0 5.571 -3.73l0.016 -216.52a4.032 4.032 0 0 0 -2.544 -3.749L70.525 35.586a4.032 4.032 0 0 0 -5.525 3.749v242.384a4.032 4.032 0 0 0 3.955 4.034"/> #}
|
||||
{# <path style="fill:green; stroke:black; stroke-width:3;" #}
|
||||
{# d="M398.374 74.04a4.048 4.048 0 0 0 -3.565 -0.63l-40.667 12.158a4.032 4.032 0 0 0 -2.88 3.864v209.165s0.181 3.299 -3.293 3.299h-6.592c-32.806 0 -93.773 3.405 -133.496 26.213l-7.883 4.514 -7.883 -4.514c-39.723 -22.806 -100.688 -26.213 -133.496 -26.213H50.208c-1.568 0 -1.472 -1.885 -1.472 -1.883V89.434a4.032 4.032 0 0 0 -2.878 -3.864L5.189 73.411A4.032 4.032 0 0 0 0 77.274V330.336c0 1.138 0.482 2.224 1.325 2.99a4.032 4.032 0 0 0 3.104 1.026c12.086 -1.186 30.984 -2.597 52.363 -2.597 46.957 0 84.691 6.858 109.146 19.837 3.592 1.885 24.422 13.109 34.064 13.109s30.47 -11.224 34.062 -13.109c24.454 -12.979 62.19 -19.837 109.146 -19.837 21.378 0 40.275 1.411 52.362 2.597a4.032 4.032 0 0 0 4.429 -4.014V77.274a4.048 4.048 0 0 0 -1.626 -3.234"/> #}
|
||||
{# <path style="fill:#16A34A; stroke:black; stroke-width:3;" #}
|
||||
{# d="M213.75 304.962a4.048 4.048 0 0 0 3.782 0.378c28.965 -11.933 68.216 -18.707 113.51 -19.587a4.032 4.032 0 0 0 3.957 -4.032V39.334a4.032 4.032 0 0 0 -5.525 -3.749l-114.986 45.755a4.032 4.032 0 0 0 -2.542 3.749l0.016 216.52a4.032 4.032 0 0 0 1.789 3.352"/> #}
|
||||
{# </g> #}
|
||||
{# </g> #}
|
||||
{# </svg> #}
|
||||
{# </div> #}
|
||||
<img src="{{ asset('img/mangarr_logo.png') }}" alt="Mangarr" class="w-32 shadow-xl">
|
||||
</a>
|
||||
</div>
|
||||
{# <div class="pt-16 flex bg-white"> #}
|
||||
<div class="fixed left-0 h-full mt-16">
|
||||
<div class="ml-8 w-60">
|
||||
<twig:Search/>
|
||||
</div>
|
||||
</header>
|
||||
|
||||
<!-- 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' %}
|
||||
</div>
|
||||
<div class="flex flex-col ml-60 overflow-y-auto h-full">
|
||||
<div class="fixed w-full overflow-hidden top-16 z-20">
|
||||
</nav>
|
||||
|
||||
<!-- 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 %}
|
||||
{% endblock %}
|
||||
</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 %}
|
||||
{% endblock %}
|
||||
</div>
|
||||
</div>
|
||||
{# </div> #}
|
||||
</main>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
|
||||
@@ -1,48 +1,44 @@
|
||||
<div id="menu" class="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="pl-8 p-4 items-center text-green-600 bg-gray-800">
|
||||
<a class="flex items-center" href="{{ path('app_manga') }}">
|
||||
<i class="fas fa-book mr-2"></i>
|
||||
<span>Mangas</span>
|
||||
</a>
|
||||
</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>
|
||||
<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 hover:text-green-600">
|
||||
<a href="{{ path('app_activity') }}">
|
||||
<div data-controller="activity" class="flex flew-row justify-between">
|
||||
<div class="flex flex-row">
|
||||
<i class="fas fa-clock mr-2"></i>
|
||||
<span>Activité</span>
|
||||
</div>
|
||||
{# TODO le texte doit être blanc au survol #}
|
||||
<span data-activity-target="activity"
|
||||
class="bg-green-500 rounded px-2 mr-4 hover:text-white hidden"></span>
|
||||
</div>
|
||||
<div id="menu" class="h-full w-full bg-gray-600 text-white overflow-y-auto">
|
||||
<nav>
|
||||
<ul>
|
||||
<li class="mb-4 border-l-4 border-green-600">
|
||||
<div class="pl-4 p-4 items-center text-green-600 bg-gray-800">
|
||||
<a class="flex items-center" href="{{ path('app_manga') }}">
|
||||
<i class="fas fa-book mr-2"></i>
|
||||
<span>Mangas</span>
|
||||
</a>
|
||||
</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>
|
||||
<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>
|
||||
<li><a href="{{ path('app_import') }}" 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>
|
||||
<li class="mb-4 pl-4 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-4 hover:text-green-600">
|
||||
<a href="{{ path('app_activity') }}">
|
||||
<div data-controller="activity" class="flex flex-row justify-between items-center">
|
||||
<div class="flex flex-row items-center">
|
||||
<i class="fas fa-clock mr-2"></i>
|
||||
<span>Activité</span>
|
||||
</div>
|
||||
<span data-activity-target="activity"
|
||||
class="bg-green-500 rounded px-2 mr-2 hover:text-white hidden"></span>
|
||||
</div>
|
||||
</a>
|
||||
</li>
|
||||
<li class="mb-4 pl-4 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-4 flex items-center hover:text-green-600">
|
||||
<i class="fas fa-desktop mr-2"></i>
|
||||
<span>Système</span>
|
||||
</li>
|
||||
</ul>
|
||||
</nav>
|
||||
</div>
|
||||
|
||||
Reference in New Issue
Block a user