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

Readme section without Example on mobile

Browse Source
This commit is contained in:
mattyl006 2022-07-26 13:34:41 +02:00
parent 09b1e67513
commit d580a70283
4 changed files with 126 additions and 24 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -2,7 +2,7 @@ import React from "react";
import {FlexRow, Svg} from "../../utils/containers";
import {Body, Medium} from "../../utils/fonts";
import styled from "styled-components";
import {RENDER_ICO} from "../../utils/globals";
import {RENDER_DEADLINE_TIME, RENDER_ICO} from "../../utils/globals";
const HoverLabel = styled(Body)`
position: absolute;
@ -18,15 +18,6 @@ const HoverLabel = styled(Body)`
color: ${({theme}) => theme.colors.white};
`;
const renderDeadlineTime = (time) => {
if (time) {
const date = time.slice(0, 10);
const hour = time.slice(11, 16);
return `${date} ${hour}`;
}
return '';
}
const renderHoverLabel = (type, time) => {
const hoverLabel = (label) =>
<HoverLabel className='HoverLabel' type={type}>
@ -41,7 +32,7 @@ const renderHoverLabel = (type, time) => {
case 'baseline':
return hoverLabel('baseline');
case 'deadline':
return hoverLabel(`deadline ${renderDeadlineTime(time)}`);
return hoverLabel(`deadline ${RENDER_DEADLINE_TIME(time)}`);
case 'bestScore':
return hoverLabel('best score');
case 'text':

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

@ -1,15 +1,115 @@
import React from "react";
import {FlexColumn} from "../../utils/containers";
import {H2} from "../../utils/fonts";
import {FlexColumn, FlexRow, Svg} from "../../utils/containers";
import {Body, H2, Medium} from "../../utils/fonts";
import Media from "react-media";
import theme from "../../utils/theme";
import baselineIco from '../../assets/baseline_ico.svg';
import bestScoreIco from '../../assets/cup_ico.svg';
import timeIco from '../../assets/clock_ico.svg';
import metricIco from '../../assets/metric_ico.svg';
import coinsIco from '../../assets/coins_ico.svg';
import textIco from '../../assets/text_ico.svg';
import {RENDER_DEADLINE_TIME} from "../../utils/globals";
const Readme = () => {
const Readme = (props) => {
const mobileRender = () => {
return (
<FlexColumn padding='24px' as='section'>
<FlexColumn as='section' padding='20px' gap='24px'>
<FlexColumn gap='12px' alignmentX='flex-start'>
<H2 as='h2'>
Readme
Info
</H2>
<FlexColumn gap='10px' as='ul' alignmentX='flex-start'>
<FlexRow gap='10px' as='li'>
<Svg src={textIco} width='24px' height='24px'
backgroundColor={theme.colors.dark} size='contain'/>
<Medium as='p'>
The word-processing challenge
</Medium>
</FlexRow>
<FlexRow gap='10px' as='li'>
<Svg src={metricIco} width='24px' height='24px'
backgroundColor={theme.colors.dark} size='contain'/>
<Medium as='p'>
Metrics: {props.metric ? props.metric : 'xxx'}
</Medium>
</FlexRow>
<FlexRow gap='10px' as='li'>
<Svg src={bestScoreIco} width='24px' height='24px'
backgroundColor={theme.colors.dark} size='contain'/>
<Medium as='p'>
Best score: {props.bestScore ? props.bestScore : 'xxx'}
</Medium>
</FlexRow>
<FlexRow gap='10px' as='li'>
<Svg src={baselineIco} width='24px' height='24px'
backgroundColor={theme.colors.dark} size='contain'/>
<Medium as='p'>
Baseline: {props.baseline ? props.baseline : 'xxx'}
</Medium>
</FlexRow>
<FlexRow gap='10px' as='li'>
<Svg src={timeIco} width='24px' height='24px'
backgroundColor={theme.colors.dark} size='contain'/>
<Medium as='p'>
Deadline: {props.deadline ? RENDER_DEADLINE_TIME(props.deadline) : 'xxx'}
</Medium>
</FlexRow>
<FlexRow gap='10px' as='li'>
<Svg src={coinsIco} width='24px' height='24px'
backgroundColor={theme.colors.dark} size='contain'/>
<Medium as='p'>
Prize: {props.prize ? props.prize : 'xxx'}
</Medium>
</FlexRow>
</FlexColumn>
</FlexColumn>
<FlexColumn gap='16px' alignmentX='flex-start' maxWidth='260px'>
<H2 as='h2'>
Description
</H2>
<Body as='p'>
{props.description}
</Body>
</FlexColumn>
<FlexColumn gap='16px' alignmentX='flex-start' maxWidth='260px'>
<H2 as='h2'>
Baseline
</H2>
<FlexColumn gap='12px' alignmentX='flex-start'>
<Body as='p'>
In metus ex, venenatis quis risus eget, sodales venenatis nibh. Sed ullamcorper leo non nunc
euismod, id faucibus justo finibus. Nullam malesuada eros quam, eu lobortis leo feugiat non.
</Body>
<Body as='p'>
See notebook&nbsp;
<Medium as='a' href='#' display='inline-block' cursor='pointer'>
here.
</Medium>
</Body>
</FlexColumn>
</FlexColumn>
</FlexColumn>
);
}
const desktopRender = () => {
return (
<>
</>
);
}
return (
<>
<Media query={theme.mobile}>
{mobileRender()}
</Media>
<Media query={theme.desktop}>
</Media>
</>
);
}
export default Readme;

9
src/pages/Challenge.js
View File

@ -29,13 +29,14 @@ const Challenge = () => {
case 0:
return <Leaderboard challengeName={challengeName}/>
case 1:
return <Readme/>
return <Readme challengeName={challengeName} metric={challenge.mainMetric}
description={challenge.description} deadline={challenge.deadline}/>
case 2:
return <HowTo/>
return <HowTo challengeName={challengeName}/>
case 3:
return <MyEntries/>
return <MyEntries challengeName={challengeName}/>
case 4:
return <Submit/>
return <Submit challengeName={challengeName}/>
default:
return <Leaderboard challengeName={challengeName}/>
}

12
src/utils/globals.js
View File

@ -49,6 +49,15 @@ const CALC_PAGES = (objects) => {
return Math.ceil(objects.length / ELEMENTS_PER_PAGE);
}
const RENDER_DEADLINE_TIME = (time) => {
if (time) {
const date = time.slice(0, 10);
const hour = time.slice(11, 16);
return `${date} ${hour}`;
}
return '';
}
export {
ELEMENTS_PER_PAGE,
API,
@ -57,5 +66,6 @@ export {
MINI_DESCRIPTION_LENGTH,
MINI_DESCRIPTION_RENDER,
RENDER_ICO,
CALC_PAGES
CALC_PAGES,
RENDER_DEADLINE_TIME
};