From 684392e85b249d273bdd27e742b621de4992620a Mon Sep 17 00:00:00 2001 From: gman Date: Sun, 12 Nov 2023 17:04:23 +0300 Subject: [PATCH] fix: hide search in mobile version --- src/App.tsx | 6 - src/Article.tsx | 74 ++++-- src/Header.tsx | 155 ++++++------- src/KartaPage.tsx | 560 ++++++++++++++++++++++++---------------------- src/Landing.tsx | 10 + 5 files changed, 429 insertions(+), 376 deletions(-) diff --git a/src/App.tsx b/src/App.tsx index 147c288..4af0cf8 100644 --- a/src/App.tsx +++ b/src/App.tsx @@ -9,10 +9,6 @@ import { CustomFonts } from './CustomFonts'; import { KartaPage } from "./KartaPage"; import { Landing } from "./Landing"; import { Article } from "./Article"; -import { HeaderSimple } from "./Header"; -import { FooterLinks } from "./Footer"; -import headerLinks from "./assets/header.json"; -import footerLinks from "./assets/footer.json"; const router = createBrowserRouter([ { @@ -42,9 +38,7 @@ function App() { }}> - - ); diff --git a/src/Article.tsx b/src/Article.tsx index 0841ac5..9295fe9 100644 --- a/src/Article.tsx +++ b/src/Article.tsx @@ -1,11 +1,23 @@ -import { Title, Container, rem, createStyles, TypographyStylesProvider, Image } from '@mantine/core'; -import { Carousel } from '@mantine/carousel'; -import { useLoaderData } from 'react-router-dom'; -import Markdown from 'react-markdown'; +import { + Title, + Container, + rem, + createStyles, + TypographyStylesProvider, + Image, +} from "@mantine/core"; +import { Carousel } from "@mantine/carousel"; +import { useLoaderData } from "react-router-dom"; +import Markdown from "react-markdown"; + +import { HeaderSimple } from "./Header"; +import { FooterLinks } from "./Footer"; +import headerLinks from "./assets/header.json"; +import footerLinks from "./assets/footer.json"; const useStyles = createStyles((theme) => ({ content: { - padding: rem(30) + padding: rem(30), }, title: { @@ -13,41 +25,55 @@ const useStyles = createStyles((theme) => ({ lineHeight: 1.2, fontWeight: 900, paddingBottom: rem(20), - [theme.fn.smallerThan('xs')]: { + [theme.fn.smallerThan("xs")]: { fontSize: rem(28), }, - } + }, })); - - - - export function Article() { const articleData = useLoaderData(); const { classes } = useStyles(); - const article = articleData.data[0].attributes + const article = articleData.data[0].attributes; // console.log(articleData) const generateCarousel = () => { if (articleData.data[0].attributes.carousel.data) { return ( - {articleData.data[0].attributes.carousel.data.map(image => Random image)} + {articleData.data[0].attributes.carousel.data.map((image) => ( + + Random image + + ))} - ) + ); } - } + }; return ( - - - {article.title} - - - {article.content} - - {generateCarousel()} - + <> + + + + {article.title} + + + {article.content} + + {generateCarousel()} + + + ); } diff --git a/src/Header.tsx b/src/Header.tsx index 95657c7..313f0fe 100644 --- a/src/Header.tsx +++ b/src/Header.tsx @@ -8,7 +8,7 @@ import { rem, Image, Menu, - Dialog, + Paper, Stack, } from "@mantine/core"; import { IconExternalLink } from "@tabler/icons-react"; @@ -35,7 +35,7 @@ const useStyles = createStyles((theme) => ({ }, }, - warning: { + mobilemenu: { [theme.fn.largerThan("md")]: { display: "none", }, @@ -79,8 +79,8 @@ interface HeaderSimpleProps { links: { link: string; label: string }[]; } -export function HeaderSimple({ links }: HeaderSimpleProps) { - const [openedMenu, menuactions] = useDisclosure(false); +export function HeaderSimple({ links, openedMenuKarta, menuactionskarta }: HeaderSimpleProps) { + const [openedMenu, menuactions] = menuactionskarta ? [openedMenuKarta, menuactionskarta] : useDisclosure(false); const [active, setActive] = useState(""); const { classes, cx } = useStyles(); @@ -106,81 +106,9 @@ export function HeaderSimple({ links }: HeaderSimpleProps) { return (
- {/* <Anchor href='/' inherit={true} color='black' underline={false}>Литературные музеи России</Anchor> */} - {/* */} - {/* Menu for mobile */} - - - - - { - e.preventDefault(); - // setActive("#authors"); - }} - > - Авторы - - - - - - } - component="a" - href="https://bigenc.ru/c/ostrovskii-aleksandr-nikolaevich-c697e2" - target="_blank" - > - Островский - - - } - component="a" - href="https://bigenc.ru/c/prishvin-mikhail-mikhailovich-893107" - target="_blank" - > - Пришвин - - - } - component="a" - href="https://bigenc.ru/c/briusov-valerii-iakovlevich-fc6a35" - target="_blank" - > - Брюсов - - - - {items} - - {/* Menu for pc */} @@ -250,6 +178,81 @@ export function HeaderSimple({ links }: HeaderSimpleProps) { size="sm" /> + {/* Menu for mobile */} + + + + + { + e.preventDefault(); + // setActive("#authors"); + }} + > + Авторы + + + + + + } + component="a" + href="https://bigenc.ru/c/ostrovskii-aleksandr-nikolaevich-c697e2" + target="_blank" + > + Островский + + + } + component="a" + href="https://bigenc.ru/c/prishvin-mikhail-mikhailovich-893107" + target="_blank" + > + Пришвин + + + } + component="a" + href="https://bigenc.ru/c/briusov-valerii-iakovlevich-fc6a35" + target="_blank" + > + Брюсов + + + + {items} + +
); } diff --git a/src/KartaPage.tsx b/src/KartaPage.tsx index ad517f2..405f56c 100644 --- a/src/KartaPage.tsx +++ b/src/KartaPage.tsx @@ -1,4 +1,9 @@ import { Paper, Flex, ScrollArea, Autocomplete, Title } from "@mantine/core"; +import { useDisclosure } from "@mantine/hooks"; +import { HeaderSimple } from "./Header"; +import { FooterLinks } from "./Footer"; +import headerLinks from "./assets/header.json"; +import footerLinks from "./assets/footer.json"; import { ArticleCardVertical } from "./ArticleCard"; import { ArticleCardMobile } from "./ArticleCardMobile"; import Map, { @@ -18,7 +23,6 @@ import plus from "./assets/plus.png"; import minus from "./assets/minus.png"; import pin from "./assets/pin.png"; - export function KartaPage() { const mapRef = useRef(null); const [initial, setInitial] = useState(null); @@ -27,6 +31,8 @@ export function KartaPage() { const [selected, setSelected] = useState(-1); const [cursor, setCursor] = useState("grab"); const [popupInfo, setPopupInfo] = useState(null); + const [openedMenu, menuactions] = useDisclosure(false); + const host = "https://strapi.litmusmap.ru"; @@ -37,11 +43,12 @@ export function KartaPage() { pinImage.onload = () => mapRef.current.addImage("pin-marker", pinImage); const icons = initial ? ["prishvin", "ostrovskiy", "brusov"] : []; - icons.map(i => { + icons.map((i) => { const iconImage = new Image(); - iconImage.src = `./markers/${i}.png` - iconImage.onload = () => mapRef.current.addImage(`${i}-marker`, iconImage); - }) + iconImage.src = `./markers/${i}.png`; + iconImage.onload = () => + mapRef.current.addImage(`${i}-marker`, iconImage); + }); }; // Load articles @@ -49,7 +56,7 @@ export function KartaPage() { fetch(`${host}/api/articles?populate=*`) .then((r) => r.json()) .then((d) => { - console.log(d.data) + console.log(d.data); setInitial(d.data); setArticles(d.data); }); @@ -138,279 +145,292 @@ export function KartaPage() { }; return ( -
- { - // console.log(e.features); - if (e.features[0]) { - setSelected(e.features[0].properties.id); - if (mapRef.current.getZoom() < 14) { - mapRef.current.flyTo({ - center: e.features[0].geometry.coordinates, - zoom: mapRef.current.getZoom() + 6, - }); + <> + +
+ { + // console.log(e.features); + if (e.features[0]) { + setSelected(e.features[0].properties.id); + if (mapRef.current.getZoom() < 14) { + mapRef.current.flyTo({ + center: e.features[0].geometry.coordinates, + zoom: mapRef.current.getZoom() + 6, + }); + } else { + setPopupInfo({ + longitude: e.features[0].geometry.coordinates[0], + latitude: e.features[0].geometry.coordinates[1], + id: e.features[0].properties.id, + }); + } } else { - setPopupInfo({ - longitude: e.features[0].geometry.coordinates[0], - latitude: e.features[0].geometry.coordinates[1], - id: e.features[0].properties.id, - }); + setSelected(-1); } - } else { - setSelected(-1); - } - }} - onMouseEnter={() => setCursor("pointer")} - onMouseLeave={() => setCursor("grab")} - onLoad={handleMapLoad} - > - setCursor("pointer")} + onMouseLeave={() => setCursor("grab")} + onLoad={handleMapLoad} > - {popupInfo && ( - setPopupInfo(null)} - > - подробнее - - )} - a.id)] - } - paint={{ - "circle-color": [ - "match", - ["get", "id"], - selected, - "#e66a5a", - "#F2994A", - ], - "circle-radius": ["step", ["zoom"], 8, 7, 20, 12, 40, 14, 60], - "circle-opacity": ["step", ["zoom"], 0.8, 7, 0], - }} - /> - a.id)] - } - layout={{ - "icon-image": "pin-marker", - "icon-size": ["interpolate", ["linear"], ["zoom"], 7, 0.5, 12, 1], - }} - minzoom={7} - maxzoom={12} - /> - a.id)] - } - layout={{ - "icon-image": [ - "match", - ["get", "id"], - 6, - "ostrovskiy-marker", - 7, - "brusov-marker", - 1, - "prishvin-marker", - "pin-marker", - ], - "icon-size": [ - "interpolate", - ["linear"], - ["zoom"], - 12, - 0.05, - 14, - 0.1, - ], + + {popupInfo && ( + setPopupInfo(null)} + > + подробнее + + )} + a.id)] + } + paint={{ + "circle-color": [ + "match", + ["get", "id"], + selected, + "#e66a5a", + "#F2994A", + ], + "circle-radius": ["step", ["zoom"], 8, 7, 20, 12, 40, 14, 60], + "circle-opacity": ["step", ["zoom"], 0.8, 7, 0], + }} + /> + a.id)] + } + layout={{ + "icon-image": "pin-marker", + "icon-size": [ + "interpolate", + ["linear"], + ["zoom"], + 7, + 0.5, + 12, + 1, + ], + }} + minzoom={7} + maxzoom={12} + /> + a.id)] + } + layout={{ + "icon-image": [ + "match", + ["get", "id"], + 6, + "ostrovskiy-marker", + 7, + "brusov-marker", + 1, + "prishvin-marker", + "pin-marker", + ], + "icon-size": [ + "interpolate", + ["linear"], + ["zoom"], + 12, + 0.05, + 14, + 0.1, + ], + }} + minzoom={12} + /> + + + + - - - - + + {/* Search mobile */} + - - - {/* Search mobile */} - - - - + - {articles !== null && - articles.length > 0 && - articles.map((article) => ( - - ))} - - - + mb={10} + placeholder="Поиск" + limit={2} + value={search} + onChange={setSearch} + data={[]} + /> + + + {articles !== null && + articles.length > 0 && + articles.map((article) => ( + + ))} + + + - {/* Search pc */} - - - Музеи - - - - + + Музеи + + - {articles !== null && - articles.length > 0 && - articles.map((article) => ( - - ))} - - - -
+ mb={30} + placeholder="Поиск" + limit={2} + value={search} + onChange={setSearch} + data={[]} + /> + + + {articles !== null && + articles.length > 0 && + articles.map((article) => ( + + ))} + + + +
+ + ); } diff --git a/src/Landing.tsx b/src/Landing.tsx index 6290bfb..e17c7c2 100644 --- a/src/Landing.tsx +++ b/src/Landing.tsx @@ -6,6 +6,11 @@ import { TypographyStylesProvider, } from "@mantine/core"; +import { HeaderSimple } from "./Header"; +import { FooterLinks } from "./Footer"; +import headerLinks from "./assets/header.json"; +import footerLinks from "./assets/footer.json"; + const useStyles = createStyles((theme) => ({ content: { padding: rem(30), @@ -31,6 +36,8 @@ export function Landing() { const { classes } = useStyles(); return ( + <> + О проекте @@ -98,5 +105,8 @@ export function Landing() { </p> </TypographyStylesProvider> </Container> + <FooterLinks data={footerLinks.data} /> + </> + ); }