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:
parent
90f1c4e299
commit
05b28fcd8d
4 changed files with 36 additions and 6 deletions
|
|
@ -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 {
|
||||||
|
|
|
||||||
|
|
@ -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 = (() => {
|
||||||
|
|
||||||
|
|
|
||||||
|
|
@ -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'}>
|
||||||
`;
|
`;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
|
||||||
|
|
@ -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
|
||||||
|
|
||||||
|
|
|
||||||
Loading…
Add table
Add a link
Reference in a new issue