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

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

@@ -34,21 +34,18 @@ function OfferCard({ offer }) {
border:'1px solid rgba(255,255,255,0.1)',
display:'flex', flexDirection:'column', gap:8,
}}>
{/* Oben: Bild links + Info rechts */}
<div style={{ display:'flex', gap:10, alignItems:'flex-start' }}>
{/* Bild */}
<div style={{ width:80, height:80, flexShrink:0, background:'#f5f5f5', borderRadius:6, overflow:'hidden', display:'flex', alignItems:'center', justifyContent:'center' }}>
{offer.image
? <img src={offer.image} alt="König Pilsener"
{/* Bild oben, volle Breite */}
{offer.image && (
<div style={{ margin:'-12px -14px 8px -14px', height:160, background:'#f0f0f0', borderRadius:'8px 8px 0 0', overflow:'hidden', display:'flex', alignItems:'center', justifyContent:'center' }}>
<img src={offer.image} alt="König Pilsener"
style={{ width:'100%', height:'100%', objectFit:'contain' }}
onError={e => { e.target.parentElement.style.background='transparent'; e.target.style.display='none'; }}
onError={e => { e.target.parentElement.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' }}>
)}
{/* 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',
@@ -57,20 +54,18 @@ function OfferCard({ offer }) {
{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 }}>
<div style={{ color:'rgba(255,255,255,0.3)', fontFamily:'monospace', fontSize:9 }}>
📍 {offer.address}
</div>
)}
<div style={{ color:'#fff', fontFamily:'monospace', fontSize:13, fontWeight:600 }}>
König Pilsener
</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:9, marginTop:2, lineHeight:1.4 }}>
<div style={{ color:'rgba(255,255,255,0.45)', fontFamily:'monospace', fontSize:10, lineHeight:1.4 }}>
{offer.description}
</div>
)}
</div>
</div>
{/* Preis */}
<div style={{ display:'flex', alignItems:'baseline', gap:8 }}>