Readme section without Example on mobile

src/components/elements/IconLabel.js

@@ -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':

src/components/sections/Readme.js

@@ -1,14 +1,114 @@
 import React from "react";
-import {FlexColumn} from "../../utils/containers";
+import {FlexColumn, FlexRow, Svg} from "../../utils/containers";
-import {H2} from "../../utils/fonts";
+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>
+        </>
     );
 }
 

src/pages/Challenge.js

@@ -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}/>
         }

src/utils/globals.js

@@ -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
 };