fix: mobile version

2 years ago · 3ecd1559bf
parent 73f0ca163e
commit 3ecd1559bf
4 changed files with 233 additions and 22 deletions
--- a/src/ArticleCard.tsx
+++ b/src/ArticleCard.tsx
@ -59,11 +59,11 @@ export function ArticleCardVertical({
  return (
    <Card withBorder shadow="sm" radius="md" p={0} w={'100%'} className={classes.card}>
      <Group noWrap spacing={0}>
-        <Image src={image} height={205} width={205} component='a' href={`/article/${id}`}/>
+        <Image src={image} height={160} width={140} component='a' href={`/article/${id}`}/>
        <Stack p='md'>
-          <Text transform="uppercase" color="dimmed" size="xs">
+          {/* <Text transform="uppercase" color="dimmed" size="xs">
            {category}
-          </Text>
+          </Text> */}
          <Text component='a' href={`/article/${id}`} className={classes.title} mt="xs" mb="md" color={id === selected ? '#e66a5a' : 'black'}>
            {title}
          </Text>
--- a/src/ArticleCardMobile.tsx
+++ b/src/ArticleCardMobile.tsx
@ -0,0 +1,80 @@
+import { createStyles, Card, Image, Stack, Text, Group, Flex } from '@mantine/core';
+import globe from './assets/globe.png'
+
+
+const useStyles = createStyles((theme) => ({
+  card: {
+    backgroundColor: theme.white,
+  },
+
+  title: {
+    fontWeight: 700,
+    fontFamily: theme.fontFamily,
+    lineHeight: 1.2,
+    '&:hover': {
+      color: '#eb7b1a'
+    }
+  },
+
+  body: {
+    padding: theme.spacing.md,
+  },
+
+  address: {
+    "&:hover": {
+      cursor: "pointer",
+      filter: 'brightness(0) saturate(100%) invert(50%) sepia(92%) saturate(1223%) hue-rotate(352deg) brightness(97%) contrast(91%)'
+    }
+  }
+}));
+
+interface ArticleCardVerticalProps {
+  id: number;
+  image: string;
+  category: string;
+  title: string;
+  address: string;
+  longitude: number;
+  latitude: number;
+  selected: number;
+  // author: {
+  //   name: string;
+  //   avatar: string;
+  // };
+}
+
+export function ArticleCardMobile({
+  id,
+  image,
+  category,
+  title,
+  address,
+  longitude,
+  latitude,
+  // author,
+  selected,
+  clickAddressAction
+}: ArticleCardVerticalProps) {
+  const { classes } = useStyles();
+  return (
+    <Card withBorder shadow="sm" radius="md" p={0} w={'100%'} className={classes.card}>
+      <Group noWrap spacing={0}>
+      {/* <Image src={image} height={140} width={100} component='a' href={`/article/${id}`}/> */}
+        <Stack p='xs'>
+          <Text component='a' href={`/article/${id}`} className={classes.title} mt="xs" mb={0} color={id === selected ? '#e66a5a' : 'black'}>
+            {title}
+          </Text>
+          <Flex align='center' onClick={() => clickAddressAction(id)} className={classes.address}>
+            {/* <IconCurrentLocation style={{ width: rem(12), height: rem(12) }} /> */}
+            <Image src={globe} style={{ width: 32, height: 32 }} />
+            <Text size="xs" pl={5} pb={2}>
+              {address}
+              <br/>
+              {`${longitude.toFixed(3).replace('.', ',')}°  ${latitude.toFixed(3).replace('.', ',')}°`}
+            </Text>
+          </Flex>
+        </Stack>
+      </Group>
+    </Card>
+  );
+}
--- a/src/Header.tsx
+++ b/src/Header.tsx
@ -9,6 +9,7 @@ import {
  Image,
  Menu,
  Dialog,
+  Stack,
 } from "@mantine/core";
 import { IconExternalLink } from "@tabler/icons-react";
 import { useDisclosure } from "@mantine/hooks";
@ -23,7 +24,13 @@ const useStyles = createStyles((theme) => ({
  },

  links: {
-    [theme.fn.smallerThan("xs")]: {
+    [theme.fn.smallerThan("md")]: {
+      display: "none",
+    },
+  },
+
+  linksmobile: {
+    [theme.fn.largerThan("md")]: {
      display: "none",
    },
  },
@ -35,9 +42,9 @@ const useStyles = createStyles((theme) => ({
  },

  burger: {
-    // [theme.fn.largerThan("xs")]: {
+    [theme.fn.largerThan("md")]: {
      display: "none",
-    // }
+    },
  },

  link: {
@ -73,8 +80,7 @@ interface HeaderSimpleProps {
 }

 export function HeaderSimple({ links }: HeaderSimpleProps) {
-  // const [opened, { toggle }] = useDisclosure(false);
-  const [opened, { toggle, close }] = useDisclosure(true);
+  const [openedMenu, menuactions] = useDisclosure(false);
  const [active, setActive] = useState("");
  const { classes, cx } = useStyles();

@ -99,23 +105,84 @@ export function HeaderSimple({ links }: HeaderSimpleProps) {

  return (
    <Header height={60}>
+      <Container className={classes.header}>
+        {/* <Title order={3}><Anchor href='/' inherit={true} color='black' underline={false}>Литературные музеи России</Anchor></Title> */}
+        {/* <MantineLogo size={28} /> */}
+
+        <Image maw={150} src={logo} component="a" href="/" />
+
+        {/* Menu for mobile */}
        <Dialog
-        opened={opened}
-        withCloseButton
-        onClose={close}
-        size="lg"
+          opened={openedMenu}
+          withCloseButton={false}
+          onClose={menuactions.close}
+          size="xs"
          radius="md"
          position={{ top: 70, right: 20 }}
          className={classes.warning}
        >
-        Полная версия портала доступна с компьютера
-      </Dialog>
-      <Container className={classes.header}>
-        {/* <Title order={3}><Anchor href='/' inherit={true} color='black' underline={false}>Литературные музеи России</Anchor></Title> */}
-        {/* <MantineLogo size={28} /> */}
+          <Stack spacing={5} className={classes.linksmobile}>
+            <Menu shadow="md" width={200} position="left-start">
+              <Menu.Target>
+                <a
+                  key="Авторы"
+                  href="#authors"
+                  className={cx(classes.link, {
+                    [classes.linkActive]: active === "#authors",
+                  })}
+                  onClick={(e) => {
+                    e.preventDefault();
+                    // setActive("#authors");
+                  }}
+                >
+                  Авторы
+                </a>
+              </Menu.Target>

-        <Image maw={150} src={logo} component="a" href="/" />
+              <Menu.Dropdown>
+                <Menu.Item
+                  rightSection={
+                    <IconExternalLink
+                      style={{ width: rem(14), height: rem(14) }}
+                    />
+                  }
+                  component="a"
+                  href="https://bigenc.ru/c/ostrovskii-aleksandr-nikolaevich-c697e2"
+                  target="_blank"
+                >
+                  Островский
+                </Menu.Item>
+                <Menu.Item
+                  rightSection={
+                    <IconExternalLink
+                      style={{ width: rem(14), height: rem(14) }}
+                    />
+                  }
+                  component="a"
+                  href="https://bigenc.ru/c/prishvin-mikhail-mikhailovich-893107"
+                  target="_blank"
+                >
+                  Пришвин
+                </Menu.Item>
+                <Menu.Item
+                  rightSection={
+                    <IconExternalLink
+                      style={{ width: rem(14), height: rem(14) }}
+                    />
+                  }
+                  component="a"
+                  href="https://bigenc.ru/c/briusov-valerii-iakovlevich-fc6a35"
+                  target="_blank"
+                >
+                  Брюсов
+                </Menu.Item>
+              </Menu.Dropdown>
+            </Menu>
+            {items}
+          </Stack>
+        </Dialog>

+        {/* Menu for pc */}
        <Group spacing={5} className={classes.links}>
          <Menu shadow="md" width={200}>
            <Menu.Target>
@ -177,8 +244,8 @@ export function HeaderSimple({ links }: HeaderSimpleProps) {
        </Group>

        <Burger
-          opened={opened}
-          onClick={toggle}
+          opened={openedMenu}
+          onClick={menuactions.toggle}
          className={classes.burger}
          size="sm"
        />
--- a/src/KartaPage.tsx
+++ b/src/KartaPage.tsx
@ -1,5 +1,6 @@
 import { Paper, Flex, ScrollArea, Autocomplete, Title } from "@mantine/core";
 import { ArticleCardVertical } from "./ArticleCard";
+import { ArticleCardMobile } from "./ArticleCardMobile";
 import Map, {
  Source,
  Layer,
@ -292,6 +293,69 @@ export function KartaPage() {
        />
      </Map>

+      {/* Search mobile */}
+      <Paper
+        shadow={"md"}
+        radius={0}
+        style={{
+          position: "absolute",
+          top: 0,
+          left: 0,
+          right: 0,
+          height: "300px",
+          opacity: "95%",
+          padding: "1rem 0 1rem 1rem",
+        }}
+        sx={{
+          "@media (min-width: 60em)": {
+            display: "none",
+          },
+        }}
+      >
+        <Autocomplete
+          mr={20}
+          mb={10}
+          placeholder="Поиск"
+          limit={2}
+          value={search}
+          onChange={setSearch}
+          data={[]}
+        />
+        <ScrollArea h={"225px"} type="auto">
+          <Flex
+            // mih={50}
+            gap="xs"
+            justify="flex-start"
+            align="start"
+            direction="column"
+            wrap="wrap"
+            mr={20}
+          >
+            {articles !== null &&
+              articles.length > 0 &&
+              articles.map((article) => (
+                <ArticleCardMobile
+                  key={article.id}
+                  id={article.id}
+                  image={
+                    article.attributes.cover.data !== null
+                      ? host + article.attributes.cover.data.attributes.url
+                      : ""
+                  }
+                  category="музеи"
+                  title={article.attributes.title}
+                  address={article.attributes.address}
+                  longitude={article.attributes.longitude}
+                  latitude={article.attributes.latitude}
+                  selected={selected}
+                  clickAddressAction={handleAddressClick}
+                />
+              ))}
+          </Flex>
+        </ScrollArea>
+      </Paper>
+
+      {/* Search pc */}
      <Paper
        shadow={"md"}
        withBorder