rmsitz/offlineu
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Replace all OS-rendered emoji with a consistent SVG icon set

Browse Source 
Add a shared Jinja icon macro (templates/_icons.html) with 27 Feather-style
stroke SVGs and import it across every live template - tab bars, buttons,
lesson-type/status icons, folder/course icons, and the lesson player's
footer brand mark all now use currentColor SVGs instead of emoji, matching
the app's vector logo instead of rendering inconsistently per platform.
A few icons built dynamically in JS (thumbnail-load fallbacks, toggled
button states) get a small ICON_SVGS constant per file, since JS template
literals can't call the Jinja macro.

Left pure directional glyphs (expand/collapse chevrons, move up/down
arrows, keyboard-shortcut arrows) as plain Unicode - they already render
as monochrome text, matching the existing collapsible-header chevron
pattern rather than the colorful pictographic emoji this was aimed at.

Co-Authored-By: Claude Sonnet 5 <noreply@anthropic.com>
This commit is contained in:
rmsitz
2026-08-23 21:49:10 -04:00
co-authored by Claude Sonnet 5
parent e2db5ecef8
commit eae6b09ecd
6 changed files with 154 additions and 90 deletions
Download Patch File Download Diff File Expand all files Collapse all files
templates/notes_hub.html
+12 -6
View File
@@ -1,3 +1,4 @@
{% import '_icons.html' as icons %}
<!DOCTYPE html>
<html lang="en">
<head>
@@ -111,6 +112,11 @@
.tab-item.active {
color: var(--accent);
}
.icon {
display: inline-block;
vertical-align: -3px;
flex-shrink: 0;
}
.container {
max-width: 800px;
margin: 0 auto;
@@ -227,7 +233,7 @@
<div class="page-content">
<div class="container">
<h1>📝 Notes</h1>
<h1>{{ icons.icon('pencil', 22) }} Notes</h1>
<p class="subtitle">Every lesson note across your library, newest first.</p>
{% if not notes %}
@@ -241,7 +247,7 @@
{% for note in notes %}
<div class="note-card" data-search="{{ (note.lesson_title ~ ' ' ~ note.course_name ~ ' ' ~ note.text) | lower }}">
<div class="note-card-header">
<span class="note-card-icon">📝</span>
<span class="note-card-icon">{{ icons.icon('pencil', 20) }}</span>
<div class="note-card-titles">
<span class="note-lesson-title">{{ note.lesson_title }}</span>
<span class="note-course-name">{{ note.course_name }}</span>
@@ -265,16 +271,16 @@
<nav class="bottom-tab-bar">
<a href="/reset_course" class="tab-item {% if active_tab == 'home' %}active{% endif %}">
<span class="tab-icon">🏠</span><span class="tab-label">Home</span>
<span class="tab-icon">{{ icons.icon('home', 20) }}</span><span class="tab-label">Home</span>
</a>
<a href="/notes" class="tab-item {% if active_tab == 'notes' %}active{% endif %}">
<span class="tab-icon">📝</span><span class="tab-label">Notes</span>
<span class="tab-icon">{{ icons.icon('pencil', 20) }}</span><span class="tab-label">Notes</span>
</a>
<a href="/help" class="tab-item {% if active_tab == 'help' %}active{% endif %}">
<span class="tab-icon">❓</span><span class="tab-label">Help</span>
<span class="tab-icon">{{ icons.icon('help', 20) }}</span><span class="tab-label">Help</span>
</a>
<a href="/settings" class="tab-item {% if active_tab == 'settings' %}active{% endif %}">
<span class="tab-icon">⚙</span><span class="tab-label">Settings</span>
<span class="tab-icon">{{ icons.icon('settings', 20) }}</span><span class="tab-label">Settings</span>
</a>
</nav>