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

Merge pull request #47 from SlimusMinus/fix-main_page

Browse Source 
Fix main page
This commit is contained in:
SlimusMinus
2026-08-19 00:48:56 +03:00
committed by GitHub
parent 97b7288a27 df6331ab9d
commit 0061cdf1f2
10 changed files with 200 additions and 30 deletions
Download Patch File Download Diff File Expand all files Collapse all files

98
src/components/feed/FeedTopBar.jsx
View File

@@ -1,10 +1,102 @@
import { useState, useRef, useEffect } from "react";
import { motion, AnimatePresence } from "framer-motion";
import AppTopBar from "../layout/AppTopBar";
import { useTranslation } from "react-i18next";
export default function FeedTopBar({ onMenuClick, typeFilter, onTypeFilterChange }) {
const { t } = useTranslation();
const [open, setOpen] = useState(false);
const menuRef = useRef(null);
const btnRef = useRef(null);
const options = [
{ key: "loss", label: t("feed.filterLoss") },
{ key: null, label: t("feed.filterAll") },
{ key: "found", label: t("feed.filterFound") },
];
useEffect(() => {
if (!open) return;
const handler = (e) => {
if (
menuRef.current && !menuRef.current.contains(e.target) &&
btnRef.current && !btnRef.current.contains(e.target)
) {
setOpen(false);
}
};
document.addEventListener("mousedown", handler);
return () => document.removeEventListener("mousedown", handler);
}, [open]);
const handleSelect = (key) => {
onTypeFilterChange(key);
setOpen(false);
};
export default function FeedTopBar({ onMenuClick }) {
return (
<div className="f-topbar-dropdown-wrap">
<AppTopBar
onMenuClick={onMenuClick}
hideProfile
onMenuClick={onMenuClick}
hideProfile
hideWordmark
centerContent={
<button
ref={btnRef}
className="f-topbar-dropdown-btn"
onClick={() => setOpen((v) => !v)}
>
<span>{t("app.name")}</span>
<svg
className={`f-topbar-chevron${open ? " open" : ""}`}
viewBox="0 0 24 24"
fill="none"
stroke="currentColor"
strokeWidth="2.5"
strokeLinecap="round"
strokeLinejoin="round"
>
<polyline points="6 9 12 15 18 9" />
</svg>
</button>
}
/>
<AnimatePresence>
{open && (
<motion.div
className="f-topbar-dropdown-overlay"
initial={{ opacity: 0 }}
animate={{ opacity: 1 }}
exit={{ opacity: 0 }}
transition={{ duration: 0.15 }}
onClick={() => setOpen(false)}
/>
)}
</AnimatePresence>
<AnimatePresence>
{open && (
<motion.div
ref={menuRef}
className="f-topbar-dropdown-menu"
initial={{ opacity: 0, scale: 0.95, y: -8 }}
animate={{ opacity: 1, scale: 1, y: 0 }}
exit={{ opacity: 0, scale: 0.95, y: -8 }}
transition={{ duration: 0.18, ease: "easeOut" }}
>
{options.map((opt) => (
<button
key={opt.key ?? "all"}
className={`f-topbar-dropdown-item${typeFilter === opt.key ? " active" : ""}`}
onClick={() => handleSelect(opt.key)}
>
{opt.label}
</button>
))}
</motion.div>
)}
</AnimatePresence>
</div>
);
}

3
src/components/layout/AppTopBar.jsx
View File

@@ -15,6 +15,7 @@ export default function AppTopBar({
onLoginClick,
loginLabel,
hideProfile = false,
hideWordmark = false,
}) {
const { t } = useTranslation();
return (
@@ -22,7 +23,7 @@ export default function AppTopBar({
<button className="f-menu-btn" onClick={onMenuClick}>
<MenuIcon />
</button>
<span className="f-topbar-wordmark">{t('app.name')}</span>
{!hideWordmark && <span className="f-topbar-wordmark">{t('app.name')}</span>}
<div className="f-topbar-center">{centerContent}</div>
{hideProfile ? (
<span className="f-topbar-spacer" />

12
src/pages/MainFeed.jsx
View File

@@ -13,7 +13,7 @@ import AuthModal from "../components/AuthModal";
import RulesModal from "./RulesModal";
import FeedTopBar from "../components/feed/FeedTopBar";
import FeedSearchBar from "../components/feed/FeedSearchBar";
import TypeFilterBar from "../components/feed/TypeFilterBar";
import FeedContent from "../components/feed/FeedContent";
import { useAuthContext } from "../context/AuthContext";
import { useCities } from "../hooks/useCities";
@@ -74,7 +74,7 @@ export default function MainFeed() {
const refreshCurrentList = useCallback(() => {
if (selectedCities.length > 0) {
cityFeed.searchCities(selectedCities); // triggers internal effect via selectedCities dep isn't needed here
cityFeed.searchCities(selectedCities);
} else {
feed.loadFeed();
}
@@ -214,7 +214,11 @@ export default function MainFeed() {
/>
<div className="f-main f-main-feed">
<FeedTopBar onMenuClick={() => setSidebarOpen(v => !v)} />
<FeedTopBar
onMenuClick={() => setSidebarOpen(v => !v)}
typeFilter={typeFilter}
onTypeFilterChange={setTypeFilter}
/>
<div className="f-search-panel">
<FeedSearchBar value={searchQuery} onChange={setSearchQuery} t={t} />
@@ -226,8 +230,6 @@ export default function MainFeed() {
)}
</div>
<TypeFilterBar value={typeFilter} onChange={setTypeFilter} t={t} />
<div className="f-wrap">
<div className="f-feed" ref={feedRef}>
<FeedContent

4
src/pages/NakhodkaLanding.jsx
View File

@@ -14,8 +14,8 @@ export default function NakhodkaLanding() {
return (
<div className="nk-page">
<Hero onCtaClick={goToFeed} onLoginClick={goToFeedWithAuth} />
<StepsSection />
<FinalCta onClick={goToFeed} />
{/*<StepsSection />*/}
{/*<FinalCta onClick={goToFeed} />*/}
<Footer />
</div>
);

14
src/styles/NakhodkaLanding.css
View File

@@ -269,11 +269,6 @@
color: var(--muted);
}
.nk-steps-section {
padding: 0 6vw 60px;
margin-top: -60px;
}
.nk-h2 {
font-family: 'Fraunces', serif;
font-size: clamp(24px, 3vw, 34px);
@@ -339,6 +334,11 @@
}
@media (max-width: 768px) {
.nk-page {
height: 100dvh;
overflow: hidden;
}
.nk-hero {
padding-bottom: 150px;
}
@@ -370,6 +370,10 @@
width: 18px;
height: 18px;
}
.nk-footer {
margin-top: -100px;
}
}
@media (prefers-reduced-motion: reduce) {

18
src/styles/auth.css
View File

@@ -1,8 +1,8 @@
@import url('https://fonts.googleapis.com/css2?family=Nunito:wght@400;600;700;800;900&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Onest:wght@400;500;600;700;800;900&display=swap');
/* ─── Page ──────────────────────────────────────────────────────────────────── */
.auth-page {
font-family: 'Nunito', sans-serif;
font-family: 'Onest', sans-serif;
min-height: 100vh;
display: flex; align-items: center; justify-content: center;
background: radial-gradient(ellipse at 30% 40%, #1a2340 0%, #0d1018 60%);
@@ -120,7 +120,7 @@
display: block; color: rgba(255,255,255,0.45);
font-size: 0.73rem; font-weight: 700;
letter-spacing: 0.6px; margin-bottom: 5px;
text-transform: uppercase; font-family: 'Nunito', sans-serif;
text-transform: uppercase; font-family: 'Onest', sans-serif;
}
.field {
@@ -128,7 +128,7 @@
background: rgba(255,255,255,0.055);
border: 1.5px solid rgba(255,255,255,0.09);
border-radius: 14px; padding: 13px 18px;
color: #fff; font-family: 'Nunito', sans-serif;
color: #fff; font-family: 'Onest', sans-serif;
font-size: 0.93rem; outline: none;
transition: border-color .2s, background .2s, box-shadow .2s;
}
@@ -181,7 +181,7 @@
.err-msg {
color: #ff6b6b; font-size: 0.8rem;
margin-top: 5px; padding-left: 2px;
font-family: 'Nunito', sans-serif;
font-family: 'Onest', sans-serif;
}
/* ─── Confirm box ───────────────────────────────────────────────────────────── */
@@ -202,7 +202,7 @@
background: linear-gradient(90deg, #1fc9b0, #2de0c8, #1fc9b0);
background-size: 200% 100%;
border: none; border-radius: 14px; padding: 15px;
color: #082320; font-family: 'Nunito', sans-serif;
color: #082320; font-family: 'Onest', sans-serif;
font-size: 1.05rem; font-weight: 900; cursor: pointer;
margin-top: 6px;
box-shadow: 0 6px 24px rgba(45,224,200,0.32);
@@ -222,7 +222,7 @@
display: block; width: 100%; text-align: center;
color: #2de0c8; font-size: 0.87rem; margin-top: 13px;
background: none; border: none; cursor: pointer;
font-family: 'Nunito', sans-serif;
font-family: 'Onest', sans-serif;
transition: opacity .15s;
}
.ghost-btn:hover { opacity: 0.75; }
@@ -231,7 +231,7 @@
display: block; width: 100%; text-align: center;
color: rgba(255,255,255,0.35); font-size: 0.85rem; margin-top: 11px;
background: none; border: none; cursor: pointer;
font-family: 'Nunito', sans-serif;
font-family: 'Onest', sans-serif;
transition: color .15s;
}
.back-btn:hover { color: rgba(255,255,255,0.6); }
@@ -243,7 +243,7 @@
}
.link-btn {
color: #2de0c8; background: none; border: none;
cursor: pointer; font-family: 'Nunito', sans-serif;
cursor: pointer; font-family: 'Onest', sans-serif;
font-size: inherit; font-weight: 700; padding: 0;
transition: opacity .15s;
}

4
src/styles/base.css
View File

@@ -1,4 +1,4 @@
@import url('https://fonts.googleapis.com/css2?family=Nunito:wght@400;600;700;800;900&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Onest:wght@400;500;600;700;800;900&display=swap');
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
@@ -9,7 +9,7 @@
--border: #dbdbdb;
--muted: #737373;
--muted2: #c7c7c7;
--font: 'Nunito', sans-serif;
--font: 'Onest', sans-serif;
--err: #ed4956;
--bg-app: #fafafa;

2
src/styles/global.css
View File

@@ -1,4 +1,4 @@
@import url('https://fonts.googleapis.com/css2?family=Nunito:wght@400;600;700;800;900&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Onest:wght@400;500;600;700;800;900&display=swap');
.fi {
position: fixed;

72
src/styles/layout.css
View File

@@ -121,6 +121,68 @@
color: var(--teal); font-weight: 700;
}
/* ── Topbar Dropdown (Instagram-style) ── */
.f-topbar-dropdown-wrap {
position: relative;
}
.f-topbar-dropdown-wrap .f-topbar {
position: sticky; top: 0; z-index: 10;
}
.f-topbar-dropdown-btn {
display: inline-flex; align-items: center; gap: 4px;
background: none; border: none; cursor: pointer;
color: var(--text-primary);
font-family: var(--font); font-weight: 900; font-size: 1.25rem;
letter-spacing: -.4px; white-space: nowrap;
padding: 4px 6px; border-radius: 8px;
transition: background .15s;
}
.f-topbar-dropdown-btn:hover { background: var(--hover-bg); }
.f-topbar-chevron {
width: 18px; height: 18px; flex-shrink: 0;
transition: transform .25s ease;
}
.f-topbar-chevron.open { transform: rotate(180deg); }
.f-topbar-dropdown-overlay {
position: fixed; inset: 0; z-index: 45;
background: transparent;
}
.f-topbar-dropdown-menu {
position: absolute; top: 100%; left: 0; right: 0;
z-index: 50;
display: flex; flex-direction: row; align-items: center; justify-content: center; gap: 6px;
padding: 8px 12px;
margin-top: 6px;
background: rgba(0, 0, 0, .72);
backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px);
border: 1px solid rgba(255, 255, 255, .08);
border-radius: 999px;
box-shadow: 0 12px 40px rgba(0, 0, 0, .35);
}
.f-topbar-dropdown-item {
display: flex; align-items: center; justify-content: center;
padding: 8px 16px;
border: none; border-radius: 999px;
background: rgba(255, 255, 255, .08);
color: rgba(255, 255, 255, .85);
font-family: var(--font); font-size: 0.85rem; font-weight: 600;
white-space: nowrap;
cursor: pointer;
transition: background .15s, color .15s;
}
.f-topbar-dropdown-item:hover {
background: rgba(255, 255, 255, .14);
color: #fff;
}
.f-topbar-dropdown-item.active {
background: rgba(var(--teal-rgb), .25);
color: var(--teal);
}
/* ── City Multiselect ── */
.f-city-filter-wrap {
position: relative; z-index: 20;
@@ -360,9 +422,17 @@
.f-city-ms-input { font-size: 0.85rem; }
.f-city-ms-tag { font-size: 0.75rem; padding: 2px 8px; }
.f-topbar-dropdown-btn { font-size: 1.15rem; padding: 4px 4px; }
.f-topbar-chevron { width: 18px; height: 18px; }
.f-topbar-dropdown-menu {
padding: 6px 10px; gap: 5px;
margin-top: 4px; border-radius: 999px;
}
.f-topbar-dropdown-item { padding: 7px 13px; font-size: 0.8rem; }
/* Нижняя панель fixed — освобождаем место в конце ленты */
.f-feed {
padding-bottom: calc(72px + env(safe-area-inset-bottom));
padding-bottom: calc(130px + env(safe-area-inset-bottom));
}
}

1
src/styles/reviews.css
View File

@@ -333,6 +333,7 @@
.rv-layout {
flex-direction: column;
padding: 14px;
padding-bottom: calc(90px + env(safe-area-inset-bottom));
}
.rv-sidebar {
width: 100%;