Skip to content

Commit 16c85ea

Browse files
driodrio
committed
Add help dialog and improve sidebar list styling
- Replace hover hint with clickable help dialog in top-left corner - Help includes usage instructions and link to about section - Increase sidebar list font size (1rem) and badge size - Align sidebars closer to poster edges - Add JavaScript for help toggle with click-outside-to-close
1 parent d262f5e commit 16c85ea

File tree

1 file changed

+118
-26
lines changed

1 file changed

+118
-26
lines changed

‎layouts/_default/list.html‎

Lines changed: 118 additions & 26 deletions
Original file line numberDiff line numberDiff line change
@@ -353,19 +353,54 @@
353353
color: white;
354354
}
355355

356-
.frame-hint {
356+
/* Help dialog */
357+
.help-container {
358+
position: fixed;
359+
top: 40px;
360+
left: 15px;
361+
background: #fff;
362+
border: 1px solid #ddd;
363+
border-radius: 6px;
364+
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
365+
padding: 24px 30px 12px 16px;
366+
z-index: 1000;
357367
display: none;
368+
}
369+
370+
.help-container.active {
371+
display: block;
372+
}
373+
374+
.help-list {
375+
margin: 0;
376+
padding: 0 0 0 18px;
377+
font-size: 0.85rem;
378+
color: #444;
379+
line-height: 1.7;
380+
}
381+
382+
.help-footer {
383+
margin-top: 8px;
384+
font-size: 0.85rem;
385+
color: #666;
386+
font-style: italic;
387+
text-align: right;
388+
}
389+
390+
.help-close {
358391
position: absolute;
359-
left: 50%;
360-
transform: translateX(-50%);
361-
top: 35px;
362-
font-size: 11px;
392+
top: 6px;
393+
right: 8px;
394+
border: none;
395+
background: none;
396+
font-size: 14px;
397+
cursor: pointer;
363398
color: #999;
364-
z-index: 10;
399+
transition: color 0.2s;
365400
}
366401

367-
body.frame-mode .frame-hint {
368-
display: block;
402+
.help-close:hover {
403+
color: #bc4f5f;
369404
}
370405

371406
.frame-container {
@@ -396,6 +431,14 @@
396431
scrollbar-width: thin;
397432
}
398433

434+
body.frame-mode .frame-sidebar-left {
435+
justify-self: end;
436+
}
437+
438+
body.frame-mode .frame-sidebar-right {
439+
justify-self: start;
440+
}
441+
399442
.frame-sidebar::-webkit-scrollbar {
400443
width: 4px;
401444
}
@@ -426,17 +469,17 @@
426469
.frame-item-number {
427470
background-color: #bc4f5f;
428471
color: white;
429-
font-size: 10px;
430-
min-width: 18px;
431-
height: 18px;
432-
line-height: 18px;
472+
font-size: 0.75rem;
473+
min-width: 1.25rem;
474+
height: 1.25rem;
475+
line-height: 1.25rem;
433476
text-align: center;
434477
border-radius: 50%;
435478
flex-shrink: 0;
436479
}
437480

438481
.frame-item-title {
439-
font-size: 13px;
482+
font-size: 1rem;
440483
color: #333;
441484
text-decoration: none;
442485
transition: color 0.2s;
@@ -456,18 +499,27 @@
456499
}
457500

458501
@keyframes pulse {
459-
0%, 100% { box-shadow: 0 0 20px 8px rgba(188, 79, 95, 0.9), 0 0 40px 15px rgba(188, 79, 95, 0.5); }
460-
50% { box-shadow: 0 0 25px 12px rgba(188, 79, 95, 1), 0 0 50px 20px rgba(188, 79, 95, 0.6); }
502+
503+
0%,
504+
100% {
505+
box-shadow: 0 0 20px 8px rgba(188, 79, 95, 0.9), 0 0 40px 15px rgba(188, 79, 95, 0.5);
506+
}
507+
508+
50% {
509+
box-shadow: 0 0 25px 12px rgba(188, 79, 95, 1), 0 0 50px 20px rgba(188, 79, 95, 0.6);
510+
}
461511
}
462512

463513
/* Hide frame mode on smaller screens */
464514
@media (max-width: 1100px) {
465515
.frame-toggle {
466516
display: none;
467517
}
518+
468519
body.frame-mode .frame-container {
469520
display: block;
470521
}
522+
471523
body.frame-mode .frame-sidebar {
472524
display: none;
473525
}
@@ -485,9 +537,25 @@
485537
{{ $i := "index.xml" }}
486538
<a href="{{ $i | relURL }}" class="rss-link" title="RSS Feed"><img src="rss.svg"> </a>
487539
<a href="#poster-info" class="header-link">about</a>
540+
<a href="#" class="header-link" id="help-toggle">help</a>
488541
<button class="frame-toggle" id="frame-toggle" title="Show all annotations">Show All</button>
489542
</div>
490-
<div class="frame-hint">Hover to highlight · Click for details</div>
543+
544+
<!-- Help dialog -->
545+
<div class="help-container" id="help-container">
546+
<button class="help-close">✖</button>
547+
<div class="help-content">
548+
<ul class="help-list">
549+
<li>An interactive guide to the Unix Magic Poster (more in <a href="#poster-info">about</a>)</li>
550+
<li>Hover a marker or list item to highlight it</li>
551+
<li>Click to read the full annotation</li>
552+
<li>Show All displays reference lists alongside the poster</li>
553+
<li>Scroll down to read all annotations in order</li>
554+
<li>Use 🔗 Share to copy a link to any annotation</li>
555+
</ul>
556+
<div class="help-footer">Have fun!</div>
557+
</div>
558+
</div>
491559

492560
<div class="frame-container" id="frame-container">
493561
<!-- Left sidebar: markers 1-20 -->
@@ -545,7 +613,8 @@
545613
{{ .Content | safeHTML }}
546614
</div>
547615
<div class="annotation-footer">
548-
<button class="share-btn" data-hash="{{ .File.BaseFileName }}" data-permalink="{{ .RelPermalink }}">🔗 Share</button>
616+
<button class="share-btn" data-hash="{{ .File.BaseFileName }}"
617+
data-permalink="{{ .RelPermalink }}">🔗 Share</button>
549618
</div>
550619
</div>
551620
</div>
@@ -609,7 +678,8 @@
609678
</div>
610679

611680
<div class="annotation-footer">
612-
<button class="share-btn" data-hash="{{ .File.BaseFileName }}" data-permalink="{{ .RelPermalink }}">🔗 Share</button>
681+
<button class="share-btn" data-hash="{{ .File.BaseFileName }}" data-permalink="{{ .RelPermalink }}">🔗
682+
Share</button>
613683
<a href="#" class="back-to-top">🔝</a>
614684
</div>
615685
</div>
@@ -664,6 +734,9 @@
664734
const poster = document.getElementById('poster');
665735
const frameToggle = document.getElementById('frame-toggle');
666736
const frameItems = document.querySelectorAll('.frame-item');
737+
const helpToggle = document.getElementById('help-toggle');
738+
const helpContainer = document.getElementById('help-container');
739+
const helpClose = helpContainer.querySelector('.help-close');
667740

668741
window.addEventListener('resize', positionMarkers);
669742
if (poster.complete) {
@@ -677,29 +750,48 @@
677750
}
678751

679752
// Frame mode toggle
680-
frameToggle.addEventListener('click', function() {
753+
frameToggle.addEventListener('click', function () {
681754
document.body.classList.toggle('frame-mode');
682755
this.classList.toggle('active');
683756
this.textContent = this.classList.contains('active') ? 'Hide All' : 'Show All';
684757
// Reposition markers after layout change
685758
setTimeout(positionMarkers, 50);
686759
});
687760

761+
// Help toggle
762+
helpToggle.addEventListener('click', function (e) {
763+
e.preventDefault();
764+
helpContainer.classList.add('active');
765+
});
766+
767+
helpClose.addEventListener('click', function () {
768+
helpContainer.classList.remove('active');
769+
});
770+
771+
// Close help when clicking outside
772+
document.addEventListener('click', function (e) {
773+
if (helpContainer.classList.contains('active') &&
774+
!helpContainer.contains(e.target) &&
775+
e.target !== helpToggle) {
776+
helpContainer.classList.remove('active');
777+
}
778+
});
779+
688780
// Bidirectional highlighting: frame items -> markers
689781
frameItems.forEach(item => {
690782
const markerNum = item.getAttribute('data-marker-number');
691783
const marker = document.querySelector(`.marker[data-number="${markerNum}"]`);
692784

693-
item.addEventListener('mouseenter', function() {
785+
item.addEventListener('mouseenter', function () {
694786
if (marker) marker.classList.add('highlight');
695787
});
696788

697-
item.addEventListener('mouseleave', function() {
789+
item.addEventListener('mouseleave', function () {
698790
if (marker) marker.classList.remove('highlight');
699791
});
700792

701793
// Click opens the detail panel
702-
item.addEventListener('click', function() {
794+
item.addEventListener('click', function () {
703795
if (marker) marker.click();
704796
});
705797
});
@@ -709,14 +801,14 @@
709801
const markerNum = marker.getAttribute('data-number');
710802
const frameItem = document.querySelector(`.frame-item[data-marker-number="${markerNum}"]`);
711803

712-
marker.addEventListener('mouseenter', function() {
804+
marker.addEventListener('mouseenter', function () {
713805
if (frameItem && document.body.classList.contains('frame-mode')) {
714806
frameItem.classList.add('highlight');
715-
frameItem.scrollIntoView({ behavior: 'smooth', block: 'nearest' });
807+
frameItem.scrollIntoView({behavior: 'smooth', block: 'nearest'});
716808
}
717809
});
718810

719-
marker.addEventListener('mouseleave', function() {
811+
marker.addEventListener('mouseleave', function () {
720812
if (frameItem) frameItem.classList.remove('highlight');
721813
});
722814
});
@@ -749,7 +841,7 @@
749841
window.addEventListener('hashchange', handleHashChange);
750842

751843
document.querySelectorAll('.share-btn').forEach(btn => {
752-
btn.addEventListener('click', function() {
844+
btn.addEventListener('click', function () {
753845
const hash = this.getAttribute('data-hash');
754846
const permalink = this.getAttribute('data-permalink');
755847
const baseUrl = window.location.origin + window.location.pathname;

0 commit comments

Comments
 (0)