From 58869be9f7319d468719f82681a486d83d836ffe Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Joe=20K=C3=BCng?= Date: Tue, 10 Mar 2026 15:32:53 +0100 Subject: [PATCH] feat(front-end): css allert fix --- frontend/angular.json | 4 +- .../app/features/order/order.component.html | 2 +- .../app/features/order/order.component.scss | 23 +- .../shop/product-detail.component.scss | 293 ----------------- frontend/src/styles.scss | 1 + .../_shop-product-detail-overrides.scss | 298 ++++++++++++++++++ 6 files changed, 320 insertions(+), 301 deletions(-) create mode 100644 frontend/src/styles/_shop-product-detail-overrides.scss diff --git a/frontend/angular.json b/frontend/angular.json index eb05796..6107515 100644 --- a/frontend/angular.json +++ b/frontend/angular.json @@ -61,8 +61,8 @@ }, { "type": "anyComponentStyle", - "maximumWarning": "10kB", - "maximumError": "14kB" + "maximumWarning": "4kB", + "maximumError": "8kB" } ] }, diff --git a/frontend/src/app/features/order/order.component.html b/frontend/src/app/features/order/order.component.html index 47a0a68..4c31008 100644 --- a/frontend/src/app/features/order/order.component.html +++ b/frontend/src/app/features/order/order.component.html @@ -1,4 +1,4 @@ -
+

