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

fixed main page

Browse Source
This commit is contained in:
SlimusMinus
2026-08-19 00:47:10 +03:00
parent 97b7288a27
commit cac60af1af
9 changed files with 199 additions and 30 deletions
Download Patch File Download Diff File Expand all files Collapse all files

94
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
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));
}
}