diff --git a/make_post_sell/static/css/common.css b/make_post_sell/static/css/common.css index f845a0d..fb1ca76 100644 --- a/make_post_sell/static/css/common.css +++ b/make_post_sell/static/css/common.css @@ -1569,15 +1569,8 @@ div.edit-page > section.edit-card-full { grid-column: 1 / -1; } -/* On the thumbnails card the descriptor section (Your cover ... will - show up on search pages) sits to the right of the h3 header inside - the section.upload-thumbnails inner grid. Right-align its text so - it reads as a caption beside the header. */ -section.upload-thumbnails > section:first-of-type { - text-align: right; - justify-self: end; - align-self: center; -} +/* Thumbnails header laid out via .upload-thumbnails-header flex row + above the .upload-thumbnails-grid (see below). */ hr { color: var(--border-light, #EEEEEE); @@ -1587,11 +1580,35 @@ section.upload-product-and-preview { } section.upload-thumbnails { + /* Header + grid layout — see .upload-thumbnails-header and + .upload-thumbnails-grid below for the inner structure. */ +} + +.upload-thumbnails-header { + display: flex; + justify-content: space-between; + align-items: flex-start; + gap: var(--space-4, 16px); + flex-wrap: wrap; +} + +.upload-thumbnails-header h3 { + margin: 0; + flex: 1 1 auto; +} + +.upload-thumbnails-hint { + margin: 0; + color: var(--color-text-muted, #666); + text-align: right; + max-width: 320px; +} + +.upload-thumbnails-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); - grid-auto-columns: max-content; - grid-auto-flow: dense; - grid-gap: 14px; + grid-gap: var(--space-4, 16px); + margin-top: var(--space-4, 16px); } section.windows-95-task-bar { diff --git a/make_post_sell/templates/product_edit.j2 b/make_post_sell/templates/product_edit.j2 index 539e30c..ad9d21f 100644 --- a/make_post_sell/templates/product_edit.j2 +++ b/make_post_sell/templates/product_edit.j2 @@ -202,19 +202,21 @@ permanent link: {{ product.absolut
-

- 🎨 - Upload or Replace Thumbnail Files -

-
-Your cover (thumbnail1) will show up on search pages. -
-
-
+
+

+ 🎨 + Upload or Replace Thumbnail Files +

+

+ Your cover (thumbnail1) will show up on search pages. +

+
{% set s3_key_thumbnails = product.s3_key_thumbnails %} +
+ {% for thumbnail_key in product.file_thumbnail_keys %}
@@ -261,6 +263,8 @@ Your cover (thumbnail1) will show up on search pages.
{% endfor %} + +