zcdziura/aisle17
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

Cards are now looking pretty good

Browse source
This commit is contained in:
Z. Charles Dziura 2025-06-10 15:44:25 -04:00
parent 51761e3734
commit 9a5dbb4d18
4 changed files with 46 additions and 11 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

2
webapp/src/app/components/card/card.scss
View file

@ -4,7 +4,7 @@
border-radius: 0.2em; border-radius: 0.2em;
color: var(--color-on-surface); color: var(--color-on-surface);
display: inline-grid; display: inline-grid;
font-size: 2em; font-size: 1.8em;
grid-template-areas: grid-template-areas:
'head' 'head'
'body' 'body'

24
webapp/src/app/routes/plan/plan.scss
View file

@ -1,17 +1,23 @@
:host { :host {
display: grid; display: grid;
grid-template-areas: grid-template-areas:
"head" 'head'
"body"; 'body';
grid-template-rows: min-content auto; grid-template-rows: min-content auto;
height: 100%; height: 100%;
} }
header { header {
grid-area: 'head'; grid-area: head;
} }
.meal-plan { .meal-plan {
grid-area: "body"; display: flex;
padding-left: 1.8em; flex-direction: column;
grid-area: body;
padding-left: 1.8em;
& > *:not(:last-child) {
margin-bottom: 1.6em;
}
} }

8
webapp/src/app/routes/plan/plan.ts
View file

@ -11,5 +11,11 @@ import { Meal } from './components/meal/meal';
changeDetection: ChangeDetectionStrategy.OnPush, changeDetection: ChangeDetectionStrategy.OnPush,
}) })
export class Plan { export class Plan {
protected meals = signal<Array<TMeal>>([new TMeal(uuidv7(), 'breakfast', [])]); protected meals = signal<Array<TMeal>>([
new TMeal(uuidv7(), 'breakfast', []),
new TMeal(uuidv7(), 'snack', [], 'Morning Snack'),
new TMeal(uuidv7(), 'lunch', []),
new TMeal(uuidv7(), 'snack', [], 'Afternoon Snack'),
new TMeal(uuidv7(), 'dinner', []),
]);
} }

23
webapp/src/styles/components/button.scss Normal file
View file

@ -0,0 +1,23 @@
button {
background-color: var(--color-surface-container);
border: 1px solid var(--color-outline);
border-radius: 0.4em;
color: var(--color-on-surface-container);
cursor: pointer;
font-size: 0.8em;
padding: 0.2em 0.6em;
&:hover {
box-shadow: var(--color-shadow) 0px 3px 8px;
box-shadow: var(--color-shadow) 0px 2px 5px -1px, var(--color-shadow-variant) 0px 1px 3px -1px;
&:active {
background-color: var(--color-primary-container-alt);
}
}
&.primary {
background-color: var(--color-primary-container);
color: var(--color-on-primary-container);
}
}