From 0041f2cb74980ecde0e0dc313bf235277751dcfd Mon Sep 17 00:00:00 2001 From: SlimusMinus Date: Wed, 26 Aug 2026 01:13:36 +0300 Subject: [PATCH] added border on post on feed --- src/App.js | 9 ++++++- src/api/apiClient.jsx | 1 - src/components/AuthModal.jsx | 8 ++++++- src/pages/PostOnFeed.jsx | 46 ++++++++++++++++++------------------ src/styles/card.css | 33 ++++++++++++++------------ 5 files changed, 56 insertions(+), 41 deletions(-) diff --git a/src/App.js b/src/App.js index 3257dff..0041774 100644 --- a/src/App.js +++ b/src/App.js @@ -1,6 +1,6 @@ // src/App.jsx import { useEffect, useRef } from 'react'; -import { BrowserRouter, Routes, Route } from 'react-router-dom'; +import { BrowserRouter, Routes, Route, useLocation } from 'react-router-dom'; import { AuthProvider } from './context/AuthContext'; import { ThemeProvider } from './context/ThemeContext'; import { useAuthContext } from './context/AuthContext'; @@ -13,6 +13,12 @@ import ChatListPage from './pages/ChatListPage'; import ReviewsPage from './pages/ReviewsPage'; import './styles/chat.css'; +function ScrollToTop() { + const { pathname } = useLocation(); + useEffect(() => { window.scrollTo(0, 0); }, [pathname]); + return null; +} + function UnreadListener() { const { user } = useAuthContext(); const { resetUnread } = useUnread(); @@ -38,6 +44,7 @@ function App() { + } /> } /> diff --git a/src/api/apiClient.jsx b/src/api/apiClient.jsx index 15ba63a..75202b5 100644 --- a/src/api/apiClient.jsx +++ b/src/api/apiClient.jsx @@ -73,7 +73,6 @@ export async function apiFetch(url, options = {}) { res = await doFetch(newToken); } catch { clearTokens(); - window.location.href = "/"; throw new Error("Session expired"); } } diff --git a/src/components/AuthModal.jsx b/src/components/AuthModal.jsx index cf747d0..cc2f4d8 100644 --- a/src/components/AuthModal.jsx +++ b/src/components/AuthModal.jsx @@ -1,5 +1,5 @@ // src/components/AuthModal.jsx -import { useState } from "react"; +import { useState, useEffect } from "react"; import { useTranslation } from 'react-i18next'; import CloseIcon from "./icons/CloseIcon"; import { useAuthContext } from "../context/AuthContext"; @@ -14,6 +14,12 @@ export default function AuthModal({ onClose }) { const [mode, setMode] = useState("login"); // "login" | "register" const { login: saveAuth } = useAuthContext(); + useEffect(() => { + const prev = document.body.style.overflow; + document.body.style.overflow = "hidden"; + return () => { document.body.style.overflow = prev; }; + }, []); + return (
e.target === e.currentTarget && onClose()}>
diff --git a/src/pages/PostOnFeed.jsx b/src/pages/PostOnFeed.jsx index f830b0e..b70664d 100644 --- a/src/pages/PostOnFeed.jsx +++ b/src/pages/PostOnFeed.jsx @@ -58,7 +58,7 @@ export default function PostOnFeed({ ad, liked, likeCountAdj, onLike, onEdit, on ); return ( -
+
@@ -114,10 +114,24 @@ export default function PostOnFeed({ ad, liked, likeCountAdj, onLike, onEdit, on )} - {ad.reward && ( - - {t("postCard.reward")} - + {createdAt && ( +
{ + e.stopPropagation(); + setShowCalendar(s => !s); + }} + > + {createdAt} + {showCalendar && ( + setShowCalendar(false)} + anchorRef={dateAnchorRef} + /> + )} +
)}
@@ -145,24 +159,10 @@ export default function PostOnFeed({ ad, liked, likeCountAdj, onLike, onEdit, on {address}
)} - {createdAt && ( -
{ - e.stopPropagation(); - setShowCalendar(s => !s); - }} - > - {createdAt} - {showCalendar && ( - setShowCalendar(false)} - anchorRef={dateAnchorRef} - /> - )} -
+ {ad.reward && ( + + {t("postCard.reward")} + )}
diff --git a/src/styles/card.css b/src/styles/card.css index 96b5c65..853d0a7 100644 --- a/src/styles/card.css +++ b/src/styles/card.css @@ -7,28 +7,28 @@ cursor: pointer; } .f-card:hover { border-color: var(--muted2); } +.f-card-loss { + border-color: transparent; + box-shadow: 0 0 0 2px rgba(237,73,86,.7); +} +.f-card-found { + border-color: transparent; + box-shadow: 0 0 0 2px rgba(48,168,94,.7); +} /* ── Post header ── */ .f-card-head { display: flex; align-items: center; gap: 12px; 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-loss, .f-head-found { - background: rgba(48,168,94,.07); + color: var(--text-primary); } -.f-head-found::before { background: rgba(48,168,94,.5); } +.f-head-loss .f-card-author-name { color: var(--text-primary); } +.f-head-loss .f-type-badge { background: rgba(237,73,86,.1); color: #ed4956; border-color: rgba(237,73,86,.4); } +.f-head-found .f-card-author-name { color: var(--text-primary); } +.f-head-found .f-type-badge { background: rgba(48,168,94,.1); color: #30a85e; border-color: rgba(48,168,94,.4); } .f-card-avatar-ring { width: 42px; height: 42px; border-radius: 50%; @@ -63,11 +63,13 @@ background: var(--bg-card-img); display: flex; align-items: center; justify-content: center; overflow: hidden; + border: none; outline: none; } .f-card-img img { width: 100%; height: 100%; object-fit: cover; object-position: center; display: block; + border: none; outline: none; } .f-card-emoji { font-size: 4rem; opacity: .85; filter: drop-shadow(0 4px 12px rgba(0,0,0,.3)); } .f-card-reward { @@ -150,7 +152,8 @@ display: flex; flex-wrap: wrap; align-items: center; gap: 6px; padding: 8px 16px 4px; } -.f-card-meta .f-date-pill { +.f-card-meta .f-date-pill, +.f-card-meta .f-card-reward-text { margin-left: auto; } .f-meta-pill {