rene/banyaro
1
1
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

Icons: Emoji/Unicode → Phosphor in 8 Dateien + 16 neue Sprite-Icons — SW by-v415

Browse source 
Sprite: arrow-up/down, bug, check-circle, ear, fish, flask, flower,
        medal, question, scissors, tent, ticket, tooth, trend-up/down

poison.js:     TYPEN (❓🎣☠️⚗️⚠️) → question/fish/skull/flask/warning
events.js:     TYPEN (🎪🏆🎓🐕🛍️🥇📌) → ticket/trophy/graduation-cap/dog/shopping-bag/medal/push-pin
dog-profile.js: Pflege-Emojis (✂️💅🦷👂👁🐾🦟🌸❤️🐶) → Phosphor
trainingsplaene.js: (🐶🐕🦮) → dog mit SVG-Icon
health.js:     ▲▼→ → trend-up/trend-down/arrow-right
uebungen.js:   ↑↓→★ → trend-up/trend-down/arrow-right/star
admin.js:      ✓✗ → check/x in HTML-Templates
moderation.js: ✓✗ → check/x Buttons
This commit is contained in:
rene 2026-04-26 09:26:13 +02:00
parent f6586c88ee
commit fd76eddfb9
11 changed files with 81 additions and 43 deletions
Download patch file Download diff file Expand all files Collapse all files

24
backend/static/js/pages/events.js
View file

@ -9,13 +9,13 @@ window.Page_events = (() => {
// Konstanten
// ----------------------------------------------------------
const TYPEN = [
{ id: 'alle', label: 'Alle', icon: '🎪' },
{ id: 'ausstellung', label: 'Ausstellung', icon: '🏆' },
{ id: 'training', label: 'Training', icon: '🎓' },
{ id: 'treffen', label: 'Treffen', icon: '🐕' },
{ id: 'markt', label: 'Markt', icon: '🛍️' },
{ id: 'wettkampf', label: 'Wettkampf', icon: '🥇' },
{ id: 'sonstiges', label: 'Sonstiges', icon: '📌' },
{ id: 'alle', label: 'Alle', icon: 'ticket' },
{ id: 'ausstellung', label: 'Ausstellung', icon: 'trophy' },
{ id: 'training', label: 'Training', icon: 'graduation-cap'},
{ id: 'treffen', label: 'Treffen', icon: 'dog' },
{ id: 'markt', label: 'Markt', icon: 'shopping-bag' },
{ id: 'wettkampf', label: 'Wettkampf', icon: 'medal' },
{ id: 'sonstiges', label: 'Sonstiges', icon: 'push-pin' },
];
const TYP_COLOR = {
@ -88,7 +88,7 @@ window.Page_events = (() => {
<div class="events-filter-bar by-tabs" id="ev-filter-bar">
${TYPEN.map(t => `
<button class="by-tab ${t.id === 'alle' ? 'active' : ''}" data-ev-typ="${t.id}">
${t.icon} ${t.label}
${UI.icon(t.icon)} ${t.label}
</button>
`).join('')}
</div>
@ -215,7 +215,7 @@ window.Page_events = (() => {
${isVdh ? `<span class="ev-vdh-badge" title="Vom VDH importiert">VDH</span>` : ''}
</div>
<div class="events-card-meta">
<span class="events-badge" style="background:${color}20;color:${color}">${typ.icon} ${typ.label}</span>
<span class="events-badge" style="background:${color}20;color:${color}">${UI.icon(typ.icon)} ${typ.label}</span>
${ev.uhrzeit ? `· ${_icon('clock')} ${ev.uhrzeit} Uhr` : ''}
${ev.ort_name ? `· ${_icon('map-pin')} ${UI.escape(ev.ort_name)}` : ''}
</div>
@ -269,7 +269,7 @@ window.Page_events = (() => {
// Events nutzen rotierten Diamant-Marker (nicht Kreis) — UI.leafletMarker() nicht anwendbar
const icon = L.divIcon({
className: '',
html: `<div style="width:32px;height:32px;border-radius:50% 50% 50% 0;background:${color};border:2px solid #fff;display:flex;align-items:center;justify-content:center;font-size:14px;box-shadow:0 2px 6px rgba(0,0,0,0.3);transform:rotate(-45deg)"><span style="transform:rotate(45deg)">${typ.icon}</span></div>`,
html: `<div style="width:32px;height:32px;border-radius:50% 50% 50% 0;background:${color};border:2px solid #fff;display:flex;align-items:center;justify-content:center;font-size:14px;box-shadow:0 2px 6px rgba(0,0,0,0.3);transform:rotate(-45deg);color:#fff"><svg style="width:14px;height:14px;transform:rotate(45deg);fill:currentColor" viewBox="0 0 256 256"><use href="/icons/phosphor.svg#${typ.icon}"></use></svg></div>`,
iconSize: [32, 32], iconAnchor: [16, 32],
});
const popup = `
@ -338,7 +338,7 @@ window.Page_events = (() => {
const body = `
<div style="display:flex;align-items:center;gap:var(--space-2);margin-bottom:var(--space-3)">
<span class="events-badge" style="background:${color}20;color:${color};font-size:var(--text-sm)">${typ.icon} ${typ.label}</span>
<span class="events-badge" style="background:${color}20;color:${color};font-size:var(--text-sm)">${UI.icon(typ.icon)} ${typ.label}</span>
${isVdh ? `<span class="ev-vdh-badge">VDH</span>` : ''}
</div>
<div class="events-detail-row">${_icon('calendar-dots')} ${datum}${ev.uhrzeit ? ' · ' + ev.uhrzeit + ' Uhr' : ''}</div>
@ -484,7 +484,7 @@ window.Page_events = (() => {
<label class="form-label">Typ *</label>
<select class="form-control" name="typ">
${TYPEN.filter(t => t.id !== 'alle').map(t =>
`<option value="${t.id}" ${ev?.typ === t.id ? 'selected' : ''}>${t.icon} ${t.label}</option>`
`<option value="${t.id}" ${ev?.typ === t.id ? 'selected' : ''}>${UI.icon(t.icon)} ${t.label}</option>`
).join('')}
</select>
</div>