Drop icon/slogan config from the package editor and unclip the featured badge
The public package tiles stopped showing per-package icons and taglines, so their admin inputs were dead weight - the IconPicker alone dominated the form. Both fields are gone from the batch editor and the overview table; stored values stay untouched because the fields remain in the save payload, they just can't be edited anymore. The "Empfohlen" badge sat at -top-3, half outside a card that clips via overflow-hidden (rounded corners + road artwork), cutting the badge in half. It now sits at top-2 fully inside the tile, above the name. Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>
This commit is contained in:
parent
34efe79658
commit
b96d2fcd05
2 changed files with 8 additions and 20 deletions
|
|
@ -1,8 +1,6 @@
|
||||||
import { useEffect, useMemo, useState } from 'react';
|
import { useEffect, useMemo, useState } from 'react';
|
||||||
import { Link } from 'react-router-dom';
|
import { Link } from 'react-router-dom';
|
||||||
import { api } from '../../api/client.js';
|
import { api } from '../../api/client.js';
|
||||||
import IconPicker from '../../components/IconPicker.jsx';
|
|
||||||
import DynamicIcon from '../../components/DynamicIcon.jsx';
|
|
||||||
import { PACKAGE_TIERS, tierSortOrder } from '../../constants/packageTiers.js';
|
import { PACKAGE_TIERS, tierSortOrder } from '../../constants/packageTiers.js';
|
||||||
|
|
||||||
const inputCls =
|
const inputCls =
|
||||||
|
|
@ -338,7 +336,6 @@ export default function Packages() {
|
||||||
<td className="px-4 py-2">{pkg.brand_name} {pkg.model_name}</td>
|
<td className="px-4 py-2">{pkg.brand_name} {pkg.model_name}</td>
|
||||||
<td className="px-4 py-2 font-medium text-neutral-800 dark:text-neutral-100">
|
<td className="px-4 py-2 font-medium text-neutral-800 dark:text-neutral-100">
|
||||||
<span className="inline-flex items-center gap-1.5">
|
<span className="inline-flex items-center gap-1.5">
|
||||||
{pkg.icon_name && <DynamicIcon name={pkg.icon_name} className="h-4 w-4 text-brand-600 dark:text-brand-400" />}
|
|
||||||
{pkg.name}
|
{pkg.name}
|
||||||
{pkg.is_featured && (
|
{pkg.is_featured && (
|
||||||
<span className="rounded-full bg-brand-100 px-2 py-0.5 text-xs font-semibold text-brand-700 dark:bg-brand-900/40 dark:text-brand-400">
|
<span className="rounded-full bg-brand-100 px-2 py-0.5 text-xs font-semibold text-brand-700 dark:bg-brand-900/40 dark:text-brand-400">
|
||||||
|
|
@ -474,8 +471,7 @@ export default function Packages() {
|
||||||
onChange={(e) => toggleRow(row.key, e.target.checked)}
|
onChange={(e) => toggleRow(row.key, e.target.checked)}
|
||||||
className="h-5 w-5 rounded border-neutral-300 text-brand-600 focus:ring-brand-500 disabled:opacity-60"
|
className="h-5 w-5 rounded border-neutral-300 text-brand-600 focus:ring-brand-500 disabled:opacity-60"
|
||||||
/>
|
/>
|
||||||
<span className="inline-flex items-center gap-1.5 font-semibold text-neutral-900 dark:text-white">
|
<span className="font-semibold text-neutral-900 dark:text-white">
|
||||||
{row.form.icon_name && <DynamicIcon name={row.form.icon_name} className="h-4 w-4 text-brand-600 dark:text-brand-400" />}
|
|
||||||
{row.tierName ?? row.existing.name}
|
{row.tierName ?? row.existing.name}
|
||||||
</span>
|
</span>
|
||||||
</label>
|
</label>
|
||||||
|
|
@ -548,24 +544,14 @@ export default function Packages() {
|
||||||
</p>
|
</p>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
|
{/* icon_name/tagline bleiben im Form-State und Payload erhalten (Bestandsdaten
|
||||||
|
nicht wegwischen), sind aber nicht mehr konfigurierbar - das Frontend
|
||||||
|
zeigt beides auf den Kacheln nicht mehr an. */}
|
||||||
<details className="rounded-lg border border-neutral-200 dark:border-neutral-800">
|
<details className="rounded-lg border border-neutral-200 dark:border-neutral-800">
|
||||||
<summary className="cursor-pointer select-none px-3 py-2 text-sm font-medium text-neutral-600 dark:text-neutral-300">
|
<summary className="cursor-pointer select-none px-3 py-2 text-sm font-medium text-neutral-600 dark:text-neutral-300">
|
||||||
Weitere Optionen (Icon, Slogan, Preis-Text, Sortierung)
|
Weitere Optionen (Preis-Text, Empfohlen, Sortierung)
|
||||||
</summary>
|
</summary>
|
||||||
<div className="space-y-4 border-t border-neutral-200 p-3 dark:border-neutral-800">
|
<div className="space-y-4 border-t border-neutral-200 p-3 dark:border-neutral-800">
|
||||||
<div>
|
|
||||||
<label className="mb-1 block text-sm font-medium text-neutral-700 dark:text-neutral-300">Icon (optional)</label>
|
|
||||||
<IconPicker value={row.form.icon_name} onChange={(name) => updateRowForm(row.key, { icon_name: name })} />
|
|
||||||
</div>
|
|
||||||
<div>
|
|
||||||
<label className="mb-1 block text-sm font-medium text-neutral-700 dark:text-neutral-300">Kurzer Slogan (optional)</label>
|
|
||||||
<input
|
|
||||||
value={row.form.tagline}
|
|
||||||
onChange={(e) => updateRowForm(row.key, { tagline: e.target.value })}
|
|
||||||
placeholder="z. B. Perfekt für den Einstieg"
|
|
||||||
className={inputCls}
|
|
||||||
/>
|
|
||||||
</div>
|
|
||||||
<div>
|
<div>
|
||||||
<label className="mb-1 block text-sm font-medium text-neutral-700 dark:text-neutral-300">Preis-Text (optional)</label>
|
<label className="mb-1 block text-sm font-medium text-neutral-700 dark:text-neutral-300">Preis-Text (optional)</label>
|
||||||
<input
|
<input
|
||||||
|
|
|
||||||
|
|
@ -152,8 +152,10 @@ function PackageCard({ pkg, tier, tierT, layout, bullets, formatPrice, contactUr
|
||||||
</>
|
</>
|
||||||
)}
|
)}
|
||||||
|
|
||||||
|
{/* top-2 statt -top-3: die Karte hat overflow-hidden (runde Ecken + Straßenbild),
|
||||||
|
ein halb herausragender Badge wuerde oben abgeschnitten. */}
|
||||||
{pkg.is_featured && (
|
{pkg.is_featured && (
|
||||||
<span className="absolute -top-3 left-1/2 z-10 -translate-x-1/2 rounded-full bg-brand-500 px-3 py-1 text-xs font-bold text-white shadow">
|
<span className="absolute top-2 left-1/2 z-10 -translate-x-1/2 rounded-full bg-brand-500 px-3 py-1 text-xs font-bold text-white shadow">
|
||||||
{t('modelPage.featuredBadge')}
|
{t('modelPage.featuredBadge')}
|
||||||
</span>
|
</span>
|
||||||
)}
|
)}
|
||||||
|
|
|
||||||
Loading…
Reference in a new issue