fix: other changements

assets/styles/app.css

@@ -21,6 +21,17 @@
   margin: auto;
 }
 
+/* Permet de gérer le margin du main qui se trouve dans base twig */
+.main-margin {
+  margin-top: 72px;
+}
+
+@media screen and (max-width: 768px) {
+  .main-margin {
+    margin-top: 30px;
+  }
+}
+
 /* Menu */
 .menu-active {
   position: absolute;

public/images/icon-arrow-left.svg

+<svg width="50" height="40" viewBox="0 0 50 40" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M20.9374 28.2333V21.5666H39.5207L39.5833 18.2167H20.9374V11.5667L10.5208 19.9L20.9374 28.2333Z" fill="black"/>
+</svg>

templates/base.html.twig

@@ -89,7 +89,7 @@
       </div>
     </nav>
 
-    <main style="margin-top: 72px" class="container grow">
+    <main class="main-margin container grow">
       {% block body %}{% endblock %}
     </main>
 

templates/cart/index.html.twig

-{% extends 'base.html.twig' %} {% block title %}Cart {% endblock %} {% block
+{% extends 'base.html.twig' %} {% block title %}Clone McDo - Panier {% endblock %} {% block
 body %}
 <section>
-  <a href="{{ path('home') }}">Retour</a>
+  <a class="flex items-center" href="{{path('home')}}">
+    <img class="w-[20px]" src="{{ asset('images/icon-arrow-left.svg') }}" alt="icon flèche gauche">
+    <span>Retour</span>
+  </a>
   <h3 class="font-bold text-5xl my-2">Votre panier</h3>
   {% if app.user %}
   <p>Connecté sous {{ app.user.email }}</p>
@@ -64,7 +67,7 @@ body %}
     {% endfor %}
   </div>
 
-  <div class="flex justify-between">
+  <div class="flex flex-col gap-y-6 justify-between md:flex-row">
     <a
       href="{{ path('home') }}"
       class="inline-block bg-orangeLight py-4 px-12 rounded-md"

templates/home.html.twig

@@ -4,7 +4,7 @@
   <aside class="mb-12">
     <p class="text-3xl">Filtres</p>
 
-    <ul class="flex flex-row flex-wrap gap-6 mt-12 lg:flex-col">
+    <ul class="flex flex-row flex-wrap gap-6 mt-6 md:mt-12 lg:flex-col">
       <li>
         <a
           class="hover:text-orangeLight transition-colors"

templates/product/index.html.twig

-{% extends 'base.html.twig' %} {% block body %}
+{% extends 'base.html.twig' %} {% block title %}Clone McDo - Admin {% endblock %}{% block body %}
 <div class="mb-[50px]">
   <div class="flex flex-col gap-6 lg:flex-row lg:items-center">
     <h2 class="text-4xl md:text-5xl">Administration du site</h2>
-    <div class="flex gap-4">
+    <div class="flex flex-col gap-4 md:flex-row">
       <a
       href="{{ path('app_product_new') }}"
       class="text-center bg-blue-400 text-white py-2 px-6 rounded-md"
@@ -33,19 +33,19 @@
     class="flex flex-col justify-between border-b border-[#DCDCDC] pb-6 md:flex-row md:items-center"
   >
     <div class="flex flex-col md:flex-row md:items-center">
-      <p class="text-xl">{{ product.id }}</p>
+      <p class="text-xl">ID {{ product.id }}</p>
       <p class="md:ml-12">{{ product.title }}</p>
       <p class="md:ml-12">{{ product.category.getName() }}</p>
     </div>
 
-    <div class="flex gap-4 mt-6 md:m-0">
+    <div class="flex flex-col gap-4 mt-6 sm:flex-row md:m-0">
       <a
-        class="text-white bg-gray-400 py-2 px-6 rounded-md"
+        class="max-w-fit text-white bg-gray-400 py-2 px-6 rounded-md"
         href="{{ path('app_product_show', { id: product.id }) }}"
         >Voir</a
       >
       <a
-        class="bg-blue-400 text-white py-2 px-6 rounded-md"
+        class="max-w-fit bg-blue-400 text-white py-2 px-6 rounded-md"
         href="{{ path('app_product_edit', { id: product.id }) }}"
         >Modifier</a
       >

templates/product/show.html.twig

-{% extends 'base.html.twig' %} {% block body %}
-
-<section class="flex flex-col gap-12 items-center h-full md:flex-row">
+{% extends 'base.html.twig' %}{% block title %}Clone McDo - {{product.title}}{% endblock %} {% block body %}
+<a class="flex items-center" href="{{path('home')}}">
+  <img src="{{ asset('images/icon-arrow-left.svg') }}" alt="icon flèche gauche">
+  <span>Retour</span>
+</a>
+<section class="flex flex-col gap-6 md:gap-12 items-center h-full md:flex-row">
   <div class="flex items-center justify-center md:w-6/12">
+
     <img
       class="w-[500px]"
       src="{{ asset(product.imageSrc) }}"
@@ -10,7 +14,7 @@
   </div>
 
   <div class="w-full md:w-6/12">
-    <h2 class="text-6xl">{{ product.title }}</h2>
+    <h2 class="text-5xl md:text-6xl">{{ product.title }}</h2>
     <span class="text-xl text-orangeLight">{{ product.price }} €</span>
     <p class="text-lg my-6">
       {{ product.description }}
@@ -28,7 +32,7 @@
     </form>
     {% else %}
     <a
-      class="inline-block bg-orangeLight py-4 px-12 rounded-md"
+      class="inline-block text-center bg-orangeLight py-4 px-12 rounded-md"
       href="{{ path('app_login') }}"
       >Connectez-vous pour ajouter au panier</a
     >

templates/security/login.html.twig

@@ -47,7 +47,7 @@
       {% else %}
       <form
         method="post"
-        class="flex flex-col gap-y-6 bg-white p-6 rounded-lg mt-12 md:p-12"
+        class="flex flex-col gap-y-6 bg-white py-4 rounded-lg mt-12 md:p-12"
       >
         <div>
           <label class="block mb-2 text-lg" for="inputEmail">E-mail</label>