From 39666547e0669767785d2ab333b115ca8e77cb8b Mon Sep 17 00:00:00 2001 From: Elain T Date: Tue, 16 Jan 2024 10:39:33 -0500 Subject: [PATCH] feat(daffio): clean up doc viewer UI (#2722) --- .../doc-viewer/doc-viewer.component.html | 15 +++++- .../doc-viewer/doc-viewer.component.scss | 51 ++++++++++++++----- .../doc-viewer/doc-viewer.component.ts | 2 + .../doc-viewer/doc-viewer.module.ts | 8 +++ .../table-of-contents.component.html | 4 +- .../table-of-contents.component.scss | 17 ++++--- 6 files changed, 70 insertions(+), 27 deletions(-) diff --git a/apps/daffio/src/app/docs/components/doc-viewer/doc-viewer.component.html b/apps/daffio/src/app/docs/components/doc-viewer/doc-viewer.component.html index f5ae4dc2c6..558f1ff228 100644 --- a/apps/daffio/src/app/docs/components/doc-viewer/doc-viewer.component.html +++ b/apps/daffio/src/app/docs/components/doc-viewer/doc-viewer.component.html @@ -1,4 +1,15 @@ +
- - + + + +
diff --git a/apps/daffio/src/app/docs/components/doc-viewer/doc-viewer.component.scss b/apps/daffio/src/app/docs/components/doc-viewer/doc-viewer.component.scss index f7f2cceec0..fc02f66813 100644 --- a/apps/daffio/src/app/docs/components/doc-viewer/doc-viewer.component.scss +++ b/apps/daffio/src/app/docs/components/doc-viewer/doc-viewer.component.scss @@ -2,35 +2,58 @@ :host { display: block; + max-width: 1340px; + margin: 0 auto; } .daffio-doc-viewer { &__grid { - display: grid; - grid-template-columns: 1fr; - grid-template-areas: - 'content'; - padding: 48px; - - @include daff.breakpoint(big-tablet) { - grid-template-columns: minmax(0px, 960px) 240px; - grid-template-areas: - 'content table-of-contents'; + padding: 24px; + + @include daff.breakpoint(small-laptop) { + display: flex; + justify-content: space-between; + gap: 64px; padding: 48px; - grid-gap: 48px; + } + + @include daff.breakpoint(desktop) { + padding: 48px 0; } } &__content { - grid-area: content; + flex-grow: 1; } &__table-of-contents { display: none; - @include daff.breakpoint(big-tablet) { + @include daff.breakpoint(small-laptop) { display: block; - grid-area: table-of-contents; + max-width: 240px; + width: 100%; + } + } + + &__packages-button { + @include daff.clickable(); + display: flex; + gap: 8px; + align-items: center; + justify-content: center; + background: white; + border: 0; + border-top: 1px solid rgb(var(--daff-theme-contrast-rgb), 0.1); + border-bottom: 1px solid rgb(var(--daff-theme-contrast-rgb), 0.1); + overflow: auto; + padding: 16px 24px; + position: sticky; + top: var(--daff-sidebar-side-fixed-top-shift); + width: 100%; + + @include daff.breakpoint(big-tablet) { + display: none; } } } diff --git a/apps/daffio/src/app/docs/components/doc-viewer/doc-viewer.component.ts b/apps/daffio/src/app/docs/components/doc-viewer/doc-viewer.component.ts index 0c13a48f00..aaba903d37 100644 --- a/apps/daffio/src/app/docs/components/doc-viewer/doc-viewer.component.ts +++ b/apps/daffio/src/app/docs/components/doc-viewer/doc-viewer.component.ts @@ -8,6 +8,7 @@ import { DomSanitizer, SafeHtml, } from '@angular/platform-browser'; +import { faBars } from '@fortawesome/free-solid-svg-icons'; import { DaffioDoc } from '../../models/doc'; @@ -18,6 +19,7 @@ import { DaffioDoc } from '../../models/doc'; changeDetection: ChangeDetectionStrategy.OnPush, }) export class DaffioDocViewerComponent implements OnChanges { + faBars = faBars; constructor(private sanitizer: DomSanitizer) {} diff --git a/apps/daffio/src/app/docs/components/doc-viewer/doc-viewer.module.ts b/apps/daffio/src/app/docs/components/doc-viewer/doc-viewer.module.ts index 2873a042aa..f97dce4886 100644 --- a/apps/daffio/src/app/docs/components/doc-viewer/doc-viewer.module.ts +++ b/apps/daffio/src/app/docs/components/doc-viewer/doc-viewer.module.ts @@ -1,7 +1,11 @@ import { CommonModule } from '@angular/common'; import { NgModule } from '@angular/core'; +import { FontAwesomeModule } from '@fortawesome/angular-fontawesome'; import { DaffArticleModule } from '@daffodil/design/article'; +import { DaffButtonModule } from '@daffodil/design/button'; +import { DaffContainerModule } from '@daffodil/design/container'; +import { DaffSidebarModule } from '@daffodil/design/sidebar'; import { DaffioDocViewerComponent } from './doc-viewer.component'; import { DaffioDocsTableOfContentsModule } from '../table-of-contents/table-of-contents.module'; @@ -16,7 +20,11 @@ import { DaffioDocsTableOfContentsModule } from '../table-of-contents/table-of-c imports: [ CommonModule, DaffArticleModule, + DaffContainerModule, DaffioDocsTableOfContentsModule, + DaffSidebarModule, + DaffButtonModule, + FontAwesomeModule, ], }) export class DaffioDocViewerModule { } diff --git a/apps/daffio/src/app/docs/components/table-of-contents/table-of-contents.component.html b/apps/daffio/src/app/docs/components/table-of-contents/table-of-contents.component.html index 75ed58c258..4c1a6244fc 100644 --- a/apps/daffio/src/app/docs/components/table-of-contents/table-of-contents.component.html +++ b/apps/daffio/src/app/docs/components/table-of-contents/table-of-contents.component.html @@ -1,5 +1,3 @@ \ No newline at end of file diff --git a/apps/daffio/src/app/docs/components/table-of-contents/table-of-contents.component.scss b/apps/daffio/src/app/docs/components/table-of-contents/table-of-contents.component.scss index effab5a514..d1c217f724 100644 --- a/apps/daffio/src/app/docs/components/table-of-contents/table-of-contents.component.scss +++ b/apps/daffio/src/app/docs/components/table-of-contents/table-of-contents.component.scss @@ -5,22 +5,23 @@ } .daffio-docs-table-of-contents { - position: sticky; + display: flex; + flex-direction: column; + gap: 4px; max-height: 100vh; overflow: auto; - top: var(--daff-sidebar-side-fixed-top-shift); + position: sticky; + top: calc(var(--daff-sidebar-side-fixed-top-shift) + 48px); &__item { display: block; + font-size: 1rem; + line-height: 1.25rem; + text-decoration: none; &:first-of-type { @include daff.embolden(); - padding: 0 0 8px; - margin: 0 0 16px; - } - - a { - text-decoration: none; + margin: 0 0 24px; } &--level-1 {