nicd/weekbudget
Archived
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

Make heading text different for views, style it up

Browse source
This commit is contained in:
Mikko Ahlroth 2019-06-25 12:54:06 +03:00
parent d0bc3d365d
commit 9ff852971c
1 changed files with 11 additions and 4 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

15
frontend/src/components/week-budget.ts
View file

@ -37,8 +37,15 @@ class WeekBudgetComponent extends LitElement {
static get styles() {
return css`
h1 {
display: inline-flex;
align-items: center;
color: var(--light-accent);
}
h1 fa-button {
margin-right: 10px;
}
hr {
border: none;
@ -173,7 +180,7 @@ class WeekBudgetComponent extends LitElement {
}
render() {
const headingWithContent = (content: TemplateResult) => html`<h1>${content}TinyBudget</h1>`
const headingWithContent = (content: TemplateResult, text: string) => html`<h1>${content}${text}</h1>`
const back = html`
<fa-button @click=${() => this.setDisplayMode(DisplayMode.BudgetView)}>
<fa-icon name="arrow-left" alt="Go back"></fa-icon>
@ -183,7 +190,7 @@ class WeekBudgetComponent extends LitElement {
switch (this.displayMode) {
case DisplayMode.CreateView:
return html`
${headingWithContent(back)}
${headingWithContent(back, 'Create budget')}
<budget-create
@createBudget=${this.onCreateBudget}
.hasError=${this.hasCreateError}
@ -192,7 +199,7 @@ class WeekBudgetComponent extends LitElement {
case DisplayMode.JoinView:
return html`
${headingWithContent(back)}
${headingWithContent(back, 'Join budget')}
<budget-join
@joinBudget=${this.onJoinBudget}
.hasError=${this.hasJoinError}
@ -201,7 +208,7 @@ class WeekBudgetComponent extends LitElement {
default:
return html`
${headingWithContent(html``)}
${headingWithContent(html``, 'TinyBudget')}
<budget-list
@spendMoney=${this.onSpendMoney}
@resetBudget=${this.onResetBudget}