descriptions

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;
 }

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;

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>