From aaa58346d3c6b1f70f5fcd2f82281feddaf37733 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Joe=20K=C3=BCng?= Date: Mon, 9 Mar 2026 19:21:18 +0100 Subject: [PATCH 1/2] fix(front-end): css file reduced --- .../pages/admin-home-media.component.html | 142 +++-- .../pages/admin-home-media.component.scss | 536 +--------------- .../src/app/features/home/home.component.html | 97 +-- .../src/app/features/home/home.component.scss | 389 +----------- frontend/src/styles/_ui.scss | 583 +++++++++++++++++- 5 files changed, 760 insertions(+), 987 deletions(-) diff --git a/frontend/src/app/features/admin/pages/admin-home-media.component.html b/frontend/src/app/features/admin/pages/admin-home-media.component.html index 236e0a9..1de74fe 100644 --- a/frontend/src/app/features/admin/pages/admin-home-media.component.html +++ b/frontend/src/app/features/admin/pages/admin-home-media.component.html @@ -1,70 +1,75 @@ -
-
-
-

Back-office media

-

Media home

+
+
+
+

Back-office media

+

Media home

-
-
-
+
+
+
{{ configuredSectionCount }} sezioni gestite
-
+
{{ activeImageCount }} immagini attive
-
-

+

{{ errorMessage }}

-

+

{{ successMessage }}

-
-
-
+
+
+

{{ group.title }}

-
+
-
-
-
+
+
+

{{ section.title }}

