styling thingies

This commit is contained in:
counterweight 2025-02-24 16:04:22 +01:00
parent 0cd583f50c
commit bda4277d13
Signed by: counterweight
GPG key ID: 883EDBAA726BD96C
5 changed files with 82 additions and 13 deletions

View file

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

View file

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

View file

@ -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) {

View file

@ -11,17 +11,19 @@
<body>
<%- include("partials/appCommonHeader") %>
<div class="over-background">
<button id="button-start-create-offer" class="button-primary">
<div class="over-background" id="offers-root">
<button id="button-start-create-offer" class="button-primary button-medium font-medium" style="display: block;">
Crear nueva oferta
</button>
<div id="create-offer-controls" style="display: none">
<div id="create-offer-controls" style="display: none; border: 1px solid purple">
<div id="close-offer-controls-area">
<img
id="close-order-controls-x"
id="close-offer-controls-x"
src="/img/circle-xmark.svg"
class="clickable"
width="5%"
/>
</div>
<h2>Añade los detalles de tu oferta</h2>
<div id="button-group-buy-or-sell" class="button-group">
<button

View file

@ -1,7 +1,7 @@
<div class="over-background">
<h1>la seca</h1>
<button id="navbutton-home" class="button-primary">Home</button>
<button id="navbutton-offers" class="button-primary">Ofertas</button>
<button id="navbutton-network" class="button-primary">Red</button>
<button id="navbutton-profile" class="button-primary">Mi perfil</button>
<button id="navbutton-home" class="button-primary font-medium button-medium">Home</button>
<button id="navbutton-offers" class="button-primary font-medium button-medium">Ofertas</button>
<button id="navbutton-network" class="button-primary font-medium button-medium">Red</button>
<button id="navbutton-profile" class="button-primary font-medium button-medium">Mi perfil</button>
</div>