stuff

src/public/css/offers.css

@@ -1,6 +1,5 @@
 @media (max-width: 768px) {
   #offers-root {
-    width: 100%;
     margin: 10px 10px;
   }
 
@@ -11,6 +10,19 @@
   #premium-selector-area {
     width: 60px;
   }
+
+  #create-offer-controls > * {
+    width: 100%;
+  }
+
+  .checkbox-row {
+    width: 90%;
+  }
+
+  .checkbox-row > input[type='checkbox'] {
+    flex-shrink: 0;
+    margin-left: 5%;
+  }
 }
 
 @media (min-width: 769px) {
@@ -26,13 +38,25 @@
   #premium-selector-area {
     width: 100px;
   }
+
+  #create-offer-controls > * {
+    margin-left: 15%;
+    margin-right: 15%;
+    width: 70%;
+  }
+
+  .checkbox-row {
+    width: 60%;
+  }
+
+  .checkbox-row > input[type='checkbox'] {
+    flex-shrink: 0;
+    margin-left: 20%;
+  }
 }
 
 #create-offer-controls > * {
   text-align: center;
-  margin-left: 15%;
-  margin-right: 15%;
-  width: 70%;
 }
 
 #close-offer-controls-area {
@@ -120,18 +144,20 @@
 
 .checkbox-row {
   display: flex;
-  width: 25%;
   margin-left: auto;
   margin-right: auto;
 }
 .checkbox-row > label {
   text-align: start;
+  margin-right: auto;
   margin-left: 0;
   align-content: center;
 }
 
 .checkbox-row > input[type='checkbox'] {
-  margin-left: 20%;
+  flex-shrink: 0;
+  margin-right: 1em;
   height: 2em;
   width: 2em;
 }
+

src/public/css/seca.css

@@ -21,7 +21,7 @@
 
 @media (min-width: 769px) {
   html {
-    font-size: 20px;
+    font-size: 16px;
   }
 
   .font-medium {

src/views/offers.ejs

@@ -116,37 +116,45 @@
           </p>
         </div>
         <div id="trust-area">
-          <p>¿Quién puede ver la oferta?</p>
-          <label for="my-trusted">Mis confiados</label
-          ><input
-            type="checkbox"
-            name="my-trusted"
-            id="my-trusted-checkbox"
-            checked
-            disabled
-          />
-          <label for="my-trusted-trusted">Los confiados de mis confiados</label
-          ><input
-            type="checkbox"
-            name="my-trusted-trusted"
-            id="my-trusted-trusted-checkbox"
-            checked
-          />
-          <label for="all-members">Todos los miembros</label
-          ><input
-            type="checkbox"
-            name="all-members"
-            id="all-members-checkbox"
-          />
+          <h3>¿Quién puede ver la oferta?</h3>
+          <div id="my-trusted-area" class="checkbox-row">
+            <input
+              type="checkbox"
+              name="my-trusted"
+              id="my-trusted-checkbox"
+              checked
+              disabled
+            /><label for="my-trusted">Mis confiados</label>
+          </div>
+          <div id="my-trusted-trusted-area" class="checkbox-row">
+            <input
+              type="checkbox"
+              name="my-trusted-trusted"
+              id="my-trusted-trusted-checkbox"
+              checked
+            /><label for="my-trusted-trusted"
+              >Los confiados de mis confiados</label
+            >
+          </div>
+          <div id="all-members-area" class="checkbox-row">
+            <input
+              type="checkbox"
+              name="all-members"
+              id="all-members-checkbox"
+            /><label for="all-members">Todos los miembros</label>
+          </div>
         </div>
         <div id="other-area">
-          <label for="large-bills"
-            >Se pueden usar billetes grandes (100€, 200€, 500€)</label
-          ><input
-            type="checkbox"
-            name="large-bills"
-            id="large-bills-checkbox"
-          />
+          <h3>Extras</h3>
+          <div id="large-bills-area" class="checkbox-row">
+            <input
+              type="checkbox"
+              name="large-bills"
+              id="large-bills-checkbox"
+            /><label for="large-bills"
+              >Se pueden usar billetes grandes (100€, 200€, 500€)</label
+            >
+          </div>
         </div>
         <button id="button-submit-offer" class="button-primary" disabled>
           Publicar oferta