refactor styles, remove ids
This commit is contained in:
parent
e61a67c14f
commit
2ee89a2412
3 changed files with 10 additions and 17 deletions
|
|
@ -15,7 +15,7 @@
|
||||||
width: 80px;
|
width: 80px;
|
||||||
}
|
}
|
||||||
|
|
||||||
#amount-area-content {
|
.amount-area-content {
|
||||||
width: 50%;
|
width: 50%;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
@ -54,7 +54,7 @@
|
||||||
width: 100px;
|
width: 100px;
|
||||||
}
|
}
|
||||||
|
|
||||||
#amount-area-content {
|
.amount-area-content {
|
||||||
width: 33%;
|
width: 33%;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
@ -314,7 +314,7 @@
|
||||||
font-size: 0.8em;
|
font-size: 0.8em;
|
||||||
}
|
}
|
||||||
|
|
||||||
#amount-area-content {
|
.amount-area-content {
|
||||||
margin-left: auto;
|
margin-left: auto;
|
||||||
margin-right: auto;
|
margin-right: auto;
|
||||||
}
|
}
|
||||||
|
|
|
||||||
|
|
@ -13,24 +13,21 @@ class AmountInput {
|
||||||
render() {
|
render() {
|
||||||
const amountArea = document.createElement('div');
|
const amountArea = document.createElement('div');
|
||||||
amountArea.id = this.id;
|
amountArea.id = this.id;
|
||||||
|
amountArea.className = 'amount-area-content';
|
||||||
|
|
||||||
const eurAmount = document.createElement('div');
|
const eurAmount = document.createElement('div');
|
||||||
eurAmount.id = 'eur-amount';
|
|
||||||
eurAmount.className = 'money-amount-input-area';
|
eurAmount.className = 'money-amount-input-area';
|
||||||
|
|
||||||
this.eurInput = document.createElement('input');
|
this.eurInput = document.createElement('input');
|
||||||
this.eurInput.id = 'input-eur-amount';
|
|
||||||
this.eurInput.type = 'text';
|
this.eurInput.type = 'text';
|
||||||
this.eurInput.className = 'money-input input-money-amount';
|
this.eurInput.className = 'money-input input-money-amount';
|
||||||
this.eurInput.value = '100';
|
this.eurInput.value = '100';
|
||||||
this.eurInput.required = true;
|
this.eurInput.required = true;
|
||||||
|
|
||||||
const eurSymbol = document.createElement('div');
|
const eurSymbol = document.createElement('div');
|
||||||
eurSymbol.id = 'eur-symbol';
|
|
||||||
eurSymbol.className = 'curr-symbol';
|
eurSymbol.className = 'curr-symbol';
|
||||||
|
|
||||||
const eurCharacter = document.createElement('span');
|
const eurCharacter = document.createElement('span');
|
||||||
eurCharacter.id = 'eur-character';
|
|
||||||
eurCharacter.className = 'curr-character';
|
eurCharacter.className = 'curr-character';
|
||||||
eurCharacter.textContent = '€';
|
eurCharacter.textContent = '€';
|
||||||
|
|
||||||
|
|
@ -39,21 +36,17 @@ class AmountInput {
|
||||||
eurAmount.appendChild(eurSymbol);
|
eurAmount.appendChild(eurSymbol);
|
||||||
|
|
||||||
const btcAmount = document.createElement('div');
|
const btcAmount = document.createElement('div');
|
||||||
btcAmount.id = 'btc-amount';
|
|
||||||
btcAmount.className = 'money-amount-input-area';
|
btcAmount.className = 'money-amount-input-area';
|
||||||
|
|
||||||
this.btcInput = document.createElement('input');
|
this.btcInput = document.createElement('input');
|
||||||
this.btcInput.id = 'input-btc-amount';
|
|
||||||
this.btcInput.type = 'text';
|
this.btcInput.type = 'text';
|
||||||
this.btcInput.className = 'money-input input-money-amount';
|
this.btcInput.className = 'money-input input-money-amount';
|
||||||
this.btcInput.disabled = true;
|
this.btcInput.disabled = true;
|
||||||
|
|
||||||
const satsSymbol = document.createElement('div');
|
const satsSymbol = document.createElement('div');
|
||||||
satsSymbol.id = 'sats-symbol';
|
|
||||||
satsSymbol.className = 'curr-symbol';
|
satsSymbol.className = 'curr-symbol';
|
||||||
|
|
||||||
const satsCharacter = document.createElement('span');
|
const satsCharacter = document.createElement('span');
|
||||||
satsCharacter.id = 'sats-character';
|
|
||||||
satsCharacter.className = 'curr-character';
|
satsCharacter.className = 'curr-character';
|
||||||
satsCharacter.textContent = 'SAT';
|
satsCharacter.textContent = 'SAT';
|
||||||
|
|
||||||
|
|
|
||||||
|
|
@ -92,7 +92,6 @@ class CreateOfferModal {
|
||||||
priceDisplay.updatePrices();
|
priceDisplay.updatePrices();
|
||||||
});
|
});
|
||||||
|
|
||||||
//Continue moving components up here
|
|
||||||
const amountDiv = document.createElement('div');
|
const amountDiv = document.createElement('div');
|
||||||
amountDiv.id = 'amount-area';
|
amountDiv.id = 'amount-area';
|
||||||
amountDiv.className = 'create-offer-step';
|
amountDiv.className = 'create-offer-step';
|
||||||
|
|
@ -101,6 +100,12 @@ class CreateOfferModal {
|
||||||
amountDiv.appendChild(amountHeading);
|
amountDiv.appendChild(amountHeading);
|
||||||
controls.appendChild(amountDiv);
|
controls.appendChild(amountDiv);
|
||||||
|
|
||||||
|
this.amountInput = new AmountInput({
|
||||||
|
parentElement: amountDiv,
|
||||||
|
});
|
||||||
|
|
||||||
|
//Continue moving components up here
|
||||||
|
|
||||||
const placeTimeDiv = document.createElement('div');
|
const placeTimeDiv = document.createElement('div');
|
||||||
placeTimeDiv.id = 'place-and-time-area';
|
placeTimeDiv.id = 'place-and-time-area';
|
||||||
placeTimeDiv.className = 'create-offer-step';
|
placeTimeDiv.className = 'create-offer-step';
|
||||||
|
|
@ -171,11 +176,6 @@ class CreateOfferModal {
|
||||||
|
|
||||||
this.parentElement.appendChild(this.element);
|
this.parentElement.appendChild(this.element);
|
||||||
|
|
||||||
this.amountInput = new AmountInput({
|
|
||||||
parentElement: document.getElementById('amount-area'),
|
|
||||||
id: 'amount-area-content',
|
|
||||||
});
|
|
||||||
|
|
||||||
this.amountInput.render();
|
this.amountInput.render();
|
||||||
|
|
||||||
this.placeInput = new PlaceInput({
|
this.placeInput = new PlaceInput({
|
||||||
|
|
|
||||||
Loading…
Add table
Add a link
Reference in a new issue