mirror of
https://github.com/kiddin9/op-packages.git
synced 2026-10-31 00:55:13 +08:00
🌈 Sync 2026-08-27 14:56:13
This commit is contained in:
github-actions[bot] committed
1 parent
1b91eb3175
commit
3ebef8b234
25 files changed
+416
-168
No files matched your search
@@ -17,7 +17,7 @@ LUCI_NAME:=luci-theme-footstrap
|
||||
FOOTSTRAP_VERSION?=
|
||||
ifneq ($(FOOTSTRAP_VERSION),)
|
||||
PKG_VERSION:=$(FOOTSTRAP_VERSION)
|
||||
PKG_RELEASE:=37
|
||||
PKG_RELEASE:=38
|
||||
endif
|
||||
|
||||
LUCI_TITLE:=Footstrap Theme
|
||||
|
||||
@@ -67,9 +67,9 @@ function fittersEnabled() {
|
||||
function run() {
|
||||
if (!fittersEnabled()) return;
|
||||
runAll(_fitters, 'fitter');
|
||||
/* the page is settled: this is the height the next tick may not go below, and the position the
|
||||
* next mutation is measured against — unless a correction is already on its way, which would
|
||||
* make this reference the drifted one */
|
||||
/* make the document whole again before anything lays it out, then take the position the next
|
||||
* mutation is measured against — unless a correction is already on its way, which would make
|
||||
* this reference the drifted one */
|
||||
holdFloor();
|
||||
if (!_anchorPending) rememberRest();
|
||||
}
|
||||
@@ -77,34 +77,44 @@ function run() {
|
||||
/* ---- the document may not get shorter while a tick is in flight ----
|
||||
*
|
||||
* `dom.content()` — what every LuCI poll calls to refresh a section — empties the container before
|
||||
* it refills it, and the engine clamps the reader's offset into the briefly shorter document.
|
||||
* Nothing puts that back, because the shortening was never real.
|
||||
* it refills it, and a layout taken while it is empty clamps the reader's offset into a document
|
||||
* that was never really that short. Nothing puts that back.
|
||||
*
|
||||
* So the content column keeps a floor: `min-height` at the height it had at the last settled
|
||||
* moment. A section emptying inside it takes nothing off the document, so there is nothing to clamp
|
||||
* into. Re-measured after every settled batch, so a page that genuinely got shorter follows one
|
||||
* frame later.
|
||||
* So each container that a poll empties carries a floor: `min-height` at the height it had at the
|
||||
* last settled moment, written BEFORE the tick rather than during it. That distinction is the whole
|
||||
* mechanism — pinning the container from inside the same statement sequence does nothing, because
|
||||
* `dom.content()` performs no layout and no layout ever sees the pin (measured: 1882px still
|
||||
* clamped away with the pin in place). A floor already standing when the container empties needs no
|
||||
* layout to be seen.
|
||||
*
|
||||
* The floor is on `.fs-content` and not on the container being swapped: pinning the container in
|
||||
* the same statement sequence does nothing, since `dom.content()` performs no layout and no layout
|
||||
* ever sees the pin (measured: 1882px still clamped away with the pin in place). Wrapping
|
||||
* `dom.content()` itself works, at the price of patching a luci-base API every app shares and up to
|
||||
* seven read/write pairs per call; one theme-owned element measured once per batch holds the reader
|
||||
* just as still (0px against a 337px drift), at 16 measurements against 154 wrapped calls.
|
||||
* The floor is on those containers and NOT on the column around them, which is where it used to be.
|
||||
* `min-height` on an ancestor of the engine's own anchor is a suppression trigger —
|
||||
* css-scroll-anchoring-1 §2.2.2 lists it, and Blink's list (css_properties.json5,
|
||||
* `invalidate: [..., "scroll-anchor"]`) is wider still — so a floor on the column bought the clamp
|
||||
* back by turning the engine's anchoring off: 120px grew above the reader and the page moved all
|
||||
* 120px under them, on Chromium and Firefox alike. The suppression walks only the path from the
|
||||
* anchor to the scroller, and a container that empties is never on it: either the anchor was inside
|
||||
* it, in which case the engine has lost the anchor anyway, or the anchor is elsewhere and this
|
||||
* container is a sibling.
|
||||
*
|
||||
* Not while the reader scrolls: clearing the floor to re-measure is a layout read, and the floor
|
||||
* staying where it was is still a floor. */
|
||||
* Wrapping `dom.content()` itself also works, at the price of patching a luci-base API every app
|
||||
* shares and up to seven read/write pairs per call. */
|
||||
const SHRINKS = '.cbi-section > div, .table';
|
||||
|
||||
/* The floor is the height the next tick may not go below, one per container. Cleared before the
|
||||
* read, or each floor measures itself and never comes down; batched into one clear, one read pass
|
||||
* and one write pass, so the whole sweep costs a single forced layout rather than one per element.
|
||||
*
|
||||
* Not while the reader scrolls: clearing to re-measure is a layout read, and a floor staying where
|
||||
* it was is still a floor. */
|
||||
function holdFloor() {
|
||||
/* only where the theme is responsible: an engine that anchors by itself reads the held height as
|
||||
* one more thing that moved (15px off with the floor held, 0px without), and gains nothing from
|
||||
* it */
|
||||
if (ENGINE_ANCHORS || scrolling()) return;
|
||||
const el = document.querySelector('.fs-content');
|
||||
if (!el) return; /* the login page has no content column */
|
||||
/* cleared before the read, or the floor measures itself and never comes down */
|
||||
el.style.minHeight = '';
|
||||
const h = el.offsetHeight;
|
||||
if (h > 0) el.style.minHeight = h + 'px';
|
||||
if (scrolling()) return;
|
||||
const host = document.getElementById('view');
|
||||
if (!host) return; /* the login page has no view */
|
||||
const els = host.querySelectorAll(SHRINKS), hs = [];
|
||||
els.forEach((el) => { el.style.minHeight = ''; });
|
||||
els.forEach((el) => hs.push(el.offsetHeight));
|
||||
els.forEach((el, i) => { if (hs[i] > 0) el.style.minHeight = hs[i] + 'px'; });
|
||||
}
|
||||
|
||||
/* ---- is the page moving right now? asked of the position, never of the events ----
|
||||
@@ -172,20 +182,14 @@ function scrollTop() {
|
||||
}
|
||||
|
||||
function scrolling() { return Date.now() < _movingUntil; }
|
||||
/* how many times the offset has moved in this stretch: >1 is a scroll, 1 is a compensation.
|
||||
* `lateDrift()` is the only caller that needs to tell the two apart. */
|
||||
let _steps = 0;
|
||||
|
||||
function sampleMotion() {
|
||||
const y = scrollTop();
|
||||
if (_lastOffset === null || y !== _lastOffset) {
|
||||
if (_lastOffset !== null) _steps++;
|
||||
_lastOffset = y;
|
||||
_movingUntil = Date.now() + SCROLL_IDLE;
|
||||
}
|
||||
if (scrolling()) { requestAnimationFrame(sampleMotion); return; }
|
||||
_sampling = false;
|
||||
_steps = 0;
|
||||
/* the reader has stopped, so the floor and the reference both belong to where the page now
|
||||
* stands */
|
||||
holdFloor();
|
||||
@@ -524,12 +528,22 @@ function lateDrift(ref) {
|
||||
_lateFrame = requestAnimationFrame(() => {
|
||||
_lateFrame = requestAnimationFrame(() => {
|
||||
_lateFrame = 0;
|
||||
/* not `scrolling()`: the engine's own compensation moves the offset and starts the
|
||||
* motion sampler, so gating on it skips every tick this exists for. Two narrower
|
||||
* questions instead — is the reader driving (a gesture), and is the offset streaming
|
||||
* (moving repeatedly, which a one-shot compensation never does). */
|
||||
if (!anchorEnabled() || Date.now() < _userUntil || (scrolling() && _steps > 1)) return;
|
||||
if (!anchorEnabled() || Date.now() < _userUntil) return;
|
||||
if (_restPage !== pageStamp()) return;
|
||||
/* THE OFFSET, NOT THE EVENT STREAM. `scrolling()` cannot answer this one: the engine's
|
||||
* own compensation moves the offset and starts the motion sampler, so gating on it
|
||||
* skips every tick this exists for — and in WebKit a programmatic scroll's event
|
||||
* arrives up to 1.2s late, so the sampler is often not running at all when a flick is
|
||||
* in progress. Asking where the offset stands answers both: the reference was taken
|
||||
* with the reference on a still page, so an offset anywhere else means the reader has
|
||||
* moved since, and whatever this would put back they have already scrolled past. A
|
||||
* correction landing inside a flick is itself a jump (161px, webkit/Overview).
|
||||
*
|
||||
* `ref.at` and not `_restAt`: run() re-remembers between the mutation and this frame,
|
||||
* and where the sampler has not started yet — WebKit again — that re-take records the
|
||||
* offset the reader has already flicked to, so comparing against it compares a value
|
||||
* with itself and lets the correction through (320px, @1440 side, .fs-main scrolling). */
|
||||
if (scrollTop() !== ref.at) return;
|
||||
/* the tick usually replaces the element this was taken on, so without the section
|
||||
* fallback the correction does nothing on the tick it exists for */
|
||||
let el = ref.el, was = ref.top;
|
||||
@@ -617,23 +631,22 @@ function applyAnchor(ref) {
|
||||
function observeContent() {
|
||||
if (_mo) return;
|
||||
_mo = new MutationObserver(() => {
|
||||
/* One correction per engine, and which one depends on whether the engine does the job.
|
||||
/* The theme corrects only where the engine will not. Where it anchors, growth above the
|
||||
* reader is the engine's job and the floor covers the collapse, so there is nothing left for
|
||||
* a correction to do: one written here would read its reference in the same instant the poll
|
||||
* mutated the page, and after a scroll WebKit hands back the new `scrollTop` before the
|
||||
* layout that goes with it, so the drift measures the reader's own move and the correction
|
||||
* undoes it — measured, the page went back to 0 from 591 on every run. A residual check two
|
||||
* frames later was carried for that engine and is gone: with the floor on the containers
|
||||
* rather than on the column the collapse it answered no longer happens, and its own
|
||||
* correction landed inside a flick (161px, webkit/Overview, scroll-anchor).
|
||||
*
|
||||
* Where it anchors, an immediate correction is harmful: its reference is read here, in the
|
||||
* same instant the poll mutated the page, and after a scroll WebKit hands back the new
|
||||
* `scrollTop` before the layout that goes with it, so the drift measures the reader's own
|
||||
* move and the correction undoes it — measured, the page went back to 0 from 591 on every
|
||||
* run. That engine needs the RESIDUE two frames later, once its own anchoring has run —
|
||||
* lateDrift().
|
||||
*
|
||||
* Where it does not anchor, nobody else puts the reader back within the frame, so the
|
||||
* immediate correction stays, measured against the reference from the last still page. */
|
||||
* Where the engine does not anchor at all — Safari before 27 — nobody puts the reader back
|
||||
* within the frame, so the immediate correction stays, measured against the reference from
|
||||
* the last still page. */
|
||||
const settled = _rest;
|
||||
const ref = ENGINE_ANCHORS ? null : anchorFor();
|
||||
run();
|
||||
/* one or the other, never a fallthrough: where the engine does not anchor, `anchorFor()`
|
||||
* returning nothing means it DECIDED not to correct this tick, and handing that case to the
|
||||
* deferred path lands the correction inside a flick instead */
|
||||
if (ENGINE_ANCHORS) lateDrift(settled);
|
||||
else scheduleAnchor(ref);
|
||||
});
|
||||
|
||||
@@ -54,14 +54,16 @@ function wirePageModules() {
|
||||
* ordering the two. This file is required by the footer on every page and evaluates before the
|
||||
* router exists.
|
||||
*
|
||||
* Bodies are verbatim from upstream except L.itemlist -> window.L.itemlist (the two-L trap,
|
||||
* docs/spa-router.md). The typeof guards make each a no-op on a full page load, where the
|
||||
* template's own copies win the race. */
|
||||
* Bodies are verbatim from upstream except for two deltas: L.itemlist -> window.L.itemlist (the
|
||||
* two-L trap, docs/spa-router.md), and renderBox's `[title]` — dom.append parses a scalar child as
|
||||
* innerHTML (luci.js:1395) and an array member as text (:1383), and this file defines the global on
|
||||
* every admin page where upstream defines it on Status -> Overview alone. Same output: nothing in
|
||||
* 24.10, 25.12 or master calls renderBox. The typeof guards make each a no-op on a full page load,
|
||||
* where the template's own copies win the race. */
|
||||
function ensureOverviewHelpers() {
|
||||
/* eslint-disable no-var -- these three bodies are verbatim copies of LuCI's
|
||||
admin_status/index.ut so they can be diffed against upstream when it changes.
|
||||
Modernising the `var`s would break that property, which is what makes carrying
|
||||
the copies safe. */
|
||||
/* eslint-disable no-var -- these three bodies are copies of LuCI's admin_status/index.ut so
|
||||
they can be diffed against upstream when it changes. Modernising the `var`s would break
|
||||
that property, which is what makes carrying the copies safe. */
|
||||
if (typeof window.progressbar !== 'function')
|
||||
window.progressbar = function(query, value, max, byte) {
|
||||
var pg = document.querySelector(query),
|
||||
@@ -81,7 +83,7 @@ function ensureOverviewHelpers() {
|
||||
childs.unshift(window.L.itemlist(E('span'), [].slice.call(arguments, 3)));
|
||||
return E('div', { class: 'ifacebox' }, [
|
||||
E('div', { class: 'ifacebox-head center ' + (active ? 'active' : '') },
|
||||
E('strong', title)),
|
||||
E('strong', [title])),
|
||||
E('div', { class: 'ifacebox-body left' }, childs)
|
||||
]);
|
||||
};
|
||||
|
||||
@@ -72,8 +72,12 @@
|
||||
* language (measured). The theme's own CSS was rewriting the string the theme's own CSS keyed
|
||||
* off. Columns: 1 Package name | 2 Version | 3 Size | 4 Description | 5 actions. */
|
||||
/* `overflow-wrap` dropped: base/40-tables.css breaks every cell now and this copy moved nothing
|
||||
* against 100 matching cells. `word-break` stays — switching IT off moved all 100. */
|
||||
#packages.fs-stacked .td:nth-child(4) { display: block; text-align: start; word-break: break-word; }
|
||||
* against 100 matching cells. `word-break` has now gone the same way for a different reason: its
|
||||
* neutraliser in theme/30-tables.css stopped excusing carded tables, so this sat under a flag and
|
||||
* could not be read. Nothing renders differently — `break-word` is `word-break: normal` plus
|
||||
* `overflow-wrap: anywhere` and the theme already gives every stacked cell the second half;
|
||||
* measured at 390px, this cell is 322 x 103 px on either side of the change. */
|
||||
#packages.fs-stacked .td:nth-child(4) { display: block; text-align: start; }
|
||||
#packages.fs-stacked .td:nth-child(4)::before { display: block; margin-bottom: var(--fs-space-1); }
|
||||
#packages.fs-stacked .td.cbi-section-actions { justify-content: flex-end; margin-top: var(--fs-space-1-5); }
|
||||
#packages.fs-stacked .td.cbi-section-actions::before,
|
||||
|
||||
@@ -167,9 +167,17 @@
|
||||
* a value being read.
|
||||
*
|
||||
* The `!important` is the sanctioned kind: it fights an inline `style=`, the one adversary a
|
||||
* layer cannot reach. */
|
||||
.table.fs-dt:not(.fs-stacked) .td,
|
||||
.table.fs-dt:not(.fs-stacked) .td :not(button):not(.btn):not(input):not(select):not(textarea) {
|
||||
* layer cannot reach.
|
||||
*
|
||||
* A CARD IS NOT EXEMPT, though `:not(.fs-stacked)` stood here. The inline alias damages the
|
||||
* MEASUREMENT, and a carded table is not measured — but it is not the only adversary. LuCI's
|
||||
* luci-mod-dashboard ships `.Dashboard … .devices-info .tr .td:first-child { word-break:
|
||||
* break-all }` in view/dashboard/css/custom.css with no layer around it, and `break-all` splits a
|
||||
* token that would have fitted: measured at 390px, `t3e-syp.home.iot` over six lines and the
|
||||
* caption `HOSTNAME` cut as `HOSTNA`/`ME`. A card's own breaking is unchanged — `.td` below keeps
|
||||
* `overflow-wrap: anywhere`, so a token too long for the line still breaks. */
|
||||
.table.fs-dt .td,
|
||||
.table.fs-dt .td :not(button):not(.btn):not(input):not(select):not(textarea) {
|
||||
word-break: normal !important;
|
||||
}
|
||||
|
||||
@@ -510,7 +518,12 @@
|
||||
* a flex-start neighbour stays short and its separator paints 52px higher — a broken line
|
||||
* mid-card (measured). Stretched, both cells take the flex line's height and the
|
||||
* separators meet; content still sits at the top (the cells are blocks). */
|
||||
.table.fs-stacked .tr { display: flex; flex-wrap: wrap; }
|
||||
/* A `<tfoot>` with no `.tr` inside it IS the row — see the footer block below for which view
|
||||
* writes which shape. Here rather than in a rule of its own: `css-dup` compares bodies of three
|
||||
* declarations or more, so a second copy of these two would sit unflagged until they diverged. */
|
||||
.table.fs-stacked .tr,
|
||||
.table.fs-stacked tfoot:not(:has(> .tr)),
|
||||
.table.fs-stacked .tfoot:not(:has(> .tr)) { display: flex; flex-wrap: wrap; }
|
||||
.table.fs-stacked .td {
|
||||
display: block; min-width: 0; width: auto;
|
||||
padding-block: var(--fs-space-1-5); padding-inline: 0 var(--fs-space-2-5); border: 0; text-align: start;
|
||||
@@ -529,9 +542,15 @@
|
||||
text-transform: uppercase; color: var(--fs-eyebrow-color);
|
||||
/* @endmirror */
|
||||
}
|
||||
/* A footer cell is the fourth member here, and it has to carry `[data-title]` in its own selector
|
||||
* to win: `.table.fs-stacked tfoot .td::before` is (0,3,1) against the caption rule's (0,4,0) and
|
||||
* loses wherever it is written. Measured on the wifi footer with the titles stamped: `content`
|
||||
* computed to "SSID" over `Total：`. With the attribute it is (0,4,1) and (0,5,0). */
|
||||
.table.fs-stacked .td.cbi-section-actions::before,
|
||||
.table.fs-stacked .td:not([data-title])::before,
|
||||
.table.fs-stacked .td[data-title=""]::before { content: none; }
|
||||
.table.fs-stacked .td[data-title=""]::before,
|
||||
.table.fs-stacked tfoot .td[data-title]::before,
|
||||
.table.fs-stacked .tfoot .td[data-title]::before { content: none; }
|
||||
/* The row's buttons are not a label/value pair — full width below the pairs.
|
||||
* PINNED with the config table's copy — see above. */
|
||||
.table.fs-stacked .td.cbi-section-actions {
|
||||
@@ -555,6 +574,23 @@
|
||||
.table.fs-stacked .td > *,
|
||||
.table.fs-stacked .td .ifacebadge { min-width: 0; max-width: 100%; }
|
||||
|
||||
/* ---- the footer, in both shapes upstream writes it ----
|
||||
*
|
||||
* A `<tfoot>` is still a table-footer-group inside a `display: block` table, so in a card it drew
|
||||
* as a box beside the cards: measured at 390px on the station list, 186px wide against 354.
|
||||
* `20_lan.js` builds `tfoot > tr > td` and needs only the footer out of the way, the `.tr` above
|
||||
* already being a flex row; `30_wifi.js` appends the `<td>`s to the `<tfoot>` through E(), where
|
||||
* no parser runs and no row is implied, so there the footer has to become the row — that arm is
|
||||
* up with the `.tr` rule. `:has(> .tr)` tells them apart.
|
||||
*
|
||||
* An empty footer cell goes entirely: a card is a list of facts and an empty cell is not one. The
|
||||
* captions are suppressed up in the `content: none` group, for the specificity reason stated
|
||||
* there. */
|
||||
.table.fs-stacked tfoot:has(> .tr),
|
||||
.table.fs-stacked .tfoot:has(> .tr) { display: block; }
|
||||
.table.fs-stacked tfoot .td:empty,
|
||||
.table.fs-stacked .tfoot .td:empty { display: none; }
|
||||
|
||||
/* --- the DATA table's flavour (L.ui.Table, tagged .fs-dt) ---
|
||||
* Clip rows to the frame's corners: zebra paints its background on the .tr and the frame is
|
||||
* overflow:visible, so a striped row's square background pokes past the corners. Safe once
|
||||
@@ -572,10 +608,28 @@
|
||||
* card's row inset left 41px of the 63px the plate is: measured on Wireless as 10px of text
|
||||
* hanging below the frame once the table stacked. A row with no rows in it has nothing to inset. */
|
||||
.table.fs-dt.fs-stacked .tr:not(.placeholder) { padding: var(--fs-space-2-5) var(--fs-space-4) var(--fs-space-3); }
|
||||
/* `.fs-stacked .td`, not `.table.fs-dt.fs-stacked .td` — the same elements (the class is only
|
||||
* ever written onto a .table.fs-dt), but at (0,2,0) instead of (0,4,0): low enough that the
|
||||
* unguarded `.table .td.col-N` below, at (0,3,0), beats it on SPECIFICITY, not source order. */
|
||||
.fs-stacked .td { flex: 1 1 50%; }
|
||||
/* ---- the pair width, and the adversary specificity cannot reach ----
|
||||
*
|
||||
* Half the row is what makes the card a card. It was `.fs-stacked .td` at (0,2,0), deliberately
|
||||
* low so the unguarded `.table .td.col-N` below, at (0,3,0), could beat it on specificity rather
|
||||
* than source order — which holds against every rule in a LAYER and none outside one.
|
||||
* luci-mod-dashboard ships `@media (max-width: 640px) { .Dashboard … .tr .td { flex: 2 2 10% } }`
|
||||
* unlayered, and that beats every layered rule at any specificity: measured at 390px, four cells
|
||||
* of a station row at 81px on one line, `flex-basis` computing to 10% — the pairs never formed.
|
||||
*
|
||||
* Hence the flag, the sanctioned kind. Spent narrowly, and by SELECTOR because a flag would
|
||||
* outrank these two families as well: `.cbi-section-actions` is a full-width line of buttons,
|
||||
* `[class*="col-"]` is the view author's own weight. The third `:not()` is not one of those — it
|
||||
* is how this rule loses to the meter below, both being flagged: without it (0,5,0) beats (0,4,0)
|
||||
* and the meter silently keeps half a line. */
|
||||
.table.fs-stacked .td:not(.cbi-section-actions):not([class*="col-"]):not(:has(.cbi-progressbar)) {
|
||||
flex: 1 1 50% !important;
|
||||
}
|
||||
/* A meter takes the whole line: `.cbi-progressbar::after` prints the bar's title above its right
|
||||
* edge (25-progressbar.css), which in a card is where the cell's own caption sits — measured at
|
||||
* 390px, `SIGNAL STRENGTH` and `RSSI: 65% (-57dBm)` drawn over each other. Beside the bar instead
|
||||
* would be paid out of the bar, too short at half a row to read as one. */
|
||||
.table.fs-stacked .td:has(.cbi-progressbar) { flex: 1 1 100% !important; }
|
||||
|
||||
/* ---- column weights: one unguarded block, unguarded on purpose ----
|
||||
* A weight (1-10) is a share of a CARDED row — the JS says which cell is a narrow badge and
|
||||
|
||||
@@ -68,6 +68,10 @@
|
||||
session_setup() accepted the credentials. Gating the credentials alert on `!auth_plugin` and
|
||||
rendering the message beside it covers all four states — wrong password, wrong password with a
|
||||
challenge pending, the OTP prompt, a failed OTP.
|
||||
|
||||
entityencode where upstream prints raw: without the `!fuser` gate the message renders on the
|
||||
request that posted the form too, and this page is unauthenticated. A plugin's markup travels
|
||||
in `auth_html` (dispatcher.uc:952), so this variable is text.
|
||||
-#}
|
||||
{% if (fuser && !auth_plugin): %}
|
||||
<div class="alert-message error">
|
||||
@@ -76,7 +80,7 @@
|
||||
{% endif %}
|
||||
{% if (auth_message): %}
|
||||
<div class="alert-message{% if (auth_plugin): %} warning{% endif %}">
|
||||
<p>{{ auth_message }}</p>
|
||||
<p>{{ entityencode(auth_message, true) }}</p>
|
||||
</div>
|
||||
{% endif %}
|
||||
|
||||
|
||||
Reference in new issue
Block a user