feat(front-end): back-office desing improvements
This commit is contained in:
@@ -64,6 +64,13 @@ export const ADMIN_ROUTES: Routes = [
|
||||
(m) => m.AdminHomeMediaComponent,
|
||||
),
|
||||
},
|
||||
{
|
||||
path: 'shop',
|
||||
loadComponent: () =>
|
||||
import('./pages/admin-shop.component').then(
|
||||
(m) => m.AdminShopComponent,
|
||||
),
|
||||
},
|
||||
],
|
||||
},
|
||||
];
|
||||
|
||||
@@ -1,5 +1,5 @@
|
||||
<section class="cad-page">
|
||||
<header class="page-header">
|
||||
<section class="cad-page section-card">
|
||||
<header class="page-header section-header">
|
||||
<div>
|
||||
<h1>Fatture CAD</h1>
|
||||
<p>
|
||||
|
||||
@@ -4,6 +4,13 @@
|
||||
gap: var(--space-5);
|
||||
}
|
||||
|
||||
.section-header {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
gap: var(--space-4);
|
||||
align-items: flex-start;
|
||||
}
|
||||
|
||||
.page-header {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
@@ -131,6 +138,11 @@ td {
|
||||
}
|
||||
|
||||
@media (max-width: 880px) {
|
||||
.section-header {
|
||||
flex-direction: column;
|
||||
align-items: stretch;
|
||||
}
|
||||
|
||||
.page-header {
|
||||
flex-direction: column;
|
||||
align-items: stretch;
|
||||
|
||||
@@ -1,8 +1,8 @@
|
||||
<section class="section-card ui-section-card">
|
||||
<header class="section-header ui-section-header">
|
||||
<div class="header-copy ui-section-header__copy">
|
||||
<h2 class="ui-section-header__title">Richieste di contatto</h2>
|
||||
<p class="ui-section-header__description">
|
||||
<section class="section-card">
|
||||
<header class="section-header">
|
||||
<div class="header-copy">
|
||||
<h2>Richieste di contatto</h2>
|
||||
<p>
|
||||
Richieste preventivo personalizzato ricevute dal sito.
|
||||
</p>
|
||||
<span class="total-pill ui-pill">{{ requests.length }} richieste</span>
|
||||
|
||||
@@ -4,6 +4,22 @@
|
||||
gap: var(--space-5);
|
||||
}
|
||||
|
||||
.section-header {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: flex-start;
|
||||
gap: var(--space-4);
|
||||
}
|
||||
|
||||
.section-header h2 {
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
.section-header p {
|
||||
margin: var(--space-2) 0 0;
|
||||
color: var(--color-text-muted);
|
||||
}
|
||||
|
||||
.header-copy {
|
||||
display: grid;
|
||||
gap: var(--space-1);
|
||||
@@ -204,6 +220,11 @@ tbody tr.selected {
|
||||
}
|
||||
|
||||
@media (max-width: 760px) {
|
||||
.section-header {
|
||||
flex-direction: column;
|
||||
align-items: stretch;
|
||||
}
|
||||
|
||||
.detail-header {
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
@@ -1,8 +1,8 @@
|
||||
<section class="admin-dashboard ui-section-card">
|
||||
<header class="dashboard-header ui-section-header">
|
||||
<div class="ui-section-header__copy">
|
||||
<h1 class="ui-section-header__title">Ordini</h1>
|
||||
<p class="ui-section-header__description">
|
||||
<section class="admin-dashboard section-card">
|
||||
<header class="dashboard-header section-header">
|
||||
<div>
|
||||
<h1>Ordini</h1>
|
||||
<p>
|
||||
Seleziona un ordine a sinistra e gestiscilo nel dettaglio a destra.
|
||||
</p>
|
||||
</div>
|
||||
|
||||
@@ -4,6 +4,22 @@
|
||||
gap: var(--space-5);
|
||||
}
|
||||
|
||||
.section-header {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: flex-start;
|
||||
gap: var(--space-4);
|
||||
}
|
||||
|
||||
.dashboard-header h1 {
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
.dashboard-header p {
|
||||
margin: var(--space-2) 0 0;
|
||||
color: var(--color-text-muted);
|
||||
}
|
||||
|
||||
.header-actions {
|
||||
display: flex;
|
||||
gap: var(--space-2);
|
||||
@@ -308,6 +324,11 @@ h4 {
|
||||
gap: var(--space-4);
|
||||
}
|
||||
|
||||
.section-header {
|
||||
flex-direction: column;
|
||||
align-items: stretch;
|
||||
}
|
||||
|
||||
.list-toolbar {
|
||||
grid-template-columns: 1fr;
|
||||
}
|
||||
|
||||
@@ -27,18 +27,18 @@
|
||||
|
||||
.content {
|
||||
display: grid;
|
||||
gap: var(--space-4);
|
||||
gap: var(--space-3);
|
||||
}
|
||||
|
||||
.panel {
|
||||
border: 1px solid var(--color-border);
|
||||
border-radius: var(--radius-lg);
|
||||
padding: var(--space-4);
|
||||
padding: var(--space-3);
|
||||
background: var(--color-bg-card);
|
||||
}
|
||||
|
||||
.panel > h3 {
|
||||
margin: 0 0 var(--space-3);
|
||||
margin: 0 0 var(--space-2);
|
||||
}
|
||||
|
||||
.panel-header {
|
||||
@@ -46,7 +46,7 @@
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
gap: var(--space-2);
|
||||
margin-bottom: var(--space-3);
|
||||
margin-bottom: var(--space-2);
|
||||
}
|
||||
|
||||
.panel-header h3 {
|
||||
@@ -56,25 +56,26 @@
|
||||
.create-grid {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(2, minmax(0, 1fr));
|
||||
gap: var(--space-3);
|
||||
gap: var(--space-2);
|
||||
align-items: start;
|
||||
}
|
||||
|
||||
.subpanel {
|
||||
border: 1px solid var(--color-border);
|
||||
border-radius: var(--radius-md);
|
||||
padding: var(--space-3);
|
||||
padding: var(--space-2);
|
||||
background: var(--color-neutral-100);
|
||||
}
|
||||
|
||||
.subpanel h4 {
|
||||
margin: 0 0 var(--space-3);
|
||||
margin: 0 0 var(--space-2);
|
||||
}
|
||||
|
||||
.form-grid {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(2, minmax(0, 1fr));
|
||||
gap: var(--space-2) var(--space-3);
|
||||
margin-bottom: var(--space-3);
|
||||
gap: var(--space-2);
|
||||
margin-bottom: var(--space-2);
|
||||
}
|
||||
|
||||
.form-field {
|
||||
@@ -87,7 +88,7 @@
|
||||
}
|
||||
|
||||
.form-field > span {
|
||||
font-size: 0.8rem;
|
||||
font-size: 0.9rem;
|
||||
color: var(--color-text-muted);
|
||||
font-weight: 600;
|
||||
}
|
||||
@@ -97,9 +98,10 @@ select {
|
||||
width: 100%;
|
||||
border: 1px solid var(--color-border);
|
||||
border-radius: var(--radius-md);
|
||||
padding: var(--space-2) var(--space-3);
|
||||
padding: var(--space-2);
|
||||
background: var(--color-bg-card);
|
||||
font: inherit;
|
||||
font-size: 1rem;
|
||||
color: var(--color-text);
|
||||
}
|
||||
|
||||
@@ -111,8 +113,8 @@ select:disabled {
|
||||
.toggle-group {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
gap: var(--space-2);
|
||||
margin-bottom: var(--space-3);
|
||||
gap: 0.55rem;
|
||||
margin-bottom: var(--space-2);
|
||||
}
|
||||
|
||||
.toggle {
|
||||
@@ -121,7 +123,7 @@ select:disabled {
|
||||
gap: 0.4rem;
|
||||
border: 1px solid var(--color-border);
|
||||
border-radius: 999px;
|
||||
padding: 0.35rem 0.65rem;
|
||||
padding: 0.28rem 0.55rem;
|
||||
background: var(--color-bg-card);
|
||||
}
|
||||
|
||||
@@ -132,14 +134,14 @@ select:disabled {
|
||||
}
|
||||
|
||||
.toggle span {
|
||||
font-size: 0.88rem;
|
||||
font-size: 0.84rem;
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
.material-grid,
|
||||
.variant-list {
|
||||
display: grid;
|
||||
gap: var(--space-3);
|
||||
gap: var(--space-2);
|
||||
}
|
||||
|
||||
.material-card,
|
||||
@@ -147,7 +149,7 @@ select:disabled {
|
||||
border: 1px solid var(--color-border);
|
||||
border-radius: var(--radius-md);
|
||||
background: var(--color-neutral-100);
|
||||
padding: var(--space-3);
|
||||
padding: var(--space-2);
|
||||
}
|
||||
|
||||
.material-grid {
|
||||
@@ -162,7 +164,7 @@ select:disabled {
|
||||
display: flex;
|
||||
align-items: flex-start;
|
||||
gap: var(--space-2);
|
||||
margin-bottom: var(--space-3);
|
||||
margin-bottom: var(--space-2);
|
||||
}
|
||||
|
||||
.variant-header strong {
|
||||
@@ -179,9 +181,9 @@ select:disabled {
|
||||
.variant-collapsed-summary {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
gap: var(--space-3);
|
||||
gap: var(--space-2);
|
||||
color: var(--color-text-muted);
|
||||
font-size: 0.92rem;
|
||||
font-size: 0.88rem;
|
||||
}
|
||||
|
||||
.color-summary {
|
||||
@@ -222,8 +224,8 @@ select:disabled {
|
||||
}
|
||||
|
||||
.variant-meta {
|
||||
margin: 0 0 var(--space-3);
|
||||
font-size: 0.9rem;
|
||||
margin: 0 0 var(--space-2);
|
||||
font-size: 0.88rem;
|
||||
color: var(--color-text-muted);
|
||||
}
|
||||
|
||||
@@ -233,7 +235,10 @@ button {
|
||||
background: var(--color-brand);
|
||||
color: var(--color-neutral-900);
|
||||
padding: var(--space-2) var(--space-4);
|
||||
font: inherit;
|
||||
font-size: 1rem;
|
||||
font-weight: 600;
|
||||
line-height: 1.2;
|
||||
cursor: pointer;
|
||||
transition: background-color 0.2s ease;
|
||||
}
|
||||
@@ -326,10 +331,10 @@ button:disabled {
|
||||
border: 1px solid var(--color-border);
|
||||
border-radius: var(--radius-lg);
|
||||
box-shadow: var(--shadow-sm);
|
||||
padding: var(--space-4);
|
||||
padding: var(--space-3);
|
||||
z-index: 1101;
|
||||
display: grid;
|
||||
gap: var(--space-3);
|
||||
gap: var(--space-2);
|
||||
}
|
||||
|
||||
.confirm-dialog h4 {
|
||||
|
||||
@@ -1,8 +1,8 @@
|
||||
<section class="section-card ui-section-card ui-stack ui-stack--roomy">
|
||||
<header class="section-header ui-section-header">
|
||||
<div class="header-copy ui-section-header__copy">
|
||||
<section class="section-card ui-stack ui-stack--roomy">
|
||||
<header class="section-header">
|
||||
<div class="header-copy">
|
||||
<p class="eyebrow ui-eyebrow ui-eyebrow--compact">Back-office media</p>
|
||||
<h2 class="ui-section-header__title">Media home</h2>
|
||||
<h2>Media home</h2>
|
||||
</div>
|
||||
<div class="header-side ui-stack ui-stack--dense">
|
||||
<div class="header-stats ui-inline-actions">
|
||||
|
||||
@@ -1,3 +1,25 @@
|
||||
.section-card {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: var(--space-5);
|
||||
}
|
||||
|
||||
.section-header {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: flex-start;
|
||||
gap: var(--space-4);
|
||||
}
|
||||
|
||||
.section-header h2 {
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
.header-copy {
|
||||
display: grid;
|
||||
gap: var(--space-1);
|
||||
}
|
||||
|
||||
.form-field--wide {
|
||||
grid-column: 1 / -1;
|
||||
}
|
||||
@@ -100,6 +122,11 @@
|
||||
}
|
||||
|
||||
@media (max-width: 720px) {
|
||||
.section-header {
|
||||
flex-direction: column;
|
||||
align-items: stretch;
|
||||
}
|
||||
|
||||
.media-panel-meta {
|
||||
justify-content: flex-start;
|
||||
}
|
||||
|
||||
@@ -33,13 +33,16 @@ form {
|
||||
}
|
||||
|
||||
label {
|
||||
font-size: 0.9rem;
|
||||
font-weight: 600;
|
||||
color: var(--color-text-muted);
|
||||
}
|
||||
|
||||
input {
|
||||
border: 1px solid var(--color-border);
|
||||
border-radius: var(--radius-md);
|
||||
padding: var(--space-3);
|
||||
padding: var(--space-2);
|
||||
font: inherit;
|
||||
font-size: 1rem;
|
||||
}
|
||||
|
||||
@@ -48,8 +51,10 @@ button {
|
||||
border-radius: var(--radius-md);
|
||||
background: var(--color-brand);
|
||||
color: var(--color-neutral-900);
|
||||
padding: var(--space-3) var(--space-4);
|
||||
padding: var(--space-2) var(--space-4);
|
||||
font: inherit;
|
||||
font-weight: 600;
|
||||
line-height: 1.2;
|
||||
cursor: pointer;
|
||||
transition: background-color 0.2s ease;
|
||||
}
|
||||
|
||||
@@ -1,8 +1,8 @@
|
||||
<section class="section-card ui-section-card">
|
||||
<header class="section-header ui-section-header">
|
||||
<div class="ui-section-header__copy">
|
||||
<h2 class="ui-section-header__title">Sessioni quote</h2>
|
||||
<p class="ui-section-header__description">
|
||||
<section class="section-card">
|
||||
<header class="section-header">
|
||||
<div>
|
||||
<h2>Sessioni quote</h2>
|
||||
<p>
|
||||
Sessioni create dal configuratore con stato e conversione ordine.
|
||||
</p>
|
||||
</div>
|
||||
|
||||
@@ -4,6 +4,22 @@
|
||||
gap: var(--space-5);
|
||||
}
|
||||
|
||||
.section-header {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: flex-start;
|
||||
gap: var(--space-4);
|
||||
}
|
||||
|
||||
.section-header h2 {
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
.section-header p {
|
||||
margin: var(--space-2) 0 0;
|
||||
color: var(--color-text-muted);
|
||||
}
|
||||
|
||||
.error {
|
||||
color: var(--color-danger-500);
|
||||
margin: 0;
|
||||
@@ -69,6 +85,11 @@
|
||||
}
|
||||
|
||||
@media (max-width: 900px) {
|
||||
.section-header {
|
||||
flex-direction: column;
|
||||
align-items: stretch;
|
||||
}
|
||||
|
||||
.actions {
|
||||
flex-wrap: wrap;
|
||||
}
|
||||
|
||||
@@ -18,6 +18,7 @@
|
||||
<a routerLink="sessions" routerLinkActive="active">Sessioni</a>
|
||||
<a routerLink="cad-invoices" routerLinkActive="active">Fatture CAD</a>
|
||||
<a routerLink="home-media" routerLinkActive="active">Media home</a>
|
||||
<a routerLink="shop" routerLinkActive="active">Shop</a>
|
||||
</nav>
|
||||
</div>
|
||||
|
||||
|
||||
@@ -97,6 +97,56 @@
|
||||
min-width: 0;
|
||||
}
|
||||
|
||||
:host ::ng-deep .content .ui-form-control {
|
||||
padding: var(--space-2);
|
||||
font-size: 1rem;
|
||||
}
|
||||
|
||||
:host ::ng-deep .content select.ui-form-control {
|
||||
background-position: right 0.75rem center;
|
||||
padding-right: 2.35rem;
|
||||
}
|
||||
|
||||
:host ::ng-deep .content .ui-form-caption {
|
||||
font-size: 0.9rem;
|
||||
}
|
||||
|
||||
:host ::ng-deep .content .ui-button {
|
||||
padding: var(--space-2) var(--space-4);
|
||||
font-size: 1rem;
|
||||
line-height: 1.2;
|
||||
}
|
||||
|
||||
:host ::ng-deep .content .ui-checkbox {
|
||||
gap: 0.85rem;
|
||||
font-size: 1rem;
|
||||
}
|
||||
|
||||
:host ::ng-deep .content .ui-checkbox__mark {
|
||||
width: 1.25rem;
|
||||
height: 1.25rem;
|
||||
}
|
||||
|
||||
:host ::ng-deep .content .ui-file-picker__button,
|
||||
:host ::ng-deep .content .ui-file-picker__name {
|
||||
font-size: 1rem;
|
||||
}
|
||||
|
||||
:host ::ng-deep .content .ui-language-toolbar {
|
||||
padding: var(--space-2);
|
||||
}
|
||||
|
||||
:host ::ng-deep .content .ui-language-toolbar__copy span,
|
||||
:host ::ng-deep .content .ui-language-toolbar__copy p,
|
||||
:host ::ng-deep .content .ui-language-toolbar__button {
|
||||
font-size: 0.9rem;
|
||||
}
|
||||
|
||||
:host ::ng-deep .content .ui-language-toolbar__button {
|
||||
min-width: 2.8rem;
|
||||
padding: 0.4rem 0.6rem;
|
||||
}
|
||||
|
||||
@media (max-width: 1240px) {
|
||||
.admin-shell {
|
||||
grid-template-columns: 220px minmax(0, 1fr);
|
||||
|
||||
1131
frontend/src/app/features/admin/pages/admin-shop.component.html
Normal file
1131
frontend/src/app/features/admin/pages/admin-shop.component.html
Normal file
File diff suppressed because it is too large
Load Diff
437
frontend/src/app/features/admin/pages/admin-shop.component.scss
Normal file
437
frontend/src/app/features/admin/pages/admin-shop.component.scss
Normal file
@@ -0,0 +1,437 @@
|
||||
.admin-shop {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: var(--space-5);
|
||||
}
|
||||
|
||||
.section-header {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: flex-start;
|
||||
gap: var(--space-4);
|
||||
}
|
||||
|
||||
.shop-header {
|
||||
align-items: flex-start;
|
||||
}
|
||||
|
||||
.shop-header h1 {
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
.shop-header p {
|
||||
margin: var(--space-2) 0 0;
|
||||
color: var(--color-text-muted);
|
||||
}
|
||||
|
||||
.header-actions {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
justify-content: flex-end;
|
||||
gap: var(--space-2);
|
||||
}
|
||||
|
||||
.workspace {
|
||||
align-items: start;
|
||||
}
|
||||
|
||||
.resizable-workspace {
|
||||
display: flex;
|
||||
align-items: flex-start;
|
||||
gap: 0;
|
||||
}
|
||||
|
||||
.resizable-workspace .list-panel {
|
||||
flex: 0 0 var(--shop-list-panel-width, 53%);
|
||||
width: var(--shop-list-panel-width, 53%);
|
||||
}
|
||||
|
||||
.resizable-workspace .detail-panel {
|
||||
flex: 1 1 auto;
|
||||
}
|
||||
|
||||
.list-panel,
|
||||
.detail-panel {
|
||||
min-width: 0;
|
||||
}
|
||||
|
||||
.panel-block,
|
||||
.list-panel,
|
||||
.detail-panel,
|
||||
.category-manager,
|
||||
.category-editor,
|
||||
.detail-stack,
|
||||
.form-section,
|
||||
.variant-stack,
|
||||
.image-stack,
|
||||
.media-grid,
|
||||
.model-summary {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: var(--space-3);
|
||||
}
|
||||
|
||||
.panel-heading {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: flex-start;
|
||||
gap: var(--space-3);
|
||||
}
|
||||
|
||||
.panel-heading h2,
|
||||
.panel-heading h3,
|
||||
.panel-heading h4,
|
||||
.detail-header h2 {
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
.panel-heading p,
|
||||
.detail-header p {
|
||||
margin: var(--space-1) 0 0;
|
||||
color: var(--color-text-muted);
|
||||
}
|
||||
|
||||
.list-toolbar {
|
||||
display: grid;
|
||||
grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr) minmax(0, 0.8fr);
|
||||
gap: var(--space-2);
|
||||
}
|
||||
|
||||
.list-toolbar > * {
|
||||
min-width: 0;
|
||||
}
|
||||
|
||||
.category-manager {
|
||||
gap: var(--space-2);
|
||||
}
|
||||
|
||||
.category-manager__header {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
gap: var(--space-3);
|
||||
align-items: flex-start;
|
||||
}
|
||||
|
||||
.category-manager__header h3 {
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
.category-manager__header p {
|
||||
margin: var(--space-1) 0 0;
|
||||
color: var(--color-text-muted);
|
||||
}
|
||||
|
||||
.category-manager__body {
|
||||
display: grid;
|
||||
grid-template-columns: minmax(220px, 320px) minmax(0, 1fr);
|
||||
gap: var(--space-3);
|
||||
}
|
||||
|
||||
.category-list {
|
||||
display: grid;
|
||||
gap: var(--space-2);
|
||||
max-height: 560px;
|
||||
overflow: auto;
|
||||
}
|
||||
|
||||
.category-item {
|
||||
border: 1px solid var(--color-border);
|
||||
border-radius: var(--radius-md);
|
||||
background: var(--color-bg-card);
|
||||
padding: var(--space-2);
|
||||
display: grid;
|
||||
gap: var(--space-2);
|
||||
}
|
||||
|
||||
.category-item.active {
|
||||
border-color: var(--color-brand);
|
||||
background: #fff9de;
|
||||
}
|
||||
|
||||
.category-item__main {
|
||||
width: 100%;
|
||||
border: 0;
|
||||
background: transparent;
|
||||
color: inherit;
|
||||
text-align: left;
|
||||
padding: 0;
|
||||
cursor: pointer;
|
||||
display: grid;
|
||||
gap: 4px;
|
||||
}
|
||||
|
||||
.category-item__main strong,
|
||||
.product-cell strong,
|
||||
.image-item__header strong {
|
||||
overflow-wrap: anywhere;
|
||||
}
|
||||
|
||||
.category-item__main span,
|
||||
.product-cell span {
|
||||
font-size: 0.84rem;
|
||||
color: var(--color-text-muted);
|
||||
}
|
||||
|
||||
.category-item__meta {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
gap: var(--space-2);
|
||||
}
|
||||
|
||||
.category-editor {
|
||||
gap: var(--space-3);
|
||||
}
|
||||
|
||||
.textarea-control {
|
||||
resize: vertical;
|
||||
min-height: 82px;
|
||||
}
|
||||
|
||||
.textarea-control--large {
|
||||
min-height: 136px;
|
||||
}
|
||||
|
||||
.toggle-row {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
gap: var(--space-2);
|
||||
}
|
||||
|
||||
.toggle-row--compact {
|
||||
align-items: flex-start;
|
||||
}
|
||||
|
||||
.form-field--wide {
|
||||
grid-column: 1 / -1;
|
||||
}
|
||||
|
||||
.input-with-action {
|
||||
display: grid;
|
||||
grid-template-columns: minmax(0, 1fr) auto;
|
||||
gap: var(--space-2);
|
||||
}
|
||||
|
||||
.product-cell {
|
||||
display: grid;
|
||||
gap: 4px;
|
||||
}
|
||||
|
||||
tbody tr {
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
tbody tr.selected {
|
||||
background: #fff4c0;
|
||||
}
|
||||
|
||||
.detail-panel {
|
||||
gap: var(--space-4);
|
||||
}
|
||||
|
||||
.detail-panel .ui-meta-item {
|
||||
padding: var(--space-2);
|
||||
}
|
||||
|
||||
.panel-resizer {
|
||||
position: relative;
|
||||
flex: 0 0 16px;
|
||||
align-self: stretch;
|
||||
cursor: col-resize;
|
||||
user-select: none;
|
||||
touch-action: none;
|
||||
background: transparent;
|
||||
}
|
||||
|
||||
.panel-resizer::before {
|
||||
content: "";
|
||||
position: absolute;
|
||||
top: 22px;
|
||||
bottom: 22px;
|
||||
left: 50%;
|
||||
width: 1px;
|
||||
transform: translateX(-50%);
|
||||
background: var(--color-border);
|
||||
}
|
||||
|
||||
.panel-resizer__grip {
|
||||
position: absolute;
|
||||
top: 70px;
|
||||
left: 50%;
|
||||
transform: translateX(-50%);
|
||||
width: 8px;
|
||||
height: 64px;
|
||||
border-radius: 999px;
|
||||
background:
|
||||
radial-gradient(circle, #b9b2a1 1.2px, transparent 1.2px) center / 8px 10px
|
||||
repeat-y,
|
||||
#fffdfa;
|
||||
border: 1px solid var(--color-border);
|
||||
box-shadow: var(--shadow-sm);
|
||||
}
|
||||
|
||||
.detail-header {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: flex-start;
|
||||
gap: var(--space-3);
|
||||
}
|
||||
|
||||
.detail-stack {
|
||||
gap: var(--space-4);
|
||||
}
|
||||
|
||||
.variant-card,
|
||||
.image-item {
|
||||
border: 1px solid var(--color-border);
|
||||
border-radius: var(--radius-md);
|
||||
background: linear-gradient(180deg, #fcfcfb 0%, #ffffff 100%);
|
||||
padding: var(--space-3);
|
||||
}
|
||||
|
||||
.variant-card {
|
||||
display: grid;
|
||||
gap: var(--space-3);
|
||||
}
|
||||
|
||||
.variant-card__header,
|
||||
.image-item__header,
|
||||
.image-item__controls {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
gap: var(--space-2);
|
||||
align-items: flex-start;
|
||||
}
|
||||
|
||||
.variant-card__header p,
|
||||
.image-meta {
|
||||
margin: var(--space-1) 0 0;
|
||||
color: var(--color-text-muted);
|
||||
}
|
||||
|
||||
.variant-card__actions,
|
||||
.image-actions {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
gap: var(--space-2);
|
||||
justify-content: flex-end;
|
||||
}
|
||||
|
||||
.locked-panel,
|
||||
.loading-state,
|
||||
.image-fallback {
|
||||
padding: var(--space-4);
|
||||
border: 1px dashed var(--color-border);
|
||||
border-radius: var(--radius-md);
|
||||
background: #fbfaf6;
|
||||
color: var(--color-text-muted);
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.sr-only {
|
||||
position: absolute;
|
||||
width: 1px;
|
||||
height: 1px;
|
||||
padding: 0;
|
||||
margin: -1px;
|
||||
overflow: hidden;
|
||||
clip: rect(0, 0, 0, 0);
|
||||
white-space: nowrap;
|
||||
border: 0;
|
||||
}
|
||||
|
||||
.preview-card,
|
||||
.image-item__preview {
|
||||
border: 1px solid var(--color-border);
|
||||
border-radius: var(--radius-md);
|
||||
overflow: hidden;
|
||||
background: var(--color-bg-card);
|
||||
}
|
||||
|
||||
.preview-card {
|
||||
aspect-ratio: 16 / 10;
|
||||
}
|
||||
|
||||
.preview-card img,
|
||||
.image-item__preview img {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
object-fit: cover;
|
||||
display: block;
|
||||
}
|
||||
|
||||
.image-item {
|
||||
display: grid;
|
||||
grid-template-columns: 148px minmax(0, 1fr);
|
||||
gap: var(--space-3);
|
||||
}
|
||||
|
||||
.image-item__preview {
|
||||
aspect-ratio: 1;
|
||||
}
|
||||
|
||||
.image-item__content {
|
||||
display: grid;
|
||||
gap: var(--space-3);
|
||||
min-width: 0;
|
||||
}
|
||||
|
||||
.link-button {
|
||||
text-decoration: none;
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
.detail-loading {
|
||||
margin: 0;
|
||||
color: var(--color-text-muted);
|
||||
}
|
||||
|
||||
@media (max-width: 1480px) {
|
||||
.category-manager__body {
|
||||
grid-template-columns: 1fr;
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 1180px) {
|
||||
.section-header {
|
||||
flex-direction: column;
|
||||
align-items: stretch;
|
||||
}
|
||||
|
||||
.list-toolbar,
|
||||
.ui-form-grid--two {
|
||||
grid-template-columns: 1fr;
|
||||
}
|
||||
|
||||
.image-item {
|
||||
grid-template-columns: 1fr;
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 1060px) {
|
||||
.resizable-workspace {
|
||||
display: grid;
|
||||
grid-template-columns: 1fr;
|
||||
gap: var(--space-4);
|
||||
}
|
||||
|
||||
.panel-resizer {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 900px) {
|
||||
.detail-header,
|
||||
.panel-heading,
|
||||
.category-manager__header,
|
||||
.variant-card__header,
|
||||
.image-item__header,
|
||||
.image-item__controls {
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
.input-with-action {
|
||||
grid-template-columns: 1fr;
|
||||
}
|
||||
}
|
||||
1466
frontend/src/app/features/admin/pages/admin-shop.component.ts
Normal file
1466
frontend/src/app/features/admin/pages/admin-shop.component.ts
Normal file
File diff suppressed because it is too large
Load Diff
334
frontend/src/app/features/admin/services/admin-shop.service.ts
Normal file
334
frontend/src/app/features/admin/services/admin-shop.service.ts
Normal file
@@ -0,0 +1,334 @@
|
||||
import { inject, Injectable } from '@angular/core';
|
||||
import { HttpClient } from '@angular/common/http';
|
||||
import { Observable } from 'rxjs';
|
||||
import { environment } from '../../../../environments/environment';
|
||||
import {
|
||||
AdminCreateMediaUsagePayload,
|
||||
AdminMediaLanguage,
|
||||
AdminMediaService,
|
||||
AdminMediaTranslation,
|
||||
AdminMediaUsage,
|
||||
AdminMediaUploadPayload,
|
||||
AdminMediaAsset,
|
||||
AdminUpdateMediaUsagePayload,
|
||||
} from './admin-media.service';
|
||||
|
||||
export interface AdminMediaTextTranslation {
|
||||
title: string;
|
||||
altText: string;
|
||||
}
|
||||
|
||||
export interface AdminShopCategoryRef {
|
||||
id: string;
|
||||
slug: string;
|
||||
name: string;
|
||||
}
|
||||
|
||||
export interface AdminShopCategory {
|
||||
id: string;
|
||||
parentCategoryId: string | null;
|
||||
parentCategoryName: string | null;
|
||||
slug: string;
|
||||
name: string;
|
||||
description: string | null;
|
||||
seoTitle: string | null;
|
||||
seoDescription: string | null;
|
||||
ogTitle: string | null;
|
||||
ogDescription: string | null;
|
||||
indexable: boolean;
|
||||
isActive: boolean;
|
||||
sortOrder: number;
|
||||
depth: number;
|
||||
childCount: number;
|
||||
directProductCount: number;
|
||||
descendantProductCount: number;
|
||||
mediaUsageType: string;
|
||||
mediaUsageKey: string;
|
||||
breadcrumbs: AdminShopCategoryRef[];
|
||||
children: AdminShopCategory[];
|
||||
createdAt: string;
|
||||
updatedAt: string;
|
||||
}
|
||||
|
||||
export interface AdminUpsertShopCategoryPayload {
|
||||
parentCategoryId?: string | null;
|
||||
slug: string;
|
||||
name: string;
|
||||
description?: string;
|
||||
seoTitle?: string;
|
||||
seoDescription?: string;
|
||||
ogTitle?: string;
|
||||
ogDescription?: string;
|
||||
indexable: boolean;
|
||||
isActive: boolean;
|
||||
sortOrder: number;
|
||||
}
|
||||
|
||||
export interface AdminShopProductVariant {
|
||||
id: string;
|
||||
sku: string | null;
|
||||
variantLabel: string;
|
||||
colorName: string;
|
||||
colorHex: string | null;
|
||||
internalMaterialCode: string;
|
||||
priceChf: number;
|
||||
isDefault: boolean;
|
||||
isActive: boolean;
|
||||
sortOrder: number;
|
||||
createdAt: string;
|
||||
updatedAt: string;
|
||||
}
|
||||
|
||||
export interface AdminShopProductModel {
|
||||
url: string;
|
||||
originalFilename: string;
|
||||
mimeType: string;
|
||||
fileSizeBytes: number;
|
||||
boundingBoxXMm: number | null;
|
||||
boundingBoxYMm: number | null;
|
||||
boundingBoxZMm: number | null;
|
||||
}
|
||||
|
||||
export interface AdminPublicMediaVariant {
|
||||
url: string;
|
||||
widthPx: number | null;
|
||||
heightPx: number | null;
|
||||
mimeType: string | null;
|
||||
}
|
||||
|
||||
export interface AdminPublicMediaUsage {
|
||||
mediaAssetId: string;
|
||||
title: string | null;
|
||||
altText: string | null;
|
||||
usageType: string;
|
||||
usageKey: string;
|
||||
sortOrder: number;
|
||||
isPrimary: boolean;
|
||||
thumb: AdminPublicMediaVariant | null;
|
||||
card: AdminPublicMediaVariant | null;
|
||||
hero: AdminPublicMediaVariant | null;
|
||||
}
|
||||
|
||||
export interface AdminShopProduct {
|
||||
id: string;
|
||||
categoryId: string;
|
||||
categoryName: string;
|
||||
categorySlug: string;
|
||||
slug: string;
|
||||
name: string;
|
||||
nameIt: string;
|
||||
nameEn: string;
|
||||
nameDe: string;
|
||||
nameFr: string;
|
||||
excerpt: string | null;
|
||||
excerptIt: string | null;
|
||||
excerptEn: string | null;
|
||||
excerptDe: string | null;
|
||||
excerptFr: string | null;
|
||||
description: string | null;
|
||||
descriptionIt: string | null;
|
||||
descriptionEn: string | null;
|
||||
descriptionDe: string | null;
|
||||
descriptionFr: string | null;
|
||||
seoTitle: string | null;
|
||||
seoDescription: string | null;
|
||||
ogTitle: string | null;
|
||||
ogDescription: string | null;
|
||||
indexable: boolean;
|
||||
isFeatured: boolean;
|
||||
isActive: boolean;
|
||||
sortOrder: number;
|
||||
variantCount: number;
|
||||
activeVariantCount: number;
|
||||
priceFromChf: number;
|
||||
priceToChf: number;
|
||||
mediaUsageType: string;
|
||||
mediaUsageKey: string;
|
||||
mediaUsages: AdminShopMediaUsage[];
|
||||
images: AdminPublicMediaUsage[];
|
||||
model3d: AdminShopProductModel | null;
|
||||
variants: AdminShopProductVariant[];
|
||||
createdAt: string;
|
||||
updatedAt: string;
|
||||
}
|
||||
|
||||
export interface AdminShopMediaUsage extends Omit<AdminMediaUsage, 'translations'> {
|
||||
translations: Record<AdminMediaLanguage, AdminMediaTranslation>;
|
||||
}
|
||||
|
||||
export interface AdminUpsertShopProductVariantPayload {
|
||||
id?: string;
|
||||
sku?: string;
|
||||
variantLabel?: string;
|
||||
colorName: string;
|
||||
colorHex?: string;
|
||||
internalMaterialCode: string;
|
||||
priceChf: number;
|
||||
isDefault: boolean;
|
||||
isActive: boolean;
|
||||
sortOrder: number;
|
||||
}
|
||||
|
||||
export interface AdminUpsertShopProductPayload {
|
||||
categoryId: string;
|
||||
slug: string;
|
||||
name: string;
|
||||
nameIt: string;
|
||||
nameEn: string;
|
||||
nameDe: string;
|
||||
nameFr: string;
|
||||
excerpt?: string;
|
||||
excerptIt?: string;
|
||||
excerptEn?: string;
|
||||
excerptDe?: string;
|
||||
excerptFr?: string;
|
||||
description?: string;
|
||||
descriptionIt?: string;
|
||||
descriptionEn?: string;
|
||||
descriptionDe?: string;
|
||||
descriptionFr?: string;
|
||||
seoTitle?: string;
|
||||
seoDescription?: string;
|
||||
ogTitle?: string;
|
||||
ogDescription?: string;
|
||||
indexable: boolean;
|
||||
isFeatured: boolean;
|
||||
isActive: boolean;
|
||||
sortOrder: number;
|
||||
variants: AdminUpsertShopProductVariantPayload[];
|
||||
}
|
||||
|
||||
@Injectable({
|
||||
providedIn: 'root',
|
||||
})
|
||||
export class AdminShopService {
|
||||
private readonly http = inject(HttpClient);
|
||||
private readonly adminMediaService = inject(AdminMediaService);
|
||||
private readonly productsBaseUrl = `${environment.apiUrl}/api/admin/shop/products`;
|
||||
private readonly categoriesBaseUrl = `${environment.apiUrl}/api/admin/shop/categories`;
|
||||
|
||||
getCategories(): Observable<AdminShopCategory[]> {
|
||||
return this.http.get<AdminShopCategory[]>(this.categoriesBaseUrl, {
|
||||
withCredentials: true,
|
||||
});
|
||||
}
|
||||
|
||||
getCategoryTree(): Observable<AdminShopCategory[]> {
|
||||
return this.http.get<AdminShopCategory[]>(`${this.categoriesBaseUrl}/tree`, {
|
||||
withCredentials: true,
|
||||
});
|
||||
}
|
||||
|
||||
getCategory(categoryId: string): Observable<AdminShopCategory> {
|
||||
return this.http.get<AdminShopCategory>(
|
||||
`${this.categoriesBaseUrl}/${categoryId}`,
|
||||
{ withCredentials: true },
|
||||
);
|
||||
}
|
||||
|
||||
createCategory(
|
||||
payload: AdminUpsertShopCategoryPayload,
|
||||
): Observable<AdminShopCategory> {
|
||||
return this.http.post<AdminShopCategory>(this.categoriesBaseUrl, payload, {
|
||||
withCredentials: true,
|
||||
});
|
||||
}
|
||||
|
||||
updateCategory(
|
||||
categoryId: string,
|
||||
payload: AdminUpsertShopCategoryPayload,
|
||||
): Observable<AdminShopCategory> {
|
||||
return this.http.put<AdminShopCategory>(
|
||||
`${this.categoriesBaseUrl}/${categoryId}`,
|
||||
payload,
|
||||
{ withCredentials: true },
|
||||
);
|
||||
}
|
||||
|
||||
deleteCategory(categoryId: string): Observable<void> {
|
||||
return this.http.delete<void>(`${this.categoriesBaseUrl}/${categoryId}`, {
|
||||
withCredentials: true,
|
||||
});
|
||||
}
|
||||
|
||||
getProducts(): Observable<AdminShopProduct[]> {
|
||||
return this.http.get<AdminShopProduct[]>(this.productsBaseUrl, {
|
||||
withCredentials: true,
|
||||
});
|
||||
}
|
||||
|
||||
getProduct(productId: string): Observable<AdminShopProduct> {
|
||||
return this.http.get<AdminShopProduct>(`${this.productsBaseUrl}/${productId}`, {
|
||||
withCredentials: true,
|
||||
});
|
||||
}
|
||||
|
||||
createProduct(
|
||||
payload: AdminUpsertShopProductPayload,
|
||||
): Observable<AdminShopProduct> {
|
||||
return this.http.post<AdminShopProduct>(this.productsBaseUrl, payload, {
|
||||
withCredentials: true,
|
||||
});
|
||||
}
|
||||
|
||||
updateProduct(
|
||||
productId: string,
|
||||
payload: AdminUpsertShopProductPayload,
|
||||
): Observable<AdminShopProduct> {
|
||||
return this.http.put<AdminShopProduct>(
|
||||
`${this.productsBaseUrl}/${productId}`,
|
||||
payload,
|
||||
{ withCredentials: true },
|
||||
);
|
||||
}
|
||||
|
||||
deleteProduct(productId: string): Observable<void> {
|
||||
return this.http.delete<void>(`${this.productsBaseUrl}/${productId}`, {
|
||||
withCredentials: true,
|
||||
});
|
||||
}
|
||||
|
||||
uploadProductModel(productId: string, file: File): Observable<AdminShopProduct> {
|
||||
const formData = new FormData();
|
||||
formData.append('file', file);
|
||||
return this.http.post<AdminShopProduct>(
|
||||
`${this.productsBaseUrl}/${productId}/model`,
|
||||
formData,
|
||||
{ withCredentials: true },
|
||||
);
|
||||
}
|
||||
|
||||
deleteProductModel(productId: string): Observable<void> {
|
||||
return this.http.delete<void>(`${this.productsBaseUrl}/${productId}/model`, {
|
||||
withCredentials: true,
|
||||
});
|
||||
}
|
||||
|
||||
listMediaAssets(): Observable<AdminMediaAsset[]> {
|
||||
return this.adminMediaService.listAssets();
|
||||
}
|
||||
|
||||
uploadMediaAsset(
|
||||
file: File,
|
||||
payload: AdminMediaUploadPayload,
|
||||
): Observable<AdminMediaAsset> {
|
||||
return this.adminMediaService.uploadAsset(file, payload);
|
||||
}
|
||||
|
||||
createMediaUsage(
|
||||
payload: AdminCreateMediaUsagePayload,
|
||||
): Observable<AdminMediaUsage> {
|
||||
return this.adminMediaService.createUsage(payload);
|
||||
}
|
||||
|
||||
updateMediaUsage(
|
||||
usageId: string,
|
||||
payload: AdminUpdateMediaUsagePayload,
|
||||
): Observable<AdminMediaUsage> {
|
||||
return this.adminMediaService.updateUsage(usageId, payload);
|
||||
}
|
||||
|
||||
deleteMediaUsage(usageId: string): Observable<void> {
|
||||
return this.adminMediaService.deleteUsage(usageId);
|
||||
}
|
||||
}
|
||||
@@ -1,6 +1,6 @@
|
||||
<div class="container hero">
|
||||
<h1>{{ "CALC.TITLE" | translate }}</h1>
|
||||
<p class="subtitle">{{ "CALC.SUBTITLE" | translate }}</p>
|
||||
<div class="container ui-simple-hero">
|
||||
<h1 class="ui-simple-hero__title">{{ "CALC.TITLE" | translate }}</h1>
|
||||
<p class="ui-simple-hero__subtitle">{{ "CALC.SUBTITLE" | translate }}</p>
|
||||
|
||||
@if (error()) {
|
||||
<app-alert type="error">{{ errorKey() | translate }}</app-alert>
|
||||
@@ -8,7 +8,7 @@
|
||||
</div>
|
||||
|
||||
@if (step() === "success") {
|
||||
<div class="container hero">
|
||||
<div class="container ui-simple-hero">
|
||||
<app-success-state
|
||||
context="calc"
|
||||
(action)="onNewQuote()"
|
||||
|
||||
@@ -1,14 +1,3 @@
|
||||
.hero {
|
||||
padding: var(--space-12) 0;
|
||||
text-align: center;
|
||||
}
|
||||
.subtitle {
|
||||
font-size: 1.25rem;
|
||||
color: var(--color-text-muted);
|
||||
max-width: 600px;
|
||||
margin: 0 auto;
|
||||
}
|
||||
|
||||
.error-action {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
|
||||
@@ -1,9 +1,9 @@
|
||||
<section class="contact-hero">
|
||||
<div class="container">
|
||||
<h1>{{ "CONTACT.TITLE" | translate }}</h1>
|
||||
<p class="subtitle">{{ "CONTACT.HERO_SUBTITLE" | translate }}</p>
|
||||
</div>
|
||||
</section>
|
||||
<div class="container ui-simple-hero contact-hero">
|
||||
<h1 class="ui-simple-hero__title">{{ "CONTACT.TITLE" | translate }}</h1>
|
||||
<p class="ui-simple-hero__subtitle">
|
||||
{{ "CONTACT.HERO_SUBTITLE" | translate }}
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<div class="container content">
|
||||
<app-card>
|
||||
|
||||
@@ -1,13 +1,7 @@
|
||||
.contact-hero {
|
||||
padding: 3rem 0 2rem;
|
||||
background: var(--color-bg);
|
||||
text-align: center;
|
||||
}
|
||||
.subtitle {
|
||||
color: var(--color-text-muted);
|
||||
max-width: 640px;
|
||||
margin: var(--space-3) auto 0;
|
||||
}
|
||||
|
||||
.content {
|
||||
padding: 2rem 0 5rem;
|
||||
max-width: 800px;
|
||||
|
||||
@@ -13,11 +13,6 @@
|
||||
}
|
||||
|
||||
<div class="card-badges">
|
||||
@if (product().isFeatured) {
|
||||
<span class="badge badge-featured">{{
|
||||
"SHOP.FEATURED_BADGE" | translate
|
||||
}}</span>
|
||||
}
|
||||
@if (cartQuantity() > 0) {
|
||||
<span class="badge badge-cart">
|
||||
{{ "SHOP.IN_CART_SHORT" | translate: { count: cartQuantity() } }}
|
||||
|
||||
@@ -4,18 +4,17 @@
|
||||
border: 1px solid rgba(16, 24, 32, 0.08);
|
||||
border-radius: 1.1rem;
|
||||
overflow: hidden;
|
||||
background:
|
||||
linear-gradient(180deg, rgba(255, 255, 255, 0.98), rgba(248, 246, 241, 1));
|
||||
box-shadow: 0 18px 40px rgba(16, 24, 32, 0.08);
|
||||
background: #fff;
|
||||
box-shadow: 0 10px 24px rgba(16, 24, 32, 0.04);
|
||||
transition:
|
||||
transform 0.2s ease,
|
||||
box-shadow 0.2s ease,
|
||||
border-color 0.2s ease;
|
||||
|
||||
&:hover {
|
||||
transform: translateY(-4px);
|
||||
box-shadow: 0 22px 48px rgba(16, 24, 32, 0.14);
|
||||
border-color: rgba(250, 207, 10, 0.42);
|
||||
transform: translateY(-2px);
|
||||
box-shadow: 0 16px 30px rgba(16, 24, 32, 0.08);
|
||||
border-color: rgba(16, 24, 32, 0.14);
|
||||
}
|
||||
}
|
||||
|
||||
@@ -23,9 +22,7 @@
|
||||
position: relative;
|
||||
display: block;
|
||||
min-height: 244px;
|
||||
background:
|
||||
radial-gradient(circle at top right, rgba(250, 207, 10, 0.28), transparent 42%),
|
||||
linear-gradient(160deg, #f7f4ed 0%, #ece7db 100%);
|
||||
background: #f2eee5;
|
||||
}
|
||||
|
||||
.media img {
|
||||
@@ -42,6 +39,9 @@
|
||||
display: flex;
|
||||
align-items: flex-end;
|
||||
padding: var(--space-5);
|
||||
background:
|
||||
radial-gradient(circle at top right, rgba(250, 207, 10, 0.24), transparent 36%),
|
||||
linear-gradient(160deg, #f7f4ed 0%, #ece7db 100%);
|
||||
}
|
||||
|
||||
.image-fallback span {
|
||||
@@ -78,11 +78,6 @@
|
||||
text-transform: uppercase;
|
||||
}
|
||||
|
||||
.badge-featured {
|
||||
background: rgba(250, 207, 10, 0.92);
|
||||
color: var(--color-neutral-900);
|
||||
}
|
||||
|
||||
.badge-cart {
|
||||
background: rgba(16, 24, 32, 0.82);
|
||||
color: #fff;
|
||||
|
||||
@@ -104,11 +104,6 @@
|
||||
<div class="title-block">
|
||||
<div class="title-meta">
|
||||
<span class="category">{{ p.category.name }}</span>
|
||||
@if (p.isFeatured) {
|
||||
<span class="featured-pill">{{
|
||||
"SHOP.FEATURED_BADGE" | translate
|
||||
}}</span>
|
||||
}
|
||||
</div>
|
||||
<h1>{{ p.name }}</h1>
|
||||
<p class="excerpt">
|
||||
|
||||
@@ -1,8 +1,6 @@
|
||||
.product-page {
|
||||
padding: var(--space-8) 0 var(--space-12);
|
||||
background:
|
||||
radial-gradient(circle at top left, rgba(250, 207, 10, 0.18), transparent 20%),
|
||||
linear-gradient(180deg, #faf7ee 0%, var(--color-bg) 25%);
|
||||
background: linear-gradient(180deg, #faf7ef 0%, var(--color-bg) 15rem);
|
||||
}
|
||||
|
||||
.wrapper {
|
||||
@@ -39,10 +37,8 @@
|
||||
overflow: hidden;
|
||||
border-radius: 1.25rem;
|
||||
border: 1px solid rgba(16, 24, 32, 0.08);
|
||||
background:
|
||||
radial-gradient(circle at top right, rgba(250, 207, 10, 0.3), transparent 30%),
|
||||
linear-gradient(160deg, #f8f4ea 0%, #eee8db 100%);
|
||||
box-shadow: 0 18px 42px rgba(16, 24, 32, 0.08);
|
||||
background: #f2eee5;
|
||||
box-shadow: 0 12px 28px rgba(16, 24, 32, 0.05);
|
||||
}
|
||||
|
||||
.hero-image {
|
||||
@@ -59,6 +55,9 @@
|
||||
display: flex;
|
||||
align-items: flex-end;
|
||||
padding: var(--space-6);
|
||||
background:
|
||||
radial-gradient(circle at top right, rgba(250, 207, 10, 0.24), transparent 34%),
|
||||
linear-gradient(160deg, #f8f4ea 0%, #eee8db 100%);
|
||||
}
|
||||
|
||||
.image-fallback span {
|
||||
@@ -156,8 +155,7 @@
|
||||
gap: 0.7rem;
|
||||
}
|
||||
|
||||
.category,
|
||||
.featured-pill {
|
||||
.category {
|
||||
text-transform: uppercase;
|
||||
font-size: 0.76rem;
|
||||
letter-spacing: 0.08em;
|
||||
@@ -168,15 +166,6 @@
|
||||
font-weight: 700;
|
||||
}
|
||||
|
||||
.featured-pill {
|
||||
display: inline-flex;
|
||||
padding: 0.25rem 0.65rem;
|
||||
border-radius: 999px;
|
||||
background: rgba(250, 207, 10, 0.92);
|
||||
color: var(--color-neutral-900);
|
||||
font-weight: 700;
|
||||
}
|
||||
|
||||
h1 {
|
||||
font-size: clamp(2rem, 2vw + 1.2rem, 3.2rem);
|
||||
}
|
||||
|
||||
@@ -20,7 +20,7 @@ describe('ShopService', () => {
|
||||
{
|
||||
id: 'line-1',
|
||||
lineItemType: 'SHOP_PRODUCT',
|
||||
originalFilename: 'desk-cable-clip-demo.stl',
|
||||
originalFilename: 'desk-cable-clip.stl',
|
||||
displayName: 'Desk Cable Clip',
|
||||
quantity: 2,
|
||||
printTimeSeconds: null,
|
||||
@@ -42,13 +42,13 @@ describe('ShopService', () => {
|
||||
infillPattern: null,
|
||||
supportsEnabled: false,
|
||||
status: 'READY',
|
||||
convertedStoredPath: '/storage/items/desk-cable-clip-demo.stl',
|
||||
convertedStoredPath: '/storage/items/desk-cable-clip.stl',
|
||||
unitPriceChf: 11.4,
|
||||
},
|
||||
{
|
||||
id: 'line-2',
|
||||
lineItemType: 'SHOP_PRODUCT',
|
||||
originalFilename: 'desk-cable-clip-demo.stl',
|
||||
originalFilename: 'desk-cable-clip.stl',
|
||||
displayName: 'Desk Cable Clip',
|
||||
quantity: 1,
|
||||
printTimeSeconds: null,
|
||||
@@ -70,7 +70,7 @@ describe('ShopService', () => {
|
||||
infillPattern: null,
|
||||
supportsEnabled: false,
|
||||
status: 'READY',
|
||||
convertedStoredPath: '/storage/items/desk-cable-clip-demo.stl',
|
||||
convertedStoredPath: '/storage/items/desk-cable-clip.stl',
|
||||
unitPriceChf: 12.0,
|
||||
},
|
||||
],
|
||||
|
||||
@@ -1,74 +1,19 @@
|
||||
<section class="shop-page">
|
||||
<section class="shop-hero">
|
||||
<div class="container shop-hero-grid">
|
||||
<div class="hero-copy">
|
||||
<p class="ui-eyebrow">{{ "SHOP.HERO_EYEBROW" | translate }}</p>
|
||||
<h1 class="ui-hero-display">
|
||||
{{
|
||||
selectedCategory()?.name || ("SHOP.TITLE" | translate)
|
||||
}}
|
||||
</h1>
|
||||
<p class="ui-copy-lead">
|
||||
{{
|
||||
selectedCategory()?.description ||
|
||||
("SHOP.SUBTITLE" | translate)
|
||||
}}
|
||||
</p>
|
||||
<p class="ui-copy-subtitle">
|
||||
{{
|
||||
selectedCategory()
|
||||
? ("SHOP.CATEGORY_META" | translate: { count: selectedCategory()?.productCount || 0 })
|
||||
: ("SHOP.CATALOG_META_DESCRIPTION" | translate)
|
||||
}}
|
||||
</p>
|
||||
|
||||
<div class="hero-actions ui-inline-actions">
|
||||
@if (cartHasItems()) {
|
||||
<app-button
|
||||
variant="primary"
|
||||
[disabled]="cartMutating()"
|
||||
(click)="goToCheckout()"
|
||||
>
|
||||
{{ "SHOP.GO_TO_CHECKOUT" | translate }}
|
||||
</app-button>
|
||||
} @else {
|
||||
<app-button variant="outline" routerLink="/calculator/basic">
|
||||
{{ "SHOP.WIP_CTA_CALC" | translate }}
|
||||
</app-button>
|
||||
}
|
||||
|
||||
@if (selectedCategory()) {
|
||||
<app-button variant="text" (click)="navigateToCategory()">
|
||||
{{ "SHOP.VIEW_ALL" | translate }}
|
||||
</app-button>
|
||||
}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="hero-highlights">
|
||||
<div class="highlight-card">
|
||||
<span class="highlight-label">{{
|
||||
"SHOP.HIGHLIGHT_PRODUCTS" | translate
|
||||
}}</span>
|
||||
<strong>{{
|
||||
selectedCategory()?.productCount ?? products().length
|
||||
}}</strong>
|
||||
</div>
|
||||
<div class="highlight-card">
|
||||
<span class="highlight-label">{{
|
||||
"SHOP.HIGHLIGHT_CART" | translate
|
||||
}}</span>
|
||||
<strong>{{ cartItemCount() }}</strong>
|
||||
</div>
|
||||
<div class="highlight-card">
|
||||
<span class="highlight-label">{{
|
||||
"SHOP.HIGHLIGHT_READY" | translate
|
||||
}}</span>
|
||||
<strong>{{ "SHOP.MODEL_3D" | translate }}</strong>
|
||||
</div>
|
||||
</div>
|
||||
<div class="container ui-simple-hero shop-hero">
|
||||
<h1 class="ui-simple-hero__title">{{ "NAV.SHOP" | translate }}</h1>
|
||||
<p class="ui-simple-hero__subtitle">
|
||||
{{
|
||||
selectedCategory()
|
||||
? (selectedCategory()?.description || ("SHOP.CATEGORY_META" | translate: { count: selectedCategory()?.productCount || 0 }))
|
||||
: ("SHOP.CUSTOM_PART_CTA" | translate)
|
||||
}}
|
||||
</p>
|
||||
<div class="ui-simple-hero__actions hero-actions ui-inline-actions">
|
||||
<app-button variant="outline" routerLink="/contact">
|
||||
{{ "NAV.CONTACT" | translate }}
|
||||
</app-button>
|
||||
</div>
|
||||
</section>
|
||||
</div>
|
||||
|
||||
<div class="container shop-layout">
|
||||
<aside class="shop-sidebar">
|
||||
@@ -223,33 +168,6 @@
|
||||
{{ error() | translate }}
|
||||
</div>
|
||||
} @else {
|
||||
@if (featuredProducts().length > 0 && !selectedCategory()) {
|
||||
<section class="featured-strip">
|
||||
<div class="section-head">
|
||||
<div>
|
||||
<p class="ui-eyebrow ui-eyebrow--compact">
|
||||
{{ "SHOP.FEATURED_KICKER" | translate }}
|
||||
</p>
|
||||
<h2 class="section-title">
|
||||
{{ "SHOP.FEATURED_TITLE" | translate }}
|
||||
</h2>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="featured-grid">
|
||||
@for (
|
||||
product of featuredProducts();
|
||||
track trackByProduct($index, product)
|
||||
) {
|
||||
<app-product-card
|
||||
[product]="product"
|
||||
[cartQuantity]="productCartQuantity(product.id)"
|
||||
></app-product-card>
|
||||
}
|
||||
</div>
|
||||
</section>
|
||||
}
|
||||
|
||||
<section class="catalog-panel">
|
||||
<div class="section-head catalog-head">
|
||||
<div>
|
||||
|
||||
@@ -1,56 +1,14 @@
|
||||
.shop-page {
|
||||
--shop-hero-bg: #f8f3e5;
|
||||
background:
|
||||
radial-gradient(circle at top right, rgba(250, 207, 10, 0.24), transparent 22%),
|
||||
linear-gradient(180deg, #faf7ef 0%, #f6f2e8 24%, var(--color-bg) 24%);
|
||||
background: linear-gradient(180deg, #faf7ef 0%, var(--color-bg) 13rem);
|
||||
}
|
||||
|
||||
.shop-hero {
|
||||
position: relative;
|
||||
overflow: hidden;
|
||||
padding: 4.75rem 0 3.5rem;
|
||||
background: transparent;
|
||||
.shop-hero .ui-simple-hero__subtitle {
|
||||
max-width: 52rem;
|
||||
line-height: 1.5;
|
||||
}
|
||||
|
||||
.shop-hero-grid {
|
||||
display: grid;
|
||||
gap: var(--space-8);
|
||||
align-items: end;
|
||||
grid-template-columns: minmax(0, 1.4fr) minmax(280px, 0.8fr);
|
||||
}
|
||||
|
||||
.hero-copy {
|
||||
display: grid;
|
||||
gap: var(--space-4);
|
||||
}
|
||||
|
||||
.hero-highlights {
|
||||
display: grid;
|
||||
gap: var(--space-4);
|
||||
}
|
||||
|
||||
.highlight-card {
|
||||
display: grid;
|
||||
gap: 0.2rem;
|
||||
padding: 1.15rem 1.2rem;
|
||||
border-radius: 1rem;
|
||||
border: 1px solid rgba(16, 24, 32, 0.08);
|
||||
background: rgba(255, 255, 255, 0.78);
|
||||
box-shadow: 0 12px 28px rgba(16, 24, 32, 0.08);
|
||||
backdrop-filter: blur(8px);
|
||||
}
|
||||
|
||||
.highlight-card strong {
|
||||
font-size: 1.35rem;
|
||||
line-height: 1.1;
|
||||
}
|
||||
|
||||
.highlight-label {
|
||||
color: var(--color-text-muted);
|
||||
text-transform: uppercase;
|
||||
letter-spacing: 0.08em;
|
||||
font-size: 0.72rem;
|
||||
font-weight: 700;
|
||||
.hero-actions {
|
||||
gap: var(--space-3);
|
||||
}
|
||||
|
||||
.shop-layout {
|
||||
@@ -59,6 +17,7 @@
|
||||
align-items: start;
|
||||
grid-template-columns: minmax(270px, 320px) minmax(0, 1fr);
|
||||
padding-bottom: var(--space-12);
|
||||
padding-top: var(--space-6);
|
||||
}
|
||||
|
||||
.shop-sidebar {
|
||||
@@ -116,8 +75,8 @@
|
||||
|
||||
.category-link:hover,
|
||||
.category-link.active {
|
||||
background: rgba(250, 207, 10, 0.14);
|
||||
border-color: rgba(250, 207, 10, 0.34);
|
||||
background: rgba(250, 207, 10, 0.12);
|
||||
border-color: rgba(16, 24, 32, 0.12);
|
||||
transform: translateX(1px);
|
||||
}
|
||||
|
||||
@@ -213,7 +172,7 @@
|
||||
padding: 0.2rem;
|
||||
border-radius: 999px;
|
||||
border: 1px solid var(--color-border);
|
||||
background: rgba(255, 255, 255, 0.68);
|
||||
background: #fff;
|
||||
}
|
||||
|
||||
.qty-control button {
|
||||
@@ -262,7 +221,6 @@
|
||||
gap: var(--space-6);
|
||||
}
|
||||
|
||||
.featured-strip,
|
||||
.catalog-panel {
|
||||
display: grid;
|
||||
gap: var(--space-5);
|
||||
@@ -286,7 +244,6 @@
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
.featured-grid,
|
||||
.product-grid {
|
||||
display: grid;
|
||||
gap: var(--space-5);
|
||||
@@ -314,7 +271,6 @@
|
||||
}
|
||||
|
||||
@media (max-width: 1080px) {
|
||||
.shop-hero-grid,
|
||||
.shop-layout {
|
||||
grid-template-columns: 1fr;
|
||||
}
|
||||
@@ -325,7 +281,6 @@
|
||||
}
|
||||
|
||||
@media (max-width: 760px) {
|
||||
.featured-grid,
|
||||
.product-grid {
|
||||
grid-template-columns: 1fr;
|
||||
}
|
||||
|
||||
@@ -11,7 +11,7 @@ import {
|
||||
import { takeUntilDestroyed, toObservable } from '@angular/core/rxjs-interop';
|
||||
import { Router, RouterLink } from '@angular/router';
|
||||
import { TranslateModule, TranslateService } from '@ngx-translate/core';
|
||||
import { catchError, combineLatest, finalize, forkJoin, map, of, switchMap, tap } from 'rxjs';
|
||||
import { catchError, combineLatest, finalize, forkJoin, of, switchMap, tap } from 'rxjs';
|
||||
import { SeoService } from '../../core/services/seo.service';
|
||||
import { LanguageService } from '../../core/services/language.service';
|
||||
import { AppButtonComponent } from '../../shared/components/app-button/app-button.component';
|
||||
@@ -57,7 +57,6 @@ export class ShopPageComponent {
|
||||
readonly categoryNodes = signal<ShopCategoryNavNode[]>([]);
|
||||
readonly selectedCategory = signal<ShopCategoryDetail | null>(null);
|
||||
readonly products = signal<ShopProductSummary[]>([]);
|
||||
readonly featuredProducts = signal<ShopProductSummary[]>([]);
|
||||
|
||||
readonly cartMutating = signal(false);
|
||||
readonly busyLineItemId = signal<string | null>(null);
|
||||
@@ -98,18 +97,12 @@ export class ShopPageComponent {
|
||||
forkJoin({
|
||||
categories: this.shopService.getCategories(),
|
||||
catalog: this.shopService.getProductCatalog(categorySlug ?? null),
|
||||
featuredProducts: categorySlug
|
||||
? of<ShopProductSummary[]>([])
|
||||
: this.shopService
|
||||
.getProductCatalog(null, true)
|
||||
.pipe(map((response) => response.products)),
|
||||
}).pipe(
|
||||
catchError((error) => {
|
||||
this.categories.set([]);
|
||||
this.categoryNodes.set([]);
|
||||
this.selectedCategory.set(null);
|
||||
this.products.set([]);
|
||||
this.featuredProducts.set([]);
|
||||
this.error.set(
|
||||
error?.status === 404 ? 'SHOP.NOT_FOUND' : 'SHOP.LOAD_ERROR',
|
||||
);
|
||||
@@ -135,7 +128,6 @@ export class ShopPageComponent {
|
||||
);
|
||||
this.selectedCategory.set(result.catalog.category ?? null);
|
||||
this.products.set(result.catalog.products);
|
||||
this.featuredProducts.set(result.featuredProducts);
|
||||
this.applySeo(result.catalog.category ?? null);
|
||||
});
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user