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

UI: right-align nav, service tabs → chips, liturgical order

Browse Source
This commit is contained in:
catarrh committed 2026-08-01 22:21:54 +03:00
1 parent 8ef5f63300
commit 72e98da182
2 files changed
+28 -29
Download Patch File Download Diff File Expand all files Collapse all files

No files matched your search

src/ui/app.ts
+1 -1
View File
@@ -106,7 +106,7 @@ export class App {
const t = getTranslations(this.settings.language as LanguageCode);
this.container.innerHTML = `
<div class="app-container min-h-screen flex flex-col">
<header class="bg-navy text-parchment p-3 flex items-center justify-between shadow-md">
<header class="bg-navy text-parchment p-3 flex items-center justify-end shadow-md">
<nav class="flex flex-wrap gap-4 text-sm">
<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">
src/ui/service-view.ts
+27 -28
View File
@@ -90,14 +90,13 @@ export class ServiceView {
const tabHtml = `
<h3 class="font-bold text-red mb-3">${this.t.services.title}</h3>
<div class="flex flex-wrap gap-1 mb-6 border-b border-gold/20">
<div class="flex flex-wrap gap-2 mb-6">
${availableServices.map(s => `
${s.divider ? '<span class="self-center mx-1 text-gold/40 select-none" aria-hidden="true">·</span>' : ''}
<button
class="service-tab px-4 py-2 text-sm border-b-2 transition-colors whitespace-nowrap
class="service-tab text-sm transition-colors
${this.activeService === s.id
? 'border-gold text-navy font-bold'
: 'border-transparent text-navy-light hover:text-navy hover:border-gold/50'}"
? 'bg-navy text-parchment font-medium rounded-full px-3 py-1'
: 'text-navy-light hover:bg-navy/10 rounded-full px-3 py-1'}"
data-service="${s.id}"
>${s.name}</button>
`).join('')}
@@ -133,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 px-4 py-2 text-sm border-b-2 transition-colors whitespace-nowrap border-gold text-navy font-bold';
t.className = 'service-tab text-sm transition-colors bg-navy text-parchment font-medium rounded-full px-3 py-1';
} else {
t.className = 'service-tab px-4 py-2 text-sm border-b-2 transition-colors whitespace-nowrap border-transparent text-navy-light hover:text-navy';
t.className = 'service-tab text-sm transition-colors text-navy-light hover:bg-navy/10 rounded-full px-3 py-1';
}
});
this.loadService(service);
@@ -181,6 +180,27 @@ export class ServiceView {
});
}
daily.push({
id: 'vespers', name: this.t.services.serviceNames.vespers, serviceType: 'VESPERS',
template: 'Vespers',
description: this.t.services.serviceDescriptions.vespers,
titleNode: title('Vespers1', this.t.services.serviceNames.vespers, 'VesperSource'),
});
daily.push({
id: 'ninth', name: this.t.services.serviceNames.ninth, serviceType: 'NONE',
template: 'NinthHour',
description: this.t.services.serviceDescriptions.ninth,
titleNode: title('Ninth1', this.t.services.serviceNames.ninth),
});
daily.push({
id: 'matins', name: this.t.services.serviceNames.matins, serviceType: 'MATINS',
template: 'Matins',
description: this.t.services.serviceDescriptions.matins,
titleNode: title('Matins1', this.t.services.serviceNames.matins, 'MatinsSource'),
});
daily.push({
id: 'primes', name: this.t.services.serviceNames.primes, serviceType: 'PRIMES',
template: 'Prime',
@@ -202,27 +222,6 @@ export class ServiceView {
titleNode: title('Sixth1', this.t.services.serviceNames.sixth),
});
daily.push({
id: 'ninth', name: this.t.services.serviceNames.ninth, serviceType: 'NONE',
template: 'NinthHour',
description: this.t.services.serviceDescriptions.ninth,
titleNode: title('Ninth1', this.t.services.serviceNames.ninth),
});
daily.push({
id: 'vespers', name: this.t.services.serviceNames.vespers, serviceType: 'VESPERS',
template: 'Vespers',
description: this.t.services.serviceDescriptions.vespers,
titleNode: title('Vespers1', this.t.services.serviceNames.vespers, 'VesperSource'),
});
daily.push({
id: 'matins', name: this.t.services.serviceNames.matins, serviceType: 'MATINS',
template: 'Matins',
description: this.t.services.serviceDescriptions.matins,
titleNode: title('Matins1', this.t.services.serviceNames.matins, 'MatinsSource'),
});
daily.push({
id: 'liturgy', name: this.t.services.serviceNames.liturgy, serviceType: 'LITURGY',
template: 'DivineLiturgy',