From e7206e3c8c94f1e5f20ffcf63de3ab952b2d7359 Mon Sep 17 00:00:00 2001 From: bethoulevj Date: Fri, 4 Apr 2025 15:38:33 +0200 Subject: [PATCH] Modif et ajout CSS (plats, Calendrier) --- public/css/ControllerVues/new.css | 105 ++++----- public/css/Plats/plats.css | 205 +++++++++--------- .../css/Reservations/reservationCalendar.css | 48 ++++ templates/base.html.twig | 1 + templates/plats/index.html.twig | 61 ++---- templates/reservations/index.html.twig | 16 +- 6 files changed, 237 insertions(+), 199 deletions(-) diff --git a/public/css/ControllerVues/new.css b/public/css/ControllerVues/new.css index 0ce956f..f5a9080 100644 --- a/public/css/ControllerVues/new.css +++ b/public/css/ControllerVues/new.css @@ -1,105 +1,107 @@ -html{ - font-family: "Quicksand Light"; !important; -} -/* Page container */ -.page-container { - width: 100%; - max-width: 600px; - margin: 20px auto; - padding: 20px; - background-color: #fff; - border-radius: 10px; - box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1); - border: 2px solid #ff4d4d; +/* Appliquer une police moderne */ +html { + font-family: "Quicksand", sans-serif !important; } -/* Title */ -.page-title { - text-align: center; - font-size: 28px; - color: #ff4d4d; + +/* Titre du formulaire */ +h1 { + font-size: 26px; + color: #db5559; margin-bottom: 20px; font-weight: bold; text-transform: uppercase; - letter-spacing: 1px; + letter-spacing: 1.2px; } -/* Form styles */ +/* Formulaire */ form { display: flex; flex-direction: column; gap: 15px; + align-items: center; } +/* Groupes de champs */ .form-group { display: flex; flex-direction: column; + align-items: flex-start; + width: 100%; } +/* Labels */ label { font-weight: bold; - color: #ff4d4d; - margin-bottom: 5px; + color: #db5559; + margin-bottom: 6px; + font-size: 14px; } +/* Champs de saisie */ input[type="text"], input[type="email"], input[type="number"], textarea, select { - padding: 10px; - border: 1px solid #ccc; - border-radius: 5px; - font-size: 14px; + width: 100%; + padding: 12px; + border: 2px solid #ddd; + border-radius: 6px; + font-size: 16px; color: #333; - transition: border-color 0.3s ease-in-out; + transition: all 0.3s ease-in-out; + background-color: #fff; } -input[type="text"]:focus, -input[type="email"]:focus, -input[type="number"]:focus, +input:focus, textarea:focus, select:focus { - border-color: #ff4d4d; + border-color: #db5559; outline: none; + box-shadow: 0 0 5px rgba(219, 85, 89, 0.5); } -/* Submit button */ +/* Bouton d'envoi */ button { - background-color: #ff4d4d; + background-color: #db5559; color: white; font-weight: bold; - padding: 12px 20px; + padding: 14px; border: none; - border-radius: 5px; - font-size: 16px; + border-radius: 8px; + font-size: 18px; cursor: pointer; text-transform: uppercase; - transition: background-color 0.3s ease-in-out; + transition: all 0.3s ease-in-out; + width: 100%; } button:hover { - background-color: #e60000; + background-color: #b52b31; } -/* Links */ -.actions { +/* Bouton de retour */ +#container_modal a { + display: inline-block; + margin-top: 20px; + padding: 12px 20px; + background-color: transparent; + color: #db5559; + border: 2px solid #db5559; + border-radius: 6px; + font-size: 16px; text-align: center; - margin-top: 15px; -} - -.actions a { text-decoration: none; - color: #ff4d4d; - font-weight: bold; - transition: color 0.3s ease-in-out; + transition: all 0.3s ease-in-out; } -.actions a:hover { - color: #e60000; +#container_modal a:hover { + background-color: #db5559; + color: white; } -/* Error messages */ +/* Messages d'erreur */ .error-message { color: #d9534f; font-size: 14px; @@ -107,10 +109,9 @@ button:hover { font-style: italic; } -/* Empty space below */ +/* Espacement supplémentaire */ body::after { content: ''; height: 20px; display: block; } - diff --git a/public/css/Plats/plats.css b/public/css/Plats/plats.css index 16d7225..090e9be 100644 --- a/public/css/Plats/plats.css +++ b/public/css/Plats/plats.css @@ -1,120 +1,127 @@ -/* Table styles */ -table { - width: 100%; - border-collapse: collapse; +/* Title */ +h1 { + text-align: center; + font-size: 42px; + color: #b03a2e; margin-bottom: 20px; - background-color: #fafafa; - font-family: 'Arial', sans-serif; - box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1); - border-radius: 10px; - overflow: hidden; } -/* Table headers */ -table th, table td { - padding: 15px; - text-align: left; - border: 1px solid #e1e1e1; +/* Menu Grid */ +.menu-container { + display: grid; + grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); /* 3 max par ligne */ + gap: 20px; + justify-content: center; } -table th { - background-color: #d9534f; - color: white; - font-weight: bold; - text-transform: uppercase; - letter-spacing: 1px; -} - -/* Even rows */ -table tr:nth-child(even) { - background-color: #f8f8f8; -} - -/* Row hover effect */ -table tr:hover { - background-color: #f1f1f1; - cursor: pointer; -} - -/* Action links */ -a { - text-decoration: none; - color: #d9534f; - font-weight: bold; - transition: color 0.3s ease; -} - -a:hover { - color: #fff; - text-decoration: underline; -} - -/* New client button */ -a[href*="app_clients_new"] { - display: inline-block; - margin-top: 20px; - padding: 12px 25px; - background-color: #28a745; - color: white; - border-radius: 8px; - font-size: 16px; - text-align: center; - transition: background-color 0.3s ease, transform 0.2s ease; -} - -a[href*="app_clients_new"]:hover { - background-color: #218838; - transform: scale(1.05); -} - -/* Empty table row message */ -table td[colspan="6"] { - text-align: center; - font-style: italic; - color: #999; +/* Menu Card */ +.menu-card { + background: white; padding: 20px; - font-size: 18px; + border-radius: 15px; + box-shadow: 0 4px 8px rgba(0, 0, 0, 0.15); + text-align: center; + transition: transform 0.3s ease, box-shadow 0.3s ease; } -/* Button container */ -.btn-container { +/* Plat Name */ +.menu-card h2 { + font-size: 28px; + color: #b03a2e; + margin-bottom: 10px; +} + +/* Description */ +.menu-card p { + font-size: 18px; + color: #555; + margin-bottom: 10px; +} + +/* Price */ +.menu-card .price { + font-size: 22px; + font-weight: bold; + color: #388E3C; + margin-bottom: 15px; +} + +/* Buttons */ +.menu-card .actions { display: flex; justify-content: center; - margin-bottom: 20px; + gap: 10px; } -/* Button styles */ -.btn { - padding: 10px 20px; +/* Styles des boutons Modifier et Supprimer */ +.menu-card .actions a, +.menu-card .actions button { text-decoration: none; - color: white; - background-color: #d9534f; - border-radius: 8px; + font-size: 16px; font-weight: bold; - margin-top: 25px; - text-transform: uppercase; - letter-spacing: 1px; - transition: background-color 0.3s ease, transform 0.2s ease; + padding: 10px 15px; + border-radius: 8px; + transition: all 0.3s ease-in-out; + border: none; + cursor: pointer; + display: inline-block; /* Pour que le bouton suppr ait le même comportement qu'un lien */ + text-align: center; } -.btn:hover { - background-color: #c9302c; - transform: scale(1.05); +/* Modifier */ +.menu-card .edit { + background-color: #ffb74d; + color: white; } -/* For card-like container around the table */ -.card { - background-color: #fff; - padding: 20px; - box-shadow: 0 4px 10px rgba(0, 0, 0, 0.15); - border-radius: 15px; - margin-bottom: 30px; +.menu-card .edit:hover { + background-color: #ffa726; } -/* Card title */ -.card h2 { - font-size: 24px; - color: #333; - margin-bottom: 15px; - font-family: 'Roboto', sans-serif; +/* Supprimer */ +.menu-card .delete { + background-color: #d32f2f; + color: white; } + +.menu-card .delete:hover { + background-color: #c62828; +} + + +.menu-card .edit { + background-color: #ffb74d; + color: white; +} + +.menu-card .edit:hover { + background-color: #ffa726; +} + +.menu-card .delete { + background-color: #d32f2f; + color: white; +} + +.menu-card .delete:hover { + background-color: #c62828; +} + +/* Button for Adding New Dish */ +.add-menu { + display: block; + text-align: center; + background-color: #b03a2e; + color: white; + padding: 15px; + font-size: 20px; + margin-top: 30px; + border-radius: 10px; + width: 300px; + margin-left: auto; + margin-right: auto; +} + +.add-menu:hover { + background-color: #922b21; +} \ No newline at end of file diff --git a/public/css/Reservations/reservationCalendar.css b/public/css/Reservations/reservationCalendar.css index d045ab1..88bb5f4 100644 --- a/public/css/Reservations/reservationCalendar.css +++ b/public/css/Reservations/reservationCalendar.css @@ -34,3 +34,51 @@ font-size: 14px; text-align: center; } + +/* Conteneur pour les boutons de navigation */ +.calendar-nav { + display: flex; + justify-content: space-between; + align-items: center; + margin-bottom: 20px; +} + +/* Boutons de navigation (Semaine précédente / Semaine suivante) */ +.calendar-nav a { + padding: 10px 15px; + text-decoration: none; + font-size: 16px; + font-weight: bold; + color: white; + background-color: #db5559; + border-radius: 5px; + transition: background-color 0.3s ease-in-out; +} + +.calendar-nav a:hover { + background-color: #b52b31; +} + +/* Conteneur pour le bouton d'ajout */ +.add-reservation { + display: flex; + justify-content: center; + margin-top: 20px; +} + +/* Bouton pour créer une réservation */ +.add-reservation a { + padding: 12px 20px; + text-decoration: none; + font-size: 18px; + font-weight: bold; + color: white; + background-color: #4CAF50; + border-radius: 8px; + transition: background-color 0.3s ease-in-out; +} + +.add-reservation a:hover { + background-color: #388E3C; +} + diff --git a/templates/base.html.twig b/templates/base.html.twig index 1e9a86e..d310bfe 100644 --- a/templates/base.html.twig +++ b/templates/base.html.twig @@ -12,6 +12,7 @@ {% block stylesheets %} + diff --git a/templates/plats/index.html.twig b/templates/plats/index.html.twig index 025f1ba..c298fe7 100644 --- a/templates/plats/index.html.twig +++ b/templates/plats/index.html.twig @@ -14,6 +14,7 @@ + {% endblock %} @@ -21,48 +22,28 @@ {% block container_modal %}
-

Plats index

- - - - - - - - - - - - - - - +
{% for plat in plats %} -
- - - - - - - - - - {% else %} - - - - {% endfor %} - -
IdNomDescriptionPrixCategorieStatutNb_de_commandeactions
{{ plat.id }}{{ plat.Nom }}{{ plat.Description }}{{ plat.Prix }}{{ plat.Categorie }}{{ plat.Statut ? 'Yes' : 'No' }}{{ plat.NbDeCommande }} -
- - {{ include('plats/_delete_form.html.twig') }} -
- Modifier -
Aucun enregistrement trouvé
+
+

{{ plat.Nom }}

+

{{ plat.Description }}

+

{{ plat.Prix }}€

+
+ Modifier + +
+ + +
+
+
+ {% else %} +

Aucun plat disponible.

+ {% endfor %} +
+ + Créer un menu - Créer un menu {% endblock %} diff --git a/templates/reservations/index.html.twig b/templates/reservations/index.html.twig index 74602b0..ceefc1d 100644 --- a/templates/reservations/index.html.twig +++ b/templates/reservations/index.html.twig @@ -20,13 +20,10 @@ {% block container_modal %}
-

Calendrier de la semaine du {{ startDate|date('d/m/Y') }} au {{ endDate|date('d/m/Y') }}

- - - Semaine précédente - - - Semaine suivante +
+ ← Semaine précédente + Semaine suivante → +
@@ -56,7 +53,10 @@
- Créer une réservation +
+ + Ajouter une réservation +
+
{% endblock %}