feat(daffio): clean up doc article template UI (#3431)

Author: xelaint

apps/daffio/src/app/docs/components/doc-article/component.html

@@ -1,10 +1,10 @@
-<button class="daffio-doc-article__menu-button" (click)="open()">
-	<fa-icon [icon]="faBars"></fa-icon>
-	<div>Menu</div>
-</button>
-<div class="daffio-doc-article__grid">
-  <div class="daffio-doc-article__content">
-    <daff-article>
+<daff-container size="lg">
+  <button class="daffio-doc-article__menu-button" (click)="open()">
+    <fa-icon [icon]="faBars"></fa-icon>
+    <div>Menu</div>
+  </button>
+  <div class="daffio-doc-article__grid">
+    <div class="daffio-doc-article__content">
       @if (breadcrumbs.length > 0) {
         <nav aria-label="Breadcrumb">
           <ol daff-breadcrumb>
@@ -20,14 +20,15 @@
           </ol>
         </nav>
       }
-
-      <ng-content></ng-content>
-    </daff-article>
-  </div>
-  @if (toc.length > 0) {
-    <daffio-docs-table-of-contents
-      class="daffio-doc-article__table-of-contents"
-      [tableOfContents]="toc">
-    </daffio-docs-table-of-contents>
-  }
-</div>
+      <daff-article>
+        <ng-content></ng-content>
+      </daff-article>
+    </div>
+    @if (toc.length > 0) {
+      <daffio-docs-table-of-contents
+        class="daffio-doc-article__table-of-contents"
+        [tableOfContents]="toc">
+      </daffio-docs-table-of-contents>
+    }
+  </div>  
+</daff-container>

apps/daffio/src/app/docs/components/doc-article/component.scss

@@ -2,47 +2,42 @@
 
 :host {
 	display: block;
-	max-width: 1340px;
-	margin: 0 auto;
 }
 
 .daffio-doc-article {
 	&__grid {
-		padding: 24px;
+		padding: 1.5rem;
 
 		@include daff.breakpoint(small-laptop) {
-			display: flex;
-			justify-content: space-between;
-			gap: 64px;
-			padding: 48px;
+			display: grid;
+			grid-template-columns: 1fr 15rem;
+			grid-gap: 4rem;
+			padding: 3rem;
 		}
 
 		@include daff.breakpoint(desktop) {
-			padding: 48px 0;
+			padding: 3rem 0;
 		}
 	}
 
 	&__content {
-		flex-grow: 1;
 		display: flex;
 		flex-direction: column;
-		gap: 24px;
+		gap: 1.5rem;
 	}
 
 	&__table-of-contents {
 		display: none;
 
 		@include daff.breakpoint(small-laptop) {
 			display: block;
-			max-width: 240px;
-			width: 100%;
 		}
 	}
 
 	&__menu-button {
 		@include daff.clickable();
 		display: flex;
-		gap: 8px;
+		gap: 0.5rem;
 		align-items: center;
 		justify-content: center;
 		background: var(--daff-theme);
@@ -51,7 +46,7 @@
 		border-bottom: 1px solid rgb(var(--daff-theme-contrast-rgb), 0.1);
 		color: var(--daff-theme-contrast);
 		overflow: auto;
-		padding: 16px 24px;
+		padding: 1rem 1.5rem;
 		position: sticky;
 		top: var(--daff-sidebar-side-fixed-top-shift);
 		width: 100%;

apps/daffio/src/app/docs/components/doc-article/module.ts

@@ -35,6 +35,7 @@ import { DaffioDocsTableOfContentsModule } from '../table-of-contents/table-of-c
     DaffBreadcrumbItemDirective,
     FontAwesomeModule,
     RouterLink,
+    DaffContainerModule,
   ],
 })
 export class DaffioDocArticleModule { }