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

refactor: finalize bootstrap-driven layout and widget runtime

Browse Source
This commit is contained in:
sdarbinyan
2026-07-05 04:17:31 +04:00
parent 6550250d13
commit c901ec1e49
19 changed files with 697 additions and 181 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

@@ -34,7 +34,14 @@ import { Category } from '../../core/categories/models/category-domain.model';
[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">
<div
class="dynamic-widget"
[attr.data-widget-type]="widget.type"
[style.--widget-padding]="widget.padding ?? null"
[class.dynamic-widget--desktop-hidden]="widget.visibility?.desktop === false"
[class.dynamic-widget--tablet-hidden]="widget.visibility?.tablet === false"
[class.dynamic-widget--mobile-hidden]="widget.visibility?.mobile === false"
>
@if (resolveWidget(widget, section, model.id) | async; as resolved) {
<ng-container *ngComponentOutlet="$any(resolved).component; inputs: { section: $any(resolved).section, data: $any(resolved).data }; outputs: { categorySelected: onCategorySelected.bind(this) }"></ng-container>
}
@@ -51,12 +58,28 @@ import { Category } from '../../core/categories/models/category-domain.model';
`
.dynamic-page-layout { display: block; }
.dynamic-page-layout[data-layout='sidebar-left'] .dynamic-section[data-section-type='sidebar-left'] .dynamic-section__content {
grid-template-columns: minmax(240px, 320px) minmax(0, 1fr);
}
.dynamic-page-layout[data-layout='minimal'] .dynamic-section[data-section-type='hero'] {
display: none;
}
.dynamic-page-layout[data-layout='carousel-home'] .dynamic-section[data-section-type='hero'] {
order: -1;
}
.dynamic-section__content {
display: grid;
gap: var(--section-gap, 1rem);
align-items: var(--section-align, stretch);
}
.dynamic-widget {
padding: var(--widget-padding, 0);
}
.dynamic-section[data-section-layout='grid'] .dynamic-section__content {
grid-template-columns: repeat(var(--section-columns, 1), minmax(0, 1fr));
}
@@ -69,11 +92,19 @@ import { Category } from '../../core/categories/models/category-domain.model';
@media (max-width: 1023px) {
.dynamic-section--tablet-hidden { display: none; }
.dynamic-widget--tablet-hidden { display: none; }
.dynamic-page-layout[data-layout='sidebar-left'] .dynamic-section[data-section-type='sidebar-left'] .dynamic-section__content {
grid-template-columns: 1fr;
}
}
@media (max-width: 767px) {
.dynamic-section--mobile-hidden { display: none; }
.dynamic-widget--mobile-hidden { display: none; }
}
.dynamic-widget--desktop-hidden { display: none; }
`
],
changeDetection: ChangeDetectionStrategy.OnPush