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

fix: Bible reader toolbar & select dark theme; service tab scroll jump

Browse Source 
- Bible reader toolbar: bg-navy->bg-surface/50, selects: appearance-none bg-surface
- Prayer view select: appearance-none bg-surface (match settings style)
- Service view: preserve content height before loading to prevent scroll jump
This commit is contained in:
catarrh committed 2026-08-04 04:42:35 +03:00
1 parent cb63254b2f
commit c10c219736
3 files changed
+11 -7
Download Patch File Download Diff File Expand all files Collapse all files

No files matched your search

src/ui/bible-view.ts
+6 -6
View File
@@ -131,22 +131,22 @@ export class BibleView {
this.container.innerHTML = `
<div class="flex flex-col h-full">
<div class="bg-navy text-parchment p-3 flex items-center gap-4 flex-wrap">
<select id="version-select" class="bg-navy-light text-parchment border border-gold/30 rounded px-2 py-1 text-sm">
<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">
${this.versions.map(v =>
`<option value="${v.id}" ${v.id === this.currentVersion ? 'selected' : ''}>${v.name}</option>`
).join('')}
</select>
<select id="book-select" class="bg-navy-light text-parchment border border-gold/30 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-sm">
${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-navy-light text-parchment border border-gold/30 rounded px-2 py-1 text-sm hover:bg-gold/20 disabled:opacity-40">◀</button>
<select id="chapter-select" class="bg-navy-light text-parchment border border-gold/30 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-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">
</select>
<button id="next-chapter" class="bg-navy-light text-parchment border border-gold/30 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-sm hover:bg-gold/20 disabled:opacity-40">▶</button>
</div>
</div>
src/ui/prayer-view.ts
+1 -1
View File
@@ -226,7 +226,7 @@ export class PrayerView {
`).join('')}
</div>
<p class="text-navy-light text-sm mb-2">${subtitle}</p>
<select id="prayer-select" class="w-full border border-gold/20 bg-surface/50 text-navy rounded-lg px-3 py-2 text-sm mb-3">
<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">
${sections.map(s => `
<option value="${s.id}" ${this.activeSection === s.id ? 'selected' : ''}>${s.name}</option>
`).join('')}
src/ui/service-view.ts
+4
View File
@@ -791,6 +791,10 @@ export class ServiceView {
const contentEl = document.getElementById('service-content');
if (!contentEl) return;
const prevHeight = contentEl.offsetHeight;
if (prevHeight > 0) {
contentEl.style.minHeight = prevHeight + 'px';
}
contentEl.innerHTML = `<p class="text-navy-light italic">${this.t.loading}</p>`;
try {