- + {{ section.items.length }} {{ section.items.length === 1 ? "attiva" : "attive" }}
-
- + {{ section.usageType }} / {{ section.usageKey }} - + Variante {{ section.preferredVariantName }}
-
-
-
+
+
+
{{ getFormState(section.usageKey).replacingUsageId @@ -74,9 +79,9 @@
-
-
- File immagine +
+
+ File immagine
-
-
+
+
Testi localizzati

IT / EN / DE / FR obbligatorie

-
+
-
+
-
-
+
+
Immagini attive
-
+
-
-
+
+
{{ @@ -259,7 +270,9 @@ {{ item.mediaAssetId }}

- Primaria
@@ -283,10 +296,11 @@ {{ item.createdAt | date: "short" }}

-
+
-

+

Nessuna immagine attiva collegata a questa sezione home.

-
+
Preview non disponibile
-

Caricamento media home...

+

Caricamento media home...

 diff --git a/frontend/src/app/features/admin/pages/admin-home-media.component.scss b/frontend/src/app/features/admin/pages/admin-home-media.component.scss index 84f0e04..b667f8e 100644 --- a/frontend/src/app/features/admin/pages/admin-home-media.component.scss +++ b/frontend/src/app/features/admin/pages/admin-home-media.component.scss @@ -1,286 +1,5 @@ -.section-card { - display: grid; - gap: var(--space-5); -} - -.section-header, -.media-panel-header, -.media-copy-top, -.upload-actions, -.item-actions, -.sort-editor { - display: flex; - justify-content: space-between; - align-items: flex-start; - gap: var(--space-3); -} - -.section-header { - align-items: flex-start; -} - -.eyebrow { - margin: 0 0 var(--space-2); - text-transform: uppercase; - letter-spacing: 0.14em; - font-size: 0.72rem; - font-weight: 700; - color: var(--color-secondary-600); -} - -.header-copy h2, -.media-panel-header h4, -.panel-heading h5, -.media-copy h6, -.group-header h3 { - margin: 0; -} - -.header-copy p, -.media-panel-header p, -.group-header p, -.panel-heading p, -.empty-state, -.meta { - margin: var(--space-2) 0 0; - color: var(--color-text-muted); -} - -.header-side { - display: flex; - flex-direction: column; - align-items: flex-start; - gap: var(--space-3); -} - -.header-stats { - display: flex; - flex-wrap: wrap; - justify-content: flex-start; - gap: var(--space-2); -} - -.header-side > button { - align-self: flex-start; -} - -.stat-chip { - min-width: 128px; - padding: 0.75rem 0.9rem; - border-radius: var(--radius-md); - border: 1px solid var(--color-border); - background: linear-gradient(180deg, #fffdf5 0%, #ffffff 100%); - display: grid; - gap: 0.15rem; -} - -.stat-chip strong { - font-size: 1.15rem; - line-height: 1; -} - -.stat-chip span { - font-size: 0.8rem; - color: var(--color-text-muted); -} - -.status-banner { - margin: 0; - padding: 0.85rem 1rem; - border-radius: var(--radius-md); - border: 1px solid transparent; - font-weight: 600; -} - -.status-banner-error { - color: #8a241d; - background: #fff1f0; - border-color: #f2c3bf; -} - -.status-banner-success { - color: #20613a; - background: #eef9f1; - border-color: #b7e3c4; -} - -.group-stack { - display: grid; - gap: var(--space-4); -} - -.group-card { - border: 1px solid var(--color-border); - border-radius: calc(var(--radius-lg) + 2px); - padding: clamp(12px, 1.8vw, 18px); - background: linear-gradient(180deg, #fcfbf8 0%, #ffffff 100%); -} - -.group-header { - display: flex; - align-items: flex-start; - justify-content: space-between; - gap: var(--space-4); - margin-bottom: var(--space-3); -} - -.sections { - display: grid; - gap: var(--space-3); -} - -.media-panel { - border: 1px solid var(--color-border); - border-radius: var(--radius-lg); - background: #ffffff; - padding: var(--space-3); - display: grid; - gap: var(--space-3); - box-shadow: 0 10px 24px rgba(15, 23, 42, 0.04); -} - -.usage-pill, -.primary-badge, -.count-pill, -.layout-pill { - border-radius: 999px; - border: 1px solid var(--color-border); - padding: 6px 10px; - font-size: 0.78rem; - font-weight: 700; - line-height: 1; -} - -.usage-pill { - background: var(--color-neutral-100); - color: var(--color-text-muted); -} - -.layout-pill { - background: #f7f4e7; - color: var(--color-neutral-900); -} - -.count-pill { - background: #f8f9fb; - color: var(--color-neutral-900); -} - -.primary-badge { - background: #fff5b8; - color: var(--color-text); - border-color: #f1d65c; -} - -.media-panel-copy, -.media-panel-meta, -.panel-heading { - display: grid; - gap: var(--space-1); -} - -.media-panel-meta { - display: flex; - flex-wrap: wrap; - justify-content: flex-end; - align-items: center; - gap: var(--space-2); -} - -.title-row { - display: flex; - flex-wrap: wrap; - align-items: center; - gap: var(--space-2); -} - -.workspace { - display: grid; - grid-template-columns: minmax(280px, 340px) minmax(0, 1fr); - gap: var(--space-3); - align-items: start; -} - -.upload-panel, -.list-panel { - border: 1px solid var(--color-border); - border-radius: var(--radius-md); - background: linear-gradient(180deg, #fcfcfb 0%, #f7f7f4 100%); - padding: var(--space-3); -} - -.form-grid { - display: grid; - grid-template-columns: repeat(2, minmax(0, 1fr)); - gap: var(--space-2); - margin-top: var(--space-2); - margin-bottom: var(--space-3); -} - -.form-field { - display: grid; - gap: var(--space-1); -} - -.language-toolbar { - display: flex; - justify-content: space-between; - align-items: center; - gap: var(--space-2); - padding: var(--space-2); - border: 1px solid var(--color-border); - border-radius: var(--radius-md); - background: #fbfaf6; -} - -.language-copy { - display: grid; - gap: 2px; -} - -.language-copy span { - font-size: 0.76rem; - font-weight: 700; - color: var(--color-text); -} - -.language-copy p { - margin: 0; - font-size: 0.76rem; - color: var(--color-text-muted); -} - -.language-toggle { - display: inline-flex; - flex-wrap: wrap; - justify-content: flex-end; - gap: 0.35rem; -} - -.language-toggle-btn { - min-width: 2.8rem; - padding: 0.4rem 0.6rem; - border: 1px solid var(--color-border); - border-radius: 999px; - background: #ffffff; - color: var(--color-text-muted); - font-size: 0.78rem; - font-weight: 700; - line-height: 1; -} - -.language-toggle-btn.complete { - border-color: #c9d8c4; -} - -.language-toggle-btn.incomplete { - border-color: #e8c8c2; -} - -.language-toggle-btn.active { - background: #fff5b8; - border-color: var(--color-brand); - color: var(--color-text); +.form-field--wide { + grid-column: 1 / -1; } .sr-only { @@ -295,83 +14,18 @@ border: 0; } -.form-field--wide { - grid-column: 1 / -1; -} - -.form-field > span, -.sort-editor span { - font-size: 0.76rem; - color: var(--color-text-muted); - font-weight: 600; -} - -.file-picker { - display: flex; - align-items: center; - gap: var(--space-2); - padding: var(--space-2); - border: 1px solid var(--color-border); - border-radius: var(--radius-md); - background: var(--color-bg-card); - cursor: pointer; - transition: - border-color 0.2s ease, - background-color 0.2s ease, - box-shadow 0.2s ease; -} - -.file-picker:hover { - border-color: var(--color-brand); - background: #fffef8; -} - -.file-picker-button { - display: inline-flex; - align-items: center; - justify-content: center; - min-width: 6.25rem; - padding: var(--space-2) var(--space-3); - border: 1px solid var(--color-border); - border-radius: calc(var(--radius-md) - 2px); - background: #ffffff; - font-weight: 600; - font-size: 0.95rem; - color: var(--color-text); - white-space: nowrap; -} - -.file-picker-name { - min-width: 0; - overflow: hidden; - text-overflow: ellipsis; - white-space: nowrap; - font-size: 0.95rem; - color: var(--color-text-muted); -} - -input { - width: 100%; - border: 1px solid var(--color-border); - border-radius: var(--radius-md); - padding: var(--space-2) var(--space-3); - background: var(--color-bg-card); - font: inherit; - font-size: 0.95rem; - color: var(--color-text); -} - .toggle { + position: relative; display: inline-flex; align-items: center; gap: 0.45rem; + width: auto; + padding: var(--space-2) var(--space-3); border: 1px solid var(--color-border); border-radius: 999px; - padding: var(--space-2) var(--space-3); background: var(--color-bg-card); align-self: end; justify-self: start; - width: auto; cursor: pointer; } @@ -384,16 +38,16 @@ input { .toggle-mark { width: 1.05rem; height: 1.05rem; - border-radius: 0.3rem; - border: 1px solid var(--color-border); - background: #ffffff; position: relative; flex: 0 0 auto; + border: 1px solid var(--color-border); + border-radius: 0.3rem; + background: #ffffff; } .toggle input:checked + .toggle-mark { - background: #b14fb8; - border-color: #b14fb8; + background: var(--color-brand); + border-color: var(--color-brand); } .toggle input:checked + .toggle-mark::after { @@ -421,188 +75,36 @@ input { background: var(--color-bg-card); } -.preview-card img, -.thumb img { +.preview-card img { width: 100%; height: 100%; display: block; object-fit: cover; } -.media-list { - display: grid; - gap: var(--space-2); -} - -.media-item { - display: grid; - grid-template-columns: 168px minmax(0, 1fr); - gap: var(--space-2); - border: 1px solid var(--color-border); - border-radius: var(--radius-md); - padding: 0.75rem; - background: var(--color-bg-card); -} - -.thumb-wrap { - min-width: 0; -} - -.thumb { - aspect-ratio: 16 / 10; - border-radius: var(--radius-md); - overflow: hidden; - background: var(--color-neutral-200); - border: 1px solid var(--color-border); -} - -.thumb-empty { - display: grid; - place-items: center; - text-align: center; - color: var(--color-text-muted); - padding: var(--space-3); -} - -.media-copy { - min-width: 0; - display: grid; - gap: var(--space-1); -} - -.media-copy-top { - align-items: center; -} - -.media-copy h5 { - font-size: 1rem; -} - -.media-copy h6 { - font-size: 1rem; -} - .meta { + margin: 0; + font-size: 0.82rem; + color: var(--color-text-muted); overflow-wrap: anywhere; } .sort-editor { align-items: end; - flex-wrap: wrap; } .sort-editor label { display: grid; gap: var(--space-1); -} - -.upload-actions { - justify-content: flex-start; - flex-wrap: wrap; - align-items: flex-start; - gap: var(--space-2); -} - -.upload-actions button { - min-width: 0; -} - -button { - border: 0; - border-radius: var(--radius-md); - background: var(--color-brand); - color: var(--color-neutral-900); - padding: var(--space-2) var(--space-4); - font-weight: 600; - line-height: 1.2; - cursor: pointer; - transition: - background-color 0.2s ease, - opacity 0.2s ease, - border-color 0.2s ease; -} - -button:hover:not(:disabled) { - background: var(--color-brand-hover); -} - -button:disabled { - opacity: 0.65; - cursor: default; -} - -button.ghost { - background: var(--color-bg-card); - color: var(--color-text); - border: 1px solid var(--color-border); -} - -button.ghost:hover:not(:disabled) { - background: #fff8cc; - border-color: var(--color-brand); -} - -button.ghost.danger:hover:not(:disabled) { - background: #fff0f0; - border-color: #d9534f; -} - -.loading-state { - margin: 0; - color: var(--color-text-muted); -} - -@media (max-width: 1200px) { - .workspace { - grid-template-columns: 1fr; - } + min-width: min(100%, 180px); } @media (max-width: 720px) { - .form-grid, - .media-item { - grid-template-columns: 1fr; - } - - .language-toolbar { - flex-direction: column; - align-items: stretch; - } - - .language-toggle { - justify-content: flex-start; - } - - .file-picker { - flex-direction: column; - align-items: stretch; - } - - .file-picker-button { - width: 100%; - } - - .section-header, - .header-side, - .header-stats, - .group-header, - .media-panel-header, - .media-copy-top, - .upload-actions, - .item-actions, - .sort-editor { - flex-direction: column; - align-items: stretch; - } - - .usage-pill, - .primary-badge, - .count-pill, - .layout-pill { - width: fit-content; - } - .media-panel-meta { justify-content: flex-start; } + + .sort-editor { + align-items: stretch; + } } diff --git a/frontend/src/app/features/home/home.component.html b/frontend/src/app/features/home/home.component.html index f4e6b08..cb081e4 100644 --- a/frontend/src/app/features/home/home.component.html +++ b/frontend/src/app/features/home/home.component.html @@ -1,16 +1,19 @@
-
+
-

{{ "HOME.HERO_EYEBROW" | translate }}

-

-

+

{{ "HOME.HERO_EYEBROW" | translate }}

+

+

{{ "HOME.HERO_LEAD" | translate }}

-

+

{{ "HOME.HERO_SUBTITLE" | translate }}

-
+
{{ "HOME.BTN_CALCULATE" | translate }} @@ -25,12 +28,14 @@
-
+
-
-

{{ "HOME.SEC_CAP_TITLE" | translate }}

-

+

+

+ {{ "HOME.SEC_CAP_TITLE" | translate }} +

+

{{ "HOME.SEC_CAP_SUBTITLE" | translate }}

@@ -38,7 +43,7 @@ -
+
@if (card.image; as image) { @if (image.source.avifUrl) { @@ -55,23 +60,27 @@ /> } @else { -
+
{{ card.titleKey | translate }}
}

{{ card.titleKey | translate }}

-

{{ card.textKey | translate }}

+

{{ card.textKey | translate }}

-
-
+
+
-

{{ "HOME.SEC_CALC_TITLE" | translate }}

-

+

+ {{ "HOME.SEC_CALC_TITLE" | translate }} +

+

{{ "HOME.SEC_CALC_SUBTITLE" | translate }}

    @@ -79,23 +88,25 @@
-
+
-

+

{{ "HOME.CARD_CALC_EYEBROW" | translate }}

{{ "HOME.CARD_CALC_TITLE" | translate }}

- {{ "HOME.CARD_CALC_TAG" | translate }} + {{ + "HOME.CARD_CALC_TAG" | translate + }}
-
    +
    • {{ "HOME.CARD_CALC_STEP_1" | translate }}
    • {{ "HOME.CARD_CALC_STEP_2" | translate }}
    • {{ "HOME.CARD_CALC_STEP_3" | translate }}
    -
    +
-
-
+
+
-

{{ "HOME.SEC_SHOP_TITLE" | translate }}

+

+ {{ "HOME.SEC_SHOP_TITLE" | translate }} +

{{ "HOME.SEC_SHOP_TEXT" | translate }}

@@ -125,7 +138,7 @@
  • {{ "HOME.SEC_SHOP_LIST_2" | translate }}
  • {{ "HOME.SEC_SHOP_LIST_3" | translate }}
    • -
    +
    {{ "HOME.BTN_DISCOVER" | translate }} @@ -135,12 +148,12 @@
    @@ -164,28 +177,36 @@

    {{ "HOME.CARD_SHOP_1_TITLE" | translate }}

    -

    {{ "HOME.CARD_SHOP_1_TEXT" | translate }}

    +

    + {{ "HOME.CARD_SHOP_1_TEXT" | translate }} +

    {{ "HOME.CARD_SHOP_2_TITLE" | translate }}

    -

    {{ "HOME.CARD_SHOP_2_TEXT" | translate }}

    +

    + {{ "HOME.CARD_SHOP_2_TEXT" | translate }} +

    {{ "HOME.CARD_SHOP_3_TITLE" | translate }}

    -

    {{ "HOME.CARD_SHOP_3_TEXT" | translate }}

    +

    + {{ "HOME.CARD_SHOP_3_TEXT" | translate }} +

    -
    -
    +
    +
    -

    {{ "HOME.SEC_ABOUT_TITLE" | translate }}

    +

    + {{ "HOME.SEC_ABOUT_TITLE" | translate }} +

    {{ "HOME.SEC_ABOUT_TEXT" | translate }}

    -
    +
    {{ "HOME.SEC_ABOUT_TITLE" | translate }} @@ -195,7 +216,7 @@
    -
    +
    @if (currentFounderImage(); as image) { @if (image.source.avifUrl) { @@ -218,7 +239,7 @@ @if (founderImages().length > 1) {