mirror of
https://github.com/ChuckBuilds/LEDMatrix.git
synced 2026-08-22 02:48:15 +00:00
Merge main into feat/plugin-composer, and fix three review findings
The branch was 57 commits behind and conflicting. I had put the rebase
aside earlier as needing the author's eyes, on the grounds that the PR is
+5091 lines -- but that was the wrong measure. The actual conflict was a
single hunk in app.css, where this branch adds .md\:inline and main added
.md\:block and .md\:w-auto at the same place. All three are kept.
Merging rather than rebasing: the branch is public and 57 commits behind,
so a rebase would rewrite shared history for a force-push.
Three findings fixed on top:
A missing `text` or `format` was a 500. `p` is a copy of the raw element
and the defaults were applied to the locals t1/fmt1 only, so an element
omitting either key left it absent, manager.py.j2 rendered
`{{ el.text | tojson }}` over a jinja2.Undefined, and tojson raised
TypeError -- which no handler catches:
text without 'text': TypeError: Object of type Undefined is not
JSON serializable
clock without 'format': same
Both keys are now set explicitly. Verified: removing either assignment
fails 4 of the new tests.
E741 on my own injection-test file: two `for i, l in enumerate(...)`
loops, which ruff rejects and would fail a lint-gated build. Renamed.
Ruff now clean on all three files this PR touches.
Not done: registering composer_bp. This PR's own description gates it --
"Not yet wired up ... tracking as a follow-up", with an unchecked box for
"Register composer_bp in app.py before merging or exposing this route" --
so it is a deliberate decision, not an oversight. Confirmed the blueprint
appears in no register_blueprint call outside this branch's tests, which
also means the code-injection fixed earlier in this PR was never
reachable in a deployed instance. Worth fixing before the route is
exposed; not worth exposing the route to satisfy a review comment.
Verified on the merged tree: 3850 passed, 1 failed, 60 skipped. The
failure is test_install_lowmem's tmpfs assumption, which is fixed in #492
and not yet on main. The static audit now passes 3/3 -- the twelve
classes it flagged before were defined on main all along and only looked
missing because this branch was behind.
Co-Authored-By: Claude Opus 5 (1M context) <noreply@anthropic.com>
Claude-Session: https://claude.ai/code/session_01STMbQE4YctTacQXfbYqKuW
This commit is contained in:
ChuckBuilds
@@ -413,6 +413,9 @@ a, button, input, select, textarea {
|
||||
/* Responsive breakpoints */
|
||||
@media (min-width: 640px) {
|
||||
.sm\:px-6 { padding-left: 1.5rem; padding-right: 1.5rem; }
|
||||
.sm\:block { display: block; }
|
||||
.sm\:grid-cols-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
|
||||
.sm\:text-sm { font-size: 0.875rem; line-height: 1.25rem; }
|
||||
}
|
||||
|
||||
@media (min-width: 768px) {
|
||||
@@ -421,6 +424,8 @@ a, button, input, select, textarea {
|
||||
.md\:grid-cols-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
|
||||
.md\:flex { display: flex; }
|
||||
.md\:hidden { display: none; }
|
||||
.md\:block { display: block; }
|
||||
.md\:w-auto { width: auto; }
|
||||
/* composer.html labels its toolbar buttons `hidden md:inline`, so without
|
||||
this the label is hidden at every width and the buttons stay icon-only. */
|
||||
.md\:inline { display: inline; }
|
||||
@@ -434,9 +439,14 @@ a, button, input, select, textarea {
|
||||
.lg\:px-8 { padding-left: 2rem; padding-right: 2rem; }
|
||||
.lg\:gap-x-3 { column-gap: 0.75rem; }
|
||||
.lg\:gap-x-6 { column-gap: 1.5rem; }
|
||||
.lg\:block { display: block; }
|
||||
.lg\:flex { display: flex; }
|
||||
.lg\:w-64 { width: 16rem; }
|
||||
}
|
||||
|
||||
@media (min-width: 1280px) {
|
||||
.xl\:grid-cols-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
|
||||
.xl\:grid-cols-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
|
||||
.xl\:grid-cols-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
|
||||
.xl\:grid-cols-5 { grid-template-columns: repeat(5, minmax(0, 1fr)); }
|
||||
.xl\:grid-cols-6 { grid-template-columns: repeat(6, minmax(0, 1fr)); }
|
||||
@@ -449,6 +459,9 @@ a, button, input, select, textarea {
|
||||
}
|
||||
|
||||
@media (min-width: 1536px) {
|
||||
.2xl\:grid-cols-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
|
||||
.2xl\:grid-cols-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
|
||||
.2xl\:grid-cols-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
|
||||
.2xl\:grid-cols-5 { grid-template-columns: repeat(5, minmax(0, 1fr)); }
|
||||
.2xl\:grid-cols-6 { grid-template-columns: repeat(6, minmax(0, 1fr)); }
|
||||
.2xl\:grid-cols-7 { grid-template-columns: repeat(7, minmax(0, 1fr)); }
|
||||
@@ -459,6 +472,129 @@ a, button, input, select, textarea {
|
||||
.2xl\:space-x-8 > * + * { margin-left: 2rem; }
|
||||
}
|
||||
|
||||
/* ===== Mobile navigation drawer =====
|
||||
Below md the #site-nav wrapper becomes an off-canvas drawer; at md and up
|
||||
none of these rules apply and the nav renders exactly as before. */
|
||||
@media (max-width: 767.98px) {
|
||||
.site-nav {
|
||||
position: fixed;
|
||||
top: 0;
|
||||
left: 0;
|
||||
bottom: 0;
|
||||
z-index: 60;
|
||||
width: min(85vw, 320px);
|
||||
background-color: var(--color-surface);
|
||||
border-right: 1px solid var(--color-border);
|
||||
transform: translateX(-100%);
|
||||
transition: transform 0.25s ease;
|
||||
overflow-y: auto;
|
||||
padding: 1rem;
|
||||
-webkit-overflow-scrolling: touch;
|
||||
}
|
||||
.site-nav.open {
|
||||
transform: translateX(0);
|
||||
box-shadow: 0 0 24px rgba(0, 0, 0, 0.25);
|
||||
}
|
||||
/* Tabs become full-width rows with >=44px touch targets */
|
||||
.site-nav .nav-tab {
|
||||
display: flex;
|
||||
width: 100%;
|
||||
align-items: center;
|
||||
gap: 0.5rem;
|
||||
text-align: left;
|
||||
padding: 0.75rem 1rem;
|
||||
min-height: 44px;
|
||||
}
|
||||
.site-nav nav.-mb-px {
|
||||
display: block;
|
||||
}
|
||||
.nav-backdrop {
|
||||
position: fixed;
|
||||
inset: 0;
|
||||
z-index: 55;
|
||||
background-color: rgba(0, 0, 0, 0.4);
|
||||
}
|
||||
/* Header widgets relocated into the drawer (see placeHeaderWidgets in
|
||||
app.js). The originals carry `hidden`/breakpoint classes tuned for the
|
||||
header, so re-enable them explicitly in the drawer context. */
|
||||
#drawer-widgets #settings-search-wrap {
|
||||
display: block !important;
|
||||
margin-bottom: 1rem;
|
||||
}
|
||||
#drawer-widgets #settings-search-wrap input {
|
||||
width: 100%;
|
||||
}
|
||||
#drawer-widgets #settings-search-results {
|
||||
position: static;
|
||||
width: 100%;
|
||||
max-height: 50vh;
|
||||
margin-top: 0.25rem;
|
||||
}
|
||||
#drawer-widgets #system-stats {
|
||||
display: flex !important;
|
||||
justify-content: space-between;
|
||||
margin-bottom: 1rem;
|
||||
}
|
||||
/* Larger touch targets inside horizontally scrolling tables */
|
||||
.overflow-x-auto table button {
|
||||
min-width: 44px;
|
||||
min-height: 44px;
|
||||
}
|
||||
.overflow-x-auto table input:not([type="checkbox"]),
|
||||
.overflow-x-auto table select {
|
||||
min-height: 40px;
|
||||
}
|
||||
.overflow-x-auto table input[type="checkbox"] {
|
||||
width: 1.25rem;
|
||||
height: 1.25rem;
|
||||
}
|
||||
}
|
||||
|
||||
@media (min-width: 768px) {
|
||||
/* Hard guards: even if mobileNavOpen was left true when the viewport
|
||||
crossed the breakpoint, the drawer/backdrop must render as plain
|
||||
in-flow nav on desktop. */
|
||||
.site-nav {
|
||||
position: static;
|
||||
transform: none;
|
||||
width: auto;
|
||||
padding: 0;
|
||||
border-right: none;
|
||||
box-shadow: none;
|
||||
background-color: transparent;
|
||||
overflow-y: visible;
|
||||
}
|
||||
.nav-backdrop {
|
||||
display: none !important;
|
||||
}
|
||||
#drawer-widgets {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
|
||||
/* Mobile modal sizing: every .modal-content dialog fits the viewport with
|
||||
internal scrolling instead of overflowing it. */
|
||||
@media (max-width: 640px) {
|
||||
.modal-content {
|
||||
width: 95vw !important;
|
||||
max-width: 95vw !important;
|
||||
max-height: 90vh;
|
||||
overflow-y: auto;
|
||||
}
|
||||
}
|
||||
|
||||
/* Edge-fade hint that a container scrolls horizontally (pure CSS,
|
||||
Lea Verou scrolling-shadows technique — backgrounds sit behind content). */
|
||||
.overflow-x-auto {
|
||||
background:
|
||||
linear-gradient(90deg, var(--color-surface) 30%, rgba(255, 255, 255, 0)) left / 24px 100%,
|
||||
linear-gradient(270deg, var(--color-surface) 30%, rgba(255, 255, 255, 0)) right / 24px 100%,
|
||||
radial-gradient(farthest-side at 0 50%, rgba(0, 0, 0, 0.18), rgba(0, 0, 0, 0)) left / 12px 100%,
|
||||
radial-gradient(farthest-side at 100% 50%, rgba(0, 0, 0, 0.18), rgba(0, 0, 0, 0)) right / 12px 100%;
|
||||
background-repeat: no-repeat;
|
||||
background-attachment: local, local, scroll, scroll;
|
||||
}
|
||||
|
||||
/* HTMX loading states */
|
||||
.htmx-request .loading {
|
||||
display: inline-block;
|
||||
@@ -1201,6 +1337,21 @@ button.bg-white {
|
||||
color: #93c5fd;
|
||||
}
|
||||
|
||||
/* Installed-plugin "Update" button when a newer version is published.
|
||||
A gentle pulsing ring draws the eye without being noisy. */
|
||||
.plugin-update-available {
|
||||
box-shadow: 0 0 0 0 rgba(59, 130, 246, 0.6);
|
||||
animation: plugin-update-pulse 2s ease-out infinite;
|
||||
}
|
||||
@keyframes plugin-update-pulse {
|
||||
0% { box-shadow: 0 0 0 0 rgba(59, 130, 246, 0.55); }
|
||||
70% { box-shadow: 0 0 0 6px rgba(59, 130, 246, 0); }
|
||||
100% { box-shadow: 0 0 0 0 rgba(59, 130, 246, 0); }
|
||||
}
|
||||
@media (prefers-reduced-motion: reduce) {
|
||||
.plugin-update-available { animation: none; }
|
||||
}
|
||||
|
||||
/* Under-voltage / throttling warning banner */
|
||||
.power-warning-banner {
|
||||
background-color: #fef2f2;
|
||||
@@ -1223,3 +1374,44 @@ button.bg-white {
|
||||
[data-theme="dark"] .power-warning-banner-dismiss {
|
||||
color: #fca5a5;
|
||||
}
|
||||
|
||||
/* ===== Floating live preview (all tabs except Overview) ===== */
|
||||
.floating-preview {
|
||||
position: fixed;
|
||||
right: 1rem;
|
||||
bottom: 1rem;
|
||||
z-index: 70;
|
||||
background-color: #111827;
|
||||
border: 1px solid #374151;
|
||||
border-radius: 0.5rem;
|
||||
box-shadow: 0 8px 24px rgba(0, 0, 0, 0.4);
|
||||
overflow: hidden;
|
||||
/* Desktop: draggable resize handle (bottom-left visually, since the
|
||||
panel is anchored to the right). Touch devices use the size button. */
|
||||
resize: both;
|
||||
min-width: 160px;
|
||||
max-width: 90vw;
|
||||
}
|
||||
.floating-preview img {
|
||||
background-color: #000;
|
||||
}
|
||||
.floating-preview-toggle {
|
||||
position: fixed;
|
||||
right: 1rem;
|
||||
bottom: 1rem;
|
||||
z-index: 70;
|
||||
width: 44px;
|
||||
height: 44px;
|
||||
border-radius: 9999px;
|
||||
background-color: var(--color-primary);
|
||||
color: #ffffff;
|
||||
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.35);
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
}
|
||||
@media (max-width: 640px) {
|
||||
/* Whatever size is chosen, never wider than the phone viewport */
|
||||
.floating-preview {
|
||||
max-width: calc(100vw - 2rem);
|
||||
}
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user