kennethreitz/kjvstudy.org
1
0
Fork 0
mirror of https://github.com/kennethreitz/kjvstudy.org.git synced 2026-06-05 23:00:16 +00:00
Code Issues Packages Projects Releases Wiki Activity

Improve /offline page design and fix import error

Browse Source 
Design improvements:
- Added Quick Access section with links to Books, Stories, Topics, etc.
- Moved technical debug info to collapsible "Technical Details" section
- Added styled quick link grid with hover effects
- Cleaner layout focusing on user-friendly features

Bug fix:
- Fixed import error: use load_all_stories() instead of get_all_stories()

🤖 Generated with [Claude Code](https://claude.com/claude-code)

Co-Authored-By: Claude <noreply@anthropic.com>
This commit is contained in:
Kenneth Reitz
2025-11-30 01:43:36 -05:00
parent 47b74af662
commit 8f89fe9bfb
2 changed files with 75 additions and 21 deletions
Download Patch File Download Diff File Expand all files Collapse all files
kjvstudy_org/routes/utility.py
+2 -2
View File
@@ -10,7 +10,7 @@ from fastapi.responses import Response, FileResponse
from ..kjv import bible
from ..topics import get_all_topics
from ..strongs import get_all_strongs
from ..stories import get_all_stories
from ..stories import load_all_stories
router = APIRouter(tags=["Utility"])
@@ -282,7 +282,7 @@ def sitemap_main():
"""
# Add all individual story URLs
stories_data = get_all_stories()
stories_data = load_all_stories()
for category in stories_data:
for story in category.get("stories", []):
slug = story.get("slug", "")
kjvstudy_org/templates/offline.html
+73 -19
View File
@@ -230,6 +230,49 @@
color: var(--success-color);
font-weight: 600;
}
.quick-links {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
gap: 1rem;
margin: 1.5rem 0;
}
.quick-link {
display: flex;
align-items: center;
gap: 0.5rem;
padding: 1rem;
background: var(--bg-color);
border: 1px solid var(--border-color);
border-radius: 8px;
text-decoration: none;
color: var(--text-color);
font-weight: 500;
transition: all 0.2s;
}
.quick-link:hover {
border-color: var(--success-color);
transform: translateY(-2px);
box-shadow: 0 4px 12px rgba(0,0,0,0.1);
}
.debug-details {
margin-top: 3rem;
padding-top: 2rem;
border-top: 1px solid var(--border-color);
}
.debug-details summary {
cursor: pointer;
color: var(--text-secondary);
font-size: 0.9rem;
padding: 0.5rem 0;
}
.debug-details summary:hover {
color: var(--text-color);
}
.debug-details h3 {
margin-top: 1.5rem;
font-size: 1rem;
color: var(--text-secondary);
}
</style>
</head>
<body>
@@ -248,28 +291,19 @@
</div>
</div>
<h2>Service Worker Status</h2>
<div class="debug-section">
<dl>
<dt>Service Worker</dt>
<dd id="sw-status">Checking...</dd>
<dt>Cache Storage</dt>
<dd id="cache-status">Checking...</dd>
<dt>Bible Data (verses-1769.json)</dt>
<dd id="bible-status">Checking...</dd>
<dt>Pages Cached</dt>
<dd id="pages-cached">Checking...</dd>
</dl>
</div>
<h2>Cached Pages <span id="cached-count">0</span></h2>
<p>These pages are available offline:</p>
<div id="cached-links" class="cached-links">
<p class="loading">Scanning cache...</p>
<h2>Quick Access</h2>
<p>Jump directly to commonly used sections:</p>
<div class="quick-links">
<a href="/books" class="quick-link">📖 All Books</a>
<a href="/stories" class="quick-link">📚 Bible Stories</a>
<a href="/topics" class="quick-link">🏷️ Topics</a>
<a href="/reading-plans" class="quick-link">📅 Reading Plans</a>
<a href="/study-guides" class="quick-link">📝 Study Guides</a>
<a href="/resources" class="quick-link">📂 Resources</a>
</div>
<h2>Bible Reader</h2>
<p>Read any chapter using cached Bible data:</p>
<p>Read any chapter using cached Bible data (works even without any downloads):</p>
<div class="nav-section">
<select id="book-select">
<option value="">Select a book...</option>
@@ -293,6 +327,26 @@
<a href="/">← Back to KJV Study</a>
</div>
<details class="debug-details">
<summary>Technical Details</summary>
<div class="debug-section">
<dl>
<dt>Service Worker</dt>
<dd id="sw-status">Checking...</dd>
<dt>Cache Storage</dt>
<dd id="cache-status">Checking...</dd>
<dt>Bible Data</dt>
<dd id="bible-status">Checking...</dd>
<dt>Pages Cached</dt>
<dd id="pages-cached">Checking...</dd>
</dl>
</div>
<h3>Cached Pages <span id="cached-count">0</span></h3>
<div id="cached-links" class="cached-links">
<p class="loading">Scanning cache...</p>
</div>
</details>
<script>
(function() {
// Check theme preference