sdarbinyan/marketplaces
0
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat ui foundation layer for page container sections and grid

Browse Source
This commit is contained in:
sdarbinyan
2026-07-05 02:50:53 +04:00
parent 145a13857d
commit 0089790d41
11 changed files with 114 additions and 44 deletions
Download Patch File Download Diff File Expand all files Collapse all files

33
src/app/layouts/containers/dynamic-page-layout.component.ts
View File

@@ -16,23 +16,29 @@ import { WidgetHostService } from '../../dynamic-renderer/widget-host/widget-hos
<main class="dynamic-page-layout" [attr.data-layout]="model.layout">
@for (section of model.sections; track section.id) {
<section
class="dynamic-section"
class="section dynamic-section"
[attr.data-section-type]="section.type"
[attr.data-section-layout]="section.layout?.strategy ?? section.type"
[style.--section-columns]="section.layout?.columns ?? null"
[style.--section-gap]="section.layout?.gap ?? null"
[style.--section-align]="section.layout?.align ?? null"
[class.dynamic-section--desktop-hidden]="section.visibility?.desktop === false"
[class.dynamic-section--tablet-hidden]="section.visibility?.tablet === false"
[class.dynamic-section--mobile-hidden]="section.visibility?.mobile === false"
>
@for (widget of section.widgets; track widget.id) {
<div class="dynamic-widget" [attr.data-widget-type]="widget.type">
@if (resolveWidget(widget, section, model.id) | async; as resolved) {
<ng-container *ngComponentOutlet="$any(resolved).component; inputs: { section: $any(resolved).section, data: $any(resolved).data }"></ng-container>
<div class="page-container">
<div
class="dynamic-section__content"
[style.--section-columns]="section.layout?.columns ?? null"
[style.--section-gap]="section.layout?.gap ?? null"
[style.--section-align]="section.layout?.align ?? null"
>
@for (widget of section.widgets; track widget.id) {
<div class="dynamic-widget" [attr.data-widget-type]="widget.type">
@if (resolveWidget(widget, section, model.id) | async; as resolved) {
<ng-container *ngComponentOutlet="$any(resolved).component; inputs: { section: $any(resolved).section, data: $any(resolved).data }"></ng-container>
}
</div>
}
</div>
}
</div>
</section>
}
</main>
@@ -40,18 +46,19 @@ import { WidgetHostService } from '../../dynamic-renderer/widget-host/widget-hos
`,
styles: [
`
.dynamic-page-layout { display: grid; gap: 1.5rem; }
.dynamic-section {
.dynamic-page-layout { display: block; }
.dynamic-section__content {
display: grid;
gap: var(--section-gap, 1rem);
align-items: var(--section-align, stretch);
}
.dynamic-section[data-section-layout='grid'] {
.dynamic-section[data-section-layout='grid'] .dynamic-section__content {
grid-template-columns: repeat(var(--section-columns, 1), minmax(0, 1fr));
}
.dynamic-section[data-section-layout='hero'] {
.dynamic-section[data-section-layout='hero'] .dynamic-section__content {
grid-template-columns: minmax(0, 1fr);
}