mirror of
https://github.com/R0m1k3/PleinR.git
synced 2026-10-11 17:27:54 +02:00
Promotions : le logo revient à gauche du nom de l'adhérent
L'angle de la carte est rendu à la catégorie ; la pastille du commerce se place devant son nom, en pied de carte, là où on lit déjà qui propose l'offre. La période de validité passe sous le nom, dans le même bloc. Appliqué à la carte d'accueil, à l'aperçu en direct de l'espace adhérent et à la carte de modération. Retiré de la carte de la fiche adhérent : elle n'y affiche pas de nom de commerce, et le logo figure déjà en tête de page. Co-Authored-By: Claude Opus 5 <noreply@anthropic.com> Claude-Session: https://claude.ai/code/session_01QXNXRC4j5VLfKvpyyisrnb
This commit is contained in:
4 files changed
+42
-48
No files matched your search
@@ -6,7 +6,6 @@ import { SiteHeader } from "@/components/SiteHeader";
|
||||
import { SiteFooter } from "@/components/SiteFooter";
|
||||
import { VitrineImage } from "@/components/VitrineImage";
|
||||
import { PromoImage } from "@/components/PromoImage";
|
||||
import { MemberAvatar } from "@/components/MemberAvatar";
|
||||
import { JsonLd } from "@/components/JsonLd";
|
||||
import { getMemberLivePromotions, getPublicMember } from "@/lib/queries";
|
||||
import {
|
||||
@@ -432,11 +431,6 @@ export default async function FicheAdherentPage({
|
||||
<div style={{ position: "relative", aspectRatio: "1 / 1", background: STRIPE_WARM, overflow: "hidden", display: "flex", alignItems: "center", justifyContent: "center" }}>
|
||||
{p.imageUrl && <PromoImage src={p.imageUrl} alt={p.title} />}
|
||||
{!p.imageUrl && (<span style={{ fontSize: 10, letterSpacing: "0.12em", color: "#a99c82", textTransform: "uppercase" }}>photo de l'offre</span>)}
|
||||
{/* Même repère que sur l'accueil : le logo du commerce
|
||||
dans l'angle haut-gauche de la carte. */}
|
||||
<span style={{ position: "absolute", top: 10, left: 10 }}>
|
||||
<MemberAvatar name={member.name} logoUrl={member.logoUrl} size={32} accent={accent} />
|
||||
</span>
|
||||
{p.badge && (
|
||||
<span className="font-display" style={{ position: "absolute", top: 0, right: 0, background: badgeColor(p.badge), color: "#fff", fontWeight: 800, fontSize: 16, padding: "6px 13px", borderRadius: "0 0 0 14px" }}>{p.badge}</span>
|
||||
)}
|
||||
|
||||
@@ -357,13 +357,9 @@ export function MemberSpaceForm({
|
||||
{badge}
|
||||
</span>
|
||||
)}
|
||||
{/* Même composition que sur le site : logo puis catégorie. */}
|
||||
<div style={{ position: "absolute", top: 12, left: 12, display: "flex", alignItems: "center", gap: 8 }}>
|
||||
<MemberAvatar name={memberName} logoUrl={memberLogoUrl} size={34} />
|
||||
<span style={{ background: "#9a6638", color: "#fff", borderRadius: 999, padding: "5px 12px", fontSize: 11, fontWeight: 700 }}>
|
||||
{cat}
|
||||
</span>
|
||||
</div>
|
||||
<span style={{ position: "absolute", top: 12, left: 12, background: "#9a6638", color: "#fff", borderRadius: 999, padding: "5px 12px", fontSize: 11, fontWeight: 700 }}>
|
||||
{cat}
|
||||
</span>
|
||||
</div>
|
||||
<div style={{ padding: "17px 18px 18px" }}>
|
||||
<h3 className="font-display" style={{ fontWeight: 700, fontSize: 18, margin: "0 0 5px", color: "#26201a" }}>
|
||||
@@ -377,7 +373,10 @@ export function MemberSpaceForm({
|
||||
<div style={{ fontSize: 12, color: "#a99c82", marginBottom: 12 }}>{validity}</div>
|
||||
)}
|
||||
<div style={{ display: "flex", alignItems: "center", justifyContent: "space-between", borderTop: "1px solid #f0e8d6", paddingTop: 12 }}>
|
||||
<div style={{ fontSize: 13, fontWeight: 700, color: "#3c3322" }}>{memberName}</div>
|
||||
<div style={{ display: "flex", alignItems: "center", gap: 9, minWidth: 0 }}>
|
||||
<MemberAvatar name={memberName} logoUrl={memberLogoUrl} size={28} />
|
||||
<span style={{ fontSize: 13, fontWeight: 700, color: "#3c3322" }}>{memberName}</span>
|
||||
</div>
|
||||
<span style={{ color: "#2C6FB3", fontWeight: 700, fontSize: 13 }}>Voir l'offre →</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@@ -159,15 +159,11 @@ export default async function PromotionsPage() {
|
||||
}}
|
||||
>
|
||||
{p.imageUrl && <PromoImage src={p.imageUrl} alt={p.title ?? ""} />}
|
||||
{/* Comme sur le site : logo de l'adhérent puis catégorie. */}
|
||||
<div style={{ position: "absolute", top: 10, left: 10, display: "flex", alignItems: "center", gap: 7 }}>
|
||||
<MemberAvatar name={p.memberName ?? ""} logoUrl={p.memberLogoUrl} size={30} />
|
||||
{p.category && (
|
||||
<span style={{ background: "#9a6638", color: "#fff", borderRadius: 999, padding: "4px 11px", fontSize: 11, fontWeight: 700 }}>
|
||||
{p.category}
|
||||
</span>
|
||||
)}
|
||||
</div>
|
||||
{p.category && (
|
||||
<span style={{ position: "absolute", top: 10, left: 10, background: "#9a6638", color: "#fff", borderRadius: 999, padding: "4px 11px", fontSize: 11, fontWeight: 700 }}>
|
||||
{p.category}
|
||||
</span>
|
||||
)}
|
||||
<span
|
||||
style={{
|
||||
position: "absolute",
|
||||
@@ -188,8 +184,9 @@ export default async function PromotionsPage() {
|
||||
<h3 className="font-display" style={{ fontWeight: 700, fontSize: 15.5, margin: "0 0 4px", color: "#26201a" }}>
|
||||
{p.title}
|
||||
</h3>
|
||||
<div style={{ fontSize: 12.5, color: "#9a6638", fontWeight: 600, marginBottom: 8 }}>
|
||||
{p.memberName}
|
||||
<div style={{ display: "flex", alignItems: "center", gap: 8, marginBottom: 8 }}>
|
||||
<MemberAvatar name={p.memberName ?? ""} logoUrl={p.memberLogoUrl} size={24} />
|
||||
<span style={{ fontSize: 12.5, color: "#9a6638", fontWeight: 600 }}>{p.memberName}</span>
|
||||
</div>
|
||||
<p style={{ margin: "0 0 12px", fontSize: 12.5, color: "#8c8068", lineHeight: 1.45, flex: 1 }}>
|
||||
{p.text}
|
||||
|
||||
+27
-23
@@ -285,25 +285,23 @@ export default async function AccueilPage() {
|
||||
{p.badge}
|
||||
</span>
|
||||
)}
|
||||
{/* Angle haut-gauche : le logo de l'adhérent d'abord, la
|
||||
catégorie ensuite — on identifie le commerce avant l'offre. */}
|
||||
<div style={{ position: "absolute", top: 12, left: 12, display: "flex", alignItems: "center", gap: 8 }}>
|
||||
<MemberAvatar name={p.memberName ?? ""} logoUrl={p.memberLogoUrl} size={34} />
|
||||
{p.category && (
|
||||
<span
|
||||
style={{
|
||||
background: "#9a6638",
|
||||
color: "#fff",
|
||||
borderRadius: 999,
|
||||
padding: "5px 12px",
|
||||
fontSize: 11,
|
||||
fontWeight: 700,
|
||||
}}
|
||||
>
|
||||
{p.category}
|
||||
</span>
|
||||
)}
|
||||
</div>
|
||||
{p.category && (
|
||||
<span
|
||||
style={{
|
||||
position: "absolute",
|
||||
top: 12,
|
||||
left: 12,
|
||||
background: "#9a6638",
|
||||
color: "#fff",
|
||||
borderRadius: 999,
|
||||
padding: "5px 12px",
|
||||
fontSize: 11,
|
||||
fontWeight: 700,
|
||||
}}
|
||||
>
|
||||
{p.category}
|
||||
</span>
|
||||
)}
|
||||
</div>
|
||||
<div style={{ padding: "17px 18px 18px", display: "flex", flexDirection: "column", flex: 1 }}>
|
||||
<h3 className="font-display" style={{ fontWeight: 700, fontSize: 18, margin: "0 0 5px", color: "#26201a" }}>
|
||||
@@ -318,10 +316,16 @@ export default async function AccueilPage() {
|
||||
paddingTop: 12,
|
||||
}}
|
||||
>
|
||||
<div style={{ fontSize: 13, fontWeight: 700, color: "#3c3322" }}>{p.memberName}</div>
|
||||
{formatValidity(p) && (
|
||||
<div style={{ fontSize: 11.5, color: "#a99c82" }}>{formatValidity(p)}</div>
|
||||
)}
|
||||
{/* Le logo du commerce juste à gauche de son nom. */}
|
||||
<div style={{ display: "flex", alignItems: "center", gap: 9 }}>
|
||||
<MemberAvatar name={p.memberName ?? ""} logoUrl={p.memberLogoUrl} size={28} />
|
||||
<div style={{ minWidth: 0 }}>
|
||||
<div style={{ fontSize: 13, fontWeight: 700, color: "#3c3322" }}>{p.memberName}</div>
|
||||
{formatValidity(p) && (
|
||||
<div style={{ fontSize: 11.5, color: "#a99c82" }}>{formatValidity(p)}</div>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</Link>
|
||||
|
||||
Reference in new issue
Block a user