Feature: Aktivitäten in Freunde-Ansicht anklickbar

- diary → Tagebuch, health → Gesundheit, walk → Gassi-Treffen
- Items als <button> für iOS-Tap-Zuverlässigkeit
- fr-activity-item--link mit Hover/Tap-Stil
This commit is contained in:
rene 2026-04-19 10:19:44 +02:00
parent 90f1c4e299
commit 05b28fcd8d
4 changed files with 36 additions and 6 deletions

View file

@ -5473,6 +5473,19 @@ html.modal-open {
background: var(--c-surface); background: var(--c-surface);
border-radius: var(--radius-lg); border-radius: var(--radius-lg);
border: 1px solid var(--c-border); border: 1px solid var(--c-border);
width: 100%;
text-align: left;
font: inherit;
}
.fr-activity-item--link {
cursor: pointer;
transition: background var(--transition-fast);
-webkit-tap-highlight-color: transparent;
}
.fr-activity-item--link:hover,
.fr-activity-item--link:active {
background: var(--c-surface-2);
border-color: var(--c-primary-subtle);
} }
.fr-activity-avatar-wrap { .fr-activity-avatar-wrap {

View file

@ -3,7 +3,7 @@
Router, State-Management, Navigation, Initialisierung. Router, State-Management, Navigation, Initialisierung.
============================================================ */ ============================================================ */
const APP_VER = '211'; // ← bei jedem Deploy mit Frontend-Änderungen erhöhen const APP_VER = '212'; // ← bei jedem Deploy mit Frontend-Änderungen erhöhen
const App = (() => { const App = (() => {

View file

@ -246,11 +246,26 @@ window.Page_friends = (() => {
_renderActivity(_activityAll); _renderActivity(_activityAll);
}); });
}); });
el.querySelectorAll('.fr-activity-item[data-nav]').forEach(btn => {
btn.addEventListener('click', () => {
const page = btn.dataset.nav;
if (page) App.navigate(page);
});
});
} }
const _ACTIVITY_PAGE = {
diary: 'diary',
health: 'health',
walk: 'walks',
new_dog: null,
};
function _activityItem(item) { function _activityItem(item) {
const ago = _timeAgo(item.created_at); const ago = _timeAgo(item.created_at);
const text = item.text || ''; const text = item.text || '';
const page = _ACTIVITY_PAGE[item.type] || '';
const dogLabel = item.dog_name const dogLabel = item.dog_name
? `<span class="fr-activity-dog">${_esc(item.dog_name)}</span>` ? `<span class="fr-activity-dog">${_esc(item.dog_name)}</span>`
: ''; : '';
@ -265,8 +280,10 @@ window.Page_friends = (() => {
${_esc((item.user_name || '?')[0].toUpperCase())} ${_esc((item.user_name || '?')[0].toUpperCase())}
</div>`; </div>`;
const tag = page ? `button type="button"` : `div`;
return ` return `
<div class="fr-activity-item"> <${tag} class="fr-activity-item${page ? ' fr-activity-item--link' : ''}"
${page ? `data-nav="${page}"` : ''}>
<div class="fr-activity-avatar-wrap"> <div class="fr-activity-avatar-wrap">
${avatar} ${avatar}
<div class="fr-activity-icon-badge"> <div class="fr-activity-icon-badge">
@ -283,7 +300,7 @@ window.Page_friends = (() => {
${text ? `<div class="fr-activity-text">${_esc(text)}</div>` : ''} ${text ? `<div class="fr-activity-text">${_esc(text)}</div>` : ''}
<div class="fr-activity-time">${_esc(ago)}</div> <div class="fr-activity-time">${_esc(ago)}</div>
</div> </div>
</div> </${page ? 'button' : 'div'}>
`; `;
} }

View file

@ -3,7 +3,7 @@
Offline-Cache + Push Notifications + Tile-Cache Offline-Cache + Push Notifications + Tile-Cache
============================================================ */ ============================================================ */
const CACHE_VERSION = 'by-v234'; const CACHE_VERSION = 'by-v235';
const CACHE_STATIC = `${CACHE_VERSION}-static`; const CACHE_STATIC = `${CACHE_VERSION}-static`;
const CACHE_TILES = 'ban-yaro-tiles-v1'; // bleibt über SW-Updates erhalten const CACHE_TILES = 'ban-yaro-tiles-v1'; // bleibt über SW-Updates erhalten