feat: start styles

LucasFASouza · Feb 5, 2023 · 97fa0cf · 97fa0cf
1 parent 8bf9627
commit 97fa0cf
Show file tree

Hide file tree

Showing 4 changed files with 43 additions and 14 deletions.
diff --git a/auctions/static/auctions/styles.css b/auctions/static/auctions/styles.css
@@ -3,5 +3,28 @@ body {
 }
 
 .listing {
-    background-color: red;
+    list-style-type: none;
+    display: flex;
+    flex-direction: row;
+    flex-wrap: wrap;
 }
+
+.listing-card {
+    width: 256px;
+    height: 384px;
+    padding: 30px;
+}
+
+.card-image {
+    width: 100%;
+    height: 100%;
+}
+
+.description {
+   overflow: hidden;
+   text-overflow: ellipsis;
+   display: -webkit-box;
+   -webkit-line-clamp: 2; /* number of lines to show */
+           line-clamp: 2;
+   -webkit-box-orient: vertical;
+}
diff --git a/auctions/templates/auctions/index.html b/auctions/templates/auctions/index.html
@@ -3,14 +3,17 @@
 {% block body %}
     <h2>Active Listings</h2>
 
-     <ul>
+     <ul class="listing">
         {% for listing in listings %}
             {% if listing.active %}
-                <li>
-                    <img src="{{ listing.photo_url }}" width="128">
+                <li class="listing-card">
+                    <img class="card-img" src="{{ listing.photo_url }}">
                     <div>
                         <a href="{% url 'listing' listing.id %}">{{ listing.title }}:</a>
-                        {{ listing.description }}, by {{ listing.seller }} - $ {{ listing.price }}
+                         <strong>$ {{ listing.price }}</strong>
+                    </div>
+                    <div>
+                        <p class="description">{{ listing.description }}</p>
                     </div>
                 </li>
              {% endif %}

diff --git a/auctions/templates/auctions/layout.html b/auctions/templates/auctions/layout.html
@@ -44,10 +44,10 @@ <h6>Categories</h6>
                 <a class="nav-link" href="{% url 'categories' 'Home' %}">Home</a>
             </li>
             <li class="nav-item">
-                <a class="nav-link" href="{% url 'categories' 'Fashion' %}">Fashion</a>
+                <a class="nav-link" href="{% url 'categories' 'Electronics' %}">Electronics</a>
             </li>
             <li class="nav-item">
-                <a class="nav-link" href="{% url 'categories' 'Electronics' %}">Electronics</a>
+                <a class="nav-link" href="{% url 'categories' 'Toys' %}">Toys</a>
             </li>
             <li class="nav-item">
                 <a class="nav-link" href="{% url 'categories' 'Other' %}">Other</a>

diff --git a/auctions/templates/auctions/listing.html b/auctions/templates/auctions/listing.html
@@ -2,16 +2,19 @@
 
 {% block body %}
     {% if user.is_authenticated %}
-        {% if listing.active %}
-            {% if listing.seller == user %}
-                <a href="{% url 'close' listing.id %}">Close auction</a>
-            {% elif is_favorite %}
+        {% if listing.seller != user %}
+            {% if is_favorite %}
                 <a href="{% url 'favorite' listing.id %}">Remove from watchlist</a>
-            {% else %}
+            {% elif listing.active %}
                 <a href="{% url 'favorite' listing.id %}">Add to watchlist</a>
             {% endif %}
-        {% elif bidings and last_bid.buyer == user %}
-            <h5>You won this auction!</h5>
+
+            {% if bidings and last_bid.buyer == user %}
+                <h5>You won this auction!</h5>
+            {% endif %}
+
+        {% elif listing.active %}
+            <a href="{% url 'close' listing.id %}">Close auction</a>
         {% endif %}
     {% endif %}