styling thingies
This commit is contained in:
parent
0cd583f50c
commit
bda4277d13
5 changed files with 82 additions and 13 deletions
|
|
@ -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;
|
||||
|
|
|
|||
|
|
@ -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;
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -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) {
|
||||
|
|
|
|||
|
|
@ -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
|
||||
|
|
|
|||
|
|
@ -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>
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue