s444498/gonito-frontend
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

DesktopChallengeMenu component

Browse Source
This commit is contained in:
mattyl006 2022-07-15 13:45:51 +02:00
parent 0d7af783e1
commit 02c4a28785
11 changed files with 65 additions and 31 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

46
src/components/elements/DesktopChallengeMenu.js
View File

@ -1,10 +1,48 @@
import React from "react";
import styled from "styled-components";
import {FlexColumn} from "../../utils/containers";
import {H3} from "../../utils/fonts";
const DesktopChallengeMenu = () => {
const DesktopChallengeMenuStyle = styled(FlexColumn)`
justify-content: flex-start;
position: fixed;
left: 0;
overflow-y: auto;
width: 310px;
height: 100vh;
top: 50px;
padding: 64px 0 0 0;
z-index: 2;
gap: 32px;
box-shadow: ${({theme}) => theme.shadowRight};
`;
const Option = styled(FlexColumn)`
height: 48px;
width: 100%;
transition: background-color 0.3s ease-in-out;
cursor: pointer;
&:hover {
background-color: ${({theme}) => theme.colors.green};
}
`;
const DesktopChallengeMenu = (props) => {
const options = ['Leaderboard', 'Readme', 'How to', 'My entries', 'Submit'];
return (
<>
</>
<DesktopChallengeMenuStyle>
{options.map((option, index) => {
return (
<Option key={`challenge_menu_option-${index}`} as='button'
onClick={() => props.setSection(index)}>
<H3 textTransform='uppercase'>
{option}
</H3>
</Option>
)
})}
</DesktopChallengeMenuStyle>
);
}

5
src/components/elements/FiltersMenu/FiltersMenu.js
View File

@ -17,7 +17,7 @@ const FiltersMenuStyle = styled(FlexColumn)`
max-height: 650px;
justify-content: flex-start;
padding: 14px 16px 14px 24px;
box-shadow: ${({theme}) => theme.filtersShadowLeft};
box-shadow: ${({theme}) => theme.shadowLeft};
background-color: ${({theme}) => theme.colors.white};
transition: transform 0.5s ease-in-out;
z-index: 3;
@ -32,8 +32,7 @@ const FiltersMenuStyle = styled(FlexColumn)`
top: 50px;
right: auto;
left: 0;
height: 100vh;
box-shadow: ${({theme}) => theme.filtersShadowRight};
box-shadow: ${({theme}) => theme.shadowRight};
padding: 32px 32px 64px;
}
`;

4
src/components/sections/HowTo.js
View File

@ -4,8 +4,8 @@ import {H2} from "../../utils/fonts";
const HowTo = () => {
return (
<FlexColumn padding='24px'>
<H2>
<FlexColumn padding='24px' as='section'>
<H2 as='h2'>
How to
</H2>
</FlexColumn>

4
src/components/sections/Leaderboard.js
View File

@ -4,8 +4,8 @@ import {H2} from "../../utils/fonts";
const Leaderboard = () => {
return (
<FlexColumn padding='24px'>
<H2>
<FlexColumn padding='24px' as='section'>
<H2 as='h2'>
Leaderboard
</H2>
</FlexColumn>

2
src/components/elements/MiniChallenge.js → src/components/sections/MiniChallenge.js
View File

@ -2,7 +2,7 @@ import React from "react";
import {Container, FlexColumn, FlexRow, Grid} from "../../utils/containers";
import {Body, H3} from "../../utils/fonts";
import styled from "styled-components";
import IconLabel from "./IconLabel";
import IconLabel from "../elements/IconLabel";
import {Link} from "react-router-dom";
import {CHALLENGE_PAGE, MINI_DESCRIPTION_RENDER} from "../../utils/globals";
import theme from "../../utils/theme";

4
src/components/sections/MyEntries.js
View File

@ -4,8 +4,8 @@ import {H2} from "../../utils/fonts";
const MyEntries = () => {
return (
<FlexColumn padding='24px'>
<H2>
<FlexColumn padding='24px' as='section'>
<H2 as='h2'>
My entries
</H2>
</FlexColumn>

4
src/components/sections/Readme.js
View File

@ -4,8 +4,8 @@ import {H2} from "../../utils/fonts";
const Readme = () => {
return (
<FlexColumn padding='24px'>
<H2>
<FlexColumn padding='24px' as='section'>
<H2 as='h2'>
Readme
</H2>
</FlexColumn>

4
src/components/sections/Submit.js
View File

@ -4,8 +4,8 @@ import {H2} from "../../utils/fonts";
const Submit = () => {
return (
<FlexColumn padding='24px'>
<H2>
<FlexColumn padding='24px' as='section'>
<H2 as='h2'>
Submit
</H2>
</FlexColumn>

2
src/pages/Challanges/_renderChallenges.js
View File

@ -1,5 +1,5 @@
import {ELEMENTS_PER_PAGE} from "../../utils/globals";
import MiniChallenge from "../../components/elements/MiniChallenge";
import MiniChallenge from "../../components/sections/MiniChallenge";
import {Grid} from "../../utils/containers";
import styled from "styled-components";

17
src/pages/Challenge.js
View File

@ -67,24 +67,21 @@ const Challenge = () => {
const desktopRender = () => {
return (
<>
<DesktopChallengeMenu/>
<DesktopChallengeMenu setSection={setSection}/>
<FlexColumn minHeight='100vh' alignmentY='flex-start' padding='64px 0 64px 310px'>
<FlexRow gap='32px' margin='0 0 32px 0'>
<FlexColumn alignmentX='flex-start' gap='24px' maxWidth='628px'>
<H1>
<FlexRow gap='32px' margin='0 0 32px 0' padding='16px'>
<FlexColumn alignmentX='flex-start' gap='24px' maxWidth='500px'>
<H1 as='h1'>
{getChallenge().title}
</H1>
<Medium>
<Medium as='p'>
{MINI_DESCRIPTION_RENDER(getChallenge().description)}
</Medium>
</FlexColumn>
<Svg src={getChallenge().type ? RENDER_ICO(getChallenge().type) : textIco}
width='120px'
height='120px'
size='cover'/>
width='120px' height='120px' size='contain'/>
</FlexRow>
<Container width='55%' minWidth='600px' height='1px' backgroundColor={theme.colors.dark}/>
<Container width='55%' height='1px' backgroundColor={theme.colors.dark}/>
{sectionRender()}
</FlexColumn>
</>

4
src/utils/theme.js
View File

@ -8,8 +8,8 @@ const theme = {
shadow: '1px 2px 4px rgba(52, 52, 52, 0.25)',
navShadow: '0 1px 2px rgba(52, 52, 52, 0.25)',
buttonShadow: '0 4px 4px rgba(52, 52, 52, 0.25)',
filtersShadowLeft: '-4px 4px 4px rgba(52, 52, 52, 0.25)',
filtersShadowRight: '2px 2px 4px rgba(52, 52, 52, 0.25)'
shadowLeft: '-4px 4px 4px rgba(52, 52, 52, 0.25)',
shadowRight: '2px 2px 4px rgba(52, 52, 52, 0.25)'
};
export default theme;