diff --git a/src/public/css/offers.css b/src/public/css/offers.css index 5dd99d8..7c8590d 100644 --- a/src/public/css/offers.css +++ b/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 { @@ -110,7 +103,7 @@ .myoffer-card { display: grid; grid-template-columns: 48% 4% 48%; - grid-template-rows: 25% 1% 30% 1% 18% 1% 14% 1% 10%; + grid-template-rows: 25% 1% 30% 1% 18% 1% 14% 1% 10%; } .myoffer-card > div { @@ -180,7 +173,7 @@ grid-row: 3; text-align: left; overflow-y: auto; - overflow-x: hidden; + overflow-x: hidden; } .when-desc { @@ -188,7 +181,7 @@ grid-row: 3; text-align: right; overflow-y: auto; - overflow-x: hidden; + overflow-x: hidden; } .bitcoin-methods-desc { @@ -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; +} \ No newline at end of file diff --git a/src/public/css/seca.css b/src/public/css/seca.css index 07f3895..23b4802 100644 --- a/src/public/css/seca.css +++ b/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; diff --git a/src/public/javascript/offers.js b/src/public/javascript/offers.js index 7eace3b..3f352ac 100644 --- a/src/public/javascript/offers.js +++ b/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) => { diff --git a/src/views/offers.ejs b/src/views/offers.ejs index 4b16445..e96425f 100644 --- a/src/views/offers.ejs +++ b/src/views/offers.ejs @@ -25,164 +25,165 @@ Crear nueva oferta -
-
-
- -
-

Añade los detalles de tu oferta

-
-
+
+
+
+

Añade los detalles de tu oferta

+
+
+ +
+
+
+

Premium

+
+
+
0%
+
+ +
+
+
+

+ Tu precio: 90 000€/BTC +

+

+ (Precio mercado: 83 000€/BTC) +

+
+
+
+
+

¿Cuánto?

+
+
+ +
+ € +
+
+
+ +
+ SAT +
+
+
+
+
+

¿Dónde y cuándo?

+
+ + +
+
+
+

¿Cómo se mueve el Bitcoin?

+
+ +
+
+ +
+
+
+

¿Quién puede ver la oferta?

+
+ +
+
+ +
+
+ +
+
+
+

Extras

+
+ +
+
+
-
-
-

Premium

-
-
-
0%
-
- -
-
-
-

- Tu precio: 90 000€/BTC -

-

- (Precio mercado: 83 000€/BTC) -

-
+
+
-
-

¿Cuánto?

-
-
- -
- € -
-
-
- -
- SAT -
-
-
-
-
-

¿Dónde y cuándo?

-
- - -
-
-
-

¿Cómo se mueve el Bitcoin?

-
- -
-
- -
-
-
-

¿Quién puede ver la oferta?

-
- -
-
- -
-
- -
-
-
-

Extras

-
- -
-
-
- -