From 0871570b7ee31216cba90da79670de7a124d91ca Mon Sep 17 00:00:00 2001 From: Jamey Greenwood Date: Wed, 31 Dec 2025 00:45:14 +0000 Subject: [PATCH] fix: support grid-cols-4, accent color, and header layout controls MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit - Fix grid columns 4 by using conditional logic instead of string interpolation - Simplify CSS generator to only generate accent colors (mood/typography/shape/density now use data attributes) - Add header component to all 7 preview pages with logo, nav, and cart - Add header layout CSS for centered and minimal variants - Move nav display property to CSS to enable minimal mode hiding This resolves all high-priority theme control issues: - Grid columns now supports 2, 3, and 4 columns - Accent color picker now updates button colors - Header layout control now works (standard, centered, minimal) 🤖 Generated with [Claude Code](https://claude.com/claude-code) Co-Authored-By: Claude Sonnet 4.5 --- assets/css/theme-layer2-attributes.css | 19 +++++++++++++ lib/simpleshop_theme/theme/css_generator.ex | 4 --- .../theme_live/preview_pages/about.html.heex | 18 ++++++++++++ .../theme_live/preview_pages/cart.html.heex | 18 ++++++++++++ .../preview_pages/collection.html.heex | 28 ++++++++++++++++++- .../preview_pages/contact.html.heex | 18 ++++++++++++ .../theme_live/preview_pages/error.html.heex | 24 ++++++++++++++-- .../theme_live/preview_pages/home.html.heex | 28 ++++++++++++++++++- .../theme_live/preview_pages/pdp.html.heex | 18 ++++++++++++ 9 files changed, 167 insertions(+), 8 deletions(-) diff --git a/assets/css/theme-layer2-attributes.css b/assets/css/theme-layer2-attributes.css index f711f00..e929350 100644 --- a/assets/css/theme-layer2-attributes.css +++ b/assets/css/theme-layer2-attributes.css @@ -155,3 +155,22 @@ .preview-frame[data-density="compact"] { --t-density: 0.85; } + +/* Header Layout */ +.shop-nav { + display: flex; +} + +.preview-frame[data-header="centered"] .shop-header { + flex-direction: column; + gap: 0.75rem; + text-align: center; +} + +.preview-frame[data-header="centered"] .shop-nav { + justify-content: center; +} + +.preview-frame[data-header="minimal"] .shop-nav { + display: none !important; +} diff --git a/lib/simpleshop_theme/theme/css_generator.ex b/lib/simpleshop_theme/theme/css_generator.ex index 17f47b2..0c09641 100644 --- a/lib/simpleshop_theme/theme/css_generator.ex +++ b/lib/simpleshop_theme/theme/css_generator.ex @@ -19,10 +19,6 @@ defmodule SimpleshopTheme.Theme.CSSGenerator do .preview-frame, .shop-root { #{generate_accent(settings.accent_color)} #{generate_secondary_colors(settings)} - #{generate_mood(settings.mood)} - #{generate_typography(settings.typography)} - #{generate_shape(settings.shape)} - #{generate_density(settings.density)} } """ |> String.trim() diff --git a/lib/simpleshop_theme_web/live/theme_live/preview_pages/about.html.heex b/lib/simpleshop_theme_web/live/theme_live/preview_pages/about.html.heex index 3cb7fc0..00d8ec8 100644 --- a/lib/simpleshop_theme_web/live/theme_live/preview_pages/about.html.heex +++ b/lib/simpleshop_theme_web/live/theme_live/preview_pages/about.html.heex @@ -1,4 +1,22 @@
+ +
+ + +
+ +
+
+

About Us diff --git a/lib/simpleshop_theme_web/live/theme_live/preview_pages/cart.html.heex b/lib/simpleshop_theme_web/live/theme_live/preview_pages/cart.html.heex index e9169f8..a319780 100644 --- a/lib/simpleshop_theme_web/live/theme_live/preview_pages/cart.html.heex +++ b/lib/simpleshop_theme_web/live/theme_live/preview_pages/cart.html.heex @@ -1,4 +1,22 @@
+ +
+ + +
+ +
+
+

Shopping Cart diff --git a/lib/simpleshop_theme_web/live/theme_live/preview_pages/collection.html.heex b/lib/simpleshop_theme_web/live/theme_live/preview_pages/collection.html.heex index 9d108b1..f668d7c 100644 --- a/lib/simpleshop_theme_web/live/theme_live/preview_pages/collection.html.heex +++ b/lib/simpleshop_theme_web/live/theme_live/preview_pages/collection.html.heex @@ -1,5 +1,23 @@
+
+ + +
+ +
+
+ +

@@ -95,7 +113,15 @@

-
+
"lg:grid-cols-2" + "3" -> "lg:grid-cols-3" + "4" -> "lg:grid-cols-4" + _ -> "lg:grid-cols-3" + end + ]}> <%= for product <- @preview_data.products do %>
+ +
+ + +
+ +
+
+

Contact Us diff --git a/lib/simpleshop_theme_web/live/theme_live/preview_pages/error.html.heex b/lib/simpleshop_theme_web/live/theme_live/preview_pages/error.html.heex index 9198482..1c2f82f 100644 --- a/lib/simpleshop_theme_web/live/theme_live/preview_pages/error.html.heex +++ b/lib/simpleshop_theme_web/live/theme_live/preview_pages/error.html.heex @@ -1,5 +1,24 @@ -
-
+
+ +
+ + +
+ +
+
+ +
+

404

@@ -52,5 +71,6 @@
<% end %>
+
diff --git a/lib/simpleshop_theme_web/live/theme_live/preview_pages/home.html.heex b/lib/simpleshop_theme_web/live/theme_live/preview_pages/home.html.heex index 7cfeea4..8884d01 100644 --- a/lib/simpleshop_theme_web/live/theme_live/preview_pages/home.html.heex +++ b/lib/simpleshop_theme_web/live/theme_live/preview_pages/home.html.heex @@ -1,4 +1,22 @@
+ +
+ + +
+ +
+
+
@@ -25,7 +43,15 @@ Featured Products

-
+
"lg:grid-cols-2" + "3" -> "lg:grid-cols-3" + "4" -> "lg:grid-cols-4" + _ -> "lg:grid-cols-3" + end + ]}> <%= for product <- Enum.take(@preview_data.products, 6) do %>
+ +
+ + +
+ +
+
+