From 1880bb4efd5059b94b6baa6d41b54145c933ec76 Mon Sep 17 00:00:00 2001 From: "Z. Charles Dziura" Date: Sun, 8 Jun 2025 22:28:21 -0400 Subject: [PATCH] Adding navigation, sort of --- webapp/.editorconfig | 5 +- webapp/.prettierrc | 10 + webapp/README.md | 59 --- webapp/public/favicon.ico | Bin 15086 -> 0 bytes webapp/public/icons/calendar-dates.svg | 42 +++ webapp/public/icons/search.svg | 14 + webapp/public/icons/shopping-cart.svg | 22 ++ webapp/src/app/app.html | 338 +----------------- webapp/src/app/app.routes.ts | 7 +- webapp/src/app/app.scss | 4 + webapp/src/app/app.spec.ts | 25 -- webapp/src/app/app.ts | 11 +- .../src/app/components/nav-rail/nav-rail.html | 16 + .../src/app/components/nav-rail/nav-rail.scss | 15 + .../app/components/nav-rail/nav-rail.spec.ts | 22 ++ .../src/app/components/nav-rail/nav-rail.ts | 9 + webapp/src/app/routes/home/home.html | 1 + webapp/src/app/routes/home/home.scss | 0 webapp/src/app/routes/home/home.spec.ts | 23 ++ webapp/src/app/routes/home/home.ts | 14 + webapp/src/index.html | 2 +- webapp/src/styles.scss | 37 +- webapp/src/styles/reset.scss | 54 +++ 23 files changed, 299 insertions(+), 431 deletions(-) create mode 100644 webapp/.prettierrc delete mode 100644 webapp/README.md delete mode 100644 webapp/public/favicon.ico create mode 100644 webapp/public/icons/calendar-dates.svg create mode 100644 webapp/public/icons/search.svg create mode 100644 webapp/public/icons/shopping-cart.svg delete mode 100644 webapp/src/app/app.spec.ts create mode 100644 webapp/src/app/components/nav-rail/nav-rail.html create mode 100644 webapp/src/app/components/nav-rail/nav-rail.scss create mode 100644 webapp/src/app/components/nav-rail/nav-rail.spec.ts create mode 100644 webapp/src/app/components/nav-rail/nav-rail.ts create mode 100644 webapp/src/app/routes/home/home.html create mode 100644 webapp/src/app/routes/home/home.scss create mode 100644 webapp/src/app/routes/home/home.spec.ts create mode 100644 webapp/src/app/routes/home/home.ts create mode 100644 webapp/src/styles/reset.scss diff --git a/webapp/.editorconfig b/webapp/.editorconfig index f166060..dc7c281 100644 --- a/webapp/.editorconfig +++ b/webapp/.editorconfig @@ -1,10 +1,7 @@ -# Editor configuration, see https://editorconfig.org -root = true - [*] charset = utf-8 indent_style = space -indent_size = 2 +indent_size = 4 insert_final_newline = true trim_trailing_whitespace = true diff --git a/webapp/.prettierrc b/webapp/.prettierrc new file mode 100644 index 0000000..936c76e --- /dev/null +++ b/webapp/.prettierrc @@ -0,0 +1,10 @@ +{ + "printWidth": 120, + "tabWidth": 4, + "useTabs": true, + "semi": true, + "singleQuote": true, + "trailingComma": "es5", + "bracketSpacing": true, + "arrowParens": "avoid" +} diff --git a/webapp/README.md b/webapp/README.md deleted file mode 100644 index 0c4e460..0000000 --- a/webapp/README.md +++ /dev/null @@ -1,59 +0,0 @@ -# Webapp - -This project was generated using [Angular CLI](https://github.com/angular/angular-cli) version 20.0.1. - -## Development server - -To start a local development server, run: - -```bash -ng serve -``` - -Once the server is running, open your browser and navigate to `http://localhost:4200/`. The application will automatically reload whenever you modify any of the source files. - -## Code scaffolding - -Angular CLI includes powerful code scaffolding tools. To generate a new component, run: - -```bash -ng generate component component-name -``` - -For a complete list of available schematics (such as `components`, `directives`, or `pipes`), run: - -```bash -ng generate --help -``` - -## Building - -To build the project run: - -```bash -ng build -``` - -This will compile your project and store the build artifacts in the `dist/` directory. By default, the production build optimizes your application for performance and speed. - -## Running unit tests - -To execute unit tests with the [Karma](https://karma-runner.github.io) test runner, use the following command: - -```bash -ng test -``` - -## Running end-to-end tests - -For end-to-end (e2e) testing, run: - -```bash -ng e2e -``` - -Angular CLI does not come with an end-to-end testing framework by default. You can choose one that suits your needs. - -## Additional Resources - -For more information on using the Angular CLI, including detailed command references, visit the [Angular CLI Overview and Command Reference](https://angular.dev/tools/cli) page. diff --git a/webapp/public/favicon.ico b/webapp/public/favicon.ico deleted file mode 100644 index 57614f9c967596fad0a3989bec2b1deff33034f6..0000000000000000000000000000000000000000 GIT binary patch literal 0 HcmV?d00001 literal 15086 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 Nr__JTFzvMr^FKp4S3v*( diff --git a/webapp/public/icons/calendar-dates.svg b/webapp/public/icons/calendar-dates.svg new file mode 100644 index 0000000..92abcfd --- /dev/null +++ b/webapp/public/icons/calendar-dates.svg @@ -0,0 +1,42 @@ + + + + + + + + + + \ No newline at end of file diff --git a/webapp/public/icons/search.svg b/webapp/public/icons/search.svg new file mode 100644 index 0000000..2b99e41 --- /dev/null +++ b/webapp/public/icons/search.svg @@ -0,0 +1,14 @@ + + + \ No newline at end of file diff --git a/webapp/public/icons/shopping-cart.svg b/webapp/public/icons/shopping-cart.svg new file mode 100644 index 0000000..bb2c90c --- /dev/null +++ b/webapp/public/icons/shopping-cart.svg @@ -0,0 +1,22 @@ + + + + + \ No newline at end of file diff --git a/webapp/src/app/app.html b/webapp/src/app/app.html index 36093e1..edcc264 100644 --- a/webapp/src/app/app.html +++ b/webapp/src/app/app.html @@ -1,336 +1,4 @@ - - - - - - - - - - - -
-
-
- -

