Modif et ajout CSS (plats, Calendrier)
This commit is contained in:
parent
8626387473
commit
e7206e3c8c
@ -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;
|
||||
}
|
||||
|
||||
|
||||
@ -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;
|
||||
}
|
||||
@ -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;
|
||||
}
|
||||
|
||||
|
||||
@ -12,6 +12,7 @@
|
||||
|
||||
{% block stylesheets %}
|
||||
<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/Compte/index.css') }}"> <!-- Ajout du fichier CSS -->
|
||||
<link rel="stylesheet" href="{{ asset('css/GestionUtilisateurs/GestionUtilisateurs.css') }}"> <!-- Ajout du fichier CSS -->
|
||||
|
||||
@ -14,6 +14,7 @@
|
||||
<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/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/GestionUtilisateurs/GestionUtilisateurs.css') }}"> <!-- Ajout du fichier CSS -->
|
||||
{% endblock %}
|
||||
@ -21,48 +22,28 @@
|
||||
{% block container_modal %}
|
||||
|
||||
<div id="container_modal">
|
||||
<h1>Plats index</h1>
|
||||
|
||||
<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>
|
||||
<div class="menu-container">
|
||||
{% for plat in plats %}
|
||||
<tr>
|
||||
<td>{{ plat.id }}</td>
|
||||
<td>{{ plat.Nom }}</td>
|
||||
<td>{{ plat.Description }}</td>
|
||||
<td>{{ plat.Prix }}</td>
|
||||
<td>{{ plat.Categorie }}</td>
|
||||
<td>{{ plat.Statut ? 'Yes' : 'No' }}</td>
|
||||
<td>{{ plat.NbDeCommande }}</td>
|
||||
<td>
|
||||
<form method="post" action="{{ path('app_plats_delete', {'id': plat.id}) }}" onsubmit="return confirm('Es-tu sur de vouloir le supprimer ?');">
|
||||
<input type="hidden" name="_token" value="{{ csrf_token('delete' ~ plat.id) }}">
|
||||
{{ include('plats/_delete_form.html.twig') }}
|
||||
</form>
|
||||
<a href="{{ path('app_plats_edit', {'id': plat.id}) }}">Modifier</a>
|
||||
</td>
|
||||
</tr>
|
||||
{% else %}
|
||||
<tr>
|
||||
<td colspan="8">Aucun enregistrement trouvé</td>
|
||||
</tr>
|
||||
{% endfor %}
|
||||
</tbody>
|
||||
</table>
|
||||
<div class="menu-card">
|
||||
<h2>{{ plat.Nom }}</h2>
|
||||
<p>{{ plat.Description }}</p>
|
||||
<p class="price">{{ plat.Prix }}€</p>
|
||||
<div class="actions">
|
||||
<a href="{{ path('app_plats_edit', {'id': plat.id}) }}" class="edit">Modifier</a>
|
||||
|
||||
<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;">
|
||||
<input type="hidden" name="_token" value="{{ csrf_token('delete' ~ plat.id) }}">
|
||||
<button type="submit" class="delete">Supprimer</button>
|
||||
</form>
|
||||
</div>
|
||||
</div>
|
||||
{% else %}
|
||||
<p>Aucun plat disponible.</p>
|
||||
{% endfor %}
|
||||
</div>
|
||||
|
||||
<a href="{{ path('app_plats_new') }}" class="add-menu">Créer un menu</a>
|
||||
|
||||
<a href="{{ path('app_plats_new') }}">Créer un menu</a>
|
||||
</div>
|
||||
|
||||
{% endblock %}
|
||||
|
||||
@ -20,13 +20,10 @@
|
||||
|
||||
{% block container_modal %}
|
||||
<div id="container_modal">
|
||||
<h1>Calendrier de la semaine du {{ startDate|date('d/m/Y') }} au {{ endDate|date('d/m/Y') }}</h1>
|
||||
|
||||
<!-- Navigation vers la semaine précédente -->
|
||||
<a href="{{ path('calendar_week', { year: startDate|date('Y'), week: startDate|date('W') - 1 }) }}">Semaine précédente</a>
|
||||
|
||||
<!-- 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-nav">
|
||||
<a href="{{ path('calendar_week', { year: startDate|date('Y'), week: startDate|date('W') - 1 }) }}">← Semaine précédente</a>
|
||||
<a href="{{ path('calendar_week', { year: startDate|date('Y'), week: startDate|date('W') + 1 }) }}">Semaine suivante →</a>
|
||||
</div>
|
||||
|
||||
<div class="calendar">
|
||||
<div class="calendar-header">
|
||||
@ -56,7 +53,10 @@
|
||||
</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>
|
||||
{% endblock %}
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user