admin/nahodka-front
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

added frame on posts

Browse Source
This commit is contained in:
SlimusMinus
2026-06-30 00:26:41 +03:00
parent 3b1f475c0f
commit b3bf41216c
2 changed files with 60 additions and 2 deletions
Download Patch File Download Diff File Expand all files Collapse all files

21
src/components/PostOnFeed.jsx
View File

@@ -34,8 +34,26 @@ export default function PostOnFeed({ ad, liked, onLike, onEdit, onDelete, onMark
// Проверяем, закрыт ли пост (вещь найдена)
const isClosed = ad.status === 'CLOSED';
const roleClass = ad.userRole === 'LOST_AND_FOUND' ? 'f-card-role-lost-found'
: ad.userRole === 'METRO' ? 'f-card-role-metro' : '';
const roleBadge = ad.userRole === 'LOST_AND_FOUND' ? (
<div className="f-role-badge f-role-lost-found" title="Бюро находок">
<svg width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2.5" strokeLinecap="round" strokeLinejoin="round">
<circle cx="12" cy="12" r="10"/>
<path d="M12 6v6l4 2"/>
</svg>
Бюро находок
</div>
) : ad.userRole === 'METRO' ? (
<div className="f-role-badge f-role-metro" title="Метрополитен">
<span className="f-role-metro-letter">М</span>
Метрополитен
</div>
) : null;
return (
<div className={`f-card${isClosed ? ' f-card-closed' : ''}`}>
<div className={`f-card${isClosed ? ' f-card-closed' : ''}${roleClass ? ' ' + roleClass : ''}`}>
<div className="f-card-inner">
<div className="f-card-img">
{imageUrl
@@ -49,6 +67,7 @@ export default function PostOnFeed({ ad, liked, onLike, onEdit, onDelete, onMark
<div className={`f-type-badge ${ad.type === "loss" ? "f-type-loss" : "f-type-found"}`}>
{ad.type === "loss" ? "Потеря" : "Находка"}
</div>
{roleBadge}
{isClosed && <div className="f-status-badge f-status-closed">✓ Найдено</div>}
</div>
<div className="f-card-title">{ad.title}</div>

41
src/styles/card.css
View File

@@ -32,7 +32,6 @@
background: rgba(13,16,24,.8); backdrop-filter: blur(8px);
border: 1px solid var(--border); border-radius: 20px;
padding: 3px 10px; font-size: .72rem; font-weight: 700; color: var(--teal);
margin-right: auto;
}
.f-type-badge {
border-radius: 20px; padding: 3px 10px;
@@ -52,6 +51,46 @@
background: rgba(72,187,120,.2); color: #48bb78; border: 1px solid rgba(72,187,120,.3);
}
/* ── Role badges (LOST_AND_FOUND / METRO) ── */
.f-role-badge {
display: inline-flex; align-items: center; gap: 4px;
border-radius: 20px; padding: 3px 8px;
font-size: .68rem; font-weight: 800;
white-space: nowrap;
}
.f-role-lost-found {
background: rgba(255,200,50,.18); color: #f5c842;
border: 1px solid rgba(255,200,50,.3);
}
.f-role-metro {
background: rgba(227,6,19,.15); color: #e30613;
border: 1px solid rgba(227,6,19,.25);
}
.f-role-metro-letter {
display: inline-flex; align-items: center; justify-content: center;
width: 14px; height: 14px; border-radius: 50%;
background: #e30613; color: #fff;
font-size: 9px; font-weight: 900; line-height: 1;
}
/* Role-based card border */
.f-card-role-lost-found {
border-color: rgba(255,200,50,.3);
box-shadow: 0 0 20px rgba(255,200,50,.08), inset 0 0 20px rgba(255,200,50,.04);
}
.f-card-role-lost-found:hover {
border-color: rgba(255,200,50,.5);
box-shadow: 0 0 30px rgba(255,200,50,.15), inset 0 0 25px rgba(255,200,50,.06);
}
.f-card-role-metro {
border-color: rgba(227,6,19,.25);
box-shadow: 0 0 20px rgba(227,6,19,.08), inset 0 0 20px rgba(227,6,19,.04);
}
.f-card-role-metro:hover {
border-color: rgba(227,6,19,.45);
box-shadow: 0 0 30px rgba(227,6,19,.15), inset 0 0 25px rgba(227,6,19,.06);
}
/* Body */
.f-card-body {
flex: 1; padding: 14px 16px;