diff --git a/src/app/app.component.css b/src/app/app.component.css index cda929a0..1dc6a305 100644 --- a/src/app/app.component.css +++ b/src/app/app.component.css @@ -1,52 +1,99 @@ -/* --- experimental branch --- */ -/* .mat-drawer-container { - background-color: #fffff4; -} */ -.tag-line { +.navbar { + position: sticky; + top: 0; + z-index: 5; + padding: 0 16px; + display: flex; + align-items: center; + height: 64px; + transition: all 0.25s ease; +} +.logo { + display: flex; + align-items: center; + justify-content: flex-start; + text-decoration: none; + margin-left: -4px; + height: 100%; +} +.logo-icon { + transform: scale(0.95); + transform-origin: left center; + width: auto; + display: block; + margin: auto 0; +} +.title-container { + position: absolute; + left: 50%; + transform: translateX(-50%); display: flex; flex-direction: column; align-items: center; + text-align: center; + animation: fadeSlide 0.4s ease; + margin-top: 4px; + gap: 3px; } .tag-title { - font-size: 0.9em; + font-size: 0.85em; + font-weight: 500; + line-height: 1; + letter-spacing: 0.04em; } .tag-subtitle { - font-size: 0.7em; + font-size: 0.65em; + margin-top: 0; + letter-spacing: 0.08em; + opacity: 0.6; +} +.github-fork-ribbon::before { + background-color: #333; } - -/* --- experimental branch end --- */ - -.main-container { - width: 100%; - height: 100%; +.menu-btn { + margin-right: 4px; + transition: all 0.2s ease; } - -.sidenav-content { - display: flex; - padding: 10px; - justify-content: space-between; +.menu-btn:hover { + background: rgba(0,0,0,0.04); + transform: scale(1.05); } - -.sidenav-menu { - padding: 20px; +.spacer { + flex: 1 1 auto; } - -.menu-close { - position: absolute; - right: 0; - top: 2px; - background: transparent; - border: 0; - color: #ddd; -} - -.github-fork-ribbon:before { - background-color: #333; +.content { + padding: 24px; + animation: fadeSlide 1s ease; +} +@keyframes fadeSlide { + from { + opacity: 0; + transform: translateY(-5px); + } + to { + opacity: 1; + transform: translateY(0); + } } - -@media only screen and (max-width: 750px) { - .github-fork-ribbon { +@media (max-width: 768px) { + .title-container { + font-size: 14px; + } + .tag-title { + font-size: 14px; + } + .tag-subtitle { + font-size: 11px; + } + .github-fork-ribbon { display: none; } - -} + .logo, + .logo-icon { + opacity: 0; + visibility: hidden; + width: 0; + margin: 0; + overflow: hidden; + } +} \ No newline at end of file diff --git a/src/app/app.component.html b/src/app/app.component.html index 5cd4c170..ba0734ca 100644 --- a/src/app/app.component.html +++ b/src/app/app.component.html @@ -1,30 +1,35 @@ - - - - - - - -
- + + + +
-
{{ title || defaultTitle }}
-
{{ subtitle }}
+
+ {{ title || defaultTitle }} +
+
+ {{ subtitle }} +
-
- Fork me on GitHub
- - - + + + Fork me on GitHub + + + + + + + + + + diff --git a/src/app/app.component.spec.ts b/src/app/app.component.spec.ts index 6cf17ff2..eb72a4c3 100644 --- a/src/app/app.component.spec.ts +++ b/src/app/app.component.spec.ts @@ -1,6 +1,25 @@ import { ComponentFixture, TestBed } from '@angular/core/testing'; +import { CUSTOM_ELEMENTS_SCHEMA } from '@angular/core'; import { RouterTestingModule } from '@angular/router/testing'; import { AppComponent } from './app.component'; +import { MatToolbarModule } from '@angular/material/toolbar'; +import { MatIconModule } from '@angular/material/icon'; +import { MatSidenavModule } from '@angular/material/sidenav'; +import { BrowserAnimationsModule } from '@angular/platform-browser/animations'; +import { of } from 'rxjs'; +import { ThemeService } from './service/theme.service'; +import { TitleService } from './service/title.service'; + +class MockThemeService { + initTheme() {} +} + +class MockTitleService { + titleInfo$ = of({ + dimension: 'Test Title', + level: '1', + }); +} describe('AppComponent', () => { let app: AppComponent; @@ -8,8 +27,19 @@ describe('AppComponent', () => { beforeEach(async () => { await TestBed.configureTestingModule({ - imports: [RouterTestingModule], declarations: [AppComponent], + imports: [ + RouterTestingModule, + MatToolbarModule, + MatIconModule, + MatSidenavModule, + BrowserAnimationsModule, + ], + providers: [ + { provide: ThemeService, useClass: MockThemeService }, + { provide: TitleService, useClass: MockTitleService }, + ], + schemas: [CUSTOM_ELEMENTS_SCHEMA], }).compileComponents(); }); @@ -24,10 +54,9 @@ describe('AppComponent', () => { }); it('check for fork me on github ribbon generation', () => { - const fixture = TestBed.createComponent(AppComponent); - const HTMLElement: HTMLElement = fixture.nativeElement; - var divTag = HTMLElement.querySelector('div')!; - var aTag = divTag.querySelector('a')!; - expect(aTag.textContent).toContain('GitHub'); + const compiled = fixture.nativeElement as HTMLElement; + const githubLink = compiled.querySelector('.github-fork-ribbon'); + expect(githubLink).not.toBeNull(); + expect(githubLink?.textContent?.trim()).toBe('Fork me on GitHub'); }); }); diff --git a/src/app/app.component.ts b/src/app/app.component.ts index 045bfaff..35334189 100644 --- a/src/app/app.component.ts +++ b/src/app/app.component.ts @@ -13,6 +13,7 @@ export class AppComponent implements OnInit, OnDestroy { defaultTitle = ''; subtitle = ''; menuIsOpen: boolean = true; + sidenavWidth: string = '250px'; private destroy$ = new Subject(); @@ -25,7 +26,10 @@ export class AppComponent implements OnInit, OnDestroy { if (menuState === 'false') { setTimeout(() => { this.menuIsOpen = false; + this.sidenavWidth = '0px'; }, 600); + } else { + this.sidenavWidth = '250px'; } // Subscribe to title changes @@ -42,6 +46,7 @@ export class AppComponent implements OnInit, OnDestroy { toggleMenu(): void { this.menuIsOpen = !this.menuIsOpen; + this.sidenavWidth = this.menuIsOpen ? '250px' : '0px'; localStorage.setItem('state.menuIsOpen', this.menuIsOpen.toString()); } } diff --git a/src/app/app.module.ts b/src/app/app.module.ts index 4210172c..435bd2d2 100644 --- a/src/app/app.module.ts +++ b/src/app/app.module.ts @@ -1,6 +1,7 @@ import { NgModule } from '@angular/core'; import { BrowserModule } from '@angular/platform-browser'; import { ReactiveFormsModule, FormsModule } from '@angular/forms'; +import { MatToolbarModule } from '@angular/material/toolbar'; import { AppRoutingModule } from './app-routing.module'; import { AppComponent } from './app.component'; @@ -62,6 +63,7 @@ import { TeamsGroupsEditorModule } from './component/teams-groups-editor/teams-g MaterialModule, MatDialogModule, ReactiveFormsModule, + MatToolbarModule, FormsModule, HttpClientModule, TeamsGroupsEditorModule,