From 9792701488a1c104878364e83b19601608a95839 Mon Sep 17 00:00:00 2001 From: Elain T Date: Fri, 12 Jan 2024 12:38:28 -0500 Subject: [PATCH] feat(daffio): clean up docs and marketing header styles (#2715) --- .../components/header/header.component.html | 30 +++++++++---------- .../components/header/header.component.scss | 25 ++++++++-------- .../header/header.component.spec.ts | 11 ------- .../docs-header/docs-header.component.html | 4 +-- .../docs-header/docs-header.component.scss | 5 ++++ .../docs-header/docs-header.component.ts | 1 + .../docs-header/docs-header.module.ts | 2 ++ .../marketing-header.component.html | 6 ++-- .../marketing-header.component.scss | 13 ++++++++ .../marketing-header.component.ts | 3 +- .../marketing-header.module.ts | 2 ++ .../marketing-sidebar.component.ts | 2 +- .../branding/src/lib/logo/logo.component.scss | 2 +- 13 files changed, 59 insertions(+), 47 deletions(-) create mode 100644 apps/daffio/src/app/core/header/containers/docs-header/docs-header.component.scss create mode 100644 apps/daffio/src/app/core/header/containers/marketing-header/marketing-header.component.scss diff --git a/apps/daffio/src/app/core/header/components/header/header.component.html b/apps/daffio/src/app/core/header/components/header/header.component.html index 26a83dc08e..87559839a5 100644 --- a/apps/daffio/src/app/core/header/components/header/header.component.html +++ b/apps/daffio/src/app/core/header/components/header/header.component.html @@ -1,21 +1,21 @@ diff --git a/apps/daffio/src/app/core/header/components/header/header.component.scss b/apps/daffio/src/app/core/header/components/header/header.component.scss index f1f0c3f90a..554ffe4dcd 100644 --- a/apps/daffio/src/app/core/header/components/header/header.component.scss +++ b/apps/daffio/src/app/core/header/components/header/header.component.scss @@ -10,7 +10,7 @@ display: none; color: currentColor; font-size: daff.$normal-font-size; - padding: 0.75rem 1.25rem; + padding: 0.25rem 1rem; text-decoration: none; @include daff.breakpoint(tablet) { @@ -24,28 +24,26 @@ &__navbar { justify-content: space-between; padding: 0 24px; + } - @include daff.breakpoint(mobile) { - padding: 0 48px; - } - - @include daff.breakpoint(small-laptop) { - padding: 0; - } + &__left, + &__right { + display: flex; + align-items: center; + } + + &__left { + gap: 32px; } &__theme-toggle { margin-right: 0.25rem; @include daff.breakpoint(tablet) { - margin-right: 1rem; + margin-right: 0; } } - &__menu-container { - display: flex; - } - &__menu { margin: 0; padding: 0; @@ -53,6 +51,7 @@ @include daff.breakpoint(tablet) { display: flex; align-items: center; + gap: 16px; } } diff --git a/apps/daffio/src/app/core/header/components/header/header.component.spec.ts b/apps/daffio/src/app/core/header/components/header/header.component.spec.ts index 541856594b..e2756dd325 100644 --- a/apps/daffio/src/app/core/header/components/header/header.component.spec.ts +++ b/apps/daffio/src/app/core/header/components/header/header.component.spec.ts @@ -3,9 +3,7 @@ import { TestBed, waitForAsync, } from '@angular/core/testing'; -import { By } from '@angular/platform-browser'; -import { DaffContainerModule } from '@daffodil/design/container'; import { DaffNavbarModule } from '@daffodil/design/navbar'; import { DaffioHeaderComponent } from './header.component'; @@ -17,7 +15,6 @@ describe('DaffioHeaderComponent', () => { beforeEach(waitForAsync(() => { TestBed.configureTestingModule({ imports: [ - DaffContainerModule, DaffNavbarModule, ], declarations: [ @@ -36,12 +33,4 @@ describe('DaffioHeaderComponent', () => { it('should create', () => { expect(component).toBeTruthy(); }); - - describe('on ', () => { - it('should set size="md"', () => { - const container = fixture.debugElement.query(By.css('daff-container')); - - expect(container.componentInstance.size).toEqual('md'); - }); - }); }); diff --git a/apps/daffio/src/app/core/header/containers/docs-header/docs-header.component.html b/apps/daffio/src/app/core/header/containers/docs-header/docs-header.component.html index ecde57c16a..eb9ad2c602 100644 --- a/apps/daffio/src/app/core/header/containers/docs-header/docs-header.component.html +++ b/apps/daffio/src/app/core/header/containers/docs-header/docs-header.component.html @@ -1,10 +1,10 @@ - + {{ link.title }} - Get Started + Get Started - \ No newline at end of file + diff --git a/apps/daffio/src/app/core/header/containers/marketing-header/marketing-header.component.scss b/apps/daffio/src/app/core/header/containers/marketing-header/marketing-header.component.scss new file mode 100644 index 0000000000..cdbcde1b6f --- /dev/null +++ b/apps/daffio/src/app/core/header/containers/marketing-header/marketing-header.component.scss @@ -0,0 +1,13 @@ +// @use 'utilities' as daff; + +// .daffio-marketing-header { +// padding: 0 24px; + +// @include daff.breakpoint(mobile) { +// padding: 0 48px; +// } + +// @include daff.breakpoint(small-laptop) { +// padding: 0; +// } +// } \ No newline at end of file diff --git a/apps/daffio/src/app/core/header/containers/marketing-header/marketing-header.component.ts b/apps/daffio/src/app/core/header/containers/marketing-header/marketing-header.component.ts index 65cb348691..f6f518c81e 100644 --- a/apps/daffio/src/app/core/header/containers/marketing-header/marketing-header.component.ts +++ b/apps/daffio/src/app/core/header/containers/marketing-header/marketing-header.component.ts @@ -10,14 +10,15 @@ import { ToggleSidebar } from '../../../../core/sidebar/actions/sidebar.actions' @Component({ selector: 'daffio-marketing-header-container', templateUrl: './marketing-header.component.html', + styleUrls: ['./marketing-header.component.scss'], changeDetection: ChangeDetectionStrategy.OnPush, }) export class DaffioMarketingHeaderContainer { faBars = faBars; links: any[] = [ - { path: '/api', title: 'Docs' }, { path: '/why-pwa', title: 'Why PWA' }, + { path: '/api', title: 'Docs' }, ]; constructor(private store: Store) { } diff --git a/apps/daffio/src/app/core/header/containers/marketing-header/marketing-header.module.ts b/apps/daffio/src/app/core/header/containers/marketing-header/marketing-header.module.ts index 9b252a99b9..2b2d70ee45 100644 --- a/apps/daffio/src/app/core/header/containers/marketing-header/marketing-header.module.ts +++ b/apps/daffio/src/app/core/header/containers/marketing-header/marketing-header.module.ts @@ -5,6 +5,7 @@ import { FontAwesomeModule } from '@fortawesome/angular-fontawesome'; import { DaffLogoModule } from '@daffodil/branding'; import { DaffButtonModule } from '@daffodil/design/button'; +import { DaffContainerModule } from '@daffodil/design/container'; import { DaffThemeSwitchButtonModule } from '@daffodil/theme-switch'; import { DaffioMarketingHeaderContainer } from './marketing-header.component'; @@ -19,6 +20,7 @@ import { DaffioHeaderComponentModule } from '../../components/header.module'; DaffLogoModule, DaffButtonModule, DaffThemeSwitchButtonModule, + DaffContainerModule, FontAwesomeModule, ], diff --git a/apps/daffio/src/app/core/sidebar/components/marketing-sidebar/marketing-sidebar.component.ts b/apps/daffio/src/app/core/sidebar/components/marketing-sidebar/marketing-sidebar.component.ts index db14236cd3..5cfe7e5b41 100644 --- a/apps/daffio/src/app/core/sidebar/components/marketing-sidebar/marketing-sidebar.component.ts +++ b/apps/daffio/src/app/core/sidebar/components/marketing-sidebar/marketing-sidebar.component.ts @@ -11,7 +11,7 @@ import { }) export class DaffioMarketingSidebarComponent { links: any[] = [ - { path: '/api', title: 'Docs' }, { path: '/why-pwa', title: 'Why PWA' }, + { path: '/api', title: 'Docs' }, ]; } diff --git a/libs/branding/src/lib/logo/logo.component.scss b/libs/branding/src/lib/logo/logo.component.scss index 2486878d86..b6567708fc 100644 --- a/libs/branding/src/lib/logo/logo.component.scss +++ b/libs/branding/src/lib/logo/logo.component.scss @@ -1,4 +1,4 @@ :host { - display: block; + display: flex; width: 100%; }