Skip to content

Commit

Permalink
Homepage: New openclimbing.org homepage
Browse files Browse the repository at this point in the history
  • Loading branch information
jvaclavik committed Nov 10, 2024
1 parent c47e154 commit c1b2f97
Show file tree
Hide file tree
Showing 19 changed files with 636 additions and 8 deletions.
2 changes: 1 addition & 1 deletion pages/_document.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -49,7 +49,7 @@ export default class MyDocument extends Document<Props> {
<DocumentHeadTags emotionStyleTags={emotionStyleTags} />
<link
rel="stylesheet"
href="https://fonts.googleapis.com/css?family=Roboto:300,400,500,700&display=swap"
href="https://fonts.googleapis.com/css?family=Roboto:300,400,500,700&display=swap&family=Piazzolla:ital,opsz,wght@0,8..30,900;1,8..30,900"
/>
<link rel="preconnect" href="https://api.maptiler.com" />
<link rel="preconnect" href="https://a.mapillary.com" />
Expand Down
Binary file added public/images/frankenjura.jpeg
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added public/images/hlubocepske-plotny.jpeg
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added public/images/kacak.jpeg
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added public/images/kobyla.jpeg
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added public/images/lomy-nad-velkou.jpeg
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added public/images/roviste.jpeg
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added public/images/solvayovy-lomy.jpeg
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added public/images/tetinske-skaly.jpeg
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added public/images/u-zidovy-strouhy.jpeg
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added public/images/zupanovice.jpeg
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
2 changes: 1 addition & 1 deletion src/assets/LogoMaptiler.tsx
Original file line number Diff line number Diff line change
@@ -1,6 +1,6 @@
import { useUserThemeContext } from '../helpers/theme';

export const LogoMaptiler = (props: { width: number; height: number }) => {
export const LogoMaptiler = (props: { width?: number; height?: number }) => {
const { currentTheme } = useUserThemeContext();
const darkmode = currentTheme === 'dark';

Expand Down
7 changes: 6 additions & 1 deletion src/assets/LogoOpenClimbing.tsx
Original file line number Diff line number Diff line change
@@ -1,6 +1,11 @@
import React from 'react';

export const LogoOpenClimbing = ({ width, style }) => (
type LogoOpenClimbingProps = {
width: number;
style?: React.CSSProperties;
};

export const LogoOpenClimbing = ({ width, style }: LogoOpenClimbingrops) => (
<svg
width={width}
viewBox="0 0 609 609"
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -13,7 +13,7 @@ type Props = {

export const ShareDialog = ({ open, onClose }: Props) => {
return (
<Dialog open={open} onClose={onClose} maxWidth="xs">
<Dialog open={open} onClose={onClose}>
<DialogTitle>{t('featurepanel.share_button')}</DialogTitle>
<DialogContent>
<LinkSection />
Expand Down
26 changes: 26 additions & 0 deletions src/components/HomepagePanel/DividerOpenClimbing.tsx
Original file line number Diff line number Diff line change
@@ -0,0 +1,26 @@
import React from 'react';

type DivoderOpenClimbingProps = {
width: number | string;
style?: React.CSSProperties;
};

export const DividerOpenClimbing = ({
width,
style,
}: DivoderOpenClimbingProps) => (
<svg
width={width}
viewBox="0 0 1776 81"
fill="none"
xmlns="http://www.w3.org/2000/svg"
style={style}
>
<path
d="M8 30.4758L770.042 30.4758C868.384 30.4758 865.376 72.947 899.308 72.947C928.393 72.947 937.28 53.7187 937.28 40.0921C937.28 26.4654 930.009 7.99993 899.308 7.99992C860.528 7.99992 873.455 72.947 834.675 72.947C803.974 72.947 797.511 53.7187 797.511 40.0921C797.511 26.4654 807.206 7.99992 834.675 7.99992C868.607 7.99992 868.384 49.7079 968.789 49.7083L1768 49.7084"
stroke="#EB5757"
stroke-width="12"
stroke-linecap="round"
/>
</svg>
);
216 changes: 213 additions & 3 deletions src/components/HomepagePanel/Homepage.tsx
Original file line number Diff line number Diff line change
@@ -1,8 +1,19 @@
import { Button, Grid, Typography } from '@mui/material';
import {
Button,
Grid,
Stack,
Typography,
Link as LinkMui,
Accordion,
AccordionSummary,
AccordionDetails,
// Divider,
} from '@mui/material';
import ArrowForwardIcon from '@mui/icons-material/ArrowForward';
import GetAppIcon from '@mui/icons-material/GetApp';
import React from 'react';
import styled from '@emotion/styled';
import ChevronRightIcon from '@mui/icons-material/ChevronRight';
import Link from 'next/link';
import {
PanelContent,
Expand All @@ -11,6 +22,7 @@ import {
} from '../utils/PanelHelpers';
import { ClosePanelButton } from '../utils/ClosePanelButton';
import { LogoOpenClimbing } from '../../assets/LogoOpenClimbing';
import ExpandMoreIcon from '@mui/icons-material/ExpandMore';
import {
PROJECT_DECRIPTION,
PROJECT_ID,
Expand All @@ -19,12 +31,25 @@ import {
import { intl, t, Translation } from '../../services/intl';
import { nl2br } from '../utils/nl2br';
import GithubIcon from '../../assets/GithubIcon';
import { SEARCH_BOX_HEIGHT } from '../SearchBox/consts';
import LogoOsmapp from '../../assets/LogoOsmapp';
import { LogoMaptiler } from '../../assets/LogoMaptiler';
import { DividerOpenClimbing } from './DividerOpenClimbing';
import { useMobileMode } from '../helpers';
import { HomepageOpenClimbing } from './HomepageOpenClimbing';

export const Divider = styled.div`
align-items: center;
display: flex;
margin: 0 -32px;
`;

export const GalleryItem = styled.div`
width: 100%;
height: 100px;
background-color: rgba(0, 0, 0, 0.1);
`;
export const Content = styled.div`
height: calc(100% - ${SEARCH_BOX_HEIGHT}px);
height: 100%;
padding: 20px 2em 0 2em;
`;
const StyledLogoOsmapp = styled(LogoOsmapp)`
Expand Down Expand Up @@ -88,7 +113,192 @@ export function Homepage({
onClick: () => void;
mobileMode: boolean;
}) {
const [isTextInfoExpanded, setIsTextInfoExpanded] = React.useState(false);
const isClimbing = PROJECT_ID === 'openclimbing';
const isMobileMode = useMobileMode();

if (true || isClimbing) {
return <HomepageOpenClimbing onClose={onClick} />;
}
return (
<PanelContent>
<PanelScrollbars>
<ClosePanelButton right onClick={onClick} />
<Content>
<Stack height="100%">
<Stack flex={1} justifyContent="center">
<Stack
direction={isMobileMode ? 'row' : 'column'}
alignItems="center"
spacing={3}
sx={{
mt: 1,
mb: 3,
}}
>
<LogoOpenClimbing
width={isMobileMode ? 32 : 58}
style={{ minWidth: isMobileMode ? 32 : 58 }}
/>
<Typography
variant={isMobileMode ? 'h5' : 'h4'}
fontFamily="Piazzolla"
component="h1"
color="inherit"
fontWeight={900}
>
openclimbing.org
</Typography>
</Stack>

<Typography variant="body2" component="p" color="inherit">
Aplikace pro mapování skalních oblastí a vytváření
interaktivních lezeckých průvodců.{' '}
<strong>
Všechna data jsou otevřená a každý je může upravit – podobně
jako na Wikipedii.
{!isTextInfoExpanded && (
<>
..{' '}
<LinkMui
onClick={() => setIsTextInfoExpanded(true)}
locale={intl.lang}
>
(zobrazit více)
</LinkMui>
</>
)}
</strong>
</Typography>

{isTextInfoExpanded && (
<Typography
variant="body2"
component="p"
color="inherit"
mt={1}
>
Aplikace je vyvíjena jako open-source, využívá{' '}
<Link
href="https://wikipedia.org/wiki/OpenStreetMap"
target="_blank"
>
OpenStreetMap
</Link>{' '}
pro ukládání lezeckých cest a obrázky jsou sdíleny
prostřednictvím{' '}
<Link
href="https://wikipedia.org/wiki/Wikimedia_Commons"
target="_blank"
>
Wikimedia Commons
</Link>
, což umožňuje snadné a efektivní sdílení informací.
</Typography>
)}

<Stack direction="row" spacing={2} mt={4}>
<GalleryItem name="Roviště" />
<GalleryItem name="Hlubočepy" />
<GalleryItem name="Kobyla" />
</Stack>

<Button
variant="contained"
color="primary"
endIcon={<ChevronRightIcon />}
onClick={onClick}
fullWidth
size="large"
sx={{ mt: 5, mb: 2 }}
>
Přejít na mapu
</Button>
<Stack spacing={1} direction={'row'} mb={4}>
<Button variant="text" fullWidth>
Přidat oblast
</Button>
<Button
variant="text"
fullWidth
href="https://medium.com/@jvaclavik/story-behind-openclimbing-org-ab448939c6ac"
target="_blank"
>
Náš příběh
</Button>
</Stack>
</Stack>
{/* <Divider /> */}
<Divider>
<DividerOpenClimbing width="100%" />
</Divider>

<Typography variant="h6" paragraph mt={4}>
Důležité odkazy
</Typography>
<Accordion sx={{ background: 'rgba(0,0,0,0.05)' }}>
<AccordionSummary
expandIcon={<ExpandMoreIcon />}
aria-controls="panel1-content"
id="panel1-header"
>
<Stack direction="row" spacing={2} alignItems="center">
<GithubIcon width="32" />
<Typography variant="body1" paragraph>
Github repozitář
</Typography>
</Stack>
</AccordionSummary>
<AccordionDetails>
<Translation id="homepage.github_link" />
</AccordionDetails>
</Accordion>
<Accordion sx={{ background: 'rgba(0,0,0,0.05)' }}>
<AccordionSummary
expandIcon={<ExpandMoreIcon />}
aria-controls="panel1-content"
id="panel1-header"
>
<Stack direction="row" spacing={2} alignItems="center">
<img
src="/logo-osm.svg"
alt="OpenStreetMap logo"
width={32}
/>
<Typography variant="body1" paragraph>
OpenStreetMap
</Typography>
</Stack>
</AccordionSummary>
<AccordionDetails>
<Typography variant="body2" paragraph>
<Translation id="homepage.about_osm" />
</Typography>
</AccordionDetails>
</Accordion>

<Stack
spacing={1}
direction={'row'}
mt={6}
mb={2}
justifyContent="space-between"
>
<a href="https://www.maptiler.com" target="_blank">
<LogoMaptiler width={140} />
</a>
<a
href="https://vercel.com/?utm_source=osm-app-team&utm_campaign=oss"
target="_blank"
>
<img src="/vercel.svg" alt="Vercel" width="160" />
</a>
</Stack>
</Stack>
</Content>
</PanelScrollbars>
</PanelContent>
);

return (
<PanelContent>
Expand Down
Loading

0 comments on commit c1b2f97

Please sign in to comment.