Files
python-tdd/src/templates/apps/billboard/my_notes.html
Disco DeDisco e78bbb873b Billnotes note-page interaction: hover glow, click-lock, DON/DOFF; note titles + card-ref styling — TDD
- note-page.js: click-lock (_lockedItem + notes-locked body class); DON auto-DOFFs prev donned; _setGreeting updates navbar; _donnedItem exposed for test API
- NotePageSpec.js: 18 Jasmine specs covering lock/unlock, DON/DOFF state, auto-DOFF, greeting update, initial load; flushPromises helper for chained fetch .then()
- _note.scss: DON/DOFF opacity:0 by default; hover + locked + donned states show them; body:not(.notes-locked) hover suppression
- views.py: Super-Schizo/Super-Nomad card titles; recognition_title field (display_title) separate from card title; mark_safe descriptions w. card-ref spans
- my_notes.html: |safe on description; recognition_title for Recognitions block
- _navbar.html: id_greeting_prefix/id_greeting_name spans for JS greeting update
- _base.scss: global .card-ref rule (--terUser, font-weight 600, !important)

Code architected by Disco DeDisco <discodedisco@outlook.com>
Git commit message Co-Authored-By:
Claude Sonnet 4.6 <noreply@anthropic.com>
2026-04-28 01:54:57 -04:00

74 lines
3.4 KiB
HTML

{% extends "core/base.html" %}
{% load static %}
{% block title_text %}Billnotes{% endblock title_text %}
{% block header_text %}<span>Bill</span>notes{% endblock header_text %}
{% block content %}
<div class="note-page">
<ul class="note-list">
{% for item in note_items %}
<li class="note-item" data-slug="{{ item.obj.slug }}"
data-set-palette-url="{% url 'billboard:note_set_palette' item.obj.slug %}"
data-don-url="{% url 'billboard:don_title' item.obj.slug %}"
data-doff-url="{% url 'billboard:doff_title' item.obj.slug %}"
data-title="{{ item.title }}">
<div class="note-don-doff">
<button type="button"
class="btn btn-equip note-don-btn{% if item.is_equipped %} btn-disabled{% endif %}"
>{% if item.is_equipped %}&times;{% else %}DON{% endif %}</button>
<button type="button"
class="btn btn-unequip note-doff-btn{% if not item.is_equipped %} btn-disabled{% endif %}"
>{% if not item.is_equipped %}&times;{% else %}DOFF{% endif %}</button>
</div>
<div class="note-item__body">
<p class="note-item__title">{{ item.title }}</p>
<p class="note-item__description">{{ item.description|safe }}</p>
<div class="note-recognitions">
<div class="note-recognitions__header">Recognitions</div>
<ul class="note-recognitions__list">
<li><span class="note-recognitions__dim">Title:</span> <strong>{{ item.recognition_title }}</strong></li>
{% if item.obj.palette %}
<li class="note-recognitions__palette-line"><span class="note-recognitions__dim">Palette:</span> <strong>{{ item.palette_label }}</strong></li>
{% endif %}
</ul>
</div>
</div>
{% if item.obj.palette %}
<div class="note-item__palette {{ item.obj.palette }}"></div>
{% elif item.swatch_label %}
<div class="note-item__image-box note-item__image-box--label">{{ item.swatch_label }}</div>
{% else %}
<div class="note-item__image-box">?</div>
{% endif %}
{% if not item.obj.palette and item.palette_options %}
<template class="note-palette-modal-tpl">
<div class="note-palette-modal">
{% for p in item.palette_options %}
<div class="{{ p.name }}" data-palette-label="{{ p.label }}">
<div class="note-swatch-body"></div>
<span class="note-swatch-label">{{ p.label }}</span>
</div>
{% endfor %}
<div class="note-palette-confirm">
<p>Lock in this palette?</p>
<button type="button" class="btn btn-confirm">OK</button>
<button type="button" class="btn btn-cancel">NVM</button>
</div>
</div>
</template>
{% endif %}
</li>
{% empty %}
<li class="note-item note-item--empty">No notes yet.</li>
{% endfor %}
</ul>
</div>
<script src="{% static 'apps/billboard/note-page.js' %}"></script>
{% endblock %}