pretty modal hell yeah

src/public/css/offers.css

@@ -20,7 +20,7 @@
   }
 
   .create-offer-step {
-    width: 100%;
+    width: 95%;
   }
 
   .checkbox-row {
@@ -62,6 +62,8 @@
     margin-left: auto;
     margin-right: auto;
     width: 70%;
+    min-width: 500px;
+    max-width: 95%;
   }
 
   .checkbox-row {
@@ -80,15 +82,6 @@
     margin: 10px 10px;
     padding: 10px;
   }
-
-}
-
-#create-offer-root {
-  display: none;
-}
-
-#view-my-offers-root {
-  display: none;
 }
 
 #view-my-offers-root {
@@ -227,18 +220,22 @@
   font-size: 0.9em;
 }
 
-
-
 #create-offer-controls {
   text-align: center;
+  overflow-y: auto;
+  max-height: 800px;
+  padding: 20px;
 }
+
 .create-offer-step {
   text-align: center;
   border-radius: 20px;
   box-shadow: 0 0 13px #ccc;
   padding: 20px 0;
-  margin-top: 20px;
-  margin-bottom: 20px;
+  margin-top: 10px;
+  margin-bottom: 10px;
+  margin-left: auto;
+  margin-right: auto;
 }
 
 .create-offer-step h3 {
@@ -387,3 +384,8 @@
 #button-submit-offer {
   width: 33%;
 }
+
+#close-offer {
+  margin-left: auto;
+  margin-right:auto;
+}

src/public/css/seca.css

@@ -13,7 +13,6 @@
   }
 
   .button-medium {
-    height: 3em;
     padding: 0.5em 1em;
     border-radius: 10px;
   }
@@ -37,7 +36,6 @@
   }
 
   .button-medium {
-    height: 3em;
     padding: 1em;
     border-radius: 10px;
   }
@@ -118,6 +116,34 @@ h1 {
   height: 50px;
 }
 
+.full-screen-modal-background {
+  position: absolute;
+  width: 100%;
+  height: 100%;
+  top: 0;
+  left: 0;
+  background-color: rgba(0, 0, 0, 0.75);
+  transition: all 0.5s ease-in-out;
+  opacity: 0;
+  visibility: hidden;
+  pointer-events: none;
+}
+
+.full-screen-modal-background.shown {
+  opacity: 1;
+  visibility: visible;
+  pointer-events: all;
+}
+
+.full-screen-modal {
+  background-color: white;
+  border-radius: 20px;
+  padding: 10px;
+  width: fit-content;
+  max-width: 95%;
+  margin: 20px auto;
+}
+
 .button-group button {
   border: 0;
   padding: 1em;
@@ -197,6 +223,19 @@ h1 {
   cursor: default;
 }
 
+.button-secondary {
+  background: white;
+  border: 0;
+  color: #e1c300;
+  cursor: pointer;
+  border: 3px solid #e1c300;
+  transition: all 0.5 ease-in-out;
+}
+
+.button-secondary:hover {
+  font-weight: bold;
+}
+
 .button-large {
   font-weight: bold;
   font-size: 1.5em;

src/public/javascript/offers.js

@@ -2,8 +2,8 @@ const buttonStartCreateOffer = document.getElementById(
   'button-start-create-offer'
 );
 const buttonViewMyOffers = document.getElementById('button-view-my-offers');
-const closeOfferControls = document.getElementById('close-offer-controls-x');
-const createOfferRoot = document.getElementById('create-offer-root');
+const closeOffer = document.getElementById('close-offer');
+const createOfferModalRoot = document.getElementById('create-offer-modal-root');
 const viewMyOffersRoot = document.getElementById('view-my-offers-root');
 const buyOrSellButtonGroup = document.getElementById(
   'button-group-buy-or-sell'
@@ -48,9 +48,8 @@ const offerCreatedPopup = document.getElementById('offer-created-confirmation');
 
 const ownOffersContainer = document.getElementById('own-offers-container');
 
-function toggleCreateOfferControls() {
-  createOfferRoot.style.display =
-    createOfferRoot.style.display === 'block' ? 'none' : 'block';
+function toggleCreateOfferModal() {
+  createOfferModalRoot.classList.toggle('shown');
 }
 
 function toggleViewMyOffersPanel() {
@@ -171,7 +170,7 @@ async function publishOffer() {
     offerCreatedPopup.classList.add('max-size-zero');
   }, 4000);
 
-  toggleCreateOfferControls();
+  toggleCreateOfferModal();
 }
 
 class Offer {
@@ -575,7 +574,7 @@ class MyOffers {
 }
 
 buttonStartCreateOffer.addEventListener('click', () => {
-  toggleCreateOfferControls();
+  toggleCreateOfferModal();
 });
 
 buttonViewMyOffers.addEventListener('click', async () => {
@@ -584,8 +583,8 @@ buttonViewMyOffers.addEventListener('click', async () => {
   toggleViewMyOffersPanel();
 });
 
-closeOfferControls.addEventListener('click', () => {
-  toggleCreateOfferControls();
+closeOffer.addEventListener('click', () => {
+  toggleCreateOfferModal();
 });
 
 buyOrSellButtons.forEach((button) => {

src/views/offers.ejs

@@ -25,15 +25,9 @@
         Crear nueva oferta
       </button>
     </div>
-    <div class="over-background" id="create-offer-root">
+    <div id="create-offer-modal-root" class="full-screen-modal-background">
+      <div class="full-screen-modal" id="create-offer-root">
         <div id="create-offer-controls">
-        <div id="close-offer-controls-area">
-          <img
-            id="close-offer-controls-x"
-            src="/img/circle-xmark.svg"
-            class="clickable"
-          />
-        </div>
           <h2>Añade los detalles de tu oferta</h2>
           <div id="buy-or-sell-area" class="create-offer-step">
             <div id="button-group-buy-or-sell" class="button-group">
@@ -179,10 +173,17 @@
             </div>
           </div>
           <div id="submit-button-area">
-          <button id="button-submit-offer" class="button-primary button-large">
+            <button
+              id="button-submit-offer"
+              class="button-primary button-large"
+            >
               Publicar oferta
             </button>
           </div>
+          <div id="close-offer-controls-area">
+            <button id="close-offer" class="button-secondary button-medium">Volver</button>
+          </div>
+        </div>
       </div>
     </div>
     <div class="over-background" id="view-my-offers-root">