jamey/berrypod
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects 1 Releases Wiki Activity

fix theme data attributes not updating live during editing
All checks were successful
deploy / deploy (push) Successful in 1m26s
Details

Browse Source 
The shop_root.html.heex had duplicate .themed element with data-mood etc
attributes that were static (rendered once at page load). This prevented
live theme changes from visually updating since CSS matched the outer
stale element.

Fix: Remove data attributes from shop_root.html.heex, keeping only the
live-updated .shop-container.themed element inside the LiveView.

Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
This commit is contained in:
jamey 2026-03-09 20:51:59 +00:00
parent 6f0b7f4f63
commit caded6c9f8
2 changed files with 4 additions and 15 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

15
lib/berrypod_web/components/layouts/shop_root.html.heex
View File

@ -80,19 +80,8 @@
This shop works without JavaScript, but some features work better with it enabled. This shop works without JavaScript, but some features work better with it enabled.
</div> </div>
</noscript> </noscript>
<div <%!-- Data attributes live on .shop-container inside LiveView for live updates --%>
class="themed shop-root" <div class="shop-root">
data-mood={@theme_settings.mood}
data-typography={@theme_settings.typography}
data-shape={@theme_settings.shape}
data-density={@theme_settings.density}
data-grid={@theme_settings.grid_columns}
data-header={@theme_settings.header_layout}
data-sticky={to_string(@theme_settings.sticky_header)}
data-layout={@theme_settings.layout_width}
data-shadow={@theme_settings.card_shadow}
data-button-style={@theme_settings.button_style}
>
{@inner_content} {@inner_content}
</div> </div>
</body> </body>

4
test/berrypod_web/live/theme_css_consistency_test.exs
View File

@ -26,7 +26,7 @@ defmodule BerrypodWeb.ThemeCSSConsistencyTest do
{:ok, _view, html} = live(log_in_user(conn, user), ~p"/") {:ok, _view, html} = live(log_in_user(conn, user), ~p"/")
# Verify themed element exists with theme data attributes # Verify themed element exists with theme data attributes
assert html =~ ~r/<div[^>]*class="themed/ assert html =~ ~r/class="[^"]*themed/
assert html =~ ~r/data-mood="/ assert html =~ ~r/data-mood="/
assert html =~ ~r/data-typography="/ assert html =~ ~r/data-typography="/
assert html =~ ~r/data-shape="/ assert html =~ ~r/data-shape="/
@ -39,7 +39,7 @@ defmodule BerrypodWeb.ThemeCSSConsistencyTest do
{:ok, _view, html} = live(conn, ~p"/?edit=theme") {:ok, _view, html} = live(conn, ~p"/?edit=theme")
# Verify themed element exists with theme data attributes # Verify themed element exists with theme data attributes
assert html =~ ~r/<div[^>]*class="themed/ assert html =~ ~r/class="[^"]*themed/
assert html =~ ~r/data-mood="/ assert html =~ ~r/data-mood="/
assert html =~ ~r/data-typography="/ assert html =~ ~r/data-typography="/
assert html =~ ~r/data-shape="/ assert html =~ ~r/data-shape="/