From 56a18783295b111bddef44a30c1ac07a04e02428 Mon Sep 17 00:00:00 2001
From: Firas <firas.bouzazi@imt-atlantique.net>
Date: Wed, 26 Mar 2025 00:23:53 +0100
Subject: [PATCH] view changed
---
templates/wishlist/index.html.twig | 144 +++++++++++++++++++++++------
templates/wishlist/new.html.twig | 56 ++++++++---
2 files changed, 161 insertions(+), 39 deletions(-)
diff --git a/templates/wishlist/index.html.twig b/templates/wishlist/index.html.twig
index 8c24818b..af98d2ce 100644
--- a/templates/wishlist/index.html.twig
+++ b/templates/wishlist/index.html.twig
@@ -1,34 +1,124 @@
-
{% extends 'base.html.twig' %}
{% block title %} My Wishlists {% endblock %}
+{% block body %}
+<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;
+ display: flex;
+ flex-direction: column;
+ gap: 15px;
+ }
+ header {
+ display: flex;
+ justify-content: space-between;
+ align-items: center;
+ padding: 10px;
+ }
+ .search-bar {
+ padding: 8px;
+ border-radius: 8px;
+ border: 2px solid #99CC33;
+ }
+ .add-wishlist-btn {
+ background: white;
+ color: #00B8DE;
+ padding: 10px 15px;
+ text-decoration: none;
+ border-radius: 8px;
+ font-weight: bold;
+ transition: 0.3s;
+ display: inline-block;
+ margin: 15px 0;
+ }
+ .add-wishlist-btn:hover {
+ background: #99CC33;
+ color: white;
+ transform: scale(1.1);
+ }
+ .wishlist {
+ background: rgba(255, 255, 255, 0.2);
+ padding: 15px;
+ border-radius: 10px;
+ border: 2px solid #99CC33;
+ box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
+ width: 100%;
+ max-width: 600px;
+ margin: auto;
+ }
+ .wishlist h2 {
+ margin: 10px 0;
+ }
+ .wishlist-items {
+ display: flex;
+ gap: 10px;
+ justify-content: center;
+ flex-wrap: wrap;
+ }
+ .wishlist-item {
+ background: white;
+ color: #00B8DE;
+ padding: 10px;
+ border-radius: 5px;
+ font-size: 1.5em;
+ }
+ .wishlist-actions {
+ display: flex;
+ gap: 10px;
+ justify-content: center;
+ margin-top: 10px;
+ }
+ .wishlist-actions button {
+ background: white;
+ border: none;
+ padding: 10px;
+ border-radius: 5px;
+ cursor: pointer;
+ transition: 0.3s;
+ }
+ .wishlist-actions button:hover {
+ background: #99CC33;
+ color: white;
+ }
+ @media (max-width: 768px) {
+ .wishlist {
+ width: 90%;
+ }
+ }
+</style>
-{% block body %}
- <header>
- <div class="user-icon"></div>
- <h1>My Wishlists</h1>
- <input type="text" class="search-bar" placeholder="Search...">
- </header>
-
- <a href="{{ path('app_wishlist_new') }}" class="add-wishlist-btn">Add wishlist</a> </div>
-
- <div class="container">
- {% for wishlist in wishlists %}
- <div class="wishlist">
- <h2>{{ wishlist.name }}</h2>
- <div class="wishlist-items">
- {% for item in wishlist.items %}
- <div class="wishlist-item">📷</div>
- {% endfor %}
- </div>
- <p class="wishlist-footer">{{wishlist.deadline}}</p>
- <div class="wishlist-actions">
- <button title="Share wishlist">↗</button>
- <button title="Edit title">✏</button>
- <button title="Delete wishlist">🗑</button>
- </div>
- </div>
+<header>
+ <div class="user-icon"></div>
+ <h1>My Wishlists</h1>
+ <input type="text" class="search-bar" placeholder="Search...">
+</header>
+
+<a href="{{ path('app_wishlist_new') }}" class="add-wishlist-btn">Add wishlist</a>
+
+<div class="container">
+ {% for wishlist in wishlists %}
+ <div class="wishlist">
+ <h2>{{ wishlist.name }}</h2>
+ <div class="wishlist-items">
+ {% for item in wishlist.items %}
+ <div class="wishlist-item">📷</div>
{% endfor %}
+ </div>
+ <div class="wishlist-actions">
+ <button title="Share wishlist">↗</button>
+ <button title="Edit title">✏</button>
+ <button title="Delete wishlist">🗑</button>
+ </div>
</div>
- {% endblock %}
+ {% endfor %}
+</div>
+{% endblock %}
diff --git a/templates/wishlist/new.html.twig b/templates/wishlist/new.html.twig
index 08e16bc8..db732bbc 100644
--- a/templates/wishlist/new.html.twig
+++ b/templates/wishlist/new.html.twig
@@ -1,4 +1,3 @@
-{# templates/wishlist/new.html.twig #}
{% extends 'base.html.twig' %}
{% block title %}Create New Wishlist{% endblock %}
@@ -6,16 +5,30 @@
{% 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;
+ }
.wishlist-form {
max-width: 600px;
margin: 0 auto;
padding: 20px;
- background-color: #f8f9fa;
- border-radius: 8px;
- box-shadow: 0 0 10px rgba(0,0,0,0.1);
+ background: rgba(255, 255, 255, 0.2);
+ border-radius: 10px;
+ border: 2px solid #99CC33;
+ box-shadow: 0 4px 8px rgba(0,0,0,0.2);
+ backdrop-filter: blur(10px);
}
.form-group {
margin-bottom: 1.5rem;
+ text-align: left;
}
.form-label {
display: block;
@@ -25,7 +38,7 @@
.form-control {
width: 100%;
padding: 0.5rem;
- border: 1px solid #ced4da;
+ border: 2px solid #99CC33;
border-radius: 4px;
font-size: 1rem;
}
@@ -44,16 +57,30 @@
font-size: 1rem;
}
.btn-primary {
- background-color: #007bff;
- color: white;
- border: none;
+ background-color: white;
+ color: #00B8DE;
+ border: 2px solid #00B8DE;
+ transition: 0.3s;
}
.btn-primary:hover {
- background-color: #0069d9;
+ background-color: #99CC33;
+ color: white;
+ border-color: #99CC33;
+ }
+ .btn-secondary {
+ background-color: white;
+ color: #99CC33;
+ border: 2px solid #99CC33;
+ transition: 0.3s;
+ }
+ .btn-secondary:hover {
+ background-color: #00B8DE;
+ color: white;
+ border-color: #00B8DE;
}
.form-help {
font-size: 0.8rem;
- color: #6c757d;
+ color: #e0e0e0;
margin-top: 0.25rem;
}
.error-message {
@@ -61,6 +88,11 @@
font-size: 0.875rem;
margin-top: 0.25rem;
}
+ @media (max-width: 768px) {
+ .wishlist-form {
+ width: 90%;
+ }
+ }
</style>
{% endblock %}
@@ -92,8 +124,8 @@
<div class="form-group mt-4">
<button type="submit" class="btn btn-primary">Create Wishlist</button>
- <a href="{{ path('wishlist_index') }}" class="btn btn-secondary ml-2">Cancel</a>
+ <a href="{{ path('app_wishlist_index') }}" class="btn btn-secondary ml-2">Cancel</a>
</div>
{{ form_end(form) }}
</div>
-{% endblock %}
\ No newline at end of file
+{% endblock %}
--
GitLab