Files
python-tdd/src/templates/core/base.html

212 lines
9.4 KiB
HTML
Raw Normal View History

{% load compress %}
{% load static %}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="author" content="Disco DeDisco">
<meta name="robots" content="noindex, nofollow">
<title>Earthman RPG | {% block title_text %}{% endblock title_text %}</title>
{% compress css %}
<link type="text/x-scss" rel="stylesheet" href="{% static 'scss/core.scss' %}">
{% endcompress %}
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.7.2/css/all.min.css">
</head>
<body class="{{ user_palette }} {{ page_class|default:'' }}">
<div class="container">
{% include "core/_partials/_navbar.html" %}
<div class="row">
<div class="col-lg-6">
<h2 >{% block header_text %}{% endblock header_text %}</h2>
{% block extra_header %}
{% endblock extra_header %}
</div>
</div>
{% if messages %}
brief sprint C3.b+c+d+e: share-post Line+Brief async, magic-link / invalid-link banners use Brief styling, .alert-* retired — TDD Closes the C3 brief sprint. Three event sources (note unlock, share invite, login messages) now route through the Brief slide-down, & the legacy .alert-success/.alert-warning rendering in base.html is retired. C3.b — share-post async Line + Brief: - billboard.share_post detects Accept: application/json. JSON path appends a Line (text="Shared with X at <isoformat>", isoformat carries microseconds so two rapid shares of the same email don't collide on Line.unique_together(post,text)), spawns a Brief(kind=SHARE_INVITE) for the sharer, and returns {brief: brief.to_banner_dict() | None, line_text, recipient_display}. Sharer-shares-with-themselves stays a silent no-op (response carries brief: null). Legacy form-submit path preserved for non-AJAX (still redirects + flashes the privacy-safe message — kept for older FTs / no-JS fallback). - billboard.Brief.to_banner_dict() (moved from dashboard.views helper to a model method) shapes the JSON the banner JS consumes. - post.html: share form intercepted by JS — fetches POST w. Accept:application/json, then appends `data.line_text` as the next row in #id_post_table, calls Brief.showBanner(data.brief), and (when registered) appends a fresh `<span class="post-recipient">` to the new #id_post_recipients box. No page reload — the alert-success flash is gone. - 10 new ITs (SharePostAsyncTest + SharePostLegacyRedirectTest) cover the JSON path, line append, brief creation w. SHARE_INVITE kind, registered/unregistered recipient behaviour, sharer-self skip, line dedupe via timestamp, and that the legacy form-submit redirect path still works. - functional_tests.test_sharing line numbering updated: the share now records its own Line so the alice-reply lands at row 3 instead of 2. C3.c+d — magic-link confirmation + invalid-link error use Brief banner styling: - base.html's {% if messages %} block stops rendering .alert-success/.alert-warning divs. Instead each message renders as a transient Brief-styled banner: <div class="note-banner note-banner--message note-banner--{{level_tag}}"> with .note-banner__body / __description carrying the message text and a .btn-cancel NVM that removes the banner via inline onclick. No DB Brief row; no FYI; no square. Same Gaussian-glass look as note-unlock + share-invite Briefs. - _note.scss adds the note-banner--message variant (full-opacity description) + note-banner--error/--warning border-color override (priRd 0.6) so the invalid-link banner reads as red/abandon. C3.e — .alert-success/.alert-warning retired in markup; the SCSS class blocks aren't referenced anywhere else in templates so they sit dormant (left in place — base form styling keeps .form-control etc. working; no need to ripple into _base.scss). Banner JS (note.js / Brief module) was untouched in C3.b+c+d — the Brief.showBanner contract from C3.a already handles all three kinds (NOTE_UNLOCK / USER_POST / SHARE_INVITE) by reading kind off the brief; the message-banner path doesn't go through showBanner because there's no Brief row. Tests: 218 dashboard+billboard+api ITs + 322 lyric+dashboard+billboard ITs + 2 sharing FTs + 9 my_notes FTs + 1 Jasmine FT all green. Existing lyric.test_views login message-text assertions unchanged (they pull from messages framework — not the rendered HTML — so the markup swap doesn't affect them). Code architected by Disco DeDisco <discodedisco@outlook.com> Git commit message Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
2026-05-08 18:15:43 -04:00
{% for message in messages %}
{# Transient Brief-styled banner — no DB row, no FYI/square. #}
{# Slides in under the navbar h2 w. the same Gaussian-glass #}
{# look as the Brief notification banner; NVM dismisses. #}
<div class="note-banner note-banner--message note-banner--{{ message.level_tag }}">
<div class="note-banner__body">
<p class="note-banner__description">{{ message }}</p>
</div>
<button type="button" class="btn btn-cancel note-banner__nvm"
onclick="this.parentElement.remove()">NVM</button>
</div>
brief sprint C3.b+c+d+e: share-post Line+Brief async, magic-link / invalid-link banners use Brief styling, .alert-* retired — TDD Closes the C3 brief sprint. Three event sources (note unlock, share invite, login messages) now route through the Brief slide-down, & the legacy .alert-success/.alert-warning rendering in base.html is retired. C3.b — share-post async Line + Brief: - billboard.share_post detects Accept: application/json. JSON path appends a Line (text="Shared with X at <isoformat>", isoformat carries microseconds so two rapid shares of the same email don't collide on Line.unique_together(post,text)), spawns a Brief(kind=SHARE_INVITE) for the sharer, and returns {brief: brief.to_banner_dict() | None, line_text, recipient_display}. Sharer-shares-with-themselves stays a silent no-op (response carries brief: null). Legacy form-submit path preserved for non-AJAX (still redirects + flashes the privacy-safe message — kept for older FTs / no-JS fallback). - billboard.Brief.to_banner_dict() (moved from dashboard.views helper to a model method) shapes the JSON the banner JS consumes. - post.html: share form intercepted by JS — fetches POST w. Accept:application/json, then appends `data.line_text` as the next row in #id_post_table, calls Brief.showBanner(data.brief), and (when registered) appends a fresh `<span class="post-recipient">` to the new #id_post_recipients box. No page reload — the alert-success flash is gone. - 10 new ITs (SharePostAsyncTest + SharePostLegacyRedirectTest) cover the JSON path, line append, brief creation w. SHARE_INVITE kind, registered/unregistered recipient behaviour, sharer-self skip, line dedupe via timestamp, and that the legacy form-submit redirect path still works. - functional_tests.test_sharing line numbering updated: the share now records its own Line so the alice-reply lands at row 3 instead of 2. C3.c+d — magic-link confirmation + invalid-link error use Brief banner styling: - base.html's {% if messages %} block stops rendering .alert-success/.alert-warning divs. Instead each message renders as a transient Brief-styled banner: <div class="note-banner note-banner--message note-banner--{{level_tag}}"> with .note-banner__body / __description carrying the message text and a .btn-cancel NVM that removes the banner via inline onclick. No DB Brief row; no FYI; no square. Same Gaussian-glass look as note-unlock + share-invite Briefs. - _note.scss adds the note-banner--message variant (full-opacity description) + note-banner--error/--warning border-color override (priRd 0.6) so the invalid-link banner reads as red/abandon. C3.e — .alert-success/.alert-warning retired in markup; the SCSS class blocks aren't referenced anywhere else in templates so they sit dormant (left in place — base form styling keeps .form-control etc. working; no need to ripple into _base.scss). Banner JS (note.js / Brief module) was untouched in C3.b+c+d — the Brief.showBanner contract from C3.a already handles all three kinds (NOTE_UNLOCK / USER_POST / SHARE_INVITE) by reading kind off the brief; the message-banner path doesn't go through showBanner because there's no Brief row. Tests: 218 dashboard+billboard+api ITs + 322 lyric+dashboard+billboard ITs + 2 sharing FTs + 9 my_notes FTs + 1 Jasmine FT all green. Existing lyric.test_views login message-text assertions unchanged (they pull from messages framework — not the rendered HTML — so the markup swap doesn't affect them). Code architected by Disco DeDisco <discodedisco@outlook.com> Git commit message Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
2026-05-08 18:15:43 -04:00
{% endfor %}
{% endif %}
buddy btn sprint: banner-anchor + window.Brief fix lands the last red FT — 16/16 buddy + 12 share/jasmine/my_notes + 818 IT regression — TDD Two small fixes close out the OK→banner gap: 1. Anchor over h2: base.html drops <div id="id_brief_banner_anchor"></div> right before {% block content %} (after the messages block). note.js's showBanner now prefers the explicit anchor over the first <h2> — keeps the banner in the visible content flow on pages where the first h2 is position:absolute (post.html's rotated navbar header was the immediate motivator; sky.html's rotated h2 is the same shape, so this catches that pre-emptively too). 2. window.Brief explicit assignment: const Brief = (...) at script-tag scope is reachable as a bare name but does NOT auto-attach to window. The buddy panel's OK handler gates banner reveal on `if (window.Brief && data.brief)` — that gate was always false, so Brief.showBanner never fired on share-OK even though the chip + Line append in DOM proved the fetch.then() was running. Explicit window.Brief = Brief; window.Note = Note; in note.js (post-IIFE) closes the gap. Also picks up the deferred page-object update — functional_tests.post_page.PostPage.share_post_with() now drives the buddy-btn flow (click #id_buddy_btn → type → click #id_buddy_panel .btn.btn-confirm → wait for recipient chip), so legacy SharingTest exercises the new pipeline end-to-end. NoteSpec.js T10 split into T10a/T10b: a covers the anchor-preferred path, b covers the <h2> fallback. 16/16 buddy FTs green (previously 15/16). 12/12 sharing + Jasmine + my_notes FTs green. 818-test IT sweep green. Code architected by Disco DeDisco <discodedisco@outlook.com> Git commit message Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
2026-05-08 19:14:50 -04:00
{# Anchor for Brief.showBanner — banner inserts as nextSibling so #}
{# it lands at the top of page content on every base.html-extending #}
{# page, regardless of where (or whether) <h2> is positioned. #}
<div id="id_brief_banner_anchor"></div>
{% block content %}
{% endblock content %}
</div>
{% include "core/_partials/_footer.html" %}
{% if user.is_authenticated %}
<button id="id_kit_btn" data-kit-url="{% url 'kit_bag' %}" aria-label="Open Kit Bag">
<i class="fa-solid fa-briefcase"></i>
</button>
{% endif %}
<dialog id="id_kit_bag_dialog"></dialog>
<div id="id_guard_portal">
<span class="guard-message"></span>
<div class="guard-actions">
<button class="btn btn-confirm guard-yes" type="button">OK</button>
<button class="btn btn-cancel guard-no" type="button">NVM</button>
</div>
</div>
{% block scripts %}
{% endblock scripts %}
<script>
// h2 letter splitter — wrap each character of every .row .col-lg-6 h2
// word-span in its own <span> so .scss can use justify-content:
// space-between to fill the 45/55 slot. text-justify: inter-character
// would do this in pure CSS but iOS Safari + Firefox silently fall
// back to inter-word for Latin text, leaving letters clustered at the
// slot's start.
(function () {
var spans = document.querySelectorAll('.row .col-lg-6 h2 > span');
for (var i = 0; i < spans.length; i++) {
var span = spans[i];
if (span.dataset.lettersSplit === '1') continue;
var text = (span.textContent || '').trim();
if (!text) continue;
span.dataset.lettersSplit = '1';
span.setAttribute('aria-label', text);
span.textContent = '';
for (var j = 0; j < text.length; j++) {
var letter = document.createElement('span');
letter.setAttribute('aria-hidden', 'true');
letter.textContent = text[j];
span.appendChild(letter);
}
}
}());
</script>
<script>
(function () {
var portal = null;
var _cb = null;
var _onDismiss = null;
function show(anchor, message, callback, onDismiss, options) {
if (!portal) return;
options = options || {};
_cb = callback;
_onDismiss = onDismiss || null;
portal.querySelector('.guard-message').innerHTML = message;
portal.classList.add('active');
var rect = anchor.getBoundingClientRect();
var pw = portal.offsetWidth;
var rawLeft = rect.left + rect.width / 2;
var cleft = Math.max(pw / 2 + 8, Math.min(rawLeft, window.innerWidth - pw / 2 - 8));
portal.style.left = Math.round(cleft) + 'px';
var cardCenterY = rect.top + rect.height / 2;
// Default: upper half → below (avoids viewport top edge for navbar/fixed buttons).
// invertY: upper half → above (for modal grids where tooltip should fly away from centre).
var showBelow = (cardCenterY < window.innerHeight / 2);
if (options.invertY) showBelow = !showBelow;
if (showBelow) {
portal.style.top = Math.round(rect.bottom) + 'px';
portal.style.transform = 'translate(-50%, 0.5rem)';
} else {
portal.style.top = Math.round(rect.top) + 'px';
portal.style.transform = 'translate(-50%, calc(-100% - 0.5rem))';
}
}
function dismiss() {
if (!portal) return;
var od = _onDismiss;
portal.classList.remove('active');
_cb = null;
_onDismiss = null;
if (od) od();
}
function doConfirm() {
var cb = _cb;
portal.classList.remove('active');
_cb = null;
_onDismiss = null;
if (cb) cb();
}
document.addEventListener('DOMContentLoaded', function () {
portal = document.getElementById('id_guard_portal');
if (!portal) return;
portal.querySelector('.guard-yes').addEventListener('click', doConfirm);
portal.querySelector('.guard-no').addEventListener('click', dismiss);
document.addEventListener('keydown', function (e) {
if (e.key === 'Escape') dismiss();
});
// Outside-click to dismiss — capture phase + stopPropagation
// prevents the click from cascading to backdrop listeners (e.g. closeFan)
document.addEventListener('click', function (e) {
if (!portal.classList.contains('active')) return;
if (portal.contains(e.target)) return;
// If clicking a card, let the event through so the card's
// own handler immediately opens the guard on the new target.
// For any other outside click, stop propagation to prevent
// the backdrop from also closing the fan.
if (!e.target.closest('.card')) e.stopPropagation();
dismiss();
}, true);
// Intercept [data-confirm] buttons (capture phase, before form submits)
document.addEventListener('click', function (e) {
var btn = e.target.closest('[data-confirm]');
if (!btn) return;
e.preventDefault();
e.stopImmediatePropagation();
var form = btn.closest('form');
show(btn, btn.dataset.confirm, function () {
if (form) form.submit();
else if (btn.dataset.href) window.location.href = btn.dataset.href;
});
}, true);
});
window.showGuard = show;
}());
</script>
<script src="{% static "vendor/htmx.min.js" %}"></script>
<script src="{% static "apps/applets/applets.js" %}"></script>
applet rows: hover + click-lock highlight on every `.applet-list-entry.row-3col` (My Posts / My Buds / My Notes / My Scrolls / My Games) — bg shifts to --secUser, title to --quiUser (overriding the inherited --terUser link color + stripping the text-shadow the global `.applet-list-entry a:hover` rule had been baking in), body + ts cells come up from their dimmed 0.6 / 0.5 opacity to full --priUser so the dim middle/right cols pop against the --secUser fill; new `apps/applets/static/apps/applets/row-lock.js` IIFE module owns the touch-persistence state machine (single `_lockedRow` ref, `.row-locked` class toggle): clicking a row not currently locked → locks (clearing any prior lock); clicking the locked row again → unlocks; clicking another row → moves the lock to the new row; clicking anywhere not inside a `.row-3col` → clears the lock — mirrors the note-page `notes-locked` click-lock state machine but lighter (no DON/DOFF, no greeting swap, no fetch), one document-level click listener bound once via `_bound` re-entry guard so beforeEach `_init()` calls in specs don't pile up handlers; loaded globally via `base.html` next to `applets.js` since the rows render on both /billboard/ + /gameboard/; padding-inline 0.5rem + border-radius 0.25rem on the row container shrinks the highlight to a chip shape so hovered rows don't bleed all the way to the applet box edge; 6 Jasmine specs in `RowLockSpec.js` cover the four state-machine transitions + the "child element of row still locks the parent row" affordance (since the user can tap the body cell text, not just the title link) + the "only one row carries .row-locked at a time" invariant; SpecRunner.html updated (both static_src + the static/ runtime mirror the FT reads from per the project's static-src→static copy discipline) — TDD Code architected by Disco DeDisco <discodedisco@outlook.com> Git commit message Co-Authored-By: Claude Opus 4.7 <noreply@anthropic.com>
2026-05-13 00:27:39 -04:00
<script src="{% static "apps/applets/row-lock.js" %}"></script>
<script src="{% static "apps/dashboard/game-kit.js" %}"></script>
<script>
document.cookie = 'user_tz=' + Intl.DateTimeFormat().resolvedOptions().timeZone + '; path=/; SameSite=Lax';
document.body.addEventListener('htmx:configRequest', function(evt) {
evt.detail.headers['X-CSRFToken'] = getCookie('csrftoken');
});
function getCookie(name) {
let val = null;
if (document.cookie) {
for (let c of document.cookie.split(';')) {
c = c.trim();
if (c.startsWith(name + '=')) {
val = decodeURIComponent(c.substring(name.length + 1));
break;
}
}
}
return val;
}
</script>
</body>
</html>