Updated UI, mostly for mobile but also moved

export/import buttons into settings menu.

Author: jd-code76

index.html

@@ -54,7 +54,6 @@ import {
     restorePanelStates,
     restoreSidebarState,
     switchNotesView,
-    toggleNotes,
     togglePanelCollapse,
     toggleReferencePanel,
     toggleSection,
@@ -112,8 +111,6 @@ function setupEventListeners() {
             });
     document.getElementById('importFile')
             .addEventListener('change', importData);
-    document.querySelector('.toggle-notes')
-            .addEventListener('click', toggleNotes);
     document.getElementById('prevPassageBtn')
             .addEventListener('click', prevPassage);
     document.getElementById('nextPassageBtn')

main.js

@@ -5,7 +5,6 @@
     handleError,
     showLoading
 } from '../main.js'
-import { getCurrentTranslation } from './navigation.js'
 import { loadPassage } from './passage.js'
 import {
     deletePDFFromIndexedDB,
@@ -143,20 +142,26 @@ export async function saveSettings() {
     } 
 }
 export async function clearCache() {
-    if (confirm('Clear all cached Bible data? This will remove offline access to previously viewed passages.')) {
-        try {
-            if ('serviceWorker' in navigator && navigator.serviceWorker.controller) {
-                navigator.serviceWorker.controller.postMessage({ type: 'CLEAR_CACHE' });
-            }
-            const db = await openDB();
-            const tx = db.transaction([STORE_NAME], 'readwrite');
-            const store = tx.objectStore(STORE_NAME);
-            await store.clear();
-            alert('Cache cleared successfully');
-        } catch (err) {
-            handleError(err, 'clearCache');
-            alert('Error clearing cache: ' + err.message);
+    if (!confirm('Clear all cached Bible data? This will remove offline access to previously viewed passages.')) {
+        return;
+    }
+    try {
+        showLoading(true);
+        if ('caches' in window) {
+            const cacheNames = await caches.keys();
+            await Promise.all(cacheNames.map(name => caches.delete(name)));
         }
+        const db = await openDB();
+        const tx = db.transaction([STORE_NAME], 'readwrite');
+        const store = tx.objectStore(STORE_NAME);
+        await store.clear();
+        await tx.done;
+        alert('Cache cleared successfully');
+    } catch (err) {
+        handleError(err, 'clearCache');
+        alert('Error clearing cache: ' + err.message);
+    } finally {
+        showLoading(false);
     }
 }
 export async function deleteAllData() {
@@ -223,6 +228,12 @@ export async function deleteAllData() {
         if (zoomDisplay) {
             zoomDisplay.textContent = '100%';
         }
+        const defaultParams = {
+            translation: 'BSB',
+            book: 'Genesis',
+            chapter: 1
+        };
+        updateURL(defaultParams.translation, defaultParams.book, defaultParams.chapter);
         await loadPassage();
         clearError();
         closeSettings();

modules/settings.js

@@ -1,6 +1,6 @@
 import { handleError } from '../main.js'
 import { loadPDFFromIndexedDB } from './pdf.js'
-export const APP_VERSION = '1.1.05.2025.11.06';
+export const APP_VERSION = '1.1.06.2025.11.07';
 let saveTimeout = null;
 const SAVE_DEBOUNCE_MS = 500;
 export const BOOK_ORDER = [

modules/state.js

@@ -1,6 +1,6 @@
 import { state } from './state.js'
 import { getStepBibleUrl } from './ui.js'
-export function showStrongsReference(verseEl) {    
+export function showStrongsReference(verseEl) {
     const ref = verseEl.dataset.verse;
     state.currentVerseElement = verseEl;
     const textSpan = verseEl.querySelector('.verse-text');
@@ -84,7 +84,7 @@ export function showStrongsReference(verseEl) {
             <h3>Quick Links</h3>
             <div style="margin-top:15px;">
                 <a href="https://biblehub.com/strongs.htm" target="_blank"
-                   style="color:var(--accent-color);">BibleHub Strong's Exhaustive Concordance</a><br>
+                   style="color:var(--accent-color);">BibleHub Strong's Concordance</a><br>
                 <a href="https://netbible.org/bible/${encodeURIComponent(ref)}"
                    target="_blank" style="color:var(--accent-color);">NET Bible (with comprehensive notes)</a><br>
             </div>
@@ -181,7 +181,6 @@ function populateStrongsFootnotes(verseRef) {
         container.innerHTML = '<p style="opacity:0.7;text-align:center;padding:20px;">No footnotes available for this verse</p>';
         return;
     }
-    console.log('Found stored footnotes:', verseFootnotes);
     container.innerHTML = `
         <hr class="footnotes-separator">
         <h4 class="footnotes-heading">Footnotes</h4>
@@ -206,18 +205,6 @@ function setupStrongsFootnoteHandlers() {
         ref.addEventListener('click', function(e) {
             e.preventDefault();
             e.stopPropagation();
-            const footnoteNumber = this.dataset.footnoteNumber;
-            const footnoteElement = document.querySelector(`#strongsFootnotesContainer .footnote[data-footnote-number="${footnoteNumber}"]`);
-            if (footnoteElement) {
-                footnoteElement.scrollIntoView({ 
-                    behavior: 'smooth', 
-                    block: 'nearest' 
-                });
-                footnoteElement.style.backgroundColor = 'var(--verse-hover)';
-                setTimeout(() => {
-                    footnoteElement.style.backgroundColor = '';
-                }, 2000);
-            }
         });
     });
 }

modules/strongs.js

@@ -88,9 +88,6 @@ export function exportNotes(ext) {
     document.body.removeChild(a);
     URL.revokeObjectURL(url);
 }
-export function toggleNotes() {
-    document.getElementById('notesSection').classList.toggle('hidden');
-}
 export function togglePanelCollapse(panelId) {
     const panel = document.getElementById(panelId);
     const collapsed = panel.classList.contains('panel-collapsed');

modules/ui.js

@@ -34,34 +34,27 @@
     }
 }
 
-.toggle-notes {
-    display: none;
-}
-
 @media (max-width: 768px) {
-    .toggle-notes {
-        display: inline-block;
-    }
-
     .header {
         padding: 2px 3px;
-        /* display: flex; */
     }
 
-    * {
-        /* scrollbar-width: thin; */
+    .header h1 {
+        font-size: 1em;
     }
 
     .toolbar {
-        /* padding: 2px 1px; */
         gap: 2px;
-        /* display: flex; */
-        /* border-bottom: 1px solid var(--border-color); */
+    }
+
+    .toolbar-info {
+        display: none;
     }
 
     .notes-section {
         padding: 4px;
         width: 250px;
+        display: none;
     }
 
     .collapse-toggle {
@@ -78,11 +71,11 @@
     }
 
     .sidebar {
-        padding: 10px;
+        display: none;
     }
 
     .btn {
-        padding: 8px 2px;
+        padding: 8px 8px;
         font-size: 14px;
     }
 
@@ -99,6 +92,26 @@
         padding: 2px;
     }
 
+    .reference-panel-toggle {
+        display: none;
+    }
+
+    label[for="referenceVersionSetting"] {
+        display: none;
+    }
+
+    .settings-group #referenceVersionSetting {
+        display: none;
+    }
+
+    #settingsPdfUploadBtn {
+        display: none;
+    }
+
+    #customPdfInfo {
+        display: none;
+    }
+
     .toolbar-divider {
         margin: 0 3px;
     }
@@ -109,10 +122,10 @@
     }
 
     .highlights-modal {
-        width: 95%;
+        width: 90%;
         max-width: none;
-        margin: 10px;
-        padding: 20px;
+        margin: 10px 0px;
+        padding: 10px;
     }
 
     .highlights-filters {

src/css/responsive.css

@@ -56,16 +56,6 @@
     color: var(--accent-color);
 }
 
-/* Plan label */
-
-.plan-label {
-    font-size: 1.1rem;
-    font-weight: 500;
-    color: var(--accent-color);
-    margin-top: 8px;
-    margin-bottom: 12px;
-}
-
 /* Verse Display & Styling */
 
 .verse {
@@ -236,103 +226,6 @@
     border-left-color: var(--accent-color);
 }
 
-/* Strong's Popup Footnote Styles */
-
-.strongs-footnotes-container {
-    display: block !important;
-    max-height: 200px;
-    overflow-y: auto;
-    padding: 2px;
-    background-color: var(--toolbar-background);
-}
-
-.strongs-footnotes-container .footnotes-heading {
-    color: var(--text-color);
-    margin-bottom: 15px;
-    font-size: 1.1em;
-    font-weight: 600;
-}
-
-.strongs-footnotes-container .footnote {
-    margin-bottom: 12px;
-    padding: 10px;
-    border-radius: 4px;
-    transition: all 0.3s ease;
-}
-
-.strongs-footnotes-container .footnote:hover {
-    background-color: rgba(0, 0, 0, 0.03);
-}
-
-.strongs-footnotes-container .footnote-number {
-    color: var(--accent-color);
-    font-weight: bold;
-    margin-right: 8px;
-    font-size: 0.85em;
-    background-color: rgba(0, 0, 0, 0.08);
-    padding: 3px 6px;
-    border-radius: 3px;
-}
-
-.strongs-footnotes-container .footnote-content {
-    color: var(--text-color);
-    font-size: 0.9em;
-    line-height: 1.4;
-    opacity: 0.95;
-}
-
-.strongs-footnotes-container .footnote-ref {
-    color: var(--accent-color);
-    font-size: 0.75em;
-    vertical-align: super;
-    cursor: pointer;
-    margin: 0 1px;
-    text-decoration: none;
-    font-weight: bold;
-    background-color: rgba(0, 0, 0, 0.08);
-    padding: 1px 4px;
-    border-radius: 3px;
-    line-height: 1;
-    transition: all 0.2s ease;
-}
-
-.strongs-footnotes-container .footnote-ref:hover {
-    background-color: var(--accent-color);
-    color: white;
-    transform: scale(1.1);
-}
-
-#strongsFootnotesContainer .footnote {
-    margin-bottom: 12px;
-    padding: 10px;
-    background-color: var(--toolbar-background);
-    border-radius: 4px;
-}
-
-#strongsFootnotesContainer .footnote-number {
-    font-weight: bold;
-    color: var(--accent-color);
-    margin-right: 8px;
-}
-
-#strongsFootnotesContainer .footnote-content {
-    display: inline;
-}
-
-#strongsPopup .footnote {
-    cursor: pointer;
-    transition: all 0.2s ease;
-}
-
-#strongsPopup .footnote:hover {
-    background-color: var(--verse-hover);
-}
-
-#strongsPopup .footnote:hover .footnote-number {
-    background-color: var(--accent-color);
-    color: white;
-}
-
 .verse-navigation {
     display: flex;
     align-items: center;