feat: add last styles

auctions/forms.py

@@ -15,6 +15,9 @@ def __init__(self, *args, **kwargs):
 
         super(NewBid, self).__init__(*args, **kwargs)
 
+        for key, field in self.fields.items():
+            field.label = ""
+
     def clean(self):
         value = self.cleaned_data['value']
         if value <= self.item.price:
@@ -31,6 +34,11 @@ class Meta:
 
 
 class NewComment(forms.ModelForm):
+    def __init__(self, *args, **kwargs):
+        super().__init__(*args, **kwargs)
+        for key, field in self.fields.items():
+            field.label = ""
+
     class Meta:
         model = Comment
         fields = ['text']

auctions/migrations/0009_rename_text_comment_comment.py

@@ -0,0 +1,18 @@
+# Generated by Django 4.1.5 on 2023-02-07 14:05
+
+from django.db import migrations
+
+
+class Migration(migrations.Migration):
+
+    dependencies = [
+        ('auctions', '0008_listing_favorite'),
+    ]
+
+    operations = [
+        migrations.RenameField(
+            model_name='comment',
+            old_name='text',
+            new_name='comment',
+        ),
+    ]

auctions/migrations/0010_rename_comment_comment_text.py

@@ -0,0 +1,18 @@
+# Generated by Django 4.1.5 on 2023-02-07 14:12
+
+from django.db import migrations
+
+
+class Migration(migrations.Migration):
+
+    dependencies = [
+        ('auctions', '0009_rename_text_comment_comment'),
+    ]
+
+    operations = [
+        migrations.RenameField(
+            model_name='comment',
+            old_name='comment',
+            new_name='text',
+        ),
+    ]

auctions/static/auctions/styles.css

@@ -7,6 +7,10 @@ body {
   margin-top: 69px; /* Add a top margin to avoid content overlay */
 }
 
