From 0c6ad8bd8552e71c03a6658f31ae08831a47ab5e Mon Sep 17 00:00:00 2001
From: counterweight <counterweightoperator@protonmail.com>
Date: Mon, 3 Mar 2025 10:53:18 +0100
Subject: [PATCH] descriptions

---
 src/public/css/offers.css       |  6 ++++++
 src/public/css/seca.css         |  6 ++++++
 src/public/javascript/offers.js | 18 +++++++++++++++---
 3 files changed, 27 insertions(+), 3 deletions(-)

diff --git a/src/public/css/offers.css b/src/public/css/offers.css
index 0aa1945..65fe5e2 100644
--- a/src/public/css/offers.css
+++ b/src/public/css/offers.css
@@ -91,6 +91,12 @@
   margin-bottom: 5px;
 }
 
+.myoffer-card > div {
+  max-width: 200px;
+  display: inline-block;
+  padding: 5px;
+}
+
 #create-offer-controls {
   text-align: center;
 }
diff --git a/src/public/css/seca.css b/src/public/css/seca.css
index 28962f0..07f3895 100644
--- a/src/public/css/seca.css
+++ b/src/public/css/seca.css
@@ -162,6 +162,12 @@ h1 {
   box-shadow: 0 0 13px #ccc;
   padding: 20px;
 }
+
+.subtle-box {
+  border-radius: 10px;
+  border: 1px solid rgb(202, 202, 202);
+}
+
 #login-card > * {
   text-align: center;
   margin-right: auto;
diff --git a/src/public/javascript/offers.js b/src/public/javascript/offers.js
index 4c5c552..18ac641 100644
--- a/src/public/javascript/offers.js
+++ b/src/public/javascript/offers.js
@@ -253,17 +253,29 @@ class MyOffers {
         visibilityDescription += ', todos los miembros';
       }
 
+      const whereAndWhenDescription = `Te va bien quedar: ${someOffer.location_details} | ${someOffer.time_availability_details}.`;
+
+      let otherDescription = '';
+      if (someOffer.are_big_notes_accepted) {
+        otherDescription += 'Se aceptan billetes grandes (100, 200, 500).';
+      }
       offersHTML += `
         <div class="shadowed-round-area myoffer-card">
-          <div class="trade-description">
+          <div class="subtle-box trade-description">
             ${tradeDescription}
           </div>
-          <div class="payment-methods-description">
+          <div class="subtle-box payment-methods-description">
             ${paymentMethodsDescription}
           </div>
-          <div class="visibility-description">
+          <div class="subtle-box visibility-description">
             ${visibilityDescription}
           </div>
+          <div class="subtle-box">
+            ${whereAndWhenDescription}
+          </div>
+          <div class="subtle-box">
+            ${otherDescription}
+          </div>
         </div>
         <div class="shadowed-round-area myoffer-card">
           <ul>