refactor styles, remove ids

This commit is contained in:
counterweight 2025-04-05 13:00:25 +02:00
parent e61a67c14f
commit 2ee89a2412
Signed by: counterweight
GPG key ID: 883EDBAA726BD96C
3 changed files with 10 additions and 17 deletions

View file

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

View file

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

View file

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