+h2 {
+    padding: 15px 0;
+}
+
 /* Layout */
 .nav-item:hover {
     font-weight: 500;
@@ -106,7 +110,45 @@ body {
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
-   -webkit-line-clamp: 4; /* number of lines to show */
-           line-clamp: 4;
+   -webkit-line-clamp: 3; /* number of lines to show */
+           line-clamp: 3;
    -webkit-box-orient: vertical;
+}
+
+
+/* Listing */
+.details {
+    display: flex;
+    flex-direction: row;
+    gap: 50px;
+}
+
+.details-img {
+    width: 50%;
+}
+
+.details-text {
+    list-style-type: none;
+    margin: 0;
+    padding: 0;
+}
+
+.details-price {
+    font-size: 26px;
+}
+
+.details-bid {
+    padding: 40px 0 0 0;
+}
+
+textarea {
+    width: 100%;
+    height: 100px;
+}
+
+.details-comment {
+    padding: 20px;
+    margin: 10px;
+    border-radius: 15px;
+    box-shadow: rgba(0, 0, 0, 0.05) 0px 6px 24px 0px, rgba(0, 0, 0, 0.08) 0px 0px 0px 1px;
 }

auctions/templates/auctions/index.html

@@ -22,6 +22,10 @@ <h5 class="card-title">
                             <div>
                                 <p class="card-description">{{ listing.description }}</p>
                             </div>
+
+                            <div>
+                                by {{ listing.seller }}
+                            </div>
                         </div>
                     </li>
                  </a>

auctions/templates/auctions/listing.html

@@ -1,70 +1,81 @@
 {% extends "auctions/layout.html" %}
 
 {% block body %}
-    {% if user.is_authenticated %}
-        {% if listing.seller != user %}
-            {% if is_favorite %}
-                <a href="{% url 'favorite' listing.id %}">Remove from watchlist</a>
-            {% elif listing.active %}
-                <a href="{% url 'favorite' listing.id %}">Add to watchlist</a>
-            {% endif %}
+    <div class="details">
+        <img class="details-img" src="{{ listing.photo_url }}">
+
+        <div>
+            {% if user.is_authenticated %}
+                {% if listing.seller != user %}
+                    {% if is_favorite %}
+                        <a href="{% url 'favorite' listing.id %}">Remove from watchlist</a>
+                    {% elif listing.active %}
+                        <a href="{% url 'favorite' listing.id %}">Add to watchlist</a>
+                    {% endif %}
 
-            {% if bidings and last_bid.buyer == user %}
-                <h5>You won this auction!</h5>
+                    {% if bidings and last_bid.buyer == user and not listing.active %}
+                        <h5>You won this auction!</h5>
+                    {% endif %}
+
+                {% elif listing.active %}
+                    <a href="{% url 'close' listing.id %}">Close auction</a>
+                {% endif %}
             {% endif %}
 
-        {% elif listing.active %}
-            <a href="{% url 'close' listing.id %}">Close auction</a>
-        {% endif %}
-    {% endif %}
 
-    <h2>{{ listing.title }}</h2>
-    <img src="{{ listing.photo_url }}" width="256">
-    <ul>
-        <li>Description: {{ listing.description }}</li>
-        <li>Seller: {{ listing.seller }}</li>
-        {% if listing.category %}
-            <li>Category: {{ listing.category }}</li>
-        {% else %}
-            <li>Category: Category not listed</li>
-        {% endif %}
-        <li>Price: {{ listing.price }}</li>
-    </ul>
+            <h2>{{ listing.title }}</h2>
+
+            <ul class="details-text">
+                <li><strong>Description:</strong> {{ listing.description }}</li>
+                <li><strong>Seller:</strong> {{ listing.seller }}</li>
+                {% if listing.category %}
+                    <li><strong>Category:</strong> {{ listing.category }}</li>
+                {% else %}
+                    <li><strong>Category not listed</li>
+                {% endif %}
+                <li class="details-price" ><strong>Price:</strong> {{ listing.price }}</li>
+            </ul>
 
-    {% if listing.active %}
-        <h2>Place bid</h2>
-        <form action="{% url 'listing' listing.id %}" method="post">
-            {% csrf_token %}
-            {{ bid_form }}
-            <input type="submit" name="bid">
-        </form>
+            {% if listing.active %}
+                <div class="details-bid">
+                    <h3>Place bid</h3>
+                    <form action="{% url 'listing' listing.id %}" method="post">
+                        {% csrf_token %}
+                        {{ bid_form }}
+                        <input type="submit" name="bid">
+                    </form>
+                </div>
+            {% endif %}
+        </div>
+    </div>
+
+    <div>
+        {% if listing.active %}
+            <h2>Comments</h2>
+
+            <form action="{% url 'listing' listing.id %}" method="post">
+                {% csrf_token %}
+                {{ comment_form }}
+                <input type="submit" name="comment">
+            </form>
 
-        <h2>Comments</h2>
-        <form action="{% url 'listing' listing.id %}" method="post">
-            {% csrf_token %}
-            {{ comment_form }}
-            <input type="submit" name="comment">
-        </form>
-        <ul>
             {% for comment in comments %}
-                <li>{{ comment }}</li>
+                <div class="details-comment">
+                    <div><strong>{{ comment.user }}</strong></div>
+                    <div>{{ comment.text }}</div>
+                </div>
             {% endfor %}
-        </ul>
-    {% else %}
-        <h2>Comments</h2>
-        <ul>
+
+        {% else %}
+            <h2>Comments</h2>
+
             {% for comment in comments %}
-                <li>{{ comment }}</li>
+                <div class="details-comment">
+                    <div><strong>{{ comment.user }}</strong></div>
+                    <div>{{ comment.text }}</div>
+                </div>
             {% endfor %}
-        </ul>
-    {% endif %}
 
-    <h2>Bidings</h2>
-    <ul>
-        {% for bid in bidings %}
-            <li>{{ bid }}</li>
-        {% empty %}
-            <li>Minimal bid: {{ listing.initial_bid }}</li>
-        {% endfor %}
-    </ul>
+        {% endif %}
+    </div>
 {% endblock %}