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

desktop header in Challenge

Browse Source
This commit is contained in:
mattyl006 2022-07-15 12:49:10 +02:00
parent 23ab91688d
commit 0d7af783e1
6 changed files with 124 additions and 51 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

11
src/components/elements/DesktopChallengeMenu.js Normal file
View File

@ -0,0 +1,11 @@
import React from "react";
const DesktopChallengeMenu = () => {
return (
<>
</>
);
}
export default DesktopChallengeMenu;

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

@ -11,6 +11,11 @@ const FilterStyle = styled(FlexRow)`
box-shadow: ${({theme}) => theme.shadow}; box-shadow: ${({theme}) => theme.shadow};
cursor: pointer; cursor: pointer;
background-color: ${({theme, active}) => active ? theme.colors.dark : theme.colors.white}; background-color: ${({theme, active}) => active ? theme.colors.dark : theme.colors.white};
transition: transform 0.3s ease-in-out;
&:hover {
transform: scale(1.1);
}
p { p {
color: ${({theme, active}) => active ? theme.colors.white : theme.colors.dark}; color: ${({theme, active}) => active ? theme.colors.white : theme.colors.dark};

34
src/components/elements/IconLabel.js
View File

@ -1,15 +1,8 @@
import React from "react"; import React from "react";
import {FlexRow, Svg} from "../../utils/containers"; import {FlexRow, Svg} from "../../utils/containers";
import {Body, Medium} from "../../utils/fonts"; import {Body, Medium} from "../../utils/fonts";
import metricIco from '../../assets/metric_ico.svg';
import coinsIco from '../../assets/coins_ico.svg';
import baselineIco from '../../assets/baseline_ico.svg';
import clockIco from '../../assets/clock_ico.svg';
import cupIco from '../../assets/cup_ico.svg';
import styled from "styled-components"; import styled from "styled-components";
import textIco from '../../assets/text_ico.svg'; import {RENDER_ICO} from "../../utils/globals";
import tabularIco from '../../assets/tabular_ico.svg';
import imageIco from '../../assets/image_ico.svg';
const HoverLabel = styled(Body)` const HoverLabel = styled(Body)`
position: absolute; position: absolute;
@ -53,29 +46,6 @@ const renderHoverLabel = (type) => {
} }
} }
const renderIco = (type) => {
switch (type) {
case 'metric':
return metricIco;
case 'prize':
return coinsIco;
case 'baseline':
return baselineIco;
case 'deadline':
return clockIco;
case 'bestScore':
return cupIco;
case 'text':
return textIco;
case 'image':
return imageIco;
case 'tabular':
return tabularIco;
default:
return '';
}
}
const IconLabelStyle = styled(FlexRow)` const IconLabelStyle = styled(FlexRow)`
position: relative; position: relative;
@ -90,7 +60,7 @@ const IconLabel = (props) => {
return ( return (
<IconLabelStyle gap={props.gap}> <IconLabelStyle gap={props.gap}>
<Svg width={props.size} height={props.size} <Svg width={props.size} height={props.size}
src={renderIco(props.type)}/> src={RENDER_ICO(props.type)}/>
{props.children ? {props.children ?
<Medium as='p'> <Medium as='p'>
{props.children} {props.children}

10
src/components/elements/MiniChallenge.js
View File

@ -4,7 +4,7 @@ import {Body, H3} from "../../utils/fonts";
import styled from "styled-components"; import styled from "styled-components";
import IconLabel from "./IconLabel"; import IconLabel from "./IconLabel";
import {Link} from "react-router-dom"; import {Link} from "react-router-dom";
import {CHALLENGE_PAGE, MINI_DESCRIPTION_LENGTH} from "../../utils/globals"; import {CHALLENGE_PAGE, MINI_DESCRIPTION_RENDER} from "../../utils/globals";
import theme from "../../utils/theme"; import theme from "../../utils/theme";
const ChallengeStyle = styled(FlexColumn)` const ChallengeStyle = styled(FlexColumn)`
@ -51,12 +51,6 @@ const IconsGrid = styled(Grid)`
`; `;
const MiniChallenge = (props) => { const MiniChallenge = (props) => {
const renderDescription = (description) => {
if (description.length <= MINI_DESCRIPTION_LENGTH)
return description;
return `${description.slice(0, MINI_DESCRIPTION_LENGTH)}...`
}
return ( return (
<ChallengeStyle as={Link} to={`${CHALLENGE_PAGE}/${props.name}`}> <ChallengeStyle as={Link} to={`${CHALLENGE_PAGE}/${props.name}`}>
<FlexColumn as='article'> <FlexColumn as='article'>
@ -68,7 +62,7 @@ const MiniChallenge = (props) => {
</FlexRow> </FlexRow>
<Container margin='0 0 14px 0' width='85%' height='1px' backgroundColor={theme.colors.dark05}/> <Container margin='0 0 14px 0' width='85%' height='1px' backgroundColor={theme.colors.dark05}/>
<Body as='p' margin='0 0 14px 0'> <Body as='p' margin='0 0 14px 0'>
{props.description ? renderDescription(props.description) : 'xxx'} {props.description ? MINI_DESCRIPTION_RENDER(props.description) : 'xxx'}
</Body> </Body>
<IconsGrid> <IconsGrid>
<IconLabel size='24px' gap='8px' type='metric'> <IconLabel size='24px' gap='8px' type='metric'>

64
src/pages/Challenge.js
View File

@ -1,7 +1,7 @@
import React from "react"; import React from "react";
import {Container, FlexColumn, FlexRow} from "../utils/containers"; import {Container, FlexColumn, FlexRow, Svg} from "../utils/containers";
import {useParams} from "react-router-dom"; import {useParams} from "react-router-dom";
import {H1} from "../utils/fonts"; import {H1, Medium} from "../utils/fonts";
import getChallenges from "../api/getChallenges"; import getChallenges from "../api/getChallenges";
import theme from "../utils/theme"; import theme from "../utils/theme";
import MobileChallengeMenu from "../components/elements/MobileChallengeMenu"; import MobileChallengeMenu from "../components/elements/MobileChallengeMenu";
@ -10,6 +10,10 @@ import Readme from "../components/sections/Readme";
import HowTo from "../components/sections/HowTo"; import HowTo from "../components/sections/HowTo";
import MyEntries from "../components/sections/MyEntries"; import MyEntries from "../components/sections/MyEntries";
import Submit from "../components/sections/Submit"; import Submit from "../components/sections/Submit";
import Media from "react-media";
import DesktopChallengeMenu from "../components/elements/DesktopChallengeMenu";
import {MINI_DESCRIPTION_RENDER, RENDER_ICO} from "../utils/globals";
import textIco from "../assets/text_ico.svg";
const Challenge = () => { const Challenge = () => {
const challengeName = useParams().challengeId; const challengeName = useParams().challengeId;
@ -47,15 +51,55 @@ const Challenge = () => {
} }
} }
const mobileRender = () => {
return (
<FlexColumn minHeight='100vh' gap='12px' alignmentY='flex-start' padding='66px 0 0 0'>
<H1 margin='0 0 8px 0'>
{getChallenge().title}
</H1>
<MobileChallengeMenu setSection={setSection}/>
<Container width='75%' height='1px' backgroundColor={theme.colors.dark}/>
{sectionRender()}
</FlexColumn>
);
}
const desktopRender = () => {
return (
<>
<DesktopChallengeMenu/>
<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>
{getChallenge().title}
</H1>
<Medium>
{MINI_DESCRIPTION_RENDER(getChallenge().description)}
</Medium>
</FlexColumn>
<Svg src={getChallenge().type ? RENDER_ICO(getChallenge().type) : textIco}
width='120px'
height='120px'
size='cover'/>
</FlexRow>
<Container width='55%' minWidth='600px' height='1px' backgroundColor={theme.colors.dark}/>
{sectionRender()}
</FlexColumn>
</>
);
}
return ( return (
<FlexColumn minHeight='100vh' gap='12px' alignmentY='flex-start' padding='66px 0 0 0'> <>
<H1 margin='0 0 8px 0'> <Media query={theme.mobile}>
{getChallenge().title} {mobileRender()}
</H1> </Media>
<MobileChallengeMenu setSection={setSection}/> <Media query={theme.desktop}>
<Container width='75%' height='1px' backgroundColor={theme.colors.dark}/> {desktopRender()}
{sectionRender()} </Media>
</FlexColumn> </>
); );
} }

51
src/utils/globals.js
View File

@ -1,7 +1,56 @@
import metricIco from "../assets/metric_ico.svg";
import coinsIco from "../assets/coins_ico.svg";
import baselineIco from "../assets/baseline_ico.svg";
import clockIco from "../assets/clock_ico.svg";
import cupIco from "../assets/cup_ico.svg";
import textIco from "../assets/text_ico.svg";
import imageIco from "../assets/image_ico.svg";
import tabularIco from "../assets/tabular_ico.svg";
const ELEMENTS_PER_PAGE = 12; const ELEMENTS_PER_PAGE = 12;
const MINI_DESCRIPTION_LENGTH = 70; const MINI_DESCRIPTION_LENGTH = 70;
const API = 'https://gonito.net/api'; const API = 'https://gonito.net/api';
const CHALLENGES_PAGE = '/challenges'; const CHALLENGES_PAGE = '/challenges';
const CHALLENGE_PAGE = '/challenge'; const CHALLENGE_PAGE = '/challenge';
export {ELEMENTS_PER_PAGE, API, CHALLENGES_PAGE, CHALLENGE_PAGE, MINI_DESCRIPTION_LENGTH}; const MINI_DESCRIPTION_RENDER = (description) => {
if (description) {
if (description.length <= MINI_DESCRIPTION_LENGTH)
return description;
return `${description.slice(0, MINI_DESCRIPTION_LENGTH)}...`;
}
return 'xxx';
}
const RENDER_ICO = (type) => {
switch (type) {
case 'metric':
return metricIco;
case 'prize':
return coinsIco;
case 'baseline':
return baselineIco;
case 'deadline':
return clockIco;
case 'bestScore':
return cupIco;
case 'text':
return textIco;
case 'image':
return imageIco;
case 'tabular':
return tabularIco;
default:
return '';
}
}
export {
ELEMENTS_PER_PAGE,
API,
CHALLENGES_PAGE,
CHALLENGE_PAGE,
MINI_DESCRIPTION_LENGTH,
MINI_DESCRIPTION_RENDER,
RENDER_ICO
};