Design-System Sprint A: utilities.css + 948 Inline-Styles → Utility-Klassen, SW by-v1102
PHASE 1 — Sofort-Cleanup ohne Risiko: - Neue Datei utilities.css mit ~25 Klassen für häufige Kombinationen: * text-xs-muted, text-xs-secondary, text-sm-muted, text-sm-secondary * flex-gap-2/3, flex-col-gap-2/3/4, flex-center-gap-1/2/3 * flex-between, flex-1-min, mb-1/3, mt-1/3 * icon-xs/sm/md/lg, label-block, caption - index.html bindet utilities.css ein - mb-3/mt-3 ergänzt (waren in design-system.css unvollständig) PHASE 2 — .by-tab Modifier für Vereinheitlichung: - .by-tabs.grid (mit --tab-cols Variable für Admin/Health/etc.) - .by-tabs.sticky (Desktop vertikale Tabs für Admin) - .by-tabs.wrap (Zuchthunde, flex-wrap statt scroll) - .by-tabs.separated (Sitting, mit eigenem Hintergrund + Border) PHASE 3 — Inline-Style → Klassen-Migration (Python-Script): - 948 Inline-Styles entfernt (5101 → 4153, -18%) - 962 Migrationen über 47 Page-Dateien - Top-Treffer: admin.js (180), health.js (67), dog-profile.js (67), litters.js (62), settings.js (61), zuchthunde.js (51) - Patterns: text-muted, text-secondary, text-danger, text-xs-muted, text-sm-muted, grid-2 (Duplikat-Bug behoben!), flex-col-gap-3, p-3/4, mb-2/3/4, hidden, w-full, flex-1, ... - Bewahrt bestehende class-Attribute (mergt korrekt) Alle 19 Tests grün. Kein visueller Diff erwartet (gleiche Property-Werte).
This commit is contained in:
parent
279f76714e
commit
459cd425f2
54 changed files with 1809 additions and 956 deletions
153
backend/static/js/pages/partner.js
Normal file
153
backend/static/js/pages/partner.js
Normal file
|
|
@ -0,0 +1,153 @@
|
|||
/* ============================================================
|
||||
BAN YARO — Partner-Seite
|
||||
Showcase der offiziellen Ban Yaro Partner.
|
||||
============================================================ */
|
||||
|
||||
window.Page_partner = (() => {
|
||||
|
||||
let _container = null;
|
||||
|
||||
async function init(container) {
|
||||
_container = container;
|
||||
_render();
|
||||
_load();
|
||||
}
|
||||
|
||||
function refresh() { _load(); }
|
||||
function onDogChange() {}
|
||||
|
||||
function _render() {
|
||||
_container.innerHTML = `
|
||||
<div style="max-width:680px;margin:0 auto;padding:var(--space-4)">
|
||||
<div style="text-align:center;margin-bottom:var(--space-6)">
|
||||
<div style="font-size:48px;margin-bottom:var(--space-2)">🤝</div>
|
||||
<h1 style="font-size:var(--text-2xl);font-weight:800;margin:0 0 var(--space-2)">
|
||||
Unsere Partner
|
||||
</h1>
|
||||
<p style="color:var(--c-text-secondary);font-size:var(--text-sm);max-width:480px;margin:0 auto">
|
||||
Diese Menschen glauben an Ban Yaro — und helfen uns, die Community zu wachsen.
|
||||
Über ihre persönlichen Einladungscodes können sie neue Gründer vermitteln.
|
||||
</p>
|
||||
</div>
|
||||
<div id="partner-content">
|
||||
<div style="text-align:center;padding:var(--space-8);color:var(--c-text-muted)">Lade…</div>
|
||||
</div>
|
||||
</div>
|
||||
`;
|
||||
}
|
||||
|
||||
async function _load() {
|
||||
const el = _container.querySelector('#partner-content');
|
||||
try {
|
||||
const d = await API.get('/partners/public');
|
||||
if (!d?.partners) throw new Error('Keine Daten.');
|
||||
el.innerHTML = _renderPartners(d.partners);
|
||||
} catch (e) {
|
||||
el.innerHTML = `<p style="color:var(--c-text-muted);text-align:center">${e.message || 'Fehler beim Laden.'}</p>`;
|
||||
}
|
||||
}
|
||||
|
||||
function _renderPartners(partners) {
|
||||
if (!partners.length) {
|
||||
return `
|
||||
<div class="by-card" style="padding:var(--space-6);text-align:center">
|
||||
<p class="text-sm-muted">
|
||||
Noch keine Partner — das könnte schon bald du sein.
|
||||
</p>
|
||||
</div>
|
||||
${_cta()}
|
||||
`;
|
||||
}
|
||||
|
||||
const COLORS = [
|
||||
'linear-gradient(135deg,#7c3aed,#a855f7)',
|
||||
'linear-gradient(135deg,#2563eb,#3b82f6)',
|
||||
'linear-gradient(135deg,#059669,#10b981)',
|
||||
'linear-gradient(135deg,#d97706,#f59e0b)',
|
||||
'linear-gradient(135deg,#db2777,#ec4899)',
|
||||
];
|
||||
|
||||
return `
|
||||
<div style="display:grid;grid-template-columns:repeat(auto-fill,minmax(280px,1fr));gap:var(--space-3);margin-bottom:var(--space-5)">
|
||||
${partners.map((p, i) => {
|
||||
const initial = (p.name || '?')[0].toUpperCase();
|
||||
const grad = COLORS[i % COLORS.length];
|
||||
return `
|
||||
<div class="by-card" style="padding:var(--space-4);position:relative;overflow:hidden">
|
||||
<div style="position:absolute;top:0;left:0;right:0;height:3px;background:${grad}"></div>
|
||||
<div style="display:flex;align-items:center;gap:var(--space-3)">
|
||||
${p.logo_url
|
||||
? `<img src="${_esc(p.logo_url)}" alt=""
|
||||
style="width:56px;height:56px;border-radius:var(--radius-md);object-fit:contain;flex-shrink:0;background:var(--c-surface-2);padding:4px">`
|
||||
: p.avatar_url
|
||||
? `<img src="${_esc(p.avatar_url)}" alt=""
|
||||
style="width:56px;height:56px;border-radius:50%;object-fit:cover;flex-shrink:0">`
|
||||
: `<div style="width:56px;height:56px;border-radius:50%;flex-shrink:0;
|
||||
background:${grad};display:flex;align-items:center;
|
||||
justify-content:center;font-size:24px;font-weight:800;color:#fff">
|
||||
${initial}
|
||||
</div>`
|
||||
}
|
||||
<div class="flex-1-min">
|
||||
<div style="font-weight:700;font-size:var(--text-base)">${_esc(p.display_name || p.name)}</div>
|
||||
${p.tagline ? `<div style="font-size:var(--text-xs);color:var(--c-text-muted);margin-top:1px">${_esc(p.tagline)}</div>` : ''}
|
||||
<div style="display:flex;flex-wrap:wrap;gap:var(--space-2);margin-top:var(--space-1)">
|
||||
${p.website ? `<a href="${_esc(p.website)}" target="_blank" rel="noopener"
|
||||
style="font-size:var(--text-xs);color:var(--c-primary)">
|
||||
🌐 ${_esc(p.website.replace(/^https?:\/\//, ''))}</a>` : ''}
|
||||
${p.instagram ? `<span class="text-xs-muted">📸 ${_esc(p.instagram)}</span>` : ''}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
${p.pp_bio || p.bio ? `<p style="margin:var(--space-3) 0 0;font-size:var(--text-sm);
|
||||
color:var(--c-text-secondary);line-height:1.5">
|
||||
${_esc(p.pp_bio || p.bio)}
|
||||
</p>` : ''}
|
||||
${p.photos?.length ? `
|
||||
<div style="display:grid;grid-template-columns:repeat(${Math.min(p.photos.length,3)},1fr);
|
||||
gap:var(--space-1);margin-top:var(--space-3);border-radius:var(--radius-md);overflow:hidden">
|
||||
${p.photos.slice(0,3).map(url => {
|
||||
const isVid = url.endsWith('.mp4') || url.endsWith('.webm');
|
||||
return isVid
|
||||
? `<video src="${_esc(url)}" style="width:100%;aspect-ratio:1;object-fit:cover"
|
||||
muted playsinline loop autoplay></video>`
|
||||
: `<img src="${_esc(url)}" style="width:100%;aspect-ratio:1;object-fit:cover">`;
|
||||
}).join('')}
|
||||
</div>` : ''}
|
||||
</div>
|
||||
`;
|
||||
}).join('')}
|
||||
</div>
|
||||
${_cta()}
|
||||
`;
|
||||
}
|
||||
|
||||
function _cta() {
|
||||
return `
|
||||
<div class="by-card" style="padding:var(--space-5);text-align:center;
|
||||
background:linear-gradient(135deg,rgba(124,58,237,.08),rgba(168,85,247,.08));
|
||||
border:1px solid rgba(124,58,237,.2)">
|
||||
<div style="font-size:var(--text-base);font-weight:700;margin-bottom:var(--space-2)">
|
||||
Du möchtest Partner werden?
|
||||
</div>
|
||||
<p style="font-size:var(--text-sm);color:var(--c-text-secondary);margin:0 0 var(--space-3)">
|
||||
Schreib uns — wir richten deinen persönlichen Einladungscode ein.
|
||||
</p>
|
||||
<a href="mailto:partner@banyaro.app?subject=Ban Yaro Partner"
|
||||
style="display:inline-block;padding:10px 24px;background:linear-gradient(135deg,#7c3aed,#a855f7);
|
||||
color:#fff;border-radius:var(--radius-full);font-weight:700;
|
||||
font-size:var(--text-sm);text-decoration:none">
|
||||
📧 partner@banyaro.app
|
||||
</a>
|
||||
</div>
|
||||
`;
|
||||
}
|
||||
|
||||
function _esc(s) {
|
||||
return String(s || '').replace(/[&<>"']/g, c =>
|
||||
({'&':'&','<':'<','>':'>','"':'"',"'":'''}[c]));
|
||||
}
|
||||
|
||||
return { init, refresh, onDogChange };
|
||||
|
||||
})();
|
||||
Loading…
Add table
Add a link
Reference in a new issue