fahed/marketing-app
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

fix: brand cards now square-shaped in a denser grid
All checks were successful
Deploy / deploy (push) Successful in 11s
Details

Browse Source 
Grid changed from 3-col to 5-col, cards use aspect-square layout.

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
This commit is contained in:
fahed
2026-03-05 16:55:54 +03:00
parent 0789b7e550
commit 6203bf36e6
1 changed files with 17 additions and 19 deletions
Download Patch File Download Diff File Expand all files Collapse all files

36
client/src/pages/Brands.jsx
View File

@@ -154,17 +154,17 @@ export default function Brands() {
<p className="text-sm text-text-tertiary">{t('brands.noBrands')}</p>
</div>
) : (
<div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-4 stagger-children">
<div className="grid grid-cols-2 sm:grid-cols-3 md:grid-cols-4 lg:grid-cols-5 gap-4 stagger-children">
{brands.map(brand => {
const displayName = lang === 'ar' && brand.name_ar ? brand.name_ar : brand.name
return (
<div
key={getBrandId(brand)}
className={`bg-white rounded-xl border border-border overflow-hidden hover:shadow-md transition-all ${isSuperadminOrManager ? 'cursor-pointer' : ''}`}
className={`bg-white rounded-xl border border-border overflow-hidden hover:shadow-md transition-all aspect-square flex flex-col ${isSuperadminOrManager ? 'cursor-pointer' : ''}`}
onClick={() => isSuperadminOrManager && openEditBrand(brand)}
>
{/* Logo area */}
<div className="h-32 bg-surface-secondary flex items-center justify-center relative">
<div className="flex-1 bg-surface-secondary flex items-center justify-center relative min-h-0">
{brand.logo ? (
<img
src={`${API_BASE}/uploads/${brand.logo}`}
@@ -172,41 +172,39 @@ export default function Brands() {
className="w-full h-full object-contain p-4"
/>
) : (
<div className="text-4xl">
{brand.icon || <Image className="w-12 h-12 text-text-quaternary" />}
<div className="text-3xl">
{brand.icon || <Image className="w-10 h-10 text-text-quaternary" />}
</div>
)}
{isSuperadminOrManager && (
<div className="absolute top-2 right-2 flex gap-1" onClick={e => e.stopPropagation()}>
<div className="absolute top-1.5 right-1.5 flex gap-1 opacity-0 group-hover:opacity-100" onClick={e => e.stopPropagation()}>
<button
onClick={() => openEditBrand(brand)}
className="p-1.5 bg-white/90 hover:bg-white rounded-lg text-text-tertiary hover:text-text-primary shadow-sm"
className="p-1 bg-white/90 hover:bg-white rounded-md text-text-tertiary hover:text-text-primary shadow-sm"
title={t('common.edit')}
>
<Edit2 className="w-3.5 h-3.5" />
<Edit2 className="w-3 h-3" />
</button>
<button
onClick={() => { setBrandToDelete(brand); setShowDeleteModal(true) }}
className="p-1.5 bg-white/90 hover:bg-white rounded-lg text-text-tertiary hover:text-red-500 shadow-sm"
className="p-1 bg-white/90 hover:bg-white rounded-md text-text-tertiary hover:text-red-500 shadow-sm"
title={t('common.delete')}
>
<Trash2 className="w-3.5 h-3.5" />
<Trash2 className="w-3 h-3" />
</button>
</div>
)}
</div>
{/* Card body */}
<div className="p-4">
<div className="flex items-center gap-2 mb-1">
{brand.icon && <span className="text-lg">{brand.icon}</span>}
<h3 className="text-sm font-semibold text-text-primary truncate">{displayName}</h3>
</div>
<div className="flex items-center gap-3 text-[11px] text-text-tertiary">
{brand.name && <span>EN: {brand.name}</span>}
{brand.name_ar && <span>AR: {brand.name_ar}</span>}
<span>Priority: {brand.priority ?? '—'}</span>
<div className="p-3">
<div className="flex items-center gap-1.5 mb-0.5">
{brand.icon && <span className="text-sm">{brand.icon}</span>}
<h3 className="text-xs font-semibold text-text-primary truncate">{displayName}</h3>
</div>
<p className="text-[10px] text-text-tertiary truncate">
{brand.name_ar && lang !== 'ar' ? brand.name_ar : brand.name}
</p>
</div>
</div>
)