progress

kulturspektakel · Dec 1, 2023 · cc8118f · cc8118f
1 parent bdc0118
commit cc8118f
Show file tree

Hide file tree

Showing 30 changed files with 1,037 additions and 161 deletions.
diff --git a/app/components/GoogleMaps.tsx b/app/components/GoogleMaps.tsx
@@ -0,0 +1,5 @@
+import {Wrapper} from '@googlemaps/react-wrapper';
+
+export default function GoogleMaps() {
+  return <Wrapper apiKey=""></Wrapper>;
+}
diff --git a/app/components/Header/Header.tsx b/app/components/Header/Header.tsx
@@ -21,7 +21,11 @@ export default function Header() {
       bgBlendMode="luminosity"
     >
       <NavLink to="https://kulturspektakel.de">
-        <Image src={'/logo.svg'} alt="Kulturspektakel Gauting Logo" w="14" />
+        <Image
+          src={'/logos/logo.svg'}
+          alt="Kulturspektakel Gauting Logo"
+          w="14"
+        />
       </NavLink>
 
       <HStack

diff --git a/app/components/LinkButton.tsx b/app/components/LinkButton.tsx
@@ -0,0 +1,33 @@
+import type {ButtonProps, LinkProps} from '@chakra-ui/react';
+import {Button} from '@chakra-ui/react';
+import {useNavigate} from '@remix-run/react';
+
+export default function LinkButton({
+  target,
+  ...props
+}: ButtonProps & LinkProps & {href: string}) {
+  const navigate = useNavigate();
+  const _hover = {
+    bg: 'offwhite.300',
+  };
+
+  const isAbsolute = /^https?:\/\//.test(props.href);
+
+  return (
+    <Button
+      role="link"
+      as="a"
+      _hover={_hover}
+      _active={_hover}
+      _focus={_hover}
+      onClick={(e) => {
+        if (!isAbsolute && !props.download) {
+          e.preventDefault();
+          navigate(props.href);
+        }
+      }}
+      target={isAbsolute ? '_blank' : undefined}
+      {...props}
+    />
+  );
+}
diff --git a/app/components/Mark.tsx b/app/components/Mark.tsx
@@ -20,9 +20,9 @@ export default function Mark({
       as="mark"
       fontWeight="semibold"
       color="inherit"
-      {...props}
       m="0 -0.4em"
       p="0.1em 0.4em"
+      {...props}
       borderRadius="0.8em 0.3em"
       bgColor="transparent"
       whiteSpace="nowrap"

diff --git a/app/components/MarkdownText.tsx b/app/components/MarkdownText.tsx
@@ -9,6 +9,7 @@ import {
 } from '@chakra-ui/react';
 import {Link} from '@remix-run/react';
 import Image from './Image';
+import {Gallery} from 'react-photoswipe-gallery';
 
 export default function MarkDownWithOverrides(props: any) {
   return (
@@ -33,7 +34,11 @@ export default function MarkDownWithOverrides(props: any) {
           h6: (props: HeadingProps) => (
             <Heading {...props} size="sm" as="h6" mb={1} mt={3} />
           ),
-          p: Text,
+          p: ({children, ...props}) => (
+            <Text mt="2" {...props}>
+              {children}
+            </Text>
+          ),
           a: (props: LinkProps) => (
             <ChakraLink {...props} as={Link} to={props.href} variant="inline" />
           ),
@@ -42,15 +47,19 @@ export default function MarkDownWithOverrides(props: any) {
             scaledSrc.searchParams.set('width', '900');
 
             return (
-              <Image
-                maxH="500px"
-                mt="3"
-                mb="3"
-                ml="auto"
-                mr="auto"
-                src={scaledSrc}
-                {...props}
-              />
+              <Gallery>
+                <Image
+                  maxH="500px"
+                  mt="3"
+                  mb="3"
+                  ml="auto"
+                  mr="auto"
+                  bgColor="white"
+                  src={scaledSrc.toString()}
+                  original={src}
+                  {...props}
+                />
+              </Gallery>
             );
           },
           ul: UnorderedList,

diff --git a/app/components/Page.tsx b/app/components/Page.tsx
@@ -1,6 +1,6 @@
 import {Box, Heading, SimpleGrid} from '@chakra-ui/react';
 import type {PageContentFragment} from '~/types/graphql';
-import MarkDownWithOverrides from './MarkdownText';
+import MarkdownText from './MarkdownText';
 import {gql} from '@apollo/client';
 
 gql`
@@ -18,28 +18,28 @@ export default function Page(
 ) {
   const {title, left, right, content, bottom} = props;
   return (
-    <Box as="article" mb="10" mt="10">
+    <Box as="article" mb="10" w="100%">
       <Heading mb={5} textAlign={props.centered ? 'center' : undefined}>
         {title}
       </Heading>
       {content && (
         <Box mt="3" textAlign={props.centered ? 'center' : undefined}>
-          <MarkDownWithOverrides>{content}</MarkDownWithOverrides>
+          <MarkdownText>{content}</MarkdownText>
         </Box>
       )}
       {left && right && (
         <SimpleGrid columns={[1, 2]} spacing="5" mt="3">
           <Box>
-            <MarkDownWithOverrides>{left}</MarkDownWithOverrides>
+            <MarkdownText>{left}</MarkdownText>
           </Box>
           <Box>
-            <MarkDownWithOverrides>{right}</MarkDownWithOverrides>
+            <MarkdownText>{right}</MarkdownText>
           </Box>
         </SimpleGrid>
       )}
       {bottom && (
         <Box mt="3" textAlign={props.centered ? 'center' : undefined}>
-          <MarkDownWithOverrides>{bottom}</MarkDownWithOverrides>
+          <MarkdownText>{bottom}</MarkdownText>
         </Box>
       )}
     </Box>

diff --git a/app/components/Selector.tsx b/app/components/Selector.tsx
@@ -1,4 +1,5 @@
 import {ButtonGroup, Button, Select} from '@chakra-ui/react';
+import {useCallback, useRef} from 'react';
 
 export default function Selector({
   value,
@@ -12,19 +13,50 @@ export default function Selector({
     name: string;
   }>;
 }) {
+  const ref = useRef<HTMLDivElement>(null);
+  const onKeyDown = useCallback((e: KeyboardEvent) => {
+    if (e.key === 'ArrowRight') {
+      (
+        document.activeElement?.nextElementSibling as HTMLElement | null
+      )?.focus();
+    } else if (e.key === 'ArrowLeft') {
+      (
+        document.activeElement?.previousElementSibling as HTMLElement | null
+      )?.focus();
+    }
+  }, []);
+
+  const onFocus = useCallback(() => {
+    ref.current?.addEventListener('keydown', onKeyDown);
+  }, [onKeyDown]);
+
+  const onBlur = useCallback(() => {
+    ref.current?.removeEventListener('keydown', onKeyDown);
+  }, [onKeyDown]);
+
   return (
     <>
-      <ButtonGroup isAttached mt="5" display={['none', 'flex']}>
+      <ButtonGroup
+        isAttached
+        mt="5"
+        display={['none', 'flex']}
+        role="toolbar"
+        onFocus={onFocus}
+        onBlur={onBlur}
+        ref={ref}
+      >
         <Button
           onClick={() => onChange(null, -1)}
           variant={value === null ? 'primary' : undefined}
           aria-pressed={value == null}
           flexGrow="1"
+          tabIndex={value == null ? 0 : -1}
         >
           Alle
         </Button>
         {options.map((o, i) => (
           <Button
+            tabIndex={value === o.id ? 0 : -1}
             flexGrow="1"
             key={o.id}
             aria-pressed={o.id === value}

diff --git a/app/components/lineup/Band.tsx b/app/components/lineup/Band.tsx
@@ -39,7 +39,7 @@ export default function Band({band}: {band: BandFragment}) {
         src={band.photo?.scaledUri}
         loading="lazy"
         objectFit="cover"
-        blendMode="luminosity"
+        // blendMode="luminosity"
       />
       <Box
         position="absolute"

diff --git a/app/components/speisekarte/ProductList.tsx b/app/components/speisekarte/ProductList.tsx
@@ -2,14 +2,8 @@ import {gql} from '@apollo/client';
 import {InfoIcon} from '@chakra-ui/icons';
 import type {PlacementWithLogical} from '@chakra-ui/react';
 import {
-  AccordionButton,
-  AccordionIcon,
-  AccordionItem,
-  AccordionPanel,
-  Box,
   Divider,
   HStack,
-  Heading,
   ListItem,
   Text,
   Tooltip,
@@ -26,8 +20,6 @@ import type {
 gql`
   fragment ProductListComponent on ProductList {
     description
-    name
-    emoji
     product {
       additives {
         displayName
@@ -68,63 +60,51 @@ export default function ProductList({
   });
 
   return (
-    <AccordionItem>
-      <Heading>
-        <AccordionButton textTransform={'inherit'}>
-          <Box as="span" flex="1" textAlign="left">
-            {productList.emoji} {productList.name}
-          </Box>
-          <AccordionIcon />
-        </AccordionButton>
-      </Heading>
-      <AccordionPanel pb={4}>
-        <UnorderedList listStyleType={'none'} marginInlineStart={0}>
-          {productList.product.map((item, index) => (
-            <ListItem key={item.name}>
-              <HStack justifyContent={'space-between'} paddingY={1}>
-                <Text>
-                  {item.name}
-                  {item.additives.length > 0 && (
-                    <Tooltip
-                      label={<TooltipContent additives={item.additives} />}
-                      hasArrow
-                      placement={tooltipPlacement!}
-                    >
-                      <InfoIcon color={'offwhite.300'} marginLeft={1} />
-                    </Tooltip>
-                  )}
-                </Text>
-                <span>
-                  {item.requiresDeposit && (
-                    <Text color={'offwhite.500'} as={'span'}>
-                      *{' '}
-                    </Text>
-                  )}
-                  {new Intl.NumberFormat('de-DE', {
-                    style: 'currency',
-                    currency: 'EUR',
-                  }).format(item.price / 100)}
-                </span>
-              </HStack>
-              {(showDepositText || index < productListLength - 1) && (
-                <Divider />
-              )}
-            </ListItem>
-          ))}
-        </UnorderedList>
-        {showDepositText && (
-          <>
-            <Text textAlign={'right'} paddingTop={1} color={'offwhite.500'}>
-              * zuzüglich{' '}
-              {new Intl.NumberFormat('de-DE', {
-                style: 'currency',
-                currency: 'EUR',
-              }).format(2)}{' '}
-              Pfand
-            </Text>
-          </>
-        )}
-      </AccordionPanel>
-    </AccordionItem>
+    <>
+      <UnorderedList listStyleType="none" marginInlineStart={0}>
+        {productList.product.map((item, index) => (
+          <ListItem key={item.name}>
+            <HStack justifyContent="space-between" py={1}>
+              <Text>
+                {item.name}
+                {item.additives.length > 0 && (
+                  <Tooltip
+                    label={<TooltipContent additives={item.additives} />}
+                    hasArrow
+                    placement={tooltipPlacement!}
+                  >
+                    <InfoIcon color={'offwhite.300'} ml="1" mt="-1" />
+                  </Tooltip>
+                )}
+              </Text>
+              <span>
+                {item.requiresDeposit && (
+                  <Text color="offwhite.500" as="span">
+                    *{' '}
+                  </Text>
+                )}
+                {new Intl.NumberFormat('de-DE', {
+                  style: 'currency',
+                  currency: 'EUR',
+                }).format(item.price / 100)}
+              </span>
+            </HStack>
+            {(showDepositText || index < productListLength - 1) && <Divider />}
+          </ListItem>
+        ))}
+      </UnorderedList>
+      {showDepositText && (
+        <>
+          <Text textAlign="right" pt="1" color="offwhite.500">
+            * zuzüglich{' '}
+            {new Intl.NumberFormat('de-DE', {
+              style: 'currency',
+              currency: 'EUR',
+            }).format(2)}{' '}
+            Pfand
+          </Text>
+        </>
+      )}
+    </>
   );
 }
diff --git a/app/routes/_index.tsx b/app/routes/_index.tsx
@@ -1,11 +1,12 @@
-import {Box, Button, Center, Divider, Link} from '@chakra-ui/react';
+import {Center, Divider} from '@chakra-ui/react';
 import {gql} from '@apollo/client';
 import {NewsDocument, type NewsQuery} from '~/types/graphql';
 import {typedjson, useTypedLoaderData} from 'remix-typedjson';
 import React from 'react';
 import Article from '~/components/news/Article';
 import apolloClient from '~/utils/apolloClient';
 import {type LoaderArgs} from '@remix-run/node';
+import LinkButton from '~/components/LinkButton';
 
 gql`
   query News {
@@ -38,9 +39,7 @@ export default function Index() {
         </React.Fragment>
       ))}
       <Center>
-        <Button href="/news/archiv" as={Link}>
-          Ältere Beträge
-        </Button>
+        <LinkButton href="/news/archiv">Ältere Beträge</LinkButton>
       </Center>
     </>
   );