flatten library menu, sub-nav chips with emoji on pages
This commit is contained in:
catarrh committed
1 parent
0ff2ef08fb
commit
b14ee677dc
3 files changed
+58
-42
No files matched your search
+9
-19
@@ -124,25 +124,15 @@ export class App {
|
||||
<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>
|
||||
<div class="absolute left-0 top-full mt-1 z-50 min-w-56 rounded-lg bg-navy-light 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">${t.nav.bible}</a>
|
||||
<details class="nav-group">
|
||||
<summary class="cursor-pointer list-none hover:text-gold transition-colors px-2 py-1 flex items-center gap-1">${t.nav.service} <span class="text-xs">▸</span></summary>
|
||||
<div class="ml-2 flex flex-col gap-1">
|
||||
<a href="#horologion" class="nav-link hover:text-gold transition-colors px-2 py-1 text-sm" data-view="horologion">${t.nav.horologion}</a>
|
||||
<a href="#sbornik" class="nav-link hover:text-gold transition-colors px-2 py-1 text-sm" data-view="sbornik">${t.nav.sbornik}</a>
|
||||
<a href="#prayer" class="nav-link hover:text-gold transition-colors px-2 py-1 text-sm" data-view="prayer">${t.nav.prayer}</a>
|
||||
<a href="#akathists" class="nav-link hover:text-gold transition-colors px-2 py-1 text-sm" data-view="akathists">${t.nav.akathists}</a>
|
||||
<a href="#parimii" class="nav-link hover:text-gold transition-colors px-2 py-1 text-sm" data-view="parimii">${t.nav.parimii}</a>
|
||||
<a href="#paraclete" class="nav-link hover:text-gold transition-colors px-2 py-1 text-sm" data-view="paraclete">${t.nav.paraclete}</a>
|
||||
<a href="#irmologion" class="nav-link hover:text-gold transition-colors px-2 py-1 text-sm" data-view="irmologion">${t.nav.irmologion}</a>
|
||||
</div>
|
||||
</details>
|
||||
<details class="nav-group">
|
||||
<summary class="cursor-pointer list-none hover:text-gold transition-colors px-2 py-1 flex items-center gap-1">${t.nav.festal} <span class="text-xs">▸</span></summary>
|
||||
<div class="ml-2 flex flex-col gap-1">
|
||||
<a href="#menaion" class="nav-link hover:text-gold transition-colors px-2 py-1 text-sm" data-view="menaion">${t.nav.menaion}</a>
|
||||
<a href="#triodion" class="nav-link hover:text-gold transition-colors px-2 py-1 text-sm" data-view="triodion">${t.nav.triodion}</a>
|
||||
</div>
|
||||
</details>
|
||||
<a href="#prayer" class="nav-link hover:text-gold transition-colors px-2 py-1" data-view="prayer">${t.nav.prayer}</a>
|
||||
<a href="#akathists" class="nav-link hover:text-gold transition-colors px-2 py-1" data-view="akathists">${t.nav.akathists}</a>
|
||||
<a href="#horologion" class="nav-link hover:text-gold transition-colors px-2 py-1" data-view="horologion">${t.nav.horologion}</a>
|
||||
<a href="#sbornik" class="nav-link hover:text-gold transition-colors px-2 py-1" data-view="sbornik">${t.nav.sbornik}</a>
|
||||
<a href="#parimii" class="nav-link hover:text-gold transition-colors px-2 py-1" data-view="parimii">${t.nav.parimii}</a>
|
||||
<a href="#paraclete" class="nav-link hover:text-gold transition-colors px-2 py-1" data-view="paraclete">${t.nav.paraclete}</a>
|
||||
<a href="#irmologion" class="nav-link hover:text-gold transition-colors px-2 py-1" data-view="irmologion">${t.nav.irmologion}</a>
|
||||
<a href="#menaion" class="nav-link hover:text-gold transition-colors px-2 py-1" data-view="menaion">${t.nav.menaion}</a>
|
||||
<a href="#triodion" class="nav-link hover:text-gold transition-colors px-2 py-1" data-view="triodion">${t.nav.triodion}</a>
|
||||
</div>
|
||||
</details>
|
||||
<a href="#settings" class="nav-link hover:text-gold transition-colors" data-view="settings">${t.nav.settings}</a>
|
||||
|
||||
+13
-1
@@ -56,7 +56,10 @@ export class MenaionView {
|
||||
|
||||
this.container.innerHTML = `
|
||||
<div class="p-6 max-w-4xl xl:max-w-6xl mx-auto">
|
||||
<h2 class="text-2xl font-bold text-red mb-2">${this.t.menaion.title}</h2>
|
||||
<div class="flex flex-wrap gap-2 mb-4">
|
||||
<button class="sub-nav-chip text-sm transition-colors rounded-lg px-3 py-1 border border-gold bg-gold/10 text-navy font-bold">${this.t.nav.menaion}</button>
|
||||
<button class="sub-nav-chip text-sm transition-colors rounded-lg px-3 py-1 border border-gold/20 bg-white/50 text-navy hover:border-gold/50" data-view="triodion">${this.t.nav.triodion}</button>
|
||||
</div>
|
||||
<div id="menaion-calendar"></div>
|
||||
<div id="menaion-content" class="bg-white/50 border border-gold/20 rounded-lg p-6 min-h-[300px]">
|
||||
<p class="text-navy-light italic">${this.t.prayer.selectSection}</p>
|
||||
@@ -65,6 +68,15 @@ export class MenaionView {
|
||||
`;
|
||||
|
||||
this.renderCalendar(this.currentMonth);
|
||||
this.setupChips();
|
||||
}
|
||||
|
||||
private setupChips() {
|
||||
this.container.querySelectorAll('.sub-nav-chip[data-view]').forEach(btn => {
|
||||
btn.addEventListener('click', () => {
|
||||
window.location.hash = btn.getAttribute('data-view')!;
|
||||
});
|
||||
});
|
||||
}
|
||||
|
||||
private renderCalendar(month: number) {
|
||||
|
||||
+36
-22
@@ -190,34 +190,41 @@ export class PrayerView {
|
||||
|
||||
async render() {
|
||||
const sections = this.getSections();
|
||||
const isAkathists = this.collection === 'akathists';
|
||||
const isParimii = this.collection === 'parimii';
|
||||
const isHorologion = this.collection === 'horologion';
|
||||
const isSbornik = this.collection === 'sbornik';
|
||||
const isParaclete = this.collection === 'paraclete';
|
||||
const isIrmologion = this.collection === 'irmologion';
|
||||
const isTriodion = this.collection === 'triodion';
|
||||
const title = isTriodion ? this.t.triodion.title
|
||||
: isAkathists ? this.t.akathists.title
|
||||
: isParimii ? this.t.parimii.title
|
||||
: isHorologion ? this.t.horologion.title
|
||||
: isSbornik ? this.t.sbornik.title
|
||||
: isParaclete ? this.t.paraclete.title
|
||||
: isIrmologion ? this.t.irmologion.title
|
||||
: this.t.prayer.title;
|
||||
const subtitle = isTriodion ? this.t.triodion.subtitle
|
||||
: isAkathists ? this.t.akathists.subtitle
|
||||
: isParimii ? this.t.parimii.subtitle
|
||||
: isHorologion ? this.t.horologion.subtitle
|
||||
: isSbornik ? this.t.sbornik.subtitle
|
||||
: isParaclete ? this.t.paraclete.subtitle
|
||||
: isIrmologion ? this.t.irmologion.subtitle
|
||||
: this.collection === 'akathists' ? this.t.akathists.subtitle
|
||||
: this.collection === 'parimii' ? this.t.parimii.subtitle
|
||||
: this.collection === 'horologion' ? this.t.horologion.subtitle
|
||||
: this.collection === 'sbornik' ? this.t.sbornik.subtitle
|
||||
: this.collection === 'paraclete' ? this.t.paraclete.subtitle
|
||||
: this.collection === 'irmologion' ? this.t.irmologion.subtitle
|
||||
: this.t.prayer.subtitle;
|
||||
|
||||
const subNavItems: { id: string; view: string; label: string }[] = [
|
||||
{ id: 'prayer', view: 'prayer', label: this.t.nav.prayer },
|
||||
{ id: 'akathists', view: 'akathists', label: this.t.nav.akathists },
|
||||
{ id: 'horologion', view: 'horologion', label: this.t.nav.horologion },
|
||||
{ id: 'sbornik', view: 'sbornik', label: this.t.nav.sbornik },
|
||||
{ id: 'parimii', view: 'parimii', label: this.t.nav.parimii },
|
||||
{ id: 'paraclete', view: 'paraclete', label: this.t.nav.paraclete },
|
||||
{ id: 'irmologion', view: 'irmologion', label: this.t.nav.irmologion },
|
||||
{ id: 'triodion', view: 'triodion', label: this.t.nav.triodion },
|
||||
];
|
||||
|
||||
this.container.innerHTML = `
|
||||
<div class="p-6 max-w-4xl xl:max-w-6xl mx-auto">
|
||||
<h2 class="text-2xl font-bold text-red mb-2">${title}</h2>
|
||||
<p class="text-navy-light mb-4">${subtitle}</p>
|
||||
<div class="flex flex-wrap gap-2 mb-4">
|
||||
${subNavItems.map(item => `
|
||||
<button
|
||||
class="sub-nav-chip text-sm 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-white/50 text-navy hover:border-gold/50'}"
|
||||
data-view="${item.view}"
|
||||
>${item.label}</button>
|
||||
`).join('')}
|
||||
</div>
|
||||
<p class="text-navy-light text-sm mb-4">${subtitle}</p>
|
||||
<select id="prayer-select" class="w-full border border-gold/20 bg-white/50 text-navy rounded-lg px-3 py-2 text-sm mb-6">
|
||||
${sections.map(s => `
|
||||
<option value="${s.id}" ${this.activeSection === s.id ? 'selected' : ''}>${s.name}</option>
|
||||
@@ -229,6 +236,13 @@ export class PrayerView {
|
||||
</div>
|
||||
`;
|
||||
|
||||
this.container.querySelectorAll('.sub-nav-chip').forEach(btn => {
|
||||
btn.addEventListener('click', () => {
|
||||
const view = btn.getAttribute('data-view')!;
|
||||
window.location.hash = view;
|
||||
});
|
||||
});
|
||||
|
||||
document.getElementById('prayer-select')?.addEventListener('change', (e) => {
|
||||
const id = (e.target as HTMLSelectElement).value;
|
||||
this.activeSection = id;
|
||||
|
||||
Reference in new issue
Block a user