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

Merge pull request #54 from SlimusMinus/fix-post_header

Browse Source 
colored header on post
This commit is contained in:
SlimusMinus
2026-08-24 01:48:05 +03:00
committed by GitHub
parent dbd1f100df 2333e28720
commit f6e3ab811d
3 changed files with 21 additions and 4 deletions
Download Patch File Download Diff File Expand all files Collapse all files

1
src/hooks/useFavorites.js
View File

@@ -1,4 +1,3 @@
// src/hooks/useFavorites.js
import { useState, useCallback } from 'react'; import { useState, useCallback } from 'react';
import { useTranslation } from 'react-i18next'; import { useTranslation } from 'react-i18next';
import { API_URL } from '../config/authConstants'; import { API_URL } from '../config/authConstants';

4
src/pages/PostOnFeed.jsx
View File

@@ -49,6 +49,8 @@ export default function PostOnFeed({ ad, liked, likeCountAdj, onLike, onEdit, on
const isClosed = ad.status === 'CLOSED'; const isClosed = ad.status === 'CLOSED';
const headAccentClass = ad.type === "found" ? " f-head-found" : " f-head-loss";
const typeBadge = ( const typeBadge = (
<div className={`f-type-badge ${ad.type === "loss" ? "f-type-loss" : "f-type-found"}`}> <div className={`f-type-badge ${ad.type === "loss" ? "f-type-loss" : "f-type-found"}`}>
{ad.type === "loss" ? t('postCard.loss') : t('postCard.found')} {ad.type === "loss" ? t('postCard.loss') : t('postCard.found')}
@@ -58,7 +60,7 @@ export default function PostOnFeed({ ad, liked, likeCountAdj, onLike, onEdit, on
return ( return (
<div className={`f-card${isClosed ? ' f-card-closed' : ''}`}> <div className={`f-card${isClosed ? ' f-card-closed' : ''}`}>
<div className="f-card-head"> <div className={`f-card-head${headAccentClass}`}>
<div className="f-card-author"> <div className="f-card-author">
<div <div
className="f-card-author-name" className="f-card-author-name"

20
src/styles/card.css
View File

@@ -11,9 +11,25 @@
/* ── Post header ── */ /* ── Post header ── */
.f-card-head { .f-card-head {
display: flex; align-items: center; gap: 12px; display: flex; align-items: center; gap: 12px;
padding: 12px 14px; padding: 12px 14px 12px 17px;
position: relative;
} }
/* Тонкая цветовая идентификация шапки: потеря / находка */
.f-card-head::before {
content: "";
position: absolute; left: 0; top: 0; bottom: 0;
width: 3px;
}
.f-head-loss {
background: rgba(237,73,86,.05);
}
.f-head-loss::before { background: rgba(237,73,86,.45); }
.f-head-found {
background: rgba(48,168,94,.07);
}
.f-head-found::before { background: rgba(48,168,94,.5); }
.f-card-avatar-ring { .f-card-avatar-ring {
width: 42px; height: 42px; border-radius: 50%; width: 42px; height: 42px; border-radius: 50%;
background: linear-gradient(45deg, #feda75, #fa7e1e, #d62976, #962fbf, #4f5bd5); background: linear-gradient(45deg, #feda75, #fa7e1e, #d62976, #962fbf, #4f5bd5);
@@ -164,7 +180,7 @@
font-size: .74rem; font-weight: 800; font-size: .74rem; font-weight: 800;
} }
.f-type-loss { background: rgba(237,73,86,.1); color: #ed4956; border: 1px solid rgba(237,73,86,.25); } .f-type-loss { background: rgba(237,73,86,.1); color: #ed4956; border: 1px solid rgba(237,73,86,.25); }
.f-type-found { background: rgba(var(--teal-rgb), .1); color: var(--teal); border: 1px solid rgba(var(--teal-rgb), .25); } .f-type-found { background: rgba(48,168,94,.1); color: #30a85e; border: 1px solid rgba(48,168,94,.25); }
/* Status badge for closed/found posts */ /* Status badge for closed/found posts */
.f-status-badge { .f-status-badge {