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

Readme without Example on desktop

Browse Source
This commit is contained in:
mattyl006 2022-07-26 14:57:12 +02:00
parent d580a70283
commit 7f21257d72
3 changed files with 98 additions and 5 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

11
src/api/getChallengeFullDescription.js Normal file
View 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;

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

@ -10,8 +10,15 @@ 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";
import getChallengeFullDescription from "../../api/getChallengeFullDescription";
const Readme = (props) => {
const [fullDescription, setFullDescription] = React.useState('');
React.useEffect(() => {
getChallengeFullDescription(setFullDescription, props.challengeName);
}, []);
const mobileRender = () => {
return (
<FlexColumn as='section' padding='20px' gap='24px'>
@ -69,7 +76,7 @@ const Readme = (props) => {
Description
</H2>
<Body as='p'>
{props.description}
{fullDescription ? fullDescription : props.description}
</Body>
</FlexColumn>
<FlexColumn gap='16px' alignmentX='flex-start' maxWidth='260px'>
@ -95,8 +102,83 @@ const Readme = (props) => {
const desktopRender = () => {
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&nbsp;
<Medium as='a' href='#' display='inline-block' cursor='pointer'>
here.
</Medium>
</Body>
</FlexColumn>
</FlexColumn>
</FlexColumn>
);
}
@ -106,7 +188,7 @@ const Readme = (props) => {
{mobileRender()}
</Media>
<Media query={theme.desktop}>
{desktopRender()}
</Media>
</>
);

2
src/pages/Challenge.js
View File

@ -66,7 +66,7 @@ const Challenge = () => {
{challenge.title}
</H1>
<Medium as='p'>
{MINI_DESCRIPTION_RENDER(challenge.description)}
{challenge.description}
</Medium>
</FlexColumn>
<Svg src={challenge.type ? RENDER_ICO(challenge.type) : textIco}