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

2
src/app/features/website/catalog/components/category-grid/category-grid.component.html
View File

@@ -1,4 +1,4 @@
<div class="catalog-category-grid">
<div class="catalog-category-grid grid grid-4">
@for (category of categories; track trackByCategoryId($index, category)) {
<button type="button" class="catalog-category-card" (click)="categorySelected.emit(category)">
<span class="catalog-category-image">

8
src/app/features/website/catalog/components/category-grid/category-grid.component.scss
View File

@@ -1,7 +1,4 @@
.catalog-category-grid {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
gap: 24px;
}
.catalog-category-card {
@@ -100,11 +97,6 @@
}
@media (max-width: 640px) {
.catalog-category-grid {
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 16px;
}
.catalog-category-content {
min-height: 84px;
padding: 10px 12px;

2
src/app/features/website/catalog/components/product-grid/product-grid.component.html
View File

@@ -1,4 +1,4 @@
<div class="catalog-product-grid">
<div class="catalog-product-grid grid grid-4">
@for (product of products; track trackByItemId($index, product)) {
<div class="catalog-product-shell">
<app-product-card

10
src/app/features/website/catalog/components/product-grid/product-grid.component.scss
View File

@@ -1,7 +1,4 @@
.catalog-product-grid {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
gap: 24px;
align-items: stretch;
}
@@ -16,10 +13,3 @@
width: 100%;
height: 100%;
}
@media (max-width: 640px) {
.catalog-product-grid {
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 16px;
}
}

2
src/app/features/website/catalog/containers/catalog-container.component.html
View File

@@ -1,4 +1,4 @@
<main class="catalog-page">
<main class="catalog-page page-container">
<header class="catalog-header">
<a [routerLink]="'/catalog' | langRoute" class="catalog-root-link">{{ 'catalog.title' | translate }}</a>

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

@@ -16,15 +16,19 @@ 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"
>
<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">
@@ -33,6 +37,8 @@ import { WidgetHostService } from '../../dynamic-renderer/widget-host/widget-hos
}
</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);
}

8
src/app/pages/home/home.component.html
View File

@@ -1,7 +1,11 @@
@if (loading()) {
<section class="home-loading">Loading homepage...</section>
<section class="home-loading section">
<div class="page-container">Loading homepage...</div>
</section>
} @else if (pageModel()) {
<app-dynamic-page-layout [model]="pageModel()" />
} @else {
<section class="home-empty">No page configuration found.</section>
<section class="home-empty section">
<div class="page-container">No page configuration found.</div>
</section>
}

8
src/app/pages/public/platform-home.component.ts
View File

@@ -10,11 +10,15 @@ import { WebsiteRuntimeFacade } from '../../facades/website/website-runtime.faca
imports: [DynamicPageLayoutComponent],
template: `
@if (loading()) {
<section class="platform-loading">Loading platform page...</section>
<section class="platform-loading section">
<div class="page-container">Loading platform page...</div>
</section>
} @else if (model()) {
<app-dynamic-page-layout [model]="model()" />
} @else {
<section class="platform-empty">No page configuration found.</section>
<section class="platform-empty section">
<div class="page-container">No page configuration found.</div>
</section>
}
`,
styles: [

2
src/app/widgets/ui/categories-widget.component.ts
View File

@@ -31,7 +31,7 @@ import { LanguageService } from '../../services/language.service';
`,
styles: [
`
.categories-widget { padding: 1rem 0; display: grid; gap: 1rem; }
.categories-widget { display: grid; gap: 1rem; }
.categories-widget__empty { margin: 0; color: var(--text-secondary, #667a77); }
`
],

2
src/app/widgets/ui/product-carousel-widget.component.ts
View File

@@ -23,7 +23,7 @@ import { ProductCollectionWidgetData } from '../contracts/widget-data.contract';
`,
styles: [
`
.product-carousel-widget { padding: 1rem; }
.product-carousel-widget { display: grid; gap: 1rem; }
.product-carousel-widget__empty { margin: 0; color: var(--text-secondary, #667a77); }
`
],

81
src/styles.scss
View File

@@ -49,6 +49,11 @@
padding: 0;
}
*::before,
*::after {
box-sizing: inherit;
}
html {
font-size: 16px;
-webkit-font-smoothing: antialiased;
@@ -57,7 +62,7 @@ html {
}
body {
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
font-family: 'DM Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
line-height: 1.6;
color: var(--text-primary);
background: #f5f5f5;
@@ -69,6 +74,23 @@ body {
}
}
h1, h2, h3, h4, h5, h6 {
font-weight: 700;
line-height: 1.25;
}
p {
line-height: 1.5;
}
img,
svg,
video,
canvas {
display: block;
max-width: 100%;
}
/* Smooth Transitions */
a, button, input, textarea, select {
transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
@@ -109,10 +131,61 @@ a, button, input, textarea, select {
}
/* Utility Classes */
.container {
max-width: 1200px;
.page-container {
max-width: 1280px;
margin: 0 auto;
padding: 0 20px;
padding: 24px 16px;
width: 100%;
}
/* Backward-compatible alias while foundation migration is in progress. */
.container {
max-width: 1280px;
margin: 0 auto;
padding: 24px 16px;
width: 100%;
}
.section {
margin: 24px 0;
}
.grid {
display: grid;
gap: 16px;
}
.grid-2 {
grid-template-columns: repeat(2, minmax(0, 1fr));
}
.grid-3 {
grid-template-columns: repeat(3, minmax(0, 1fr));
}
.grid-4 {
grid-template-columns: repeat(4, minmax(0, 1fr));
}
@media (max-width: 1200px) {
.grid-4 {
grid-template-columns: repeat(3, minmax(0, 1fr));
}
}
@media (max-width: 900px) {
.grid-3,
.grid-4 {
grid-template-columns: repeat(2, minmax(0, 1fr));
}
}
@media (max-width: 640px) {
.grid-2,
.grid-3,
.grid-4 {
grid-template-columns: 1fr;
}
}
.text-center {