Modif et ajout CSS (plats, Calendrier)

This commit is contained in:
bethoulevj 2025-04-04 15:38:33 +02:00
parent 8626387473
commit e7206e3c8c
6 changed files with 237 additions and 199 deletions

View File

@ -1,105 +1,107 @@
html{ /* Appliquer une police moderne */
font-family: "Quicksand Light"; !important; html {
} font-family: "Quicksand", sans-serif !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;
} }
/* Title */
.page-title { /* Titre du formulaire */
text-align: center; h1 {
font-size: 28px; font-size: 26px;
color: #ff4d4d; color: #db5559;
margin-bottom: 20px; margin-bottom: 20px;
font-weight: bold; font-weight: bold;
text-transform: uppercase; text-transform: uppercase;
letter-spacing: 1px; letter-spacing: 1.2px;
} }
/* Form styles */ /* Formulaire */
form { form {
display: flex; display: flex;
flex-direction: column; flex-direction: column;
gap: 15px; gap: 15px;
align-items: center;
} }
/* Groupes de champs */
.form-group { .form-group {
display: flex; display: flex;
flex-direction: column; flex-direction: column;
align-items: flex-start;
width: 100%;
} }
/* Labels */
label { label {
font-weight: bold; font-weight: bold;
color: #ff4d4d; color: #db5559;
margin-bottom: 5px; margin-bottom: 6px;
font-size: 14px;
} }
/* Champs de saisie */
input[type="text"], input[type="text"],
input[type="email"], input[type="email"],
input[type="number"], input[type="number"],
textarea, textarea,
select { select {
padding: 10px; width: 100%;
border: 1px solid #ccc; padding: 12px;
border-radius: 5px; border: 2px solid #ddd;
font-size: 14px; border-radius: 6px;
font-size: 16px;
color: #333; 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:focus,
input[type="email"]:focus,
input[type="number"]:focus,
textarea:focus, textarea:focus,
select:focus { select:focus {
border-color: #ff4d4d; border-color: #db5559;
outline: none; outline: none;
box-shadow: 0 0 5px rgba(219, 85, 89, 0.5);
} }
/* Submit button */ /* Bouton d'envoi */
button { button {
background-color: #ff4d4d; background-color: #db5559;
color: white; color: white;
font-weight: bold; font-weight: bold;
padding: 12px 20px; padding: 14px;
border: none; border: none;
border-radius: 5px; border-radius: 8px;
font-size: 16px; font-size: 18px;
cursor: pointer; cursor: pointer;
text-transform: uppercase; text-transform: uppercase;
transition: background-color 0.3s ease-in-out; transition: all 0.3s ease-in-out;
width: 100%;
} }
button:hover { button:hover {
background-color: #e60000; background-color: #b52b31;
} }
/* Links */ /* Bouton de retour */
.actions { #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; text-align: center;
margin-top: 15px;
}
.actions a {
text-decoration: none; text-decoration: none;
color: #ff4d4d; transition: all 0.3s ease-in-out;
font-weight: bold;
transition: color 0.3s ease-in-out;
} }
.actions a:hover { #container_modal a:hover {
color: #e60000; background-color: #db5559;
color: white;
} }
/* Error messages */ /* Messages d'erreur */
.error-message { .error-message {
color: #d9534f; color: #d9534f;
font-size: 14px; font-size: 14px;
@ -107,10 +109,9 @@ button:hover {
font-style: italic; font-style: italic;
} }
/* Empty space below */ /* Espacement supplémentaire */
body::after { body::after {
content: ''; content: '';
height: 20px; height: 20px;
display: block; display: block;
} }

View File

@ -1,120 +1,127 @@
/* Table styles */ /* Title */
table { h1 {
width: 100%; text-align: center;
border-collapse: collapse; font-size: 42px;
color: #b03a2e;
margin-bottom: 20px; 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 */ /* Menu Grid */
table th, table td { .menu-container {
padding: 15px; display: grid;
text-align: left; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); /* 3 max par ligne */
border: 1px solid #e1e1e1; gap: 20px;
justify-content: center;
} }
table th { /* Menu Card */
background-color: #d9534f; .menu-card {
color: white; background: 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;
padding: 20px; 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 */ /* Plat Name */
.btn-container { .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; display: flex;
justify-content: center; justify-content: center;
margin-bottom: 20px; gap: 10px;
} }
/* Button styles */ /* Styles des boutons Modifier et Supprimer */
.btn { .menu-card .actions a,
padding: 10px 20px; .menu-card .actions button {
text-decoration: none; text-decoration: none;
color: white; font-size: 16px;
background-color: #d9534f;
border-radius: 8px;
font-weight: bold; font-weight: bold;
margin-top: 25px; padding: 10px 15px;
text-transform: uppercase; border-radius: 8px;
letter-spacing: 1px; transition: all 0.3s ease-in-out;
transition: background-color 0.3s ease, transform 0.2s ease; 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 { /* Modifier */
background-color: #c9302c; .menu-card .edit {
transform: scale(1.05); background-color: #ffb74d;
color: white;
} }
/* For card-like container around the table */ .menu-card .edit:hover {
.card { background-color: #ffa726;
background-color: #fff;
padding: 20px;
box-shadow: 0 4px 10px rgba(0, 0, 0, 0.15);
border-radius: 15px;
margin-bottom: 30px;
} }
/* Card title */ /* Supprimer */
.card h2 { .menu-card .delete {
font-size: 24px; background-color: #d32f2f;
color: #333; color: white;
margin-bottom: 15px; }
font-family: 'Roboto', sans-serif;
.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;
} }

View File

@ -34,3 +34,51 @@
font-size: 14px; font-size: 14px;
text-align: center; 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;
}

View File

@ -12,6 +12,7 @@
{% block stylesheets %} {% block stylesheets %}
<link rel="stylesheet" href="{{ asset('css/ControllerVues/list.css') }}"> <!-- Ajout du fichier CSS --> <link rel="stylesheet" href="{{ asset('css/ControllerVues/list.css') }}"> <!-- Ajout du fichier CSS -->
<link rel="stylesheet" href="{{ asset('css/Plats/plats.css') }}"> <!-- Ajout du fichier CSS -->
<link rel="stylesheet" href="{{ asset('css/Index/index.css') }}"> <!-- Ajout du fichier CSS --> <link rel="stylesheet" href="{{ asset('css/Index/index.css') }}"> <!-- Ajout du fichier CSS -->
<link rel="stylesheet" href="{{ asset('css/Compte/index.css') }}"> <!-- Ajout du fichier CSS --> <link rel="stylesheet" href="{{ asset('css/Compte/index.css') }}"> <!-- Ajout du fichier CSS -->
<link rel="stylesheet" href="{{ asset('css/GestionUtilisateurs/GestionUtilisateurs.css') }}"> <!-- Ajout du fichier CSS --> <link rel="stylesheet" href="{{ asset('css/GestionUtilisateurs/GestionUtilisateurs.css') }}"> <!-- Ajout du fichier CSS -->

View File

@ -14,6 +14,7 @@
<link rel="stylesheet" href="{{ asset('css/ControllerVues/list.css') }}"> <!-- Ajout du fichier CSS --> <link rel="stylesheet" href="{{ asset('css/ControllerVues/list.css') }}"> <!-- Ajout du fichier CSS -->
<link rel="stylesheet" href="{{ asset('css/ControllerVues/edit.css') }}"> <!-- Ajout du fichier CSS --> <link rel="stylesheet" href="{{ asset('css/ControllerVues/edit.css') }}"> <!-- Ajout du fichier CSS -->
<link rel="stylesheet" href="{{ asset('css/Plats/plats.css') }}"> <!-- Ajout du fichier CSS --> <link rel="stylesheet" href="{{ asset('css/Plats/plats.css') }}"> <!-- Ajout du fichier CSS -->
<link rel="stylesheet" href="{{ asset('css/Index/index.css') }}"> <!-- Ajout du fichier CSS -->
<link rel="stylesheet" href="{{ asset('css/Compte/index.css') }}"> <!-- Ajout du fichier CSS --> <link rel="stylesheet" href="{{ asset('css/Compte/index.css') }}"> <!-- Ajout du fichier CSS -->
<link rel="stylesheet" href="{{ asset('css/GestionUtilisateurs/GestionUtilisateurs.css') }}"> <!-- Ajout du fichier CSS --> <link rel="stylesheet" href="{{ asset('css/GestionUtilisateurs/GestionUtilisateurs.css') }}"> <!-- Ajout du fichier CSS -->
{% endblock %} {% endblock %}
@ -21,48 +22,28 @@
{% block container_modal %} {% block container_modal %}
<div id="container_modal"> <div id="container_modal">
<h1>Plats index</h1> <div class="menu-container">
<table class="table">
<thead>
<tr>
<th>Id</th>
<th>Nom</th>
<th>Description</th>
<th>Prix</th>
<th>Categorie</th>
<th>Statut</th>
<th>Nb_de_commande</th>
<th>actions</th>
</tr>
</thead>
<tbody>
{% for plat in plats %} {% for plat in plats %}
<tr> <div class="menu-card">
<td>{{ plat.id }}</td> <h2>{{ plat.Nom }}</h2>
<td>{{ plat.Nom }}</td> <p>{{ plat.Description }}</p>
<td>{{ plat.Description }}</td> <p class="price">{{ plat.Prix }}€</p>
<td>{{ plat.Prix }}</td> <div class="actions">
<td>{{ plat.Categorie }}</td> <a href="{{ path('app_plats_edit', {'id': plat.id}) }}" class="edit">Modifier</a>
<td>{{ plat.Statut ? 'Yes' : 'No' }}</td>
<td>{{ plat.NbDeCommande }}</td> <form method="post" action="{{ path('app_plats_delete', {'id': plat.id}) }}" onsubmit="return confirm('Es-tu sûr de vouloir le supprimer ?');" style="display:inline;">
<td> <input type="hidden" name="_token" value="{{ csrf_token('delete' ~ plat.id) }}">
<form method="post" action="{{ path('app_plats_delete', {'id': plat.id}) }}" onsubmit="return confirm('Es-tu sur de vouloir le supprimer ?');"> <button type="submit" class="delete">Supprimer</button>
<input type="hidden" name="_token" value="{{ csrf_token('delete' ~ plat.id) }}"> </form>
{{ include('plats/_delete_form.html.twig') }} </div>
</form> </div>
<a href="{{ path('app_plats_edit', {'id': plat.id}) }}">Modifier</a> {% else %}
</td> <p>Aucun plat disponible.</p>
</tr> {% endfor %}
{% else %} </div>
<tr>
<td colspan="8">Aucun enregistrement trouvé</td> <a href="{{ path('app_plats_new') }}" class="add-menu">Créer un menu</a>
</tr>
{% endfor %}
</tbody>
</table>
<a href="{{ path('app_plats_new') }}">Créer un menu</a>
</div> </div>
{% endblock %} {% endblock %}

View File

@ -20,13 +20,10 @@
{% block container_modal %} {% block container_modal %}
<div id="container_modal"> <div id="container_modal">
<h1>Calendrier de la semaine du {{ startDate|date('d/m/Y') }} au {{ endDate|date('d/m/Y') }}</h1> <div class="calendar-nav">
<a href="{{ path('calendar_week', { year: startDate|date('Y'), week: startDate|date('W') - 1 }) }}">← Semaine précédente</a>
<!-- Navigation vers la semaine précédente --> <a href="{{ path('calendar_week', { year: startDate|date('Y'), week: startDate|date('W') + 1 }) }}">Semaine suivante →</a>
<a href="{{ path('calendar_week', { year: startDate|date('Y'), week: startDate|date('W') - 1 }) }}">Semaine précédente</a> </div>
<!-- Navigation vers la semaine suivante -->
<a href="{{ path('calendar_week', { year: startDate|date('Y'), week: startDate|date('W') + 1 }) }}">Semaine suivante</a>
<div class="calendar"> <div class="calendar">
<div class="calendar-header"> <div class="calendar-header">
@ -56,7 +53,10 @@
</div> </div>
</div> </div>
<a href="{{ path('app_reservations_new') }}">Créer une réservation</a> <div class="add-reservation">
<a href="{{ path('app_reservations_new') }}">+ Ajouter une réservation</a>
</div>
</div> </div>
{% endblock %} {% endblock %}