{{ "TRACKING.TITLE" | translate }} diff --git a/frontend/src/app/features/order/order.component.scss b/frontend/src/app/features/order/order.component.scss index 14737d1..ecb216c 100644 --- a/frontend/src/app/features/order/order.component.scss +++ b/frontend/src/app/features/order/order.component.scss @@ -1,3 +1,7 @@ +.order-hero { + padding-top: calc(var(--space-12) + var(--space-5)); +} + .subtitle { font-size: 1.125rem; } @@ -244,16 +248,17 @@ .status-timeline { display: flex; justify-content: space-between; - margin-bottom: var(--space-8); + margin-top: var(--space-5); + margin-bottom: var(--space-10); + padding: 0 var(--space-2); position: relative; - /* padding: var(--space-6); */ /* Removed if it was here to match non-card layout */ &::before { content: ""; position: absolute; top: 15px; - left: 12.5%; - right: 12.5%; + left: calc(12.5% + var(--space-2)); + right: calc(12.5% + var(--space-2)); height: 2px; background: var(--color-border); z-index: 1; @@ -279,13 +284,14 @@ align-items: center; justify-content: center; font-weight: 600; - margin-bottom: var(--space-2); + margin-bottom: var(--space-3); color: var(--color-text-muted); transition: all 0.3s ease; } .label { font-size: 0.85rem; + line-height: 1.2; color: var(--color-text-muted); font-weight: 500; } @@ -315,7 +321,14 @@ } @media (max-width: 600px) { + .order-hero { + padding-top: calc(var(--space-8) + var(--space-4)); + } + .status-timeline { + margin-top: var(--space-4); + margin-bottom: var(--space-8); + padding: 0; flex-direction: column; align-items: flex-start; gap: var(--space-4); diff --git a/frontend/src/app/features/shop/product-detail.component.scss b/frontend/src/app/features/shop/product-detail.component.scss index 0b5765a..877eaba 100644 --- a/frontend/src/app/features/shop/product-detail.component.scss +++ b/frontend/src/app/features/shop/product-detail.component.scss @@ -93,36 +93,6 @@ font-weight: 700; } -.hero-nav { - position: absolute; - top: 50%; - transform: translateY(-50%); - z-index: 2; - width: 2.2rem; - height: 2.2rem; - border-radius: 999px; - border: 1px solid rgba(16, 24, 32, 0.14); - background: rgba(255, 255, 255, 0.92); - color: var(--color-text); - font-size: 1.4rem; - line-height: 1; - display: grid; - place-items: center; - cursor: pointer; -} - -.hero-nav:hover { - border-color: rgba(16, 24, 32, 0.28); -} - -.hero-nav-prev { - left: 0.6rem; -} - -.hero-nav-next { - right: 0.6rem; -} - .thumb-grid { display: contents; } @@ -210,80 +180,6 @@ text-align: left; } -.viewer-state { - display: grid; - place-items: center; - min-height: 220px; - border-radius: var(--radius-lg); - background: rgba(16, 24, 32, 0.04); - color: var(--color-text-muted); -} - -.viewer-state-error { - color: var(--color-danger-600); -} - -.viewer-loading { - gap: 0.6rem; -} - -.spinner { - width: 1.5rem; - height: 1.5rem; - border-radius: 50%; - border: 2px solid rgba(16, 24, 32, 0.16); - border-top-color: var(--color-secondary-600); - animation: spin 0.9s linear infinite; -} - -.model-modal-backdrop { - position: fixed; - inset: 0; - z-index: 1100; - border: 0; - background: rgba(16, 24, 32, 0.36); -} - -.model-modal { - position: fixed; - top: 50%; - left: 50%; - transform: translate(-50%, -50%); - width: min(940px, calc(100vw - 2rem)); - max-height: calc(100vh - 2rem); - display: grid; - grid-template-rows: auto 1fr; - gap: 0.9rem; - z-index: 1101; - padding: 1rem; - border-radius: 1rem; - border: 1px solid rgba(16, 24, 32, 0.16); - background: #fff; - box-shadow: 0 22px 40px rgba(16, 24, 32, 0.3); -} - -.model-modal-head { - display: flex; - justify-content: space-between; - gap: var(--space-3); - align-items: start; -} - -.model-close-btn { - width: 2rem; - height: 2rem; - border-radius: 999px; - border: 1px solid rgba(16, 24, 32, 0.16); - background: #fff; - cursor: pointer; -} - -.model-modal-body { - min-height: 260px; - max-height: calc(100vh - 11rem); - overflow: auto; -} - .title-block { display: grid; gap: 0.4rem; @@ -436,152 +332,6 @@ h1 { border-left: 3px solid rgba(245, 158, 11, 0.7); } -.color-selector-block { - position: relative; - display: grid; - gap: 0.4rem; - padding: 0; - border-radius: 1rem; - border: 0; - background: transparent; -} - -.selector-head { - display: block; -} - -.color-trigger { - width: 100%; - max-width: 230px; - display: flex; - align-items: center; - gap: 0.75rem; - padding: 0.35rem 0.55rem; - border-radius: 0.72rem; - border: 1px solid rgba(16, 24, 32, 0.14); - background: #fff; - text-align: left; - cursor: pointer; - transition: - border-color 0.16s ease, - box-shadow 0.16s ease; -} - -.color-trigger:hover { - border-color: rgba(16, 24, 32, 0.28); -} - -.color-trigger.open { - border-color: rgba(250, 207, 10, 0.95); - box-shadow: 0 0 0 2px rgba(250, 207, 10, 0.28); -} - -.color-trigger__ring { - display: inline-flex; - align-items: center; - justify-content: center; - width: 1.75rem; - height: 1.75rem; - border-radius: 50%; - border: 2px solid rgba(250, 207, 10, 0.95); -} - -.color-trigger__swatch { - width: 1.22rem; - height: 1.22rem; - border-radius: 50%; - border: 1px solid rgba(16, 24, 32, 0.16); -} - -.color-trigger__copy { - display: grid; - gap: 0.08rem; -} - -.color-trigger__copy strong { - font-size: 0.88rem; -} - -.color-trigger__copy small { - font-size: 0.76rem; - color: var(--color-text-muted); -} - -.color-popup-backdrop { - position: fixed; - inset: 0; - z-index: 999; - border: 0; - background: transparent; -} - -.color-popup { - position: absolute; - top: calc(100% + 0.45rem); - left: 0; - z-index: 1000; - width: min(340px, 100%); - padding: 0.9rem; - border-radius: 0.85rem; - border: 1px solid rgba(16, 24, 32, 0.12); - background: #fff; - box-shadow: 0 12px 24px rgba(16, 24, 32, 0.14); -} - -.color-popup__category { - margin-bottom: 0.75rem; - font-size: 0.75rem; - font-weight: 700; - letter-spacing: 0.08em; - color: var(--color-text-muted); -} - -.color-popup__grid { - display: grid; - grid-template-columns: repeat(3, minmax(0, 1fr)); - gap: 0.75rem 0.55rem; -} - -.color-popup__item { - display: flex; - flex-direction: column; - align-items: center; - gap: 0.3rem; - border: 0; - background: transparent; - cursor: pointer; - text-align: center; - color: inherit; -} - -.color-popup__ring { - display: inline-flex; - align-items: center; - justify-content: center; - width: 2rem; - height: 2rem; - border-radius: 50%; - border: 2px solid transparent; - transition: border-color 0.15s ease; -} - -.color-popup__ring.active { - border-color: rgba(250, 207, 10, 0.95); -} - -.color-popup__swatch { - width: 1.5rem; - height: 1.5rem; - border-radius: 50%; - border: 1px solid rgba(16, 24, 32, 0.18); -} - -.color-popup__name { - font-size: 0.8rem; - line-height: 1.2; - color: var(--color-text); -} - .qty-control { display: inline-flex; align-items: center; @@ -674,12 +424,6 @@ h1 { } } -@keyframes spin { - to { - transform: rotate(360deg); - } -} - @media (max-width: 960px) { .detail-grid, .skeleton-grid { @@ -707,10 +451,6 @@ h1 { min-height: 300px; } - .selector-head { - display: block; - } - .property-grid { grid-template-columns: 1fr; } @@ -719,39 +459,6 @@ h1 { grid-template-columns: 1fr; } - .color-trigger { - max-width: 100%; - } - - .color-popup { - position: fixed; - top: 50%; - left: 50%; - transform: translate(-50%, -50%); - width: min(340px, calc(100vw - 1.5rem)); - max-height: min(72vh, 440px); - overflow-y: auto; - } - - .model-launch-row { - flex-direction: column; - align-items: flex-start; - } - - .dimensions-inline { - flex-wrap: wrap; - } - - .model-modal { - width: calc(100vw - 1rem); - max-height: calc(100vh - 1rem); - padding: 0.8rem; - } - - .model-modal-body { - max-height: calc(100vh - 9.5rem); - } - :host ::ng-deep app-card.purchase-shell .card-body { padding: 0.82rem 0.82rem; } diff --git a/frontend/src/styles.scss b/frontend/src/styles.scss index e0b594e..11d4a08 100644 --- a/frontend/src/styles.scss +++ b/frontend/src/styles.scss @@ -1,6 +1,7 @@ /* src/styles.scss */ @use "./styles/theme"; @use "./styles/patterns"; +@use "./styles/shop-product-detail-overrides"; @use "./styles/ui"; /* Reset / Base */ diff --git a/frontend/src/styles/_shop-product-detail-overrides.scss b/frontend/src/styles/_shop-product-detail-overrides.scss new file mode 100644 index 0000000..b9f1bcd --- /dev/null +++ b/frontend/src/styles/_shop-product-detail-overrides.scss @@ -0,0 +1,298 @@ +app-product-detail { + .hero-nav { + position: absolute; + top: 50%; + transform: translateY(-50%); + z-index: 2; + width: 2.2rem; + height: 2.2rem; + border-radius: 999px; + border: 1px solid rgba(16, 24, 32, 0.14); + background: rgba(255, 255, 255, 0.92); + color: var(--color-text); + font-size: 1.4rem; + line-height: 1; + display: grid; + place-items: center; + cursor: pointer; + } + + .hero-nav:hover { + border-color: rgba(16, 24, 32, 0.28); + } + + .hero-nav-prev { + left: 0.6rem; + } + + .hero-nav-next { + right: 0.6rem; + } + + .viewer-state { + display: grid; + place-items: center; + min-height: 220px; + border-radius: var(--radius-lg); + background: rgba(16, 24, 32, 0.04); + color: var(--color-text-muted); + } + + .viewer-state-error { + color: var(--color-danger-600); + } + + .viewer-loading { + gap: 0.6rem; + } + + .spinner { + width: 1.5rem; + height: 1.5rem; + border-radius: 50%; + border: 2px solid rgba(16, 24, 32, 0.16); + border-top-color: var(--color-secondary-600); + animation: shopDetailSpin 0.9s linear infinite; + } + + .model-modal-backdrop { + position: fixed; + inset: 0; + z-index: 1100; + border: 0; + background: rgba(16, 24, 32, 0.36); + } + + .model-modal { + position: fixed; + top: 50%; + left: 50%; + transform: translate(-50%, -50%); + width: min(940px, calc(100vw - 2rem)); + max-height: calc(100vh - 2rem); + display: grid; + grid-template-rows: auto 1fr; + gap: 0.9rem; + z-index: 1101; + padding: 1rem; + border-radius: 1rem; + border: 1px solid rgba(16, 24, 32, 0.16); + background: #fff; + box-shadow: 0 22px 40px rgba(16, 24, 32, 0.3); + } + + .model-modal-head { + display: flex; + justify-content: space-between; + gap: var(--space-3); + align-items: start; + } + + .model-close-btn { + width: 2rem; + height: 2rem; + border-radius: 999px; + border: 1px solid rgba(16, 24, 32, 0.16); + background: #fff; + cursor: pointer; + } + + .model-modal-body { + min-height: 260px; + max-height: calc(100vh - 11rem); + overflow: auto; + } + + .color-selector-block { + position: relative; + display: grid; + gap: 0.4rem; + padding: 0; + border-radius: 1rem; + border: 0; + background: transparent; + } + + .selector-head { + display: block; + } + + .color-trigger { + width: 100%; + max-width: 230px; + display: flex; + align-items: center; + gap: 0.75rem; + padding: 0.35rem 0.55rem; + border-radius: 0.72rem; + border: 1px solid rgba(16, 24, 32, 0.14); + background: #fff; + text-align: left; + cursor: pointer; + transition: + border-color 0.16s ease, + box-shadow 0.16s ease; + } + + .color-trigger:hover { + border-color: rgba(16, 24, 32, 0.28); + } + + .color-trigger.open { + border-color: rgba(250, 207, 10, 0.95); + box-shadow: 0 0 0 2px rgba(250, 207, 10, 0.28); + } + + .color-trigger__ring { + display: inline-flex; + align-items: center; + justify-content: center; + width: 1.75rem; + height: 1.75rem; + border-radius: 50%; + border: 2px solid rgba(250, 207, 10, 0.95); + } + + .color-trigger__swatch { + width: 1.22rem; + height: 1.22rem; + border-radius: 50%; + border: 1px solid rgba(16, 24, 32, 0.16); + } + + .color-trigger__copy { + display: grid; + gap: 0.08rem; + } + + .color-trigger__copy strong { + font-size: 0.88rem; + } + + .color-trigger__copy small { + font-size: 0.76rem; + color: var(--color-text-muted); + } + + .color-popup-backdrop { + position: fixed; + inset: 0; + z-index: 999; + border: 0; + background: transparent; + } + + .color-popup { + position: absolute; + top: calc(100% + 0.45rem); + left: 0; + z-index: 1000; + width: min(340px, 100%); + padding: 0.9rem; + border-radius: 0.85rem; + border: 1px solid rgba(16, 24, 32, 0.12); + background: #fff; + box-shadow: 0 12px 24px rgba(16, 24, 32, 0.14); + } + + .color-popup__category { + margin-bottom: 0.75rem; + font-size: 0.75rem; + font-weight: 700; + letter-spacing: 0.08em; + color: var(--color-text-muted); + } + + .color-popup__grid { + display: grid; + grid-template-columns: repeat(3, minmax(0, 1fr)); + gap: 0.75rem 0.55rem; + } + + .color-popup__item { + display: flex; + flex-direction: column; + align-items: center; + gap: 0.3rem; + border: 0; + background: transparent; + cursor: pointer; + text-align: center; + color: inherit; + } + + .color-popup__ring { + display: inline-flex; + align-items: center; + justify-content: center; + width: 2rem; + height: 2rem; + border-radius: 50%; + border: 2px solid transparent; + transition: border-color 0.15s ease; + } + + .color-popup__ring.active { + border-color: rgba(250, 207, 10, 0.95); + } + + .color-popup__swatch { + width: 1.5rem; + height: 1.5rem; + border-radius: 50%; + border: 1px solid rgba(16, 24, 32, 0.18); + } + + .color-popup__name { + font-size: 0.8rem; + line-height: 1.2; + color: var(--color-text); + } +} + +@keyframes shopDetailSpin { + to { + transform: rotate(360deg); + } +} + +@media (max-width: 640px) { + app-product-detail { + .selector-head { + display: block; + } + + .color-popup { + position: fixed; + top: 50%; + left: 50%; + transform: translate(-50%, -50%); + width: min(340px, calc(100vw - 1.5rem)); + max-height: min(72vh, 440px); + overflow-y: auto; + } + + .color-trigger { + max-width: 100%; + } + + .model-launch-row { + flex-direction: column; + align-items: flex-start; + } + + .dimensions-inline { + flex-wrap: wrap; + } + + .model-modal { + width: calc(100vw - 1rem); + max-height: calc(100vh - 1rem); + padding: 0.8rem; + } + + .model-modal-body { + max-height: calc(100vh - 9.5rem); + } + } +}