desktop header in Challenge
This commit is contained in:
parent
23ab91688d
commit
0d7af783e1
11
src/components/elements/DesktopChallengeMenu.js
Normal file
11
src/components/elements/DesktopChallengeMenu.js
Normal file
@ -0,0 +1,11 @@
|
||||
import React from "react";
|
||||
|
||||
const DesktopChallengeMenu = () => {
|
||||
return (
|
||||
<>
|
||||
|
||||
</>
|
||||
);
|
||||
}
|
||||
|
||||
export default DesktopChallengeMenu;
|
@ -11,6 +11,11 @@ const FilterStyle = styled(FlexRow)`
|
||||
box-shadow: ${({theme}) => theme.shadow};
|
||||
cursor: pointer;
|
||||
background-color: ${({theme, active}) => active ? theme.colors.dark : theme.colors.white};
|
||||
transition: transform 0.3s ease-in-out;
|
||||
|
||||
&:hover {
|
||||
transform: scale(1.1);
|
||||
}
|
||||
|
||||
p {
|
||||
color: ${({theme, active}) => active ? theme.colors.white : theme.colors.dark};
|
||||
|
@ -1,15 +1,8 @@
|
||||
import React from "react";
|
||||
import {FlexRow, Svg} from "../../utils/containers";
|
||||
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 textIco from '../../assets/text_ico.svg';
|
||||
import tabularIco from '../../assets/tabular_ico.svg';
|
||||
import imageIco from '../../assets/image_ico.svg';
|
||||
import {RENDER_ICO} from "../../utils/globals";
|
||||
|
||||
const HoverLabel = styled(Body)`
|
||||
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)`
|
||||
position: relative;
|
||||
|
||||
@ -90,7 +60,7 @@ const IconLabel = (props) => {
|
||||
return (
|
||||
<IconLabelStyle gap={props.gap}>
|
||||
<Svg width={props.size} height={props.size}
|
||||
src={renderIco(props.type)}/>
|
||||
src={RENDER_ICO(props.type)}/>
|
||||
{props.children ?
|
||||
<Medium as='p'>
|
||||
{props.children}
|
||||
|
@ -4,7 +4,7 @@ import {Body, H3} from "../../utils/fonts";
|
||||
import styled from "styled-components";
|
||||
import IconLabel from "./IconLabel";
|
||||
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";
|
||||
|
||||
const ChallengeStyle = styled(FlexColumn)`
|
||||
@ -51,12 +51,6 @@ const IconsGrid = styled(Grid)`
|
||||
`;
|
||||
|
||||
const MiniChallenge = (props) => {
|
||||
const renderDescription = (description) => {
|
||||
if (description.length <= MINI_DESCRIPTION_LENGTH)
|
||||
return description;
|
||||
return `${description.slice(0, MINI_DESCRIPTION_LENGTH)}...`
|
||||
}
|
||||
|
||||
return (
|
||||
<ChallengeStyle as={Link} to={`${CHALLENGE_PAGE}/${props.name}`}>
|
||||
<FlexColumn as='article'>
|
||||
@ -68,7 +62,7 @@ const MiniChallenge = (props) => {
|
||||
</FlexRow>
|
||||
<Container margin='0 0 14px 0' width='85%' height='1px' backgroundColor={theme.colors.dark05}/>
|
||||
<Body as='p' margin='0 0 14px 0'>
|
||||
{props.description ? renderDescription(props.description) : 'xxx'}
|
||||
{props.description ? MINI_DESCRIPTION_RENDER(props.description) : 'xxx'}
|
||||
</Body>
|
||||
<IconsGrid>
|
||||
<IconLabel size='24px' gap='8px' type='metric'>
|
||||
|
@ -1,7 +1,7 @@
|
||||
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 {H1} from "../utils/fonts";
|
||||
import {H1, Medium} from "../utils/fonts";
|
||||
import getChallenges from "../api/getChallenges";
|
||||
import theme from "../utils/theme";
|
||||
import MobileChallengeMenu from "../components/elements/MobileChallengeMenu";
|
||||
@ -10,6 +10,10 @@ import Readme from "../components/sections/Readme";
|
||||
import HowTo from "../components/sections/HowTo";
|
||||
import MyEntries from "../components/sections/MyEntries";
|
||||
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 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 (
|
||||
<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>
|
||||
<>
|
||||
<Media query={theme.mobile}>
|
||||
{mobileRender()}
|
||||
</Media>
|
||||
<Media query={theme.desktop}>
|
||||
{desktopRender()}
|
||||
</Media>
|
||||
</>
|
||||
);
|
||||
}
|
||||
|
||||
|
@ -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 MINI_DESCRIPTION_LENGTH = 70;
|
||||
const API = 'https://gonito.net/api';
|
||||
const CHALLENGES_PAGE = '/challenges';
|
||||
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
|
||||
};
|
Loading…
Reference in New Issue
Block a user