docs: fix plan issues — mobile FAB, RSS format, init wiring
Reviewed-by: plan-document-reviewer Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
This commit is contained in:
parent
efbb9da108
commit
162b423fa7
1 changed files with 41 additions and 6 deletions
|
|
@ -255,8 +255,15 @@ html[data-theme="dark"] {
|
|||
--color-btn-hover: #444;
|
||||
}
|
||||
|
||||
/* Mobile: Bottom sheet */
|
||||
/* Mobile: Bottom sheet + FAB trigger */
|
||||
@media (max-width: 768px) {
|
||||
/* Hide desktop trigger, show FAB */
|
||||
.settings-trigger-desktop {
|
||||
display: none;
|
||||
}
|
||||
.settings-trigger-mobile {
|
||||
display: block;
|
||||
}
|
||||
.settings-popover {
|
||||
position: fixed;
|
||||
top: auto;
|
||||
|
|
@ -268,6 +275,23 @@ html[data-theme="dark"] {
|
|||
border-radius: var(--radius) var(--radius) 0 0;
|
||||
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 = [
|
||||
{ val: 'html', label: 'HTML' },
|
||||
{ val: 'json', label: 'JSON' },
|
||||
{ val: 'csv', label: 'CSV' }
|
||||
{ val: 'csv', label: 'CSV' },
|
||||
{ val: 'rss', label: 'RSS' }
|
||||
];
|
||||
var ssOptionsHtml = '';
|
||||
var fmtOptionsHtml = '';
|
||||
|
|
@ -536,13 +561,18 @@ function initSettings() {
|
|||
|
||||
var panel = document.getElementById('settings-popover');
|
||||
var trigger = document.getElementById('settings-trigger');
|
||||
var mobileTrigger = document.getElementById('settings-trigger-mobile');
|
||||
|
||||
if (panel && trigger) {
|
||||
if (panel) {
|
||||
renderPanel(prefs);
|
||||
trigger.addEventListener('click', function() {
|
||||
|
||||
function togglePanel() {
|
||||
var isOpen = panel.getAttribute('data-open') === 'true';
|
||||
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}}
|
||||
<header class="site-header">
|
||||
<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">⚙</button>
|
||||
</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;">⚙</button>
|
||||
{{end}}
|
||||
<main>
|
||||
{{template "content" .}}
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue