catarrh/ponomar-pwa
1
0 Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat: bump UI chrome font scale (xs->sm, sm->base)

Browse Source 
- text-sm -> text-base (14px -> 16px), then text-xs -> text-sm (12px -> 14px)
  across 75 usages in 8 UI files; nav dropdown links 0.875rem -> 1rem
- Liturgical content untouched (var-based size); verse-number superscripts
  and text-[10px] micro-labels intentionally kept
This commit is contained in:
catarrh committed 2026-08-25 00:04:41 +03:00
1 parent 4f6461efad
commit 4f11e8ca6c
9 files changed
+76 -76
Download Patch File Download Diff File Expand all files Collapse all files

No files matched your search

src/main.ts
+2 -2
View File
@@ -16,8 +16,8 @@ function showUpdateToast() {
toast.id = 'pwa-update-toast';
toast.className = 'fixed bottom-4 left-1/2 -translate-x-1/2 z-[60] bg-surface border border-gold/40 rounded-lg shadow-xl px-4 py-3 flex items-center gap-3 max-w-[calc(100vw-2rem)]';
toast.innerHTML = `
<span class="text-sm text-navy whitespace-nowrap">${t.updateAvailable}</span>
<button id="pwa-update-btn" class="bg-gold text-navy rounded px-3 py-1 text-sm font-bold hover:bg-gold-dark transition-colors whitespace-nowrap">${t.updateReload}</button>
<span class="text-base text-navy whitespace-nowrap">${t.updateAvailable}</span>
<button id="pwa-update-btn" class="bg-gold text-navy rounded px-3 py-1 text-base font-bold hover:bg-gold-dark transition-colors whitespace-nowrap">${t.updateReload}</button>
<button id="pwa-update-dismiss" class="text-navy-light hover:text-navy text-lg leading-none px-1" aria-label="✕">&times;</button>
`;
document.body.appendChild(toast);
src/styles/main.css
+1 -1
View File
@@ -274,7 +274,7 @@ nav details.nav-group a.nav-link {
}
nav details.nav-group details a.nav-link {
padding: 0.5rem 0.5rem 0.5rem 1rem;
font-size: 0.875rem;
font-size: 1rem;
}
/* Mobile: top-level dropdown as fixed overlay; nested in-flow */
src/ui/app.ts
+4 -4
View File
@@ -190,11 +190,11 @@ export class App {
overlay.innerHTML = `
<div class="bg-surface rounded-xl shadow-2xl p-6 max-w-md mx-4">
<h3 class="text-lg font-bold text-navy mb-2">${t.settings.offlineOfferTitle}</h3>
<p class="text-sm text-navy mb-4">${t.settings.offlineOfferText}</p>
<p class="text-base text-navy mb-4">${t.settings.offlineOfferText}</p>
<div class="flex flex-col gap-2">
<button id="offline-offer-all" class="w-full bg-navy text-parchment rounded-lg px-4 py-2 font-bold hover:bg-navy-light transition-colors">${t.settings.offlineOfferPreloadAll}</button>
<button id="offline-offer-choose" class="w-full bg-gold text-navy rounded-lg px-4 py-2 font-bold hover:bg-gold-light transition-colors">${t.settings.offlineOfferChoose}</button>
<button id="offline-offer-skip" class="w-full text-sm text-navy-light underline hover:text-navy text-center cursor-pointer">${t.settings.offlineOfferSkip}</button>
<button id="offline-offer-skip" class="w-full text-base text-navy-light underline hover:text-navy text-center cursor-pointer">${t.settings.offlineOfferSkip}</button>
</div>
</div>
`;
@@ -252,10 +252,10 @@ export class App {
<img src="/icons/icon-192.png" class="w-6 h-6" alt="">
${t.nav.appTitle}
</span>
<nav class="flex flex-wrap gap-4 text-sm mx-auto">
<nav class="flex flex-wrap gap-4 text-base mx-auto">
<a href="#calendar" class="nav-link hover:text-gold transition-colors" data-view="calendar">${t.nav.calendar}</a>
<details class="nav-group relative" data-nav="library">
<summary class="cursor-pointer list-none hover:text-gold transition-colors flex items-center gap-1">${t.nav.library} <span class="text-xs">▾</span></summary>
<summary class="cursor-pointer list-none hover:text-gold transition-colors flex items-center gap-1">${t.nav.library} <span class="text-sm">▾</span></summary>
<div class="absolute left-0 top-full mt-1 z-50 min-w-56 rounded-lg bg-dropdown-bg shadow-xl p-2 flex flex-col gap-1">
<a href="#bible" class="nav-link hover:text-gold transition-colors px-2 py-1" data-view="bible"><span>📖</span> <span class="font-bold">${t.nav.bible}</span></a>
<a href="#prayer" class="nav-link hover:text-gold transition-colors px-2 py-1" data-view="prayer">${t.nav.prayer}</a>
src/ui/bible-view.ts
+10 -10
View File
@@ -172,24 +172,24 @@ export class BibleView {
this.container.innerHTML = `
<div class="flex flex-col h-full">
<div class="bg-surface/50 border border-gold/20 rounded-lg p-3 flex items-center gap-4 flex-wrap">
<select id="version-select" class="appearance-none bg-surface text-navy border border-gold/20 rounded px-2 py-1 text-sm">
<select id="version-select" class="appearance-none bg-surface text-navy border border-gold/20 rounded px-2 py-1 text-base">
${this.versions.map(v =>
`<option value="${v.id}" ${v.id === this.currentVersion ? 'selected' : ''}>${v.name}</option>`
).join('')}
</select>
<select id="book-select" class="appearance-none bg-surface text-navy border border-gold/20 rounded px-2 py-1 text-sm">
<select id="book-select" class="appearance-none bg-surface text-navy border border-gold/20 rounded px-2 py-1 text-base">
${this.getBooksForVersion().map(b =>
`<option value="${b.id}" ${b.id === this.currentBook ? 'selected' : ''}>${b.name}</option>`
).join('')}
</select>
<div class="flex items-center gap-1">
<button id="prev-chapter" class="bg-surface/50 text-navy border border-gold/20 rounded px-2 py-1 text-sm hover:bg-gold/20 disabled:opacity-40">◀</button>
<select id="chapter-select" class="appearance-none bg-surface text-navy border border-gold/20 rounded px-2 py-1 text-sm">
<button id="prev-chapter" class="bg-surface/50 text-navy border border-gold/20 rounded px-2 py-1 text-base hover:bg-gold/20 disabled:opacity-40">◀</button>
<select id="chapter-select" class="appearance-none bg-surface text-navy border border-gold/20 rounded px-2 py-1 text-base">
</select>
<button id="next-chapter" class="bg-surface/50 text-navy border border-gold/20 rounded px-2 py-1 text-sm hover:bg-gold/20 disabled:opacity-40">▶</button>
<button id="next-chapter" class="bg-surface/50 text-navy border border-gold/20 rounded px-2 py-1 text-base hover:bg-gold/20 disabled:opacity-40">▶</button>
</div>
<div class="relative ml-auto">
<button id="bookmark-btn" class="bg-surface/50 text-navy border border-gold/20 rounded px-2 py-1 text-sm hover:bg-gold/20" title="${this.t.bible.bookmarkAdd}">🔖</button>
<button id="bookmark-btn" class="bg-surface/50 text-navy border border-gold/20 rounded px-2 py-1 text-base hover:bg-gold/20" title="${this.t.bible.bookmarkAdd}">🔖</button>
<div id="bookmark-panel" class="${this.bookmarksOpen ? 'flex flex-col' : 'hidden'} absolute right-0 top-full mt-1 z-50 min-w-64 rounded-lg bg-dropdown-bg shadow-xl p-2 gap-1 text-header-text"></div>
</div>
</div>
@@ -308,7 +308,7 @@ export class BibleView {
const t = this.t.bible;
const rows = [...this.bookmarks].sort((a, b) => b.created - a.created).map(b => `
<div class="flex items-center rounded px-1 py-1 hover:bg-white/10">
<button class="bookmark-jump flex-1 min-w-0 text-left text-sm truncate cursor-pointer py-1 pr-2 rounded active:bg-white/15" data-id="${b.id}" title="${escapeHtml(b.name)}">${escapeHtml(b.name)}</button>
<button class="bookmark-jump flex-1 min-w-0 text-left text-base truncate cursor-pointer py-1 pr-2 rounded active:bg-white/15" data-id="${b.id}" title="${escapeHtml(b.name)}">${escapeHtml(b.name)}</button>
<div class="shrink-0 flex items-center gap-1 border-l border-gold/25 pl-2 ml-1">
<button class="bookmark-rename w-8 h-8 flex items-center justify-center text-base rounded-md bg-white/5 border border-white/15 active:bg-white/15 cursor-pointer" data-id="${b.id}">✏</button>
<button class="bookmark-delete w-8 h-8 flex items-center justify-center text-base rounded-md bg-white/5 border border-white/15 active:bg-white/15 cursor-pointer" data-id="${b.id}">✕</button>
@@ -317,8 +317,8 @@ export class BibleView {
`).join('');
panel.innerHTML = `
<button id="bookmark-add" class="w-full text-left bg-white/10 border border-gold/40 rounded px-2 py-1.5 text-sm font-bold hover:bg-white/20 cursor-pointer">＋ ${t.bookmarkAdd}</button>
${rows ? `<div class="border-t border-gold/20 my-1"></div>${rows}` : `<p class="text-xs italic opacity-70 px-2 py-1">${t.bookmarkEmpty}</p>`}
<button id="bookmark-add" class="w-full text-left bg-white/10 border border-gold/40 rounded px-2 py-1.5 text-base font-bold hover:bg-white/20 cursor-pointer">＋ ${t.bookmarkAdd}</button>
${rows ? `<div class="border-t border-gold/20 my-1"></div>${rows}` : `<p class="text-sm italic opacity-70 px-2 py-1">${t.bookmarkEmpty}</p>`}
`;
document.getElementById('bookmark-add')?.addEventListener('click', () => {
@@ -506,7 +506,7 @@ export class BibleView {
textEl.innerHTML = `
<div class="text-center py-12">
<p class="text-navy-light mb-4">${this.t.bible.notAvailableOffline}</p>
<p class="text-sm text-navy-light">
<p class="text-base text-navy-light">
${this.t.bible.ensureDataConverted}
</p>
</div>
src/ui/calendar-view.ts
+18 -18
View File
@@ -486,7 +486,7 @@ export class CalendarView {
let col = 0;
gridHtml += this.t.calendar.dayNames.map(d =>
`<div class="text-center text-xs font-bold text-red py-1">${d}</div>`
`<div class="text-center text-sm font-bold text-red py-1">${d}</div>`
).join('');
for (let i = 0; i < firstDow; i++) {
@@ -516,7 +516,7 @@ export class CalendarView {
isToday = date.equals(JDate.today());
}
let classes = 'day-cell p-1 text-center text-sm cursor-pointer rounded transition-colors ';
let classes = 'day-cell p-1 text-center text-base cursor-pointer rounded transition-colors ';
if (isSelected) classes += 'bg-navy text-parchment font-bold ';
else if (isToday) classes += 'bg-gold/20 font-bold ';
else if (dayRank >= 6) classes += 'bg-red/20 text-red font-bold ';
@@ -550,7 +550,7 @@ export class CalendarView {
<button id="next-month" class="p-2 hover:bg-navy/10 rounded">▶</button>
</div>
<div class="grid grid-cols-7 gap-0.5 text-xs">
<div class="grid grid-cols-7 gap-0.5 text-sm">
${gridHtml}
</div>
@@ -560,33 +560,33 @@ export class CalendarView {
<div class="flex-1 p-3 overflow-auto">
<div class="max-w-2xl lg:max-w-3xl xl:max-w-4xl mx-auto">
<h2 class="text-sm font-bold text-red mb-1">
<h2 class="text-base font-bold text-red mb-1">
${julianStr}
</h2>
<div id="day-title" class="mb-2"></div>
<div class="text-sm text-navy-light mb-2">
<div class="text-base text-navy-light mb-2">
${this.t.calendar.gregorianDate[0].toLowerCase() + this.t.calendar.gregorianDate.slice(1)}: ${gregorianStr}
</div>
<div id="astro-panel" class="mb-2 p-2 bg-surface/50 border border-gold/20 rounded-lg text-sm text-navy">
<div id="astro-panel" class="mb-2 p-2 bg-surface/50 border border-gold/20 rounded-lg text-base text-navy">
<span class="text-navy-light italic">${this.t.loading}</span>
</div>
<div id="commemorations-panel" class="mb-2 p-2 bg-surface/50 border border-gold/20 rounded-lg ${fnClass}">
<h3 class="font-bold text-red mb-2">${this.t.calendar.commemorations}</h3>
<p class="text-sm text-navy-light italic">${this.t.loading}</p>
<p class="text-base text-navy-light italic">${this.t.loading}</p>
</div>
<div id="fasting-panel" class="mb-2 p-2 bg-surface/50 border border-gold/20 rounded-lg ${fnClass}">
<h3 class="font-bold text-red mb-2">${this.t.calendar.fastingRule}</h3>
<p class="text-sm italic text-navy-light">${this.t.loading}</p>
<p class="text-base italic text-navy-light">${this.t.loading}</p>
</div>
<div id="readings-panel" class="mb-2 p-2 bg-surface/50 border border-gold/20 rounded-lg ${fnClass}">
<h3 class="font-bold text-red mb-2">${this.t.calendar.readings}</h3>
<p class="text-sm text-navy-light italic">${this.t.loading}</p>
<p class="text-base text-navy-light italic">${this.t.loading}</p>
</div>
<div id="services-panel" class="mb-2 border-t border-gold/20 pt-3"></div>
@@ -652,7 +652,7 @@ export class CalendarView {
if (fastingPanel) {
fastingPanel.innerHTML = `
<h3 class="font-bold text-red mb-2">${this.t.calendar.fastingRule}</h3>
<p class="text-sm">${fastingResult.description || this.t.notAvailable}</p>
<p class="text-base">${fastingResult.description || this.t.notAvailable}</p>
`;
}
@@ -742,7 +742,7 @@ export class CalendarView {
const toneSuffix = tone > 0 ? `; ${this.t.calendar.tone}${tone}` : '';
const feastSuffix = feastName && feastCid !== periodCid ? `; ${feastName}` : '';
const titleColor = feastName ? 'text-red-700' : 'text-navy';
titleEl.innerHTML = `<span class="text-sm font-semibold ${titleColor} italic">${periodName}${toneSuffix}${feastSuffix}</span>`;
titleEl.innerHTML = `<span class="text-base font-semibold ${titleColor} italic">${periodName}${toneSuffix}${feastSuffix}</span>`;
}
if (feastCid) this.skipCids.add(feastCid);
@@ -754,7 +754,7 @@ export class CalendarView {
if (cids.length === 0) {
commPanel.innerHTML = `
<h3 class="font-bold text-red mb-2">${this.t.calendar.commemorations}</h3>
<p class="text-sm text-navy-light italic">${this.t.calendar.noCommemorations}</p>
<p class="text-base text-navy-light italic">${this.t.calendar.noCommemorations}</p>
`;
} else {
const commHtmlParts: string[] = [];
@@ -783,11 +783,11 @@ export class CalendarView {
const icon = this.t.calendar.rankIcons[rank] || '';
const iconHtml = icon ? `<span class="font-slavonic text-lg mr-1">${icon}</span>` : '';
const lifeHtml = lifeText
? `<div class="life-text hidden mt-2 p-3 bg-surface border border-gold/20 rounded text-sm leading-relaxed max-h-60 overflow-y-auto">${lifeText}</div>`
? `<div class="life-text hidden mt-2 p-3 bg-surface border border-gold/20 rounded text-base leading-relaxed max-h-60 overflow-y-auto">${lifeText}</div>`
: '';
commHtmlParts.push(
`<div class="comm-item">
<div class="text-sm font-medium ${lifeText ? 'text-blue-600 underline cursor-pointer hover:text-blue-800' : 'text-navy'}">${iconHtml}${name}${lifeText ? '<span class="comm-chevron text-xs align-middle ml-1 inline-block">▶</span>' : ''}</div>
<div class="text-base font-medium ${lifeText ? 'text-blue-600 underline cursor-pointer hover:text-blue-800' : 'text-navy'}">${iconHtml}${name}${lifeText ? '<span class="comm-chevron text-sm align-middle ml-1 inline-block">▶</span>' : ''}</div>
${lifeHtml}
</div>`
);
@@ -813,7 +813,7 @@ commPanel.addEventListener('click', (e) => {
} else {
commPanel.innerHTML = `
<h3 class="font-bold text-red mb-2">${this.t.calendar.commemorations}</h3>
<p class="text-sm text-navy-light italic">${this.t.calendar.noCommemorations}</p>
<p class="text-base text-navy-light italic">${this.t.calendar.noCommemorations}</p>
`;
}
}
@@ -897,7 +897,7 @@ commPanel.addEventListener('click', (e) => {
if (readingsGroups.length === 0) {
readingsPanel.innerHTML = `
<h3 class="font-bold text-red mb-2">${this.t.calendar.readings}</h3>
<p class="text-sm text-navy-light italic">${this.t.calendar.noReadings}</p>
<p class="text-base text-navy-light italic">${this.t.calendar.noReadings}</p>
`;
} else {
const sorted = [...readingsGroups].sort((a, b) => {
@@ -917,7 +917,7 @@ commPanel.addEventListener('click', (e) => {
refs += item.purpose;
}
}
return `<div class="text-sm text-navy"><strong>${g.service}</strong>${this.t.calendar.colon}${refs}</div>`;
return `<div class="text-base text-navy"><strong>${g.service}</strong>${this.t.calendar.colon}${refs}</div>`;
}).join('');
readingsPanel.innerHTML = `
<h3 class="font-bold text-red mb-2">${this.t.calendar.readings}</h3>
@@ -963,7 +963,7 @@ commPanel.addEventListener('click', (e) => {
const svcView = new ServiceView(svcPanel, this.currentDate, this.language);
await svcView.render(false);
} catch {
svcPanel.innerHTML = `<p class="text-sm text-navy-light italic">${this.t.loading}</p>`;
svcPanel.innerHTML = `<p class="text-base text-navy-light italic">${this.t.loading}</p>`;
}
}
src/ui/menaion-view.ts
+4 -4
View File
@@ -70,7 +70,7 @@ export class MenaionView {
{ id: 'triodion', view: 'triodion', label: this.t.nav.triodion },
].map(item => `
<button
class="sub-nav-chip text-sm transition-colors rounded-lg px-3 py-1
class="sub-nav-chip text-base transition-colors rounded-lg px-3 py-1
${item.id === 'menaion'
? 'border border-gold bg-gold/10 text-navy font-bold'
: 'border border-gold/20 bg-surface/50 text-navy hover:border-gold/50'}"
@@ -119,7 +119,7 @@ export class MenaionView {
const key = `${mm}-${dd}`;
const n = this.index[key];
daysHtml += `
<button class="px-1.5 py-0.5 text-xs rounded border transition-colors
<button class="px-1.5 py-0.5 text-sm rounded border transition-colors
${n ? 'border-gold/40 bg-gold/10 text-navy hover:border-gold cursor-pointer' : 'border-transparent text-navy-light opacity-30 cursor-default'}"
data-date="${key}" ${n ? '' : 'disabled'}>
${d}
@@ -129,9 +129,9 @@ export class MenaionView {
calEl.innerHTML = `
<div class="flex items-center justify-between mb-3">
<button id="menaion-prev" class="text-sm text-navy-light hover:text-navy px-2 py-1">◀</button>
<button id="menaion-prev" class="text-base text-navy-light hover:text-navy px-2 py-1">◀</button>
<span class="text-base font-bold text-navy">${months[month - 1]}</span>
<button id="menaion-next" class="text-sm text-navy-light hover:text-navy px-2 py-1">▶</button>
<button id="menaion-next" class="text-base text-navy-light hover:text-navy px-2 py-1">▶</button>
</div>
<div class="grid gap-1 grid-cols-7 mb-2">
${daysHtml}
src/ui/prayer-view.ts
+3 -3
View File
@@ -221,7 +221,7 @@ export class PrayerView {
<div class="flex flex-wrap gap-2 mb-2">
${subNavItems.map(item => `
<button
class="sub-nav-chip text-sm transition-colors rounded-lg px-3 py-1
class="sub-nav-chip text-base transition-colors rounded-lg px-3 py-1
${this.collection === item.id
? 'border border-gold bg-gold/10 text-navy font-bold'
: 'border border-gold/20 bg-surface/50 text-navy hover:border-gold/50'}"
@@ -229,8 +229,8 @@ export class PrayerView {
>${item.label}</button>
`).join('')}
</div>
<p class="text-navy-light text-sm mb-2">${subtitle}</p>
<select id="prayer-select" class="w-full appearance-none bg-surface text-navy border border-gold/20 rounded-lg px-3 py-2 text-sm mb-3">
<p class="text-navy-light text-base mb-2">${subtitle}</p>
<select id="prayer-select" class="w-full appearance-none bg-surface text-navy border border-gold/20 rounded-lg px-3 py-2 text-base mb-3">
${sections.map(s => `
<option value="${s.id}" ${this.activeSection === s.id ? 'selected' : ''}>${s.name}</option>
`).join('')}
src/ui/service-view.ts
+5 -5
View File
@@ -93,7 +93,7 @@ export class ServiceView {
<div class="flex flex-wrap gap-2 mb-3">
${availableServices.map(s => `
<button
class="service-tab text-sm transition-colors
class="service-tab text-base transition-colors
${this.activeService === s.id
? 'border border-gold bg-gold/10 text-navy font-bold rounded-lg px-3 py-1'
: 'border border-gold/20 bg-surface/50 text-navy hover:border-gold/50 rounded-lg px-3 py-1'}"
@@ -132,9 +132,9 @@ export class ServiceView {
this.container.querySelectorAll('.service-tab').forEach(t => {
const id = t.getAttribute('data-service');
if (id === serviceId) {
t.className = 'service-tab text-sm transition-colors border border-gold bg-gold/10 text-navy font-bold rounded-lg px-3 py-1';
t.className = 'service-tab text-base transition-colors border border-gold bg-gold/10 text-navy font-bold rounded-lg px-3 py-1';
} else {
t.className = 'service-tab text-sm transition-colors border border-gold/20 bg-surface/50 text-navy hover:border-gold/50 rounded-lg px-3 py-1';
t.className = 'service-tab text-base transition-colors border border-gold/20 bg-surface/50 text-navy hover:border-gold/50 rounded-lg px-3 py-1';
}
});
this.loadService(service);
@@ -921,7 +921,7 @@ export class ServiceView {
contentEl.innerHTML = `
<div class="text-center py-8">
<p class="text-navy-light mb-2">${this.t.services.serviceProducedNoOutput}</p>
<p class="text-xs text-navy-light">${nodes.length} ${this.t.services.nodesAssembled}</p>
<p class="text-sm text-navy-light">${nodes.length} ${this.t.services.nodesAssembled}</p>
</div>
`;
}
@@ -929,7 +929,7 @@ export class ServiceView {
contentEl.innerHTML = `
<div class="text-center py-8">
<p class="text-navy-light mb-2">${this.t.services.errorLoading}</p>
<p class="text-xs text-navy-light">${err instanceof Error ? err.message : this.t.error}</p>
<p class="text-sm text-navy-light">${err instanceof Error ? err.message : this.t.error}</p>
</div>
`;
}
src/ui/settings-view.ts
+29 -29
View File
@@ -134,7 +134,7 @@ export class SettingsView {
<!-- Language -->
<div class="mb-6">
<label class="block text-sm font-bold text-navy mb-2">${t.settings.language}</label>
<label class="block text-base font-bold text-navy mb-2">${t.settings.language}</label>
<select id="language" class="w-full border border-gold/30 rounded p-2 bg-surface text-navy">
${LANGUAGES.map(l => `
<option value="${l.code}" ${l.code === this.settings.language ? 'selected' : ''}>
@@ -172,7 +172,7 @@ export class SettingsView {
</div>
<div class="p-3 bg-parchment-dark rounded border border-gold/20">
<p class="text-sm text-navy mb-2">${t.settings.fontPreview}</p>
<p class="text-base text-navy mb-2">${t.settings.fontPreview}</p>
<div id="font-preview" class="text-lg">
Сохрани́ мѧ, гдⷭ҇и, ꙗ҆́кѡ на тѧ̀ ᲂу҆пова́хъ
</div>
@@ -181,7 +181,7 @@ export class SettingsView {
<!-- Font Size -->
<div class="mb-6">
<label class="block text-sm font-bold text-navy mb-2">
<label class="block text-base font-bold text-navy mb-2">
${t.settings.fontSize} <span id="font-size-value">${this.settings.fontSize}px</span>
</label>
<input type="range" id="font-size" min="12" max="32" value="${this.settings.fontSize}"
@@ -195,12 +195,12 @@ export class SettingsView {
<label class="flex items-center gap-2 cursor-pointer">
<input type="radio" name="calendar-type" value="julian" ${this.settings.calendarType === 'julian' ? 'checked' : ''}
class="accent-gold">
<span class="text-sm text-navy">${t.settings.julian}</span>
<span class="text-base text-navy">${t.settings.julian}</span>
</label>
<label class="flex items-center gap-2 cursor-pointer">
<input type="radio" name="calendar-type" value="gregorian" ${this.settings.calendarType === 'gregorian' ? 'checked' : ''}
class="accent-gold">
<span class="text-sm text-navy">${t.settings.gregorian}</span>
<span class="text-base text-navy">${t.settings.gregorian}</span>
</label>
</div>
</div>
@@ -210,21 +210,21 @@ export class SettingsView {
<h3 class="text-lg font-bold text-red mb-3">${t.settings.locationTitle}</h3>
<div class="flex gap-2 mb-2">
<div class="flex-1">
<label class="block text-xs font-bold text-navy mb-1">${t.settings.latitude}</label>
<label class="block text-sm font-bold text-navy mb-1">${t.settings.latitude}</label>
<input type="number" id="latitude" step="0.0001" value="${this.settings.latitude}"
class="w-full border border-gold/30 rounded p-2 bg-surface text-navy text-sm">
class="w-full border border-gold/30 rounded p-2 bg-surface text-navy text-base">
</div>
<div class="flex-1">
<label class="block text-xs font-bold text-navy mb-1">${t.settings.longitude}</label>
<label class="block text-sm font-bold text-navy mb-1">${t.settings.longitude}</label>
<input type="number" id="longitude" step="0.0001" value="${this.settings.longitude}"
class="w-full border border-gold/30 rounded p-2 bg-surface text-navy text-sm">
class="w-full border border-gold/30 rounded p-2 bg-surface text-navy text-base">
</div>
</div>
<div class="flex items-center gap-2">
<button id="request-location" class="bg-navy text-parchment rounded px-3 py-1 text-sm hover:bg-navy-light transition-colors">
<button id="request-location" class="bg-navy text-parchment rounded px-3 py-1 text-base hover:bg-navy-light transition-colors">
${t.settings.requestLocation}
</button>
<span class="text-xs text-navy-light">${t.settings.locationNote}</span>
<span class="text-sm text-navy-light">${t.settings.locationNote}</span>
</div>
</div>
@@ -233,7 +233,7 @@ export class SettingsView {
<h3 class="text-lg font-bold text-red mb-3">${t.settings.bibleSettings}</h3>
<div class="mb-3">
<label class="block text-sm font-bold text-navy mb-1">${t.settings.defaultTranslation}</label>
<label class="block text-base font-bold text-navy mb-1">${t.settings.defaultTranslation}</label>
<select id="default-bible" class="w-full border border-gold/30 rounded p-2 bg-surface text-navy">
<option value="">${t.settings.offlineCalculating}</option>
</select>
@@ -242,13 +242,13 @@ export class SettingsView {
<div class="flex items-center gap-3">
<input type="checkbox" id="show-verses" ${this.settings.showVerseNumbers ? 'checked' : ''}
class="w-4 h-4 accent-gold">
<label for="show-verses" class="text-sm text-navy">${t.settings.showVerseNumbers}</label>
<label for="show-verses" class="text-base text-navy">${t.settings.showVerseNumbers}</label>
</div>
<div class="flex items-center gap-3">
<input type="checkbox" id="verse-newline" ${this.settings.verseNewLine ? 'checked' : ''}
class="w-4 h-4 accent-gold">
<label for="verse-newline" class="text-sm text-navy">${t.settings.verseNewLine}</label>
<label for="verse-newline" class="text-base text-navy">${t.settings.verseNewLine}</label>
</div>
</div>
@@ -257,7 +257,7 @@ export class SettingsView {
<button id="install-pwa" class="hidden w-full bg-navy text-parchment rounded p-3 font-bold hover:bg-navy-light transition-colors">
${t.settings.installPwa}
</button>
<p id="install-hint" class="hidden text-sm text-navy-light mt-2"></p>
<p id="install-hint" class="hidden text-base text-navy-light mt-2"></p>
</div>
<!-- Offline Content -->
@@ -266,11 +266,11 @@ export class SettingsView {
<!-- Language selection for offline -->
<div class="mb-3">
<label class="block text-sm font-bold text-navy mb-2">${t.settings.offlineLangs}</label>
<label class="block text-base font-bold text-navy mb-2">${t.settings.offlineLangs}</label>
<div id="offline-langs" class="flex flex-wrap gap-3">
${LANGUAGES.map(l => `
<label class="flex items-center gap-1 cursor-pointer">
<input type="checkbox" value="${l.code}" class="offline-lang accent-gold"> <span class="text-sm">${l.local}</span>
<input type="checkbox" value="${l.code}" class="offline-lang accent-gold"> <span class="text-base">${l.local}</span>
</label>
`).join('')}
</div>
@@ -278,14 +278,14 @@ export class SettingsView {
<!-- Data type selection -->
<div class="mb-3">
<label class="block text-sm font-bold text-navy mb-2">${t.settings.offlineDataTypes}</label>
<label class="block text-base font-bold text-navy mb-2">${t.settings.offlineDataTypes}</label>
<div id="offline-types" class="flex flex-wrap gap-3">
<label class="flex items-center gap-1 cursor-pointer">
<input type="checkbox" value="calendar" checked class="offline-type accent-gold"> <span class="text-sm">${t.settings.offlineCalendar}</span>
<input type="checkbox" value="calendar" checked class="offline-type accent-gold"> <span class="text-base">${t.settings.offlineCalendar}</span>
</label>
<div id="bible-row" class="flex items-center gap-1 cursor-pointer">
<span class="text-sm">${t.settings.offlineBible} <span id="bible-count" class="text-xs text-navy-light">(0/0)</span></span>
<span id="bible-chevron" class="text-xs text-navy-light hover:text-navy select-none">▶</span>
<span class="text-base">${t.settings.offlineBible} <span id="bible-count" class="text-sm text-navy-light">(0/0)</span></span>
<span id="bible-chevron" class="text-sm text-navy-light hover:text-navy select-none">▶</span>
</div>
</div>
<div id="bible-translations" class="hidden ml-4 mt-1 space-y-1 border-l border-gold/20 pl-3"></div>
@@ -293,17 +293,17 @@ export class SettingsView {
<!-- Storage info and controls -->
<div class="flex items-center justify-between gap-3 mb-2">
<span id="offline-stats" class="text-sm text-navy-light">${t.settings.offlineCalculating}</span>
<span id="offline-stats" class="text-base text-navy-light">${t.settings.offlineCalculating}</span>
<div class="flex gap-2">
<button id="offline-preload" class="bg-gold text-navy rounded px-3 py-1 text-sm font-bold hover:bg-gold-dark transition-colors">${t.settings.offlinePreload}</button>
<button id="offline-clear" class="bg-red text-parchment rounded px-3 py-1 text-sm hover:bg-red-dark transition-colors">${t.settings.offlineClearCache}</button>
<button id="offline-preload" class="bg-gold text-navy rounded px-3 py-1 text-base font-bold hover:bg-gold-dark transition-colors">${t.settings.offlinePreload}</button>
<button id="offline-clear" class="bg-red text-parchment rounded px-3 py-1 text-base hover:bg-red-dark transition-colors">${t.settings.offlineClearCache}</button>
</div>
</div>
<div id="offline-progress" class="hidden">
<div class="w-full bg-parchment-dark rounded-full h-2 mb-1">
<div id="offline-progress-bar" class="bg-gold h-2 rounded-full" style="width: 0%"></div>
</div>
<p id="offline-progress-text" class="text-xs text-navy-light">0 / 0 ${t.settings.offlineDataTypes}</p>
<p id="offline-progress-text" class="text-sm text-navy-light">0 / 0 ${t.settings.offlineDataTypes}</p>
</div>
<pre id="diag-log" class="text-[10px] font-mono text-navy-light whitespace-pre-wrap max-h-32 overflow-auto mt-1"></pre>
</div>
@@ -311,10 +311,10 @@ export class SettingsView {
<!-- About -->
<div class="mt-8 pt-6 border-t border-gold/20">
<h3 class="text-lg font-bold text-red mb-2">${t.settings.about}</h3>
<p class="text-sm text-navy-light">
<p class="text-base text-navy-light">
<a href="https://github.com/anttro/ponomar-pwa" target="_blank" rel="noopener" class="underline hover:text-gold">${t.settings.aboutAppName}</a>${t.settings.aboutText}
</p>
<p class="text-xs text-navy-light mt-2">
<p class="text-sm text-navy-light mt-2">
<a href="https://github.com/typiconman/ponomar" target="_blank" rel="noopener" class="underline hover:text-gold">
${t.settings.aboutLicense}
</a>
@@ -497,14 +497,14 @@ export class SettingsView {
return `
<label class="flex items-center gap-1 cursor-pointer">
<input type="checkbox" value="${v.id}" class="bible-trans accent-gold" ${isCached ? 'checked' : ''}>
<span class="text-xs text-navy">${v.name}</span>
<span class="text-sm text-navy">${v.name}</span>
<span class="text-[10px] text-navy-light">(${OfflineManager.getBibleSize(v.id) || '?'})</span>
</label>
`;
}));
container.innerHTML = `
<div class="mb-1">
<button id="select-all-bible" class="text-xs text-blue-600 underline hover:text-blue-800 cursor-pointer">${t.settings.offlineSelectAll}</button>
<button id="select-all-bible" class="text-sm text-blue-600 underline hover:text-blue-800 cursor-pointer">${t.settings.offlineSelectAll}</button>
</div>
` + html.join('');
document.getElementById('select-all-bible')?.addEventListener('click', () => {