Hello, {{ title }}

-

Congratulations! Your app is running. 🎉

-
- -
-
- @for (item of [ - { title: 'Explore the Docs', link: 'https://angular.dev' }, - { title: 'Learn with Tutorials', link: 'https://angular.dev/tutorials' }, - { title: 'CLI Docs', link: 'https://angular.dev/tools/cli' }, - { title: 'Angular Language Service', link: 'https://angular.dev/tools/language-service' }, - { title: 'Angular DevTools', link: 'https://angular.dev/tools/devtools' }, - ]; track item.title) { - - {{ item.title }} - - - - - } -
- -
-
+ +
+
- - - - - - - - - - - diff --git a/webapp/src/app/app.routes.ts b/webapp/src/app/app.routes.ts index dc39edb..a964b12 100644 --- a/webapp/src/app/app.routes.ts +++ b/webapp/src/app/app.routes.ts @@ -1,3 +1,8 @@ import { Routes } from '@angular/router'; -export const routes: Routes = []; +export const routes: Routes = [ + { + path: '', + loadComponent: () => import('./routes/home/home').then(c => c.Home) + } +]; diff --git a/webapp/src/app/app.scss b/webapp/src/app/app.scss index e69de29..500b2b6 100644 --- a/webapp/src/app/app.scss +++ b/webapp/src/app/app.scss @@ -0,0 +1,4 @@ +:host { + display: grid; + grid-template-columns: min-content auto; +} diff --git a/webapp/src/app/app.spec.ts b/webapp/src/app/app.spec.ts deleted file mode 100644 index e9672d3..0000000 --- a/webapp/src/app/app.spec.ts +++ /dev/null @@ -1,25 +0,0 @@ -import { provideZonelessChangeDetection } from '@angular/core'; -import { TestBed } from '@angular/core/testing'; -import { App } from './app'; - -describe('App', () => { - beforeEach(async () => { - await TestBed.configureTestingModule({ - imports: [App], - providers: [provideZonelessChangeDetection()] - }).compileComponents(); - }); - - it('should create the app', () => { - const fixture = TestBed.createComponent(App); - const app = fixture.componentInstance; - expect(app).toBeTruthy(); - }); - - it('should render title', () => { - const fixture = TestBed.createComponent(App); - fixture.detectChanges(); - const compiled = fixture.nativeElement as HTMLElement; - expect(compiled.querySelector('h1')?.textContent).toContain('Hello, webapp'); - }); -}); diff --git a/webapp/src/app/app.ts b/webapp/src/app/app.ts index 5fce5f4..6e892e2 100644 --- a/webapp/src/app/app.ts +++ b/webapp/src/app/app.ts @@ -1,12 +1,13 @@ import { Component } from '@angular/core'; import { RouterOutlet } from '@angular/router'; +import { NavRail } from './components/nav-rail/nav-rail'; @Component({ - selector: 'app-root', - imports: [RouterOutlet], - templateUrl: './app.html', - styleUrl: './app.scss' + selector: 'app-root', + imports: [RouterOutlet, NavRail], + styleUrl: './app.scss', + templateUrl: './app.html', }) export class App { - protected title = 'webapp'; + protected title = 'webapp'; } diff --git a/webapp/src/app/components/nav-rail/nav-rail.html b/webapp/src/app/components/nav-rail/nav-rail.html new file mode 100644 index 0000000..7f6af87 --- /dev/null +++ b/webapp/src/app/components/nav-rail/nav-rail.html @@ -0,0 +1,16 @@ + diff --git a/webapp/src/app/components/nav-rail/nav-rail.scss b/webapp/src/app/components/nav-rail/nav-rail.scss new file mode 100644 index 0000000..fac37d0 --- /dev/null +++ b/webapp/src/app/components/nav-rail/nav-rail.scss @@ -0,0 +1,15 @@ +nav { + ul { + align-items: center; + display: flex; + flex-direction: column; + list-style: none; + padding-left: 0; + + li { + align-items: center; + display: flex; + flex-direction: column; + } + } +} diff --git a/webapp/src/app/components/nav-rail/nav-rail.spec.ts b/webapp/src/app/components/nav-rail/nav-rail.spec.ts new file mode 100644 index 0000000..c68c1b0 --- /dev/null +++ b/webapp/src/app/components/nav-rail/nav-rail.spec.ts @@ -0,0 +1,22 @@ +import { ComponentFixture, TestBed } from '@angular/core/testing'; + +import { NavRail } from './nav-rail'; + +describe('NavRail', () => { + let component: NavRail; + let fixture: ComponentFixture; + + beforeEach(async () => { + await TestBed.configureTestingModule({ + imports: [NavRail], + }).compileComponents(); + + fixture = TestBed.createComponent(NavRail); + component = fixture.componentInstance; + fixture.detectChanges(); + }); + + it('should create', () => { + expect(component).toBeTruthy(); + }); +}); diff --git a/webapp/src/app/components/nav-rail/nav-rail.ts b/webapp/src/app/components/nav-rail/nav-rail.ts new file mode 100644 index 0000000..b23849d --- /dev/null +++ b/webapp/src/app/components/nav-rail/nav-rail.ts @@ -0,0 +1,9 @@ +import { Component } from '@angular/core'; + +@Component({ + selector: 'app-nav-rail', + imports: [], + templateUrl: './nav-rail.html', + styleUrl: './nav-rail.scss', +}) +export class NavRail {} diff --git a/webapp/src/app/routes/home/home.html b/webapp/src/app/routes/home/home.html new file mode 100644 index 0000000..5f2c53f --- /dev/null +++ b/webapp/src/app/routes/home/home.html @@ -0,0 +1 @@ +

