buddy btn sprint scaffolding: TDD spec + partial template + SCSS + page_class — 15/16 FTs green, 1 captured-red for post-compaction handoff
Pre-compaction handoff for the bottom-left handshake btn that replaces the inline share form on post.html. The full spec lives in functional_tests/test_buddy_btn.py — running it as a red-first TDD checklist for the next agent (or future Disco) to pick up after compaction.
Scaffolding landed:
- functional_tests/test_buddy_btn.py — 16 tests across 6 classes covering presence-only-on-post.html (B1–B3), bottom-left fixed positioning matching kit-btn dimensions, slide-out panel structure (closed/open width, OK btn = .btn-confirm, recipient input left-padding clears the glyph), kit↔buddy mutual-exclusion via opacity, click-outside + Escape dismiss + clear, OK→async share creates Brief + appends Line + chips the recipient + closes the panel + clears the field, and post.html / my_posts.html body class picks up the aperture marker (page-billboard).
- templates/apps/billboard/_partials/_buddy_panel.html — the partial: <button id="id_buddy_btn"><i class="fa-solid fa-handshake"></i></button> + #id_buddy_panel housing #id_recipient and #id_buddy_ok (.btn.btn-confirm). Inline JS mirrors the game-kit.js click/escape/click-outside pattern, toggles html.buddy-open + .active on the btn, intercepts OK to POST share-post w. Accept:application/json (reuses C3.b shape — line_text + brief.to_banner_dict() + recipient_display), appends the chip + line in-DOM, Brief.showBanner shows the slide-down banner, _close clears the input.
- templates/apps/billboard/post.html — drops the inline #id_share_form / #id_recipient / SHARE-primary block + its JS; includes the buddy panel partial at the end of {% block content %}.
- billboard.views.view_post + my_posts now set page_class="page-billboard" so the body class hooks into the aperture SCSS group (the user noted post.html wasn't in that group; this brings it in).
- static_src/scss/_buddy.scss — new partial: #id_buddy_btn fixed bottom-left mirror of #id_kit_btn (3rem circle, secUser border, .active state, transition: opacity 0.15s); #id_buddy_panel slide-out spans calc(100vw - 3rem) (1.5rem each side w. landscape sidebar carve-outs), transform: scaleX(0)→1 from left center on html.buddy-open, opacity 0→1, the recipient input gets padding 0 1rem 0 3.5rem so the glyph doesn't overlap. Mutual exclusion: html.buddy-open #id_kit_btn → opacity:0; html:has(#id_kit_bag_dialog[open]) #id_buddy_btn → opacity:0 (uses :has() per project convention; no JS-side kit-open class needed).
- core.scss imports buddy after game-kit.
15/16 FTs green; the lone red is BuddyBtnOkSubmitsAsyncShareTest.test_ok_creates_brief_appends_line_and_chip — server flow works (Brief is created, recipient chip + line append in DOM both visible in the screendump), only the .note-banner injection isn't surfacing on post.html. Likely cause: note.js inserts after the first <h2>, but post.html's only h2 is the rotated navbar header which is position:absolute, so the banner's geometry parents to that and falls outside the visible aperture. Two clean follow-ups for the post-compaction agent: (a) make Brief.showBanner pick a different anchor when h2.parentElement is position:absolute, or (b) define a #id_brief_banner_anchor in base.html under the page content and have showBanner prefer it.
Also pending for post-compaction: update functional_tests.post_page.PostPage.share_post_with() to drive the new buddy-btn flow (click btn → type → click OK → wait for chip) so the legacy test_sharing FT keeps working — currently it still operates on the inline form selectors that no longer exist.
Code architected by Disco DeDisco <discodedisco@outlook.com>
Git commit message Co-Authored-By:
Claude Sonnet 4.6 <noreply@anthropic.com>
This commit is contained in:
Disco DeDisco
136
src/templates/apps/billboard/_partials/_buddy_panel.html
Normal file
136
src/templates/apps/billboard/_partials/_buddy_panel.html
Normal file
@@ -0,0 +1,136 @@
|
||||
{% load static %}
|
||||
{# ─────────────────────────────────────────────────────────────────────── #}
|
||||
{# _buddy_panel.html — bottom-left handshake btn + slide-out recipient #}
|
||||
{# field for the share-post async flow. Mirror of #id_kit_btn (bottom- #}
|
||||
{# right). Included by post.html only. #}
|
||||
{# #}
|
||||
{# Spec lives in functional_tests/test_buddy_btn.py — write it red-first. #}
|
||||
{# Run: #}
|
||||
{# python src/manage.py test functional_tests.test_buddy_btn #}
|
||||
{# ─────────────────────────────────────────────────────────────────────── #}
|
||||
|
||||
<button id="id_buddy_btn" type="button" aria-label="Share with a buddy">
|
||||
<i class="fa-solid fa-handshake"></i>
|
||||
</button>
|
||||
|
||||
<div id="id_buddy_panel" data-share-url="{% url 'billboard:share_post' post.id %}">
|
||||
<input id="id_recipient"
|
||||
name="recipient"
|
||||
type="email"
|
||||
placeholder="friend@example.com"
|
||||
autocomplete="off">
|
||||
<button id="id_buddy_ok" type="button" class="btn btn-confirm">OK</button>
|
||||
</div>
|
||||
|
||||
<script>
|
||||
(function () {
|
||||
'use strict';
|
||||
|
||||
var btn = document.getElementById('id_buddy_btn');
|
||||
var panel = document.getElementById('id_buddy_panel');
|
||||
var input = document.getElementById('id_recipient');
|
||||
var ok = document.getElementById('id_buddy_ok');
|
||||
var html = document.documentElement;
|
||||
if (!btn || !panel || !input || !ok) return;
|
||||
|
||||
function _csrf() {
|
||||
var m = document.cookie.match(/csrftoken=([^;]+)/);
|
||||
return m ? m[1] : '';
|
||||
}
|
||||
|
||||
function _open() {
|
||||
html.classList.add('buddy-open');
|
||||
btn.classList.add('active');
|
||||
// small delay before focus so the slide-out animation can play
|
||||
setTimeout(function () { input.focus(); }, 60);
|
||||
}
|
||||
|
||||
function _close(opts) {
|
||||
opts = opts || {};
|
||||
html.classList.remove('buddy-open');
|
||||
btn.classList.remove('active');
|
||||
if (opts.clear !== false) input.value = '';
|
||||
}
|
||||
|
||||
btn.addEventListener('click', function () {
|
||||
if (html.classList.contains('buddy-open')) {
|
||||
_close();
|
||||
} else {
|
||||
_open();
|
||||
}
|
||||
});
|
||||
|
||||
// Escape closes the panel, clears the field
|
||||
document.addEventListener('keydown', function (e) {
|
||||
if (e.key === 'Escape' && html.classList.contains('buddy-open')) _close();
|
||||
});
|
||||
|
||||
// Click-outside dismiss — same pattern as game-kit.js
|
||||
document.addEventListener('click', function (e) {
|
||||
if (!html.classList.contains('buddy-open')) return;
|
||||
if (panel.contains(e.target)) return;
|
||||
if (e.target === btn || btn.contains(e.target)) return;
|
||||
_close();
|
||||
});
|
||||
|
||||
// OK → POST share-post async; reuses the C3.b response handling so the
|
||||
// recipient chip + brief banner + post-table line append all light up.
|
||||
function _appendLine(text) {
|
||||
var table = document.getElementById('id_post_table');
|
||||
if (!table) return;
|
||||
var n = table.querySelectorAll('tr').length + 1;
|
||||
var tr = document.createElement('tr');
|
||||
var td = document.createElement('td');
|
||||
td.textContent = n + '. ' + text;
|
||||
tr.appendChild(td);
|
||||
table.appendChild(tr);
|
||||
}
|
||||
|
||||
function _appendRecipientChip(displayName) {
|
||||
var box = document.getElementById('id_post_recipients');
|
||||
if (!box || !displayName) return;
|
||||
var span = document.createElement('span');
|
||||
span.className = 'post-recipient';
|
||||
span.textContent = displayName;
|
||||
box.appendChild(document.createTextNode(' '));
|
||||
box.appendChild(span);
|
||||
}
|
||||
|
||||
ok.addEventListener('click', function () {
|
||||
var email = input.value.trim();
|
||||
if (!email) return;
|
||||
|
||||
var fd = new FormData();
|
||||
fd.set('recipient', email);
|
||||
|
||||
fetch(panel.dataset.shareUrl, {
|
||||
method: 'POST',
|
||||
credentials: 'same-origin',
|
||||
headers: {
|
||||
'Accept': 'application/json',
|
||||
'X-CSRFToken': _csrf(),
|
||||
},
|
||||
body: fd,
|
||||
})
|
||||
.then(function (r) { return r.ok ? r.json() : Promise.reject(r.status); })
|
||||
.then(function (data) {
|
||||
if (data.line_text) _appendLine(data.line_text);
|
||||
if (window.Brief && data.brief) Brief.showBanner(data.brief);
|
||||
if (data.recipient_display) _appendRecipientChip(data.recipient_display);
|
||||
_close({ clear: true });
|
||||
})
|
||||
.catch(function () {
|
||||
// swallow — privacy-safe response shape means even an
|
||||
// unregistered recipient is a 200; only network/5xx land here.
|
||||
});
|
||||
});
|
||||
|
||||
// Submit-on-Enter inside the input mirrors clicking OK
|
||||
input.addEventListener('keydown', function (e) {
|
||||
if (e.key === 'Enter') {
|
||||
e.preventDefault();
|
||||
ok.click();
|
||||
}
|
||||
});
|
||||
}());
|
||||
</script>
|
||||
@@ -24,25 +24,6 @@
|
||||
|
||||
<div class="row justify-content-center">
|
||||
<div class="col-lg-6">
|
||||
|
||||
<form id="id_share_form" method="POST" action="{% url "billboard:share_post" post.id %}">
|
||||
{% csrf_token %}
|
||||
<input
|
||||
id="id_recipient"
|
||||
name="recipient"
|
||||
class="form-control form-control-lg{% if form.errors.recipient %} is-invalid{% endif %}"
|
||||
placeholder="friend@example.com"
|
||||
aria-describedby="id_recipient_feedback"
|
||||
required
|
||||
/>
|
||||
{% if form.errors.recipient %}
|
||||
<div id="id_recipient_feedback" class="invalid-feedback">
|
||||
{{ form.errors.recipient.0 }}
|
||||
</div>
|
||||
{% endif %}
|
||||
|
||||
<button type="submit" class="btn btn-primary">Share</button>
|
||||
</form>
|
||||
<small>Post shared with:
|
||||
<span id="id_post_recipients">
|
||||
{% for user in post.shared_with.all %}
|
||||
@@ -52,68 +33,11 @@
|
||||
</small>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{# Buddy btn (bottom-left) + slide-out recipient field — async share. #}
|
||||
{% include "apps/billboard/_partials/_buddy_panel.html" %}
|
||||
{% endblock content %}
|
||||
|
||||
{% block scripts %}
|
||||
{% include "apps/dashboard/_partials/_scripts.html" %}
|
||||
<script>
|
||||
// Async share: intercepts the share form, POSTs w. Accept:application/json,
|
||||
// then slide-downs the SHARE_INVITE Brief banner under the navbar h2 + appends
|
||||
// the freshly-recorded Line into #id_post_table. No page reload — the legacy
|
||||
// alert-success flash is gone.
|
||||
(function () {
|
||||
'use strict';
|
||||
var form = document.getElementById('id_share_form');
|
||||
var input = document.getElementById('id_recipient');
|
||||
var table = document.getElementById('id_post_table');
|
||||
var recipientsBox = document.getElementById('id_post_recipients');
|
||||
if (!form || !input || !table) return;
|
||||
|
||||
function _csrf() {
|
||||
var m = document.cookie.match(/csrftoken=([^;]+)/);
|
||||
return m ? m[1] : '';
|
||||
}
|
||||
|
||||
function _appendLine(text) {
|
||||
var n = table.querySelectorAll('tr').length + 1;
|
||||
var tr = document.createElement('tr');
|
||||
var td = document.createElement('td');
|
||||
td.textContent = n + '. ' + text;
|
||||
tr.appendChild(td);
|
||||
table.appendChild(tr);
|
||||
}
|
||||
|
||||
form.addEventListener('submit', function (e) {
|
||||
e.preventDefault();
|
||||
var fd = new FormData(form);
|
||||
fetch(form.action, {
|
||||
method: 'POST',
|
||||
credentials: 'same-origin',
|
||||
headers: {
|
||||
'Accept': 'application/json',
|
||||
'X-CSRFToken': _csrf(),
|
||||
},
|
||||
body: fd,
|
||||
})
|
||||
.then(function (r) { return r.ok ? r.json() : Promise.reject(r.status); })
|
||||
.then(function (data) {
|
||||
if (data.line_text) _appendLine(data.line_text);
|
||||
if (window.Brief && data.brief) Brief.showBanner(data.brief);
|
||||
if (data.recipient_display && recipientsBox) {
|
||||
var span = document.createElement('span');
|
||||
span.className = 'post-recipient';
|
||||
span.textContent = data.recipient_display;
|
||||
recipientsBox.appendChild(document.createTextNode(' '));
|
||||
recipientsBox.appendChild(span);
|
||||
}
|
||||
input.value = '';
|
||||
})
|
||||
.catch(function () {
|
||||
// No-op for now — the privacy-safe response shape means
|
||||
// even an unregistered recipient is a 200 w. brief data;
|
||||
// a true error path (5xx) silently swallows.
|
||||
});
|
||||
});
|
||||
}());
|
||||
</script>
|
||||
{% endblock scripts %}
|
||||
|
||||
Reference in New Issue
Block a user