Badge preview

Ekaterina-Vititneva · Aug 10, 2024 · 242b982 · 242b982
1 parent 2c65c66
commit 242b982
Show file tree

Hide file tree

Showing 4 changed files with 28 additions and 4 deletions.
diff --git a/project_2/commerce/auctions/static/auctions/styles.css b/project_2/commerce/auctions/static/auctions/styles.css
@@ -36,13 +36,25 @@ body {
     margin: 12px;
     border-radius: 8px;
     color: black;
+    text-decoration: none !important;
 }
 
 .card:hover {
     text-decoration: none;
     box-shadow: 0 0 10px rgba(0, 0, 0, 0.3);
 }
 
+.card-price {
+    display: flex;
+    flex-direction: row;
+}
+
+.card-statuse {
+    margin: 0 10px 0 10px;
+    padding: 0 10px 0 10px;
+    align-self: flex-end;
+}
+
 .listing-image {
     border-radius: 8px 8px 0px 0px;
     width: 100%;
@@ -140,5 +152,8 @@ body {
     justify-content: space-between;
 }
 
+.badge {
+    opacity: 85%;
+}
 
 
diff --git a/project_2/commerce/auctions/templates/auctions/category_listings.html b/project_2/commerce/auctions/templates/auctions/category_listings.html
@@ -6,7 +6,7 @@ <h2> {{ category }} </h2>
 
     <div class="listings-grid">
         {% for listing in listings %}
-            <a class="listing-card-link" href="{% url 'listing' listing.title %}">
+            <a class="listing-card-link link-offset-2 link-underline link-underline-opacity-0" href="{% url 'listing' listing.title %}">
                 <div class="card" style="width: 18rem;">
                     {% if listing.imageURL %}
                         <img src= "{{ listing.imageURL }}" alt="listing image" height="200" class="listing-image">

diff --git a/project_2/commerce/auctions/templates/auctions/index.html b/project_2/commerce/auctions/templates/auctions/index.html
@@ -6,7 +6,7 @@ <h2>Active Listings</h2>
 
     <div class="listings-grid">
         {% for listing in listings %}
-            <a class="listing-card-link" href="{% url 'listing' listing.title %}">
+            <a class="listing-card-link link-offset-2 link-underline link-underline-opacity-0" href="{% url 'listing' listing.title %}">
                 <div class="card" style="width: 18rem;">
                     {% if listing.imageURL %}
                         <img src= "{{ listing.imageURL }}" alt="listing image" height="200" class="listing-image">
@@ -15,7 +15,16 @@ <h2>Active Listings</h2>
                     {% endif %}
                     <div class="card-body">
                         <h5 class="card-title">{{ listing.title }}</h5>
-                        <h6 class="card-subtitle mb-2 text-body">Price: {{ listing.bid }}€</h6>
+                        <div class="card-price">
+                            <h6 class="card-subtitle mb-2 text-body">Price: {{ listing.bid }}€</h6>
+                            <div class="card-statuse">
+                                {%if listing.active%}
+                                    <span class="badge text-bg-success">Active</span>
+                                {% else %}
+                                    <span class="badge text-bg-danger">Closed</span>
+                                {% endif %}
+                            </div>
+                        </div>
                         <p class="card-text">{{ listing.description }}</p>
                     </div>
                     <div class="card-footer text-body-secondary">

diff --git a/project_2/commerce/auctions/templates/auctions/watchlist.html b/project_2/commerce/auctions/templates/auctions/watchlist.html
@@ -6,7 +6,7 @@ <h2>Watchlist</h2>
 
     <div class="listings-grid">
         {% for listing in listings %}
-            <a class="listing-card-link" href="{% url 'listing' listing.title %}">
+            <a class="listing-card-link link-offset-2 link-underline link-underline-opacity-0" href="{% url 'listing' listing.title %}">
                 <div class="card" style="width: 18rem;">
                     {% if listing.imageURL %}
                         <img src= "{{ listing.imageURL }}" alt="listing image" height="200" class="listing-image">