From 6a10d496d81777f14465fdb09c00da45a8199eeb Mon Sep 17 00:00:00 2001 From: gilles Date: Tue, 20 Jan 2026 03:25:51 +0100 Subject: [PATCH] =?UTF-8?q?feat:=20modal=20d=C3=A9tail=20produit=20plein?= =?UTF-8?q?=20=C3=A9cran=20avec=20donn=C3=A9es=20=C3=A9tendues?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit - Modal utilise un portal React pour s'afficher au-dessus de toute la page - Affichage plein écran (100vh) avec scroll interne - Support des données étendues scrapées (a_propos, description, caractéristiques, détails) - Image plus grande (300x300) avec lightbox - Layout responsive pour mobile Co-Authored-By: Claude Opus 4.5 --- frontend/src/styles/global.scss | 196 +++++++++++++++++++++++++------- 1 file changed, 152 insertions(+), 44 deletions(-) diff --git a/frontend/src/styles/global.scss b/frontend/src/styles/global.scss index 44faec2..9b30f59 100644 --- a/frontend/src/styles/global.scss +++ b/frontend/src/styles/global.scss @@ -995,31 +995,66 @@ a { font-size: 0.85rem; } -// Product Detail Modal -.modal-detail { - max-width: 800px; +// Product Detail Modal (Fullscreen) +.modal-fullscreen { + padding: 0; + align-items: stretch; } -.detail-layout { +.modal-detail-fullscreen { + max-width: 100%; + width: 100%; + height: 100vh; + max-height: 100vh; + border-radius: 0; display: flex; - gap: 24px; + flex-direction: column; - @media (max-width: 600px) { + .modal-header { + flex-shrink: 0; + border-bottom: 1px solid $bg; + background: $card; + + h2 { + display: flex; + align-items: center; + gap: 10px; + + i { + color: $accent; + } + } + } + + .modal-body { + flex: 1; + overflow-y: auto; + padding: 24px 32px; + } +} + +// Section principale (image + infos essentielles) +.detail-main { + display: flex; + gap: 32px; + margin-bottom: 32px; + + @media (max-width: 900px) { flex-direction: column; } } -.detail-image { +.detail-image-large { flex-shrink: 0; - width: 200px; - height: 200px; + width: 300px; + height: 300px; background: #fff; border-radius: 12px; display: flex; align-items: center; justify-content: center; overflow: hidden; - padding: 12px; + padding: 16px; position: relative; &.clickable { @@ -1038,32 +1073,33 @@ a { .no-image { color: $text-muted; - font-size: 3rem; + font-size: 4rem; } .image-zoom-hint { position: absolute; - bottom: 8px; - right: 8px; + bottom: 12px; + right: 12px; background: rgba(0, 0, 0, 0.7); color: white; - padding: 6px 10px; + padding: 8px 12px; border-radius: 6px; - font-size: 0.75rem; + font-size: 0.8rem; opacity: 0; transition: opacity 0.2s; display: flex; align-items: center; - gap: 4px; + gap: 6px; } - @media (max-width: 600px) { + @media (max-width: 900px) { width: 100%; - height: 180px; + max-width: 300px; + margin: 0 auto; } } -.detail-content { +.detail-essential { flex: 1; min-width: 0; } @@ -1072,17 +1108,20 @@ a { display: flex; align-items: center; gap: 12px; - margin-bottom: 8px; + margin-bottom: 12px; .boutique { - font-size: 0.85rem; + font-size: 0.9rem; color: $accent; font-weight: 500; + display: flex; + align-items: center; + gap: 6px; } .status { - font-size: 0.7rem; - padding: 3px 8px; + font-size: 0.75rem; + padding: 4px 10px; border-radius: 4px; font-weight: 500; @@ -1098,25 +1137,25 @@ a { } } -.detail-title { - font-size: 1.1rem; +.detail-title-large { + font-size: 1.4rem; font-weight: 600; - margin: 0 0 12px 0; + margin: 0 0 16px 0; line-height: 1.4; } .detail-badges { display: flex; flex-wrap: wrap; - gap: 6px; - margin-bottom: 16px; + gap: 8px; + margin-bottom: 20px; } -.detail-grid { +.detail-price-stock { display: grid; grid-template-columns: repeat(2, 1fr); gap: 16px; - margin-bottom: 16px; + margin-bottom: 20px; @media (max-width: 600px) { grid-template-columns: 1fr; @@ -1126,43 +1165,49 @@ a { .detail-section { background: $bg; border-radius: 8px; - padding: 12px; + padding: 16px; h4 { - margin: 0 0 10px 0; - font-size: 0.8rem; + margin: 0 0 12px 0; + font-size: 0.85rem; color: $accent; text-transform: uppercase; letter-spacing: 0.5px; display: flex; align-items: center; - gap: 6px; + gap: 8px; i { - font-size: 0.85rem; + font-size: 0.9rem; } } } -.detail-meta-section { - grid-column: 1 / -1; +.detail-meta { + margin-bottom: 0; } .detail-data-list { display: flex; flex-direction: column; - gap: 8px; + gap: 10px; +} + +.detail-data-grid { + display: grid; + grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); + gap: 10px; } .detail-data-row { display: flex; justify-content: space-between; align-items: center; - font-size: 0.85rem; + font-size: 0.9rem; .label { color: $text-muted; - font-size: 0.75rem; + font-size: 0.8rem; } .value { @@ -1170,7 +1215,7 @@ a { &.price-current { color: $accent; - font-size: 1.1rem; + font-size: 1.3rem; } &.strikethrough { @@ -1198,12 +1243,12 @@ a { color: $accent-yellow; i { - font-size: 0.75rem; + font-size: 0.8rem; } .review-count { color: $text-muted; - font-size: 0.75rem; + font-size: 0.8rem; font-weight: 400; } } @@ -1211,8 +1256,9 @@ a { &.mono { font-family: monospace; background: rgba($card-hover, 0.5); - padding: 2px 6px; + padding: 3px 8px; border-radius: 4px; + font-size: 0.85rem; } } } @@ -1220,7 +1266,69 @@ a { .detail-data-empty { color: $text-muted; font-style: italic; + font-size: 0.9rem; +} + +// Sections étendues (a_propos, description, caractéristiques, détails) +.detail-extended { + display: flex; + flex-direction: column; + gap: 20px; + margin-bottom: 24px; +} + +.detail-section-full { + width: 100%; +} + +.detail-bullets { + margin: 0; + padding-left: 20px; + display: flex; + flex-direction: column; + gap: 8px; + + li { + font-size: 0.9rem; + line-height: 1.5; + color: $text; + } +} + +.detail-description { + margin: 0; + font-size: 0.9rem; + line-height: 1.6; + color: $text; +} + +.detail-table { + display: grid; + grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); + gap: 8px; +} + +.detail-table-row { + display: flex; + justify-content: space-between; + align-items: flex-start; + padding: 8px 12px; + background: rgba($card, 0.5); + border-radius: 6px; font-size: 0.85rem; + gap: 16px; + + .detail-table-key { + color: $text-muted; + flex-shrink: 0; + max-width: 40%; + } + + .detail-table-value { + color: $text; + text-align: right; + word-break: break-word; + } } .btn-detail {