clean up

shop/migrations/0013_color_colorhex_alter_color_name.py

@@ -0,0 +1,23 @@
+# Generated by Django 4.2.11 on 2025-03-19 19:00
+
+from django.db import migrations, models
+
+
+class Migration(migrations.Migration):
+
+    dependencies = [
+        ('shop', '0012_order_payment_status_and_more'),
+    ]
+
+    operations = [
+        migrations.AddField(
+            model_name='color',
+            name='colorHex',
+            field=models.CharField(default='#FFFFFF', help_text='Color in hex format (e.g. #FF0000)', max_length=7),
+        ),
+        migrations.AlterField(
+            model_name='color',
+            name='name',
+            field=models.CharField(max_length=20, unique=True),
+        ),
+    ]

shop/models.py

@@ -29,7 +29,8 @@ class CutChoices(models.IntegerChoices):
     KIDS = 3, 'Kids'
 
 class Color(models.Model):
-    name = models.CharField(max_length=20, choices=ColorChoices.choices, unique=True)
+    name = models.CharField(max_length=20, unique=True)
+    colorHex = models.CharField(max_length=7, default="#FFFFFF", help_text="Color in hex format (e.g. #FF0000)")
 
     def __str__(self):
         return self.name

shop/static/shop/css/shop.css

@@ -1,7 +1,7 @@
 /* Product Display */
 .options-container {
     display: grid;
-    grid-template-columns: 1fr 1fr 1fr;
+    grid-template-columns: 1fr 0.35fr 0.35fr;
     column-gap: 8px;
     align-content: center;
 }
@@ -34,13 +34,13 @@
 }
 
 .option-element:nth-child(1) {
-    grid-column: 1 / span 2;
+    grid-column: 1;
     grid-row: 1;
     height: 64px;
 }
 
 .option-element:nth-child(2) {
-    grid-column: 3;
+    grid-column: 2 / span 3;
     grid-row: 1;
     text-align: right;
 }
@@ -61,12 +61,12 @@
 }
 
 .option-element:nth-child(6) {
-    grid-column: 1 / span 2;
+    grid-column: 1;
     grid-row: 3;
 }
 
 .option-element:nth-child(7) {
-    grid-column: 3;
+    grid-column: 2 / span 3;
     grid-row: 3;
     text-align: right;
 }
@@ -90,12 +90,13 @@
     width: 100%;
     text-align: center;
     display: inline-block;
-    height: 40px;
+    height: 36px;
 }
 
 .checkout-button {
     padding: 10px 20px;
     display: inline-block;
+    height: 36px;
 }
 
 .confirm-nav-button {
@@ -308,3 +309,23 @@
     color: #e84039;
     text-decoration: underline;
 }
+
+.color-samples {
+    display: flex;
+    margin-bottom: 12px;
+    gap: 0px 8px;
+    vertical-align: middle;
+    align-items: center;
+}
+
+.color-sample {
+    width: 32px;
+    aspect-ratio: 1;
+    border-radius: 50%;
+    cursor: pointer;
+    border: 1px solid #ddd;
+}
+
+.color-sample:hover {
+    transform: scale(1.1);
+}

shop/templates/shop/cart.html

@@ -18,7 +18,7 @@
   {% endif %}
 </nav>
 <div class="grid-x">
-  <div class="cell medium-6 large-6 my-block">
+  <div class="cell medium-9 large-8 my-block">
     <h1 class="club my-block topmargin20">Votre panier</h1>
     <div class="bubble">
       {% if cart_items %}
@@ -30,7 +30,7 @@
             <th>Taille</th>
             <th>Quantité</th>
             <th class="price-column">Prix</th>
-            <th>Actions</th>
+            <th></th>
           </tr>
         </thead>
         <tbody>
@@ -55,7 +55,7 @@
               <form method="post" action="{% url 'shop:remove_from_cart' %}" class="remove-form">
                 {% csrf_token %}
                 <input type="hidden" name="item_id" value="{{ item.id }}">
-                <button type="submit" class="remove-btn">Supprimer</button>
+                <button type="submit" class="remove-btn">retirer</button>
               </form>
             </td>
           </tr>

shop/templates/shop/product_item.html

@@ -8,19 +8,28 @@
         <form method="post" action="{% url 'shop:add_to_cart' product.id %}" class="add-to-cart-form">
             {% csrf_token %}
             <div class="options-container">
-                <div class="option-element product-title">{{ product.title }}</div>
+                <div class="option-element product-title">
+                    {{ product.title }}
+                    <div class="color-label"><span id="selected-color-name-{{ product.id }}">{{ product.colors.all.0.name }}</span></div>
+                </div>
                 <div class="option-element product-price">{{ product.price }} €</div>
                 <div class="option-element form-group">
                     {% if product.colors.exists %}
-                    <select name="color" id="color-{{ product.id }}" class="form-control" required>
+                    <input type="hidden" name="color" id="color-{{ product.id }}" value="{{ product.colors.all.0.id }}" required>
-                        <option value="" disabled selected>Couleur</option>
+                    <div class="color-samples">
                         {% for color in product.colors.all %}
-                        <option value="{{ color.id }}" {% if forloop.first %}selected{% endif %}>{{ color.name }}</option>
+                        <div class="color-sample {% if forloop.first %}selected{% endif %}"
+                             style="background-color: {{ color.colorHex }}"
+                             title="{{ color.name }}"
+                             data-color-id="{{ color.id }}"
+                             data-color-name="{{ color.name }}"
+                             onclick="selectColor('{{ product.id }}', '{{ color.id }}', '{{ color.name }}', this)"></div>
                         {% endfor %}
-                    </select>
+                    </div>
                     {% endif %}
                 </div>
 
+
                 <div class="option-element form-group">
                     {% if product.sizes.exists %}
                     <select name="size" id="size-{{ product.id }}" class="form-control" required>
@@ -53,4 +62,20 @@ function updateTotal(productId, price) {
 
     totalPriceElement.textContent = totalPrice;
 }
+
+function selectColor(productId, colorId, colorName, element) {
+    // Update hidden input value
+    document.getElementById(`color-${productId}`).value = colorId;
+
+    // Update displayed color name
+    document.getElementById(`selected-color-name-${productId}`).textContent = colorName;
+
+    // Remove selected class from all colors
+    const colorSamples = element.parentElement.querySelectorAll('.color-sample');
+    colorSamples.forEach(sample => sample.classList.remove('selected'));
+
+    // Add selected class to clicked color
+    element.classList.add('selected');
+}
+
 </script>

tournaments/templates/register_tournament.html

@@ -109,9 +109,21 @@
           {% endif %}
 
           <div class="margin10">
-          {% for message in messages %}
+              {% if form.errors %}
-            <div class="alert alert-{{ message.tags }}">{{ message }}</div>
+              <div class="alert alert-error">
+                  {% if form.non_field_errors %}
+                      {% for error in form.non_field_errors %}
+                          <p>{{ error }}</p>
                       {% endfor %}
+                  {% endif %}
+
+                  {% for field in form %}
+                      {% for error in field.errors %}
+                          <p>{{ error }}</p>
+                      {% endfor %}
+                  {% endfor %}
+              </div>
+              {% endif %}
           </div>
 
           <button type="submit" name="add_player" class="rounded-button">