Readme without Example on desktop
This commit is contained in:
parent
d580a70283
commit
7f21257d72
11
src/api/getChallengeFullDescription.js
Normal file
11
src/api/getChallengeFullDescription.js
Normal file
@ -0,0 +1,11 @@
|
|||||||
|
import {API} from "../utils/globals";
|
||||||
|
|
||||||
|
const getChallengeFullDescription = (setState, challengeName) => {
|
||||||
|
fetch(`${API}/challenge-readme/${challengeName}/markdown`)
|
||||||
|
.then(response => response.text())
|
||||||
|
.then(data => {
|
||||||
|
setState(data);
|
||||||
|
});
|
||||||
|
}
|
||||||
|
|
||||||
|
export default getChallengeFullDescription;
|
@ -10,8 +10,15 @@ import metricIco from '../../assets/metric_ico.svg';
|
|||||||
import coinsIco from '../../assets/coins_ico.svg';
|
import coinsIco from '../../assets/coins_ico.svg';
|
||||||
import textIco from '../../assets/text_ico.svg';
|
import textIco from '../../assets/text_ico.svg';
|
||||||
import {RENDER_DEADLINE_TIME} from "../../utils/globals";
|
import {RENDER_DEADLINE_TIME} from "../../utils/globals";
|
||||||
|
import getChallengeFullDescription from "../../api/getChallengeFullDescription";
|
||||||
|
|
||||||
const Readme = (props) => {
|
const Readme = (props) => {
|
||||||
|
const [fullDescription, setFullDescription] = React.useState('');
|
||||||
|
|
||||||
|
React.useEffect(() => {
|
||||||
|
getChallengeFullDescription(setFullDescription, props.challengeName);
|
||||||
|
}, []);
|
||||||
|
|
||||||
const mobileRender = () => {
|
const mobileRender = () => {
|
||||||
return (
|
return (
|
||||||
<FlexColumn as='section' padding='20px' gap='24px'>
|
<FlexColumn as='section' padding='20px' gap='24px'>
|
||||||
@ -69,7 +76,7 @@ const Readme = (props) => {
|
|||||||
Description
|
Description
|
||||||
</H2>
|
</H2>
|
||||||
<Body as='p'>
|
<Body as='p'>
|
||||||
{props.description}
|
{fullDescription ? fullDescription : props.description}
|
||||||
</Body>
|
</Body>
|
||||||
</FlexColumn>
|
</FlexColumn>
|
||||||
<FlexColumn gap='16px' alignmentX='flex-start' maxWidth='260px'>
|
<FlexColumn gap='16px' alignmentX='flex-start' maxWidth='260px'>
|
||||||
@ -95,8 +102,83 @@ const Readme = (props) => {
|
|||||||
|
|
||||||
const desktopRender = () => {
|
const desktopRender = () => {
|
||||||
return (
|
return (
|
||||||
<>
|
<FlexColumn as='section' padding='20px' gap='64px'>
|
||||||
</>
|
<FlexColumn gap='32px'>
|
||||||
|
<H2 as='h2'>
|
||||||
|
Info
|
||||||
|
</H2>
|
||||||
|
<FlexColumn as='ul' gap='10px' padding='24px 30px' shadow={theme.shadow}
|
||||||
|
alignmentX='flex-start' border={`1px solid ${theme.colors.dark05}`}>
|
||||||
|
<FlexRow gap='20px' as='li'>
|
||||||
|
<Svg src={textIco} width='32px' height='32px'
|
||||||
|
backgroundColor={theme.colors.dark} size='contain'/>
|
||||||
|
<Medium as='p'>
|
||||||
|
The word-processing challenge
|
||||||
|
</Medium>
|
||||||
|
</FlexRow>
|
||||||
|
<FlexRow gap='20px' as='li'>
|
||||||
|
<Svg src={metricIco} width='32px' height='32px'
|
||||||
|
backgroundColor={theme.colors.dark} size='contain'/>
|
||||||
|
<Medium as='p'>
|
||||||
|
Metrics: {props.metric ? props.metric : 'xxx'}
|
||||||
|
</Medium>
|
||||||
|
</FlexRow>
|
||||||
|
<FlexRow gap='20px' as='li'>
|
||||||
|
<Svg src={bestScoreIco} width='32px' height='32px'
|
||||||
|
backgroundColor={theme.colors.dark} size='contain'/>
|
||||||
|
<Medium as='p'>
|
||||||
|
Best score: {props.bestScore ? props.bestScore : 'xxx'}
|
||||||
|
</Medium>
|
||||||
|
</FlexRow>
|
||||||
|
<FlexRow gap='20px' as='li'>
|
||||||
|
<Svg src={baselineIco} width='32px' height='32px'
|
||||||
|
backgroundColor={theme.colors.dark} size='contain'/>
|
||||||
|
<Medium as='p'>
|
||||||
|
Baseline: {props.baseline ? props.baseline : 'xxx'}
|
||||||
|
</Medium>
|
||||||
|
</FlexRow>
|
||||||
|
<FlexRow gap='20px' as='li'>
|
||||||
|
<Svg src={timeIco} width='32px' height='32px'
|
||||||
|
backgroundColor={theme.colors.dark} size='contain'/>
|
||||||
|
<Medium as='p'>
|
||||||
|
Deadline: {props.deadline ? RENDER_DEADLINE_TIME(props.deadline) : 'xxx'}
|
||||||
|
</Medium>
|
||||||
|
</FlexRow>
|
||||||
|
<FlexRow gap='20px' as='li'>
|
||||||
|
<Svg src={coinsIco} width='32px' height='32px'
|
||||||
|
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' width='80%' maxWidth='1000px'>
|
||||||
|
<H2 as='h2'>
|
||||||
|
Description
|
||||||
|
</H2>
|
||||||
|
<Body as='p'>
|
||||||
|
{fullDescription ? fullDescription : props.description}
|
||||||
|
</Body>
|
||||||
|
</FlexColumn>
|
||||||
|
<FlexColumn gap='16px' alignmentX='flex-start' width='80%' maxWidth='1000px'>
|
||||||
|
<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
|
||||||
|
<Medium as='a' href='#' display='inline-block' cursor='pointer'>
|
||||||
|
here.
|
||||||
|
</Medium>
|
||||||
|
</Body>
|
||||||
|
</FlexColumn>
|
||||||
|
</FlexColumn>
|
||||||
|
</FlexColumn>
|
||||||
);
|
);
|
||||||
}
|
}
|
||||||
|
|
||||||
@ -106,7 +188,7 @@ const Readme = (props) => {
|
|||||||
{mobileRender()}
|
{mobileRender()}
|
||||||
</Media>
|
</Media>
|
||||||
<Media query={theme.desktop}>
|
<Media query={theme.desktop}>
|
||||||
|
{desktopRender()}
|
||||||
</Media>
|
</Media>
|
||||||
</>
|
</>
|
||||||
);
|
);
|
||||||
|
@ -66,7 +66,7 @@ const Challenge = () => {
|
|||||||
{challenge.title}
|
{challenge.title}
|
||||||
</H1>
|
</H1>
|
||||||
<Medium as='p'>
|
<Medium as='p'>
|
||||||
{MINI_DESCRIPTION_RENDER(challenge.description)}
|
{challenge.description}
|
||||||
</Medium>
|
</Medium>
|
||||||
</FlexColumn>
|
</FlexColumn>
|
||||||
<Svg src={challenge.type ? RENDER_ICO(challenge.type) : textIco}
|
<Svg src={challenge.type ? RENDER_ICO(challenge.type) : textIco}
|
||||||
|
Loading…
Reference in New Issue
Block a user