Add lots of styling

frontend/index.html

@@ -20,6 +20,7 @@
       --shaded-bright: #BFBFBF;
       --light-accent: #65BABF;
       --dark-accent: #284B63;
+      --danger-color: rgb(235, 99, 99);
     }
 
     html {

frontend/src/components/budget-display.ts

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

frontend/src/components/budget-list.ts

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

frontend/src/components/styles.ts

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