complete admin CSS refactor: delete utilities.css, add layout primitives
- Delete utilities.css (701 lines / 24 KB of Tailwind utility clones) - Add layout.css with admin-stack, admin-row, admin-cluster, admin-grid primitives and gap variants (sm, md, lg, xl) - Add transitions.css import and layout.css import to admin.css entry point - Replace all Tailwind utility classes across 26 admin templates with semantic admin-*/theme-*/page-specific CSS classes - Replace all non-dynamic inline styles with semantic classes - Add ~100 new semantic classes to components.css (analytics, dashboard, order detail, settings, theme editor, generic utilities) - Fix stray text-error → admin-text-error in media.ex - Add missing .truncate definition to admin CSS - Only remaining inline styles are dynamic data values (progress bars, chart dimensions) and one JS.toggle target Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
This commit is contained in:
@@ -118,10 +118,7 @@ defmodule BerrypodWeb.Admin.Pages.CustomForm do
|
||||
@impl true
|
||||
def render(assigns) do
|
||||
~H"""
|
||||
<.link
|
||||
navigate={~p"/admin/pages"}
|
||||
class="text-sm font-normal text-base-content/60 hover:underline"
|
||||
>
|
||||
<.link navigate={~p"/admin/pages"} class="admin-back-link">
|
||||
← Pages
|
||||
</.link>
|
||||
|
||||
@@ -153,8 +150,7 @@ defmodule BerrypodWeb.Admin.Pages.CustomForm do
|
||||
id="custom-page-form"
|
||||
phx-change="validate"
|
||||
phx-submit="save"
|
||||
class="mt-6 space-y-6"
|
||||
style="max-width: 32rem;"
|
||||
class="admin-form-stack admin-section"
|
||||
>
|
||||
<.input field={@form[:title]} label="Title" />
|
||||
<.input field={@form[:slug]} label="URL slug" />
|
||||
@@ -167,12 +163,15 @@ defmodule BerrypodWeb.Admin.Pages.CustomForm do
|
||||
<.input field={@form[:published]} type="checkbox" label="Published" />
|
||||
<.input field={@form[:show_in_nav]} type="checkbox" label="Show in navigation" />
|
||||
|
||||
<div :if={@form[:show_in_nav].value == true} class="space-y-4 pl-6">
|
||||
<div
|
||||
:if={@form[:show_in_nav].value == true}
|
||||
class="admin-form-sub"
|
||||
>
|
||||
<.input field={@form[:nav_label]} label="Nav label" />
|
||||
<.input field={@form[:nav_position]} type="number" label="Nav position" />
|
||||
</div>
|
||||
|
||||
<div class="flex gap-3">
|
||||
<div class="admin-row admin-row-lg">
|
||||
<.button type="submit" phx-disable-with="Saving...">
|
||||
{if @live_action == :new, do: "Create page", else: "Save settings"}
|
||||
</.button>
|
||||
|
||||
@@ -521,10 +521,7 @@ defmodule BerrypodWeb.Admin.Pages.Editor do
|
||||
def render(assigns) do
|
||||
~H"""
|
||||
<div id="page-editor" phx-hook="EditorKeyboard" data-dirty={to_string(@dirty)}>
|
||||
<.link
|
||||
navigate={~p"/admin/pages"}
|
||||
class="text-sm font-normal text-base-content/60 hover:underline"
|
||||
>
|
||||
<.link navigate={~p"/admin/pages"} class="admin-back-link">
|
||||
← Pages
|
||||
</.link>
|
||||
<.header>
|
||||
@@ -552,7 +549,7 @@ defmodule BerrypodWeb.Admin.Pages.Editor do
|
||||
</button>
|
||||
<button
|
||||
phx-click="undo"
|
||||
class={["admin-btn admin-btn-sm admin-btn-ghost", @history == [] && "opacity-30"]}
|
||||
class="admin-btn admin-btn-sm admin-btn-ghost"
|
||||
disabled={@history == []}
|
||||
aria-label="Undo"
|
||||
>
|
||||
@@ -560,7 +557,7 @@ defmodule BerrypodWeb.Admin.Pages.Editor do
|
||||
</button>
|
||||
<button
|
||||
phx-click="redo"
|
||||
class={["admin-btn admin-btn-sm admin-btn-ghost", @future == [] && "opacity-30"]}
|
||||
class="admin-btn admin-btn-sm admin-btn-ghost"
|
||||
disabled={@future == []}
|
||||
aria-label="Redo"
|
||||
>
|
||||
@@ -584,7 +581,7 @@ defmodule BerrypodWeb.Admin.Pages.Editor do
|
||||
</button>
|
||||
<button
|
||||
phx-click="save"
|
||||
class={["admin-btn admin-btn-sm admin-btn-primary", !@dirty && "opacity-50"]}
|
||||
class="admin-btn admin-btn-sm admin-btn-primary"
|
||||
disabled={!@dirty}
|
||||
>
|
||||
Save
|
||||
@@ -598,7 +595,7 @@ defmodule BerrypodWeb.Admin.Pages.Editor do
|
||||
</div>
|
||||
|
||||
<%!-- Status badges --%>
|
||||
<div class="mt-4 flex gap-2 flex-wrap">
|
||||
<div class="admin-editor-badges">
|
||||
<p :if={@dirty} class="admin-badge admin-badge-warning">
|
||||
Unsaved changes
|
||||
</p>
|
||||
|
||||
Reference in New Issue
Block a user