Dicken/dickendock
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases 1 Wiki Activity

fix: KöPi - Bild volle Breite oben in der Karte

Browse Source
This commit is contained in:
Dicken
2026-07-09 10:17:17 +02:00
parent 51aa706856
commit 682d79b42d
1 changed files with 30 additions and 35 deletions
Download Patch File Download Diff File Expand all files Collapse all files

65
frontend/src/tools/koepi.jsx
View File

@@ -34,43 +34,38 @@ function OfferCard({ offer }) {
border:'1px solid rgba(255,255,255,0.1)', border:'1px solid rgba(255,255,255,0.1)',
display:'flex', flexDirection:'column', gap:8, display:'flex', flexDirection:'column', gap:8,
}}> }}>
{/* Oben: Bild links + Info rechts */} {/* Bild oben, volle Breite */}
<div style={{ display:'flex', gap:10, alignItems:'flex-start' }}> {offer.image && (
{/* Bild */} <div style={{ margin:'-12px -14px 8px -14px', height:160, background:'#f0f0f0', borderRadius:'8px 8px 0 0', overflow:'hidden', display:'flex', alignItems:'center', justifyContent:'center' }}>
<div style={{ width:80, height:80, flexShrink:0, background:'#f5f5f5', borderRadius:6, overflow:'hidden', display:'flex', alignItems:'center', justifyContent:'center' }}> <img src={offer.image} alt="König Pilsener"
{offer.image style={{ width:'100%', height:'100%', objectFit:'contain' }}
? <img src={offer.image} alt="König Pilsener" onError={e => { e.target.parentElement.style.display='none'; }}
style={{ width:'100%', height:'100%', objectFit:'contain' }} />
onError={e => { e.target.parentElement.style.background='transparent'; e.target.style.display='none'; }}
/>
: <span style={{ fontSize:28 }}>🍺</span>
}
</div>
{/* Info */}
<div style={{ flex:1, minWidth:0 }}>
<div style={{ display:'flex', alignItems:'center', gap:6, marginBottom:3, flexWrap:'wrap' }}>
<span style={{
background:`${color}22`, border:`1px solid ${color}55`,
borderRadius:4, padding:'2px 7px',
color, fontFamily:'monospace', fontSize:10, fontWeight:700,
}}>{offer.retailer}</span>
{offer.oldPrice && <span style={{ background:'#e2001a', color:'#fff', borderRadius:4, padding:'2px 6px', fontSize:9, fontFamily:'monospace', fontWeight:700 }}>-29%</span>}
</div>
{offer.address && (
<div style={{ color:'rgba(255,255,255,0.3)', fontFamily:'monospace', fontSize:9, marginBottom:3 }}>
📍 {offer.address}
</div>
)}
<div style={{ color:'#fff', fontFamily:'monospace', fontSize:13, fontWeight:600 }}>
König Pilsener
</div>
{offer.description && (
<div style={{ color:'rgba(255,255,255,0.45)', fontFamily:'monospace', fontSize:9, marginTop:2, lineHeight:1.4 }}>
{offer.description}
</div>
)}
</div> </div>
)}
{/* Händler + Adresse */}
<div style={{ display:'flex', alignItems:'center', gap:6, flexWrap:'wrap' }}>
<span style={{
background:`${color}22`, border:`1px solid ${color}55`,
borderRadius:4, padding:'2px 7px',
color, fontFamily:'monospace', fontSize:10, fontWeight:700,
}}>{offer.retailer}</span>
{offer.oldPrice && <span style={{ background:'#e2001a', color:'#fff', borderRadius:4, padding:'2px 6px', fontSize:9, fontFamily:'monospace', fontWeight:700 }}>-29%</span>}
</div> </div>
{offer.address && (
<div style={{ color:'rgba(255,255,255,0.3)', fontFamily:'monospace', fontSize:9 }}>
📍 {offer.address}
</div>
)}
{/* Name + Beschreibung */}
<div style={{ color:'#fff', fontFamily:'monospace', fontSize:13, fontWeight:600 }}>König Pilsener</div>
{offer.description && (
<div style={{ color:'rgba(255,255,255,0.45)', fontFamily:'monospace', fontSize:10, lineHeight:1.4 }}>
{offer.description}
</div>
)}
{/* Preis */} {/* Preis */}
<div style={{ display:'flex', alignItems:'baseline', gap:8 }}> <div style={{ display:'flex', alignItems:'baseline', gap:8 }}>