Add lots of styling
This commit is contained in:
parent
0ef0c4f1c6
commit
293e1ca8cd
4 changed files with 133 additions and 4 deletions
|
@ -20,6 +20,7 @@
|
|||
--shaded-bright: #BFBFBF;
|
||||
--light-accent: #65BABF;
|
||||
--dark-accent: #284B63;
|
||||
--danger-color: rgb(235, 99, 99);
|
||||
}
|
||||
|
||||
html {
|
||||
|
|
|
@ -1,8 +1,9 @@
|
|||
import { LitElement, html } from 'lit-element'
|
||||
import { LitElement, html, css } from 'lit-element'
|
||||
import { Budget } from '../services/models/budget'
|
||||
import './budget-qr'
|
||||
import './button'
|
||||
import './icon'
|
||||
import { BudgetEvent } from '../services/models/budget-event'
|
||||
|
||||
export class SpendMoneyEvent extends CustomEvent<{ budget: Budget, amount: number }> { }
|
||||
|
||||
|
@ -23,6 +24,86 @@ class BudgetDisplayComponent extends LitElement {
|
|||
}
|
||||
}
|
||||
|
||||
static get styles() {
|
||||
return css`
|
||||
:host {
|
||||
display: block;
|
||||
justify-self: center;
|
||||
}
|
||||
|
||||
h3 {
|
||||
font-size: 150%;
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
h4 {
|
||||
font-size: 80%;
|
||||
font-weight: 200;
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
h4:before {
|
||||
content: "ID: ";
|
||||
}
|
||||
|
||||
h5 {
|
||||
margin-bottom: 5px;
|
||||
border-bottom: 1px solid var(--shaded-bright);
|
||||
}
|
||||
|
||||
p {
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
.amounts {
|
||||
display: grid;
|
||||
column-gap: 10px;
|
||||
grid-template: 'now curr' 'of init' / auto 66%;
|
||||
}
|
||||
|
||||
.money-left {
|
||||
grid-area: now;
|
||||
font-size: 200%;
|
||||
text-align: right;
|
||||
}
|
||||
|
||||
.money-left[data-negative="t"] {
|
||||
color: var(--danger-color);
|
||||
}
|
||||
|
||||
.money-separator {
|
||||
grid-area: of;
|
||||
text-transform: uppercase;
|
||||
text-align: right;
|
||||
}
|
||||
|
||||
.money-initial {
|
||||
grid-area: init;
|
||||
}
|
||||
|
||||
.money-currency {
|
||||
grid-area: curr;
|
||||
align-self: center;
|
||||
}
|
||||
|
||||
.events {
|
||||
list-style-type: none;
|
||||
padding: 0;
|
||||
margin-top: 0;
|
||||
}
|
||||
|
||||
.event {
|
||||
display: grid;
|
||||
grid-template-columns: auto 66%;
|
||||
column-gap: 10px;
|
||||
}
|
||||
|
||||
.event-date {
|
||||
text-align: right;
|
||||
}
|
||||
`
|
||||
}
|
||||
|
||||
constructor() {
|
||||
super()
|
||||
|
||||
|
@ -89,10 +170,27 @@ class BudgetDisplayComponent extends LitElement {
|
|||
return html`
|
||||
<h3>${this.budget.name != '' ? this.budget.name : 'Unnamed budget'}</h3>
|
||||
<h4>${this.budget.uuid}</h4>
|
||||
<p>${this.budget.amount.toFixed(2)} ${this.budget.currency} left of ${this.budget.init.toFixed(2)} ${this.budget.currency}</p>
|
||||
<ul>
|
||||
${this.budget.events.map(event => html`<li>${event.at.toISOString()}: ${event.amount.toFixed(2)}</li>`)}
|
||||
|
||||
<div
|
||||
class="amounts"
|
||||
aria-label="${this.budget.amount.toFixed(2)} left of ${this.budget.init.toFixed(2)} ${this.budget.currency}."
|
||||
>
|
||||
<p
|
||||
class="money-left"
|
||||
aria-hidden="true"
|
||||
data-negative="${this.budget.amount < 0 ? 't' : 'f'}"
|
||||
>${this.budget.amount.toFixed(2)}</p>
|
||||
<p class="money-separator" aria-hidden="true">of</p>
|
||||
<p class="money-initial" aria-hidden="true">${this.budget.init.toFixed(2)}</p>
|
||||
<p class="money-currency" aria-hidden="true">${this.budget.currency}</p>
|
||||
</div>
|
||||
|
||||
<h5>Events</h5>
|
||||
|
||||
<ul class="events">
|
||||
${this.budget.events.map(event => this._renderEvent(this.budget, event))}
|
||||
</ul>
|
||||
|
||||
<fa-button @click=${this.onSpendMoney}>
|
||||
<fa-icon name="credit-card" alt="Spend money"></fa-icon>
|
||||
</fa-button>
|
||||
|
@ -114,6 +212,22 @@ class BudgetDisplayComponent extends LitElement {
|
|||
</div>
|
||||
`
|
||||
}
|
||||
|
||||
_renderEvent(budget: Budget, event: BudgetEvent) {
|
||||
return html`
|
||||
<li
|
||||
class="event"
|
||||
aria-label="${event.amount.toFixed(2)} ${budget.currency} on ${this._formatDate(event.at)}"
|
||||
>
|
||||
<p class="event-date" aria-hidden="true">${this._formatDate(event.at)}</p>
|
||||
<p class="event-amount" aria-hidden="true">${event.amount.toFixed(2)}</p>
|
||||
</li>
|
||||
`
|
||||
}
|
||||
|
||||
_formatDate(date: Date) {
|
||||
return date.toLocaleDateString("en-GB", { day: 'numeric', month: 'long' })
|
||||
}
|
||||
}
|
||||
|
||||
customElements.define('budget-display', BudgetDisplayComponent)
|
||||
|
|
|
@ -1,6 +1,7 @@
|
|||
import './budget-display'
|
||||
import { LitElement, html, css } from 'lit-element'
|
||||
import { Budget } from '../services/models/budget'
|
||||
import { MOB_BP } from './styles'
|
||||
|
||||
class BudgetListComponent extends LitElement {
|
||||
budgets: Budget[]
|
||||
|
@ -16,6 +17,13 @@ class BudgetListComponent extends LitElement {
|
|||
:host {
|
||||
display: grid;
|
||||
grid-template-columns: 1fr 1fr;
|
||||
gap: 20px;
|
||||
}
|
||||
|
||||
${MOB_BP} {
|
||||
:host {
|
||||
grid-template-columns: auto;
|
||||
}
|
||||
}
|
||||
`
|
||||
}
|
||||
|
|
6
frontend/src/components/styles.ts
Normal file
6
frontend/src/components/styles.ts
Normal file
|
@ -0,0 +1,6 @@
|
|||
import { css } from 'lit-element'
|
||||
|
||||
/**
|
||||
* Breakpoint media query to use for mobile layouts.
|
||||
*/
|
||||
export const MOB_BP = css`@media (max-width: 768px)`
|
Reference in a new issue