diff --git a/public/images/homepage/velka-2.jpg b/public/images/homepage/velka-2.jpg new file mode 100644 index 000000000..aa7bd4ebb Binary files /dev/null and b/public/images/homepage/velka-2.jpg differ diff --git a/public/images/homepage/velka.jpg b/public/images/homepage/velka.jpg new file mode 100644 index 000000000..807e55b7e Binary files /dev/null and b/public/images/homepage/velka.jpg differ diff --git a/src/components/HomepagePanel/HomepageOpenClimbingGallery.tsx b/src/components/HomepagePanel/HomepageOpenClimbingGallery.tsx index f741404b0..dedcef6dc 100644 --- a/src/components/HomepagePanel/HomepageOpenClimbingGallery.tsx +++ b/src/components/HomepagePanel/HomepageOpenClimbingGallery.tsx @@ -4,6 +4,7 @@ import { Scrollbars } from 'react-custom-scrollbars'; import Link from 'next/link'; import { intl, t } from '../../services/intl'; import React from 'react'; +import { Typography } from '@mui/material'; const HOMEPAGE_GALLERY_HEIGHT = 200; @@ -13,6 +14,11 @@ const data = [ src: '/images/homepage/hlubocepske-plotny', children: 'Hlubočepské plotny', }, + { + href: '/relation/14297763', + src: '/images/homepage/velka', + children: 'Velká (Vltavská žula)', + }, { href: '/relation/17696060', src: '/images/homepage/frankenjura', @@ -60,6 +66,11 @@ const data = [ }, ]; +export const DiscoveryMoreText = styled.div` + text-transform: lowercase; + font-weight: normal; + margin-bottom: 8px; +`; export const GalleryWrapper = styled.div` width: calc(100% + 32px * 2); height: calc(${HOMEPAGE_GALLERY_HEIGHT}px + 10px); // 10px for scrollbar @@ -99,7 +110,7 @@ const Text = styled.div<{ center: boolean }>` font-size: 12px; text-transform: uppercase; letter-spacing: 2px; - ${({ center }) => center === true && `top: 35%`}; + ${({ center }) => center === true && `top: 40%`}; `; const StyledScrollbars = styled(Scrollbars)` @@ -133,6 +144,7 @@ type GalleryItemProps = { blur?: boolean; center?: boolean; alt?: string; + title?: string; }; const GalleryItem = ({ @@ -143,6 +155,7 @@ const GalleryItem = ({ blur, center, alt, + title, }: GalleryItemProps) => ( @@ -152,6 +165,7 @@ const GalleryItem = ({ srcSet={srcSet} height={HOMEPAGE_GALLERY_HEIGHT} alt={alt} + title={title} /> {children} @@ -171,7 +185,8 @@ export const HomepageOpenClimbingGallery = () => ( src={`${item.src}.jpg`} srcSet={`${item.src}.jpg, ${item.src}-2.jpg 2x`} - alt={item.children} + alt={`${t('homepage.openclimbing_climbing_area')} ${item.children}`} + title={`${t('homepage.openclimbing_climbing_area')} ${item.children}`} > {item.children} @@ -183,9 +198,8 @@ export const HomepageOpenClimbingGallery = () => ( href="/climbing-areas" src="/images/homepage/solvayovy-lomy.jpg" > - {t('homepage.discover_more_p1')} -
-

370+ {t('homepage.discover_more_p2')}

+ {t('homepage.discover_more_p1')} + 370+ {t('homepage.discover_more_p2')} diff --git a/src/components/utils/Drawer.tsx b/src/components/utils/Drawer.tsx index 836ae9b96..17edcf23b 100644 --- a/src/components/utils/Drawer.tsx +++ b/src/components/utils/Drawer.tsx @@ -35,7 +35,7 @@ const Container = styled.div` overflow: hidden; `; -const Content = styled.div` +const Content = styled.main` height: 100%; overflow: auto; `; diff --git a/src/components/utils/PanelHelpers.tsx b/src/components/utils/PanelHelpers.tsx index f55c43cdd..e814176d6 100644 --- a/src/components/utils/PanelHelpers.tsx +++ b/src/components/utils/PanelHelpers.tsx @@ -9,7 +9,7 @@ import { SEARCH_BOX_HEIGHT } from '../SearchBox/consts'; // custom scrollbar // better: https://github.com/rommguy/react-custom-scroll // maybe https://github.com/malte-wessel/react-custom-scrollbars (larger) -const Columns = styled.div` +const Columns = styled.main` display: flex; flex-direction: column; height: calc(100% - ${SEARCH_BOX_HEIGHT}px); diff --git a/src/locales/cs.js b/src/locales/cs.js index cc553d811..ad65038fb 100644 --- a/src/locales/cs.js +++ b/src/locales/cs.js @@ -75,6 +75,7 @@ export default { 'homepage.our_story': `Náš příběh`, 'homepage.openclimbing_description_p1': `Aplikace pro mapování skalních oblastí a vytváření interaktivních lezeckých průvodců.`, 'homepage.openclimbing_description_p2': `Všechna data jsou otevřená a každý je může upravit – podobně jako na Wikipedii.`, + 'homepage.openclimbing_climbing_area': `Climbing area`, 'homepage.description_show_more': `zobrazit více`, 'homepage.expanded_description_p1': `Aplikace je vyvíjena jako open-source, využívá`, 'homepage.expanded_description_p2': `pro ukládání lezeckých cest a obrázky jsou sdíleny prostřednictvím`, diff --git a/src/locales/vocabulary.js b/src/locales/vocabulary.js index b45770f4a..c280c471c 100644 --- a/src/locales/vocabulary.js +++ b/src/locales/vocabulary.js @@ -109,6 +109,7 @@ export default { 'homepage.our_story': `Our story`, 'homepage.openclimbing_description_p1': `Application for mapping climbing areas and creating interactive climbing guides.`, 'homepage.openclimbing_description_p2': `All data is open and anyone can edit it – similar to Wikipedia.`, + 'homepage.openclimbing_climbing_area': `Climbing area`, 'homepage.description_show_more': `show more`, 'homepage.expanded_description_p1': `Application is developed as open-source, it uses`, 'homepage.expanded_description_p2': `for storing climbing routes and images are shared via`,