home works!

diff --git a/webapp/src/app/routes/home/home.scss b/webapp/src/app/routes/home/home.scss new file mode 100644 index 0000000..e69de29 diff --git a/webapp/src/app/routes/home/home.spec.ts b/webapp/src/app/routes/home/home.spec.ts new file mode 100644 index 0000000..e2d9468 --- /dev/null +++ b/webapp/src/app/routes/home/home.spec.ts @@ -0,0 +1,23 @@ +import { ComponentFixture, TestBed } from '@angular/core/testing'; + +import { Home } from './home'; + +describe('Home', () => { + let component: Home; + let fixture: ComponentFixture; + + beforeEach(async () => { + await TestBed.configureTestingModule({ + imports: [Home] + }) + .compileComponents(); + + fixture = TestBed.createComponent(Home); + component = fixture.componentInstance; + fixture.detectChanges(); + }); + + it('should create', () => { + expect(component).toBeTruthy(); + }); +}); diff --git a/webapp/src/app/routes/home/home.ts b/webapp/src/app/routes/home/home.ts new file mode 100644 index 0000000..681446c --- /dev/null +++ b/webapp/src/app/routes/home/home.ts @@ -0,0 +1,14 @@ +import { Component, OnInit } from '@angular/core'; + +@Component({ + selector: 'app-home', + imports: [], + templateUrl: './home.html', + styleUrl: './home.scss', +}) +export class Home implements OnInit { + constructor() {} + + ngOnInit(): void { + } +} diff --git a/webapp/src/index.html b/webapp/src/index.html index 5b75346..0d5097b 100644 --- a/webapp/src/index.html +++ b/webapp/src/index.html @@ -5,7 +5,7 @@ Webapp - + diff --git a/webapp/src/styles.scss b/webapp/src/styles.scss index 90d4ee0..b9ce5f7 100644 --- a/webapp/src/styles.scss +++ b/webapp/src/styles.scss @@ -1 +1,36 @@ -/* You can add global styles to this file, and also import other style files */ +@import url('./styles/reset.scss'); + +:root { + --astronaut-blue: oklch(0.3303 0.078667 242.1936); + --kashmir-blue: oklch(0.5311 0.0868 244.85); + --bossanova: oklch(0.3442 0.0916 323.14); + --trendy-pink: oklch(0.5466 0.0925 325.35); + --zuccini: oklch(0.3235 0.077159 156.9102); + --amazon: oklch(0.5235 0.0882 155.85); + --buccaneer: oklch(0.3435 0.0869 23.74); + --copper-rust: oklch(0.5452 0.0967 23.21); + --zircon: oklch(0.9823 0.008252 271.3302); + --athens-gray: oklch(0.9312 0.0084 271.32); + + --color-primary: var(--astronaut-blue); + --color-on-primary: white; + --color-primary-container: var(--kashmir-blue); + + --color-secondary: var(--bossanova); + --color-on-secondary: white; + --color-secondary-container: var(--trendy-pink); + + --color-tertiary: var(--zuccini); + --color-on-tertiary: white; + --color-tertiary-container: var(--amazon); + + --color-error: var(--buccaneer); + --color-error-container: var(--copper-rust); + + --color-surface: var(--zircon); + --color-surface-container: var(--athens-gray); +} + +body { + margin: 0; +} diff --git a/webapp/src/styles/reset.scss b/webapp/src/styles/reset.scss new file mode 100644 index 0000000..0761796 --- /dev/null +++ b/webapp/src/styles/reset.scss @@ -0,0 +1,54 @@ +/* 1. Use a more-intuitive box-sizing model */ +*, *::before, *::after { + box-sizing: border-box; +} + +/* 2. Remove default margin */ +* { + margin: 0; +} + +/* 3. Enable keyword animations */ +@media (prefers-reduced-motion: no-preference) { + html { + interpolate-size: allow-keywords; + } +} + +body { + /* 4. Add accessible line-height */ + line-height: 1.5; + /* 5. Improve text rendering */ + -webkit-font-smoothing: antialiased; +} + +/* 6. Improve media defaults */ +img, picture, video, canvas, svg { + display: block; + max-width: 100%; +} + +/* 7. Inherit fonts for form controls */ +input, button, textarea, select { + font: inherit; +} + +/* 8. Avoid text overflows */ +p, h1, h2, h3, h4, h5, h6 { + overflow-wrap: break-word; +} + +/* 9. Improve line wrapping */ +p { + text-wrap: pretty; +} +h1, h2, h3, h4, h5, h6 { + text-wrap: balance; +} + +/* + 10. Create a root stacking context +*/ +#root, #__next { + isolation: isolate; +}