penal-colony/kafka
2
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

docs: fix plan issues — mobile FAB, RSS format, init wiring

Browse source 
Reviewed-by: plan-document-reviewer

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
This commit is contained in:
ashisgreat22 2026-03-22 02:27:57 +01:00
parent efbb9da108
commit 162b423fa7
1 changed files with 41 additions and 6 deletions
Download patch file Download diff file Expand all files Collapse all files

47
docs/superpowers/plans/2026-03-22-settings-ui.md
View file

@ -255,8 +255,15 @@ html[data-theme="dark"] {
--color-btn-hover: #444; --color-btn-hover: #444;
} }
/* Mobile: Bottom sheet */ /* Mobile: Bottom sheet + FAB trigger */
@media (max-width: 768px) { @media (max-width: 768px) {
/* Hide desktop trigger, show FAB */
.settings-trigger-desktop {
display: none;
}
.settings-trigger-mobile {
display: block;
}
.settings-popover { .settings-popover {
position: fixed; position: fixed;
top: auto; top: auto;
@ -268,6 +275,23 @@ html[data-theme="dark"] {
border-radius: var(--radius) var(--radius) 0 0; border-radius: var(--radius) var(--radius) 0 0;
border-bottom: none; border-bottom: none;
} }
/* FAB: fixed bottom-right button visible only on mobile */
.settings-trigger-mobile {
display: block;
position: fixed;
bottom: 1.5rem;
right: 1.5rem;
width: 48px;
height: 48px;
border-radius: 50%;
background: var(--color-link);
color: #fff;
border: none;
box-shadow: 0 4px 12px rgba(0,0,0,0.2);
font-size: 1.2rem;
z-index: 199;
opacity: 1;
}
} }
``` ```
@ -441,7 +465,8 @@ function renderPanel(prefs) {
var fmtOptions = [ var fmtOptions = [
{ val: 'html', label: 'HTML' }, { val: 'html', label: 'HTML' },
{ val: 'json', label: 'JSON' }, { val: 'json', label: 'JSON' },
{ val: 'csv', label: 'CSV' } { val: 'csv', label: 'CSV' },
{ val: 'rss', label: 'RSS' }
]; ];
var ssOptionsHtml = ''; var ssOptionsHtml = '';
var fmtOptionsHtml = ''; var fmtOptionsHtml = '';
@ -536,13 +561,18 @@ function initSettings() {
var panel = document.getElementById('settings-popover'); var panel = document.getElementById('settings-popover');
var trigger = document.getElementById('settings-trigger'); var trigger = document.getElementById('settings-trigger');
var mobileTrigger = document.getElementById('settings-trigger-mobile');
if (panel && trigger) { if (panel) {
renderPanel(prefs); renderPanel(prefs);
trigger.addEventListener('click', function() {
function togglePanel() {
var isOpen = panel.getAttribute('data-open') === 'true'; var isOpen = panel.getAttribute('data-open') === 'true';
if (isOpen) closePanel(); else openPanel(); if (isOpen) closePanel(); else openPanel();
}); }
if (trigger) trigger.addEventListener('click', togglePanel);
if (mobileTrigger) mobileTrigger.addEventListener('click', togglePanel);
} }
} }
@ -590,9 +620,14 @@ In `base.html`, update the `<body>` to:
{{if .ShowHeader}} {{if .ShowHeader}}
<header class="site-header"> <header class="site-header">
<span class="site-title">kafka</span> <span class="site-title">kafka</span>
<button id="settings-trigger" class="settings-trigger" <!-- Desktop trigger (hidden on mobile) -->
<button id="settings-trigger" class="settings-trigger settings-trigger-desktop"
aria-label="Preferences" aria-expanded="false" aria-controls="settings-popover">&#9881;</button> aria-label="Preferences" aria-expanded="false" aria-controls="settings-popover">&#9881;</button>
</header> </header>
<!-- Mobile FAB trigger (hidden on desktop, shown via CSS on mobile) -->
<button id="settings-trigger-mobile" class="settings-trigger settings-trigger-mobile"
aria-label="Preferences" aria-expanded="false" aria-controls="settings-popover"
style="display:none;">&#9881;</button>
{{end}} {{end}}
<main> <main>
{{template "content" .}} {{template "content" .}}