From 679276f5f1ed69122acada8d16964fea99b128d9 Mon Sep 17 00:00:00 2001
From: Firas <firas.bouzazi@imt-atlantique.net>
Date: Wed, 26 Mar 2025 00:51:50 +0100
Subject: [PATCH] minor changes
---
templates/item/index.html.twig | 118 ++++++++++++++++++-------
templates/item/show.html.twig | 144 +++++++++++++++++++++++--------
templates/wishlist/new.html.twig | 142 ++++++++++++------------------
3 files changed, 249 insertions(+), 155 deletions(-)
diff --git a/templates/item/index.html.twig b/templates/item/index.html.twig
index ea921871..05077d53 100644
--- a/templates/item/index.html.twig
+++ b/templates/item/index.html.twig
@@ -2,6 +2,66 @@
{% block title %}Item index{% endblock %}
+{% block stylesheets %}
+ {{ parent() }}
+ <style>
+ body {
+ font-family: Arial, sans-serif;
+ background: linear-gradient(135deg, #00B8DE, #99CC33) fixed;
+ color: white;
+ text-align: center;
+ padding: 20px;
+ }
+ .container {
+ max-width: 90%;
+ margin: auto;
+ background: rgba(255, 255, 255, 0.2);
+ padding: 20px;
+ border-radius: 15px;
+ box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
+ backdrop-filter: blur(10px);
+ overflow-x: auto;
+ }
+ table {
+ width: 100%;
+ border-collapse: collapse;
+ background: rgba(255, 255, 255, 0.9);
+ color: black;
+ border-radius: 10px;
+ overflow: hidden;
+ }
+ th, td {
+ padding: 12px;
+ text-align: left;
+ border-bottom: 2px solid #99CC33;
+ }
+ th {
+ background: #00B8DE;
+ color: white;
+ }
+ tr:hover {
+ background-color: rgba(153, 204, 51, 0.3);
+ }
+ .btn {
+ background-color: white;
+ color: #00B8DE;
+ border: 2px solid #00B8DE;
+ padding: 10px 15px;
+ border-radius: 5px;
+ font-size: 1rem;
+ cursor: pointer;
+ transition: 0.3s;
+ display: inline-block;
+ margin-top: 15px;
+ }
+ .btn:hover {
+ background-color: #99CC33;
+ color: white;
+ border-color: #99CC33;
+ }
+ </style>
+{% endblock %}
+
{% block body %}
<header>
<div class="user-icon"></div>
@@ -13,45 +73,41 @@
<div class="container">
<section class="form-section">
<h1>Item index</h1>
-
<table class="table">
<thead>
- <tr>
- <th>Id</th>
- <th>Title</th>
- <th>Description</th>
- <th>Url</th>
- <th>Image</th>
- <th>Price</th>
- <th>Actions</th>
- </tr>
- </thead>
- <tbody>
- {% for item in items %}
- <tr>
- <td>{{ item.id }}</td>
- <td>{{ item.title }}</td>
- <td>{{ item.description }}</td>
- <td>{{ item.url }}</td>
- <td>{{ item.image }}</td>
- <td>{{ item.price }}</td>
- <td>
- <a href="{{ path('app_item_show', {'id': item.id}) }}">Show</a>
- <a href="{{ path('app_item_edit', {'id': item.id}) }}">Edit</a>
- </td>
- </tr>
- {% else %}
<tr>
- <td colspan="7">No records found</td>
+ <th>Id</th>
+ <th>Title</th>
+ <th>Description</th>
+ <th>Url</th>
+ <th>Image</th>
+ <th>Price</th>
+ <th>Actions</th>
</tr>
- {% endfor %}
+ </thead>
+ <tbody>
+ {% for item in items %}
+ <tr>
+ <td>{{ item.id }}</td>
+ <td>{{ item.title }}</td>
+ <td>{{ item.description }}</td>
+ <td><a href="{{ item.url }}" target="_blank">Link</a></td>
+ <td><img src="{{ asset('uploads/' ~ item.image) }}" alt="{{ item.title }}" width="50"></td>
+ <td>{{ item.price }}</td>
+ <td>
+ <a href="{{ path('app_item_show', {'id': item.id}) }}">Show</a>
+ <a href="{{ path('app_item_edit', {'id': item.id}) }}">Edit</a>
+ </td>
+ </tr>
+ {% else %}
+ <tr>
+ <td colspan="7">No records found</td>
+ </tr>
+ {% endfor %}
</tbody>
</table>
-
<a href="{{ path('app_item_new') }}" class="btn">Create new</a>
</section>
</div>
</main>
-
-
{% endblock %}
diff --git a/templates/item/show.html.twig b/templates/item/show.html.twig
index e7c5f669..508aa78a 100644
--- a/templates/item/show.html.twig
+++ b/templates/item/show.html.twig
@@ -1,42 +1,112 @@
{% extends 'base.html.twig' %}
-{% block title %}Item{% endblock %}
+{% block title %}Item Details{% endblock %}
-{% block body %}
- <h1>Item</h1>
-
- <table class="table">
- <tbody>
- <tr>
- <th>Id</th>
- <td>{{ item.id }}</td>
- </tr>
- <tr>
- <th>Title</th>
- <td>{{ item.title }}</td>
- </tr>
- <tr>
- <th>Description</th>
- <td>{{ item.description }}</td>
- </tr>
- <tr>
- <th>Url</th>
- <td>{{ item.url }}</td>
- </tr>
- <tr>
- <th>Image</th>
- <td>{{ item.image }}</td>
- </tr>
- <tr>
- <th>Price</th>
- <td>{{ item.price }}</td>
- </tr>
- </tbody>
- </table>
-
- <a href="{{ path('app_item_index') }}">back to list</a>
-
- <a href="{{ path('app_item_edit', {'id': item.id}) }}">edit</a>
+{% block stylesheets %}
+ {{ parent() }}
+ <style>
+ body {
+ font-family: Arial, sans-serif;
+ background: linear-gradient(135deg, #00B8DE, #99CC33) fixed;
+ color: white;
+ text-align: center;
+ padding: 20px;
+ }
+ .container {
+ max-width: 800px;
+ margin: auto;
+ }
+ .item-container {
+ background: rgba(255, 255, 255, 0.2);
+ border: 2px solid #99CC33;
+ border-radius: 10px;
+ box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
+ backdrop-filter: blur(10px);
+ padding: 20px;
+ margin-top: 20px;
+ }
+ h1 {
+ margin-bottom: 20px;
+ }
+ table {
+ width: 100%;
+ border-collapse: collapse;
+ margin-top: 20px;
+ }
+ th, td {
+ padding: 12px;
+ border: 2px solid #99CC33;
+ border-radius: 4px;
+ }
+ th {
+ background-color: rgba(153, 204, 51, 0.5);
+ }
+ a.button {
+ display: inline-block;
+ margin: 10px 5px;
+ padding: 10px 20px;
+ text-decoration: none;
+ border: 2px solid #00B8DE;
+ background-color: white;
+ color: #00B8DE;
+ border-radius: 4px;
+ transition: all 0.3s ease;
+ }
+ a.button:hover {
+ background-color: #99CC33;
+ color: white;
+ border-color: #99CC33;
+ }
+ @media (max-width: 768px) {
+ .item-container {
+ width: 90%;
+ }
+ table, th, td {
+ font-size: 0.9rem;
+ }
+ }
+ </style>
+{% endblock %}
- {{ include('item/_delete_form.html.twig') }}
+{% block body %}
+<div class="container">
+ <h1>Item Details</h1>
+ <div class="item-container">
+ <table>
+ <tbody>
+ <tr>
+ <th>Id</th>
+ <td>{{ item.id }}</td>
+ </tr>
+ <tr>
+ <th>Title</th>
+ <td>{{ item.title }}</td>
+ </tr>
+ <tr>
+ <th>Description</th>
+ <td>{{ item.description }}</td>
+ </tr>
+ <tr>
+ <th>Url</th>
+ <td>{{ item.url }}</td>
+ </tr>
+ <tr>
+ <th>Image</th>
+ <td>
+ <img src="{{ asset('uploads/' ~ item.image) }}" alt="{{ item.title }}" style="max-width: 100px; border-radius: 4px;">
+ </td>
+ </tr>
+ <tr>
+ <th>Price</th>
+ <td>{{ item.price }} €</td>
+ </tr>
+ </tbody>
+ </table>
+ <div>
+ <a href="{{ path('app_item_index') }}" class="button">Back to List</a>
+ <a href="{{ path('app_item_edit', {'id': item.id}) }}" class="button">Edit</a>
+ {{ include('item/_delete_form.html.twig') }}
+ </div>
+ </div>
+</div>
{% endblock %}
diff --git a/templates/wishlist/new.html.twig b/templates/wishlist/new.html.twig
index db732bbc..ce5df679 100644
--- a/templates/wishlist/new.html.twig
+++ b/templates/wishlist/new.html.twig
@@ -1,6 +1,6 @@
{% extends 'base.html.twig' %}
-{% block title %}Create New Wishlist{% endblock %}
+{% block title %}Item{% endblock %}
{% block stylesheets %}
{{ parent() }}
@@ -16,81 +16,43 @@
max-width: 800px;
margin: auto;
}
- .wishlist-form {
- max-width: 600px;
- margin: 0 auto;
- padding: 20px;
- background: rgba(255, 255, 255, 0.2);
+ table {
+ width: 100%;
+ background: rgba(255, 255, 255, 0.15);
+ border-collapse: collapse;
+ margin-top: 20px;
border-radius: 10px;
- border: 2px solid #99CC33;
+ overflow: hidden;
box-shadow: 0 4px 8px rgba(0,0,0,0.2);
backdrop-filter: blur(10px);
}
- .form-group {
- margin-bottom: 1.5rem;
- text-align: left;
+ th, td {
+ padding: 12px;
+ border-bottom: 1px solid rgba(255, 255, 255, 0.3);
+ color: white;
}
- .form-label {
- display: block;
- margin-bottom: 0.5rem;
- font-weight: bold;
+ th {
+ background-color: rgba(153, 204, 51, 0.7);
}
- .form-control {
- width: 100%;
- padding: 0.5rem;
+ a.button-link {
+ display: inline-block;
+ margin: 10px;
+ padding: 10px 20px;
+ text-decoration: none;
+ border-radius: 6px;
border: 2px solid #99CC33;
- border-radius: 4px;
- font-size: 1rem;
- }
- .form-check {
- display: flex;
- align-items: center;
- margin-top: 1rem;
- }
- .form-check-input {
- margin-right: 0.5rem;
- }
- .btn {
- padding: 0.5rem 1rem;
- border-radius: 4px;
- cursor: pointer;
- font-size: 1rem;
- }
- .btn-primary {
- background-color: white;
- color: #00B8DE;
- border: 2px solid #00B8DE;
- transition: 0.3s;
- }
- .btn-primary:hover {
- background-color: #99CC33;
- color: white;
- border-color: #99CC33;
- }
- .btn-secondary {
background-color: white;
color: #99CC33;
- border: 2px solid #99CC33;
- transition: 0.3s;
+ transition: all 0.3s;
}
- .btn-secondary:hover {
+ a.button-link:hover {
background-color: #00B8DE;
color: white;
border-color: #00B8DE;
}
- .form-help {
- font-size: 0.8rem;
- color: #e0e0e0;
- margin-top: 0.25rem;
- }
- .error-message {
- color: #dc3545;
- font-size: 0.875rem;
- margin-top: 0.25rem;
- }
@media (max-width: 768px) {
- .wishlist-form {
- width: 90%;
+ table, th, td {
+ font-size: 0.9rem;
}
}
</style>
@@ -98,34 +60,40 @@
{% block body %}
<div class="container">
- <h1 class="my-4">Create New Wishlist</h1>
-
- {{ form_start(form, {'attr': {'class': 'wishlist-form'}}) }}
- <div class="form-group">
- {{ form_label(form.name) }}
- {{ form_widget(form.name, {'attr': {'class': 'form-control'}}) }}
- {{ form_errors(form.name) }}
- <small class="form-help">Give your wishlist a descriptive name</small>
- </div>
+ <h1>Item Details</h1>
- <div class="form-group">
- {{ form_label(form.deadline) }}
- {{ form_widget(form.deadline, {'attr': {'class': 'form-control'}}) }}
- {{ form_errors(form.deadline) }}
- <small class="form-help">Optional - set a deadline for this wishlist</small>
- </div>
+ <table>
+ <tbody>
+ <tr>
+ <th>Id</th>
+ <td>{{ item.id }}</td>
+ </tr>
+ <tr>
+ <th>Title</th>
+ <td>{{ item.title }}</td>
+ </tr>
+ <tr>
+ <th>Description</th>
+ <td>{{ item.description }}</td>
+ </tr>
+ <tr>
+ <th>Url</th>
+ <td>{{ item.url }}</td>
+ </tr>
+ <tr>
+ <th>Image</th>
+ <td><img src="{{ asset('uploads/' ~ item.image) }}" alt="{{ item.title }}" style="max-width: 100px; border-radius: 8px;"></td>
+ </tr>
+ <tr>
+ <th>Price</th>
+ <td>{{ item.price }} €</td>
+ </tr>
+ </tbody>
+ </table>
- <div class="form-check">
- {{ form_widget(form.isDisabled, {'attr': {'class': 'form-check-input'}}) }}
- {{ form_label(form.isDisabled) }}
- {{ form_errors(form.isDisabled) }}
- </div>
- <small class="form-help">Disabled wishlists won't be visible to others</small>
+ <a href="{{ path('app_item_index') }}" class="button-link">Back to list</a>
+ <a href="{{ path('app_item_edit', {'id': item.id}) }}" class="button-link">Edit</a>
- <div class="form-group mt-4">
- <button type="submit" class="btn btn-primary">Create Wishlist</button>
- <a href="{{ path('app_wishlist_index') }}" class="btn btn-secondary ml-2">Cancel</a>
- </div>
- {{ form_end(form) }}
+ {{ include('item/_delete_form.html.twig') }}
</div>
{% endblock %}
--
GitLab