diff --git a/src/public/css/offers.css b/src/public/css/offers.css index 087f59f..56f29d9 100644 --- a/src/public/css/offers.css +++ b/src/public/css/offers.css @@ -1,3 +1,38 @@ +@media (max-width: 768px) { + #offers-root { + width: 100%; + margin: 10px 10px; + } + + #close-offer-controls-x { + width: 25px; + } +} + +@media (min-width: 769px) { + #offers-root { + width: 75%; + margin: 20px auto; + } + + #close-offer-controls-x { + width: 50px; + } +} + + +#create-offer-controls > * { + text-align: center; + margin-left: 15%; + margin-right: 15%; + width: 70% +} + +#close-offer-controls-area { + display: flex; + justify-content: end; +} + .money-amount-input-area { padding: 0; width: 10em; diff --git a/src/public/css/seca.css b/src/public/css/seca.css index 7a13e11..5cd14da 100644 --- a/src/public/css/seca.css +++ b/src/public/css/seca.css @@ -3,6 +3,38 @@ box-sizing: border-box; } +@media (max-width: 768px) { + html { + font-size: 16px; + } + + .font-medium { + font-size: 0.7rem; + } + + .button-medium { + height: 3em; + padding: 1em; + border-radius: 10px; + } +} + +@media (min-width: 769px) { + html { + font-size: 20px; + } + + .font-medium { + font-size: 0.9rem; + } + + .button-medium { + height: 3em; + padding: 1em; + border-radius: 10px; + } +} + .badges { display: grid; grid-template-columns: repeat(2, 1fr); @@ -106,10 +138,8 @@ h1 { .button-primary { background: #e1c300; - border-radius: 1vw; border: 0; color: white; - padding: 1%; cursor: pointer; } diff --git a/src/public/javascript/offers.js b/src/public/javascript/offers.js index b7c8b0c..c91ba15 100644 --- a/src/public/javascript/offers.js +++ b/src/public/javascript/offers.js @@ -1,7 +1,7 @@ const buttonStartCreateOffer = document.getElementById( 'button-start-create-offer' ); -const closeOfferControls = document.getElementById('close-order-controls-x'); +const closeOfferControls = document.getElementById('close-offer-controls-x'); const createOfferControls = document.getElementById('create-offer-controls'); const buyOrSellButtonGroup = document.getElementById( @@ -32,7 +32,9 @@ const btcMethodCheckboxes = [onchainCheckbox, lightningCheckbox]; function toggleCreateOfferControls() { createOfferControls.style.display = createOfferControls.style.display === 'block' ? 'none' : 'block'; - buttonStartCreateOffer.disabled = !buttonStartCreateOffer.disabled; + + buttonStartCreateOffer.style.display = + buttonStartCreateOffer.style.display === 'block' ? 'none' : 'block'; } function modifyPremiumValue(delta) { diff --git a/src/views/offers.ejs b/src/views/offers.ejs index 3796dd9..68f26e2 100644 --- a/src/views/offers.ejs +++ b/src/views/offers.ejs @@ -11,17 +11,19 @@ <%- include("partials/appCommonHeader") %> -
- -