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

Merge pull request #74 from mattyl006/my-brilliant-branch

Browse Source 
handle copy commands from CodeShell and some html structure refactor
This commit is contained in:
Mateusz Tylka 2022-11-18 13:16:55 +01:00 committed by mattyl006
commit 4bc98aa167
6 changed files with 338 additions and 164 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
.env
View File

@ -1,3 +1,3 @@
REACT_APP_KC_URL=https://auth-dev.csi.wmi.amu.edu.pl/
REACT_APP_KC_REALM=gonito-dev
REACT_APP_KC_CLIENT_ID=gonito-dev-heroku
REACT_APP_KC_CLIENT_ID=gonito-dev-localhost

1
src/assets/check_ico.svg Normal file
View File

@ -0,0 +1 @@
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><!--! Font Awesome Pro 6.2.1 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license (Commercial License) Copyright 2022 Fonticons, Inc. --><path d="M470.6 105.4c12.5 12.5 12.5 32.8 0 45.3l-256 256c-12.5 12.5-32.8 12.5-45.3 0l-128-128c-12.5-12.5-12.5-32.8 0-45.3s32.8-12.5 45.3 0L192 338.7 425.4 105.4c12.5-12.5 32.8-12.5 45.3 0z"/></svg>
Side by Side

After

Width:  |  Height:  |  Size: 428 B

40
src/components/generic/CodeShell.js
View File

@ -3,7 +3,8 @@ import {FlexColumn, Svg} from '../../utils/containers';
import styled from 'styled-components';
import theme from '../../utils/theme';
import copyIco from '../../assets/copy_ico.svg';
import {Code} from '../../utils/fonts';
import checkIco from '../../assets/check_ico.svg';
import {Body, Code} from '../../utils/fonts';
const CodeShellStyle = styled(FlexColumn)`
position: relative;
@ -14,6 +15,7 @@ const CodeShellStyle = styled(FlexColumn)`
border-radius: 4px;
width: 100%;
align-items: flex-start;
max-width: ${({maxWidth}) => maxWidth ? maxWidth : 'none'};
@media (min-width: ${({theme}) => theme.overMobile}) {
gap: 12px;
@ -21,21 +23,48 @@ const CodeShellStyle = styled(FlexColumn)`
}
`;
const CopiedMessageStyle = styled(Body)`
font-size: 16px;
position: absolute;
top: -24px;
right: -10px;
background-color: ${({theme}) => theme.colors.green};
color: ${({theme}) => theme.colors.white};
border-radius: 4px;
padding: 6px;
`;
const CodeShell = (props) => {
const [ico, setIco] = React.useState(copyIco);
const clickCopyButton = () => {
let commands = '';
if (props.commands.length > 1) {
for (let command of props.commands)
commands += command + '\n';
} else commands = props.commands;
navigator.clipboard.writeText(commands).then(r => console.log(r));
setIco(checkIco);
setTimeout(() => {
setIco(copyIco);
}, 3000);
};
const formatCommand = (command) => {
if (command[0] === '\t') {
return <>&nbsp;&nbsp;&nbsp;&nbsp;{formatCommand(command.slice(1))}</>;
/* eslint-disable */
} else if (command[0] === '\s') {
return <>&nbsp;{formatCommand(command.slice(1))}</>;
} return command;
}
return command;
};
const renderCommands = () => {
return (
props.commands.map((command, index) => {
return (
<Code key={`command-${props.codeBlockIndex}-${index}`} as='li'
<Code key={`command-${props.codeBlockIndex}-${index}`} as='li'
before={!props.disablePrompt}>
{formatCommand(command)}
</Code>
@ -45,9 +74,10 @@ const CodeShell = (props) => {
};
return (
<CodeShellStyle as='ul'>
<CodeShellStyle as='ul' maxWidth={props.maxWidth}>
<Svg position='absolute' top='12px' right='12px' cursor='pointer'
backgroundColor={theme.colors.white} src={copyIco}/>
backgroundColor={theme.colors.white} src={ico} onClick={clickCopyButton}/>
{ico === checkIco ? <CopiedMessageStyle>copied!</CopiedMessageStyle> : ''}
{renderCommands()}
</CodeShellStyle>
);

449
src/components/specific_challenge/HowTo.js
View File

@ -6,12 +6,14 @@ import CodeShell from '../generic/CodeShell';
import cubeIcon from '../../assets/cube_ico.svg';
import theme from '../../utils/theme';
import {IS_MOBILE} from '../../utils/globals';
import Media from 'react-media';
const HowTo = () => {
return (
<FlexColumn margin={IS_MOBILE() ? null : '64px 0 0 0'} padding={IS_MOBILE() ? '12px 20px' : null}
gap={IS_MOBILE() ? '24px' : '48px'} alignmentX='flex-start' maxWidth='668px'>
<FlexColumn as='article' gap={IS_MOBILE() ? '16px' : '24px'} alignmentX='flex-start'>
gap={IS_MOBILE() ? '24px' : '48px'} alignmentX={IS_MOBILE() ? 'flex-start' : 'center'}
maxWidth={IS_MOBILE() ? '668px' : 'none'}>
<FlexColumn as='article' maxWidth='680px' gap={IS_MOBILE() ? '16px' : '24px'} alignmentX='flex-start'>
<H2 as='h2' margin={IS_MOBILE() ? '0 0 4px 0' : '0 0 8px 0'}>
Get challenge repo
</H2>
@ -19,7 +21,7 @@ const HowTo = () => {
<CircleNumber number='1'/>
<Body as='p' margin='auto 0'>
You need to create empty repo with name:
<Medium>
<Medium as='span'>
yourID/challengeName
</Medium>
</Body>
@ -38,17 +40,18 @@ const HowTo = () => {
Make sure Gonito.net has access to your repo (e.g. by making it public).
</Body>
</FlexColumn>
<FlexColumn as='article' gap={IS_MOBILE() ? '16px' : '24px'} alignmentX='flex-start'>
<FlexColumn as='article' gap={IS_MOBILE() ? '16px' : '24px'} maxWidth='680px' alignmentX='flex-start'>
<H2 as='h2' margin={IS_MOBILE() ? '0 0 4px 0' : '0 0 8px 0'}>
Work on your solution
</H2>
<Body as='p'>
You need to generate your solution for the test set as <Medium>test-A/out.tsv</Medium>. It is also
You need to generate your solution for the test set as <Medium as='span'>test-A/out.tsv</Medium>. It
is also
recommended to
generate the output for the dev set <Medium>(dev-0/out.tsv)</Medium>.
generate the output for the dev set <Medium as='span'>(dev-0/out.tsv)</Medium>.
</Body>
<Body as='p'>
You can evaluate results for the dev set locally by <Medium>geval</Medium>.
You can evaluate results for the dev set locally by <Medium as='span'>geval</Medium>.
</Body>
<FlexColumn as='article' gap='24px' alignmentX='flex-start' width='100%'>
<H3 as='h3'>
@ -58,7 +61,7 @@ const HowTo = () => {
commands={['wget https://gonito.net/get/bin/geval', 'chmod u+x geval', './geval --help']}/>
</FlexColumn>
</FlexColumn>
<FlexColumn as='article' gap={IS_MOBILE() ? '16px' : '24px'} alignmentX='flex-start'>
<FlexColumn as='article' gap={IS_MOBILE() ? '16px' : '24px'} maxWidth='680px' alignmentX='flex-start'>
<H2 as='h2' margin={IS_MOBILE() ? '0 0 4px 0' : '0 0 8px 0'}>
Push your solution
</H2>
@ -79,153 +82,293 @@ const HowTo = () => {
`git commit -m 'my brilliant solution'`,
'git push origin my-brilliant-branch']}/>
</FlexColumn>
<FlexColumn as='article' gap={IS_MOBILE() ? '16px' : '24px'} alignmentX='flex-start'>
<H2 as='h2' margin='0 0 8px 0'>
Submit solution to Gonito
</H2>
<FlexColumn as='article' gap='24px' alignmentX='flex-start' width='100%'>
<H3 as='h3'>
Manual submission
</H3>
<Body>
In case other methods fail, you can submit your solution manually — go to the <Medium>submit
form</Medium>.
</Body>
<FlexColumn as='article'>
<FlexColumn alignmentX='flex-start' maxWidth='680px' gap={IS_MOBILE() ? '16px' : '24px'}>
<H2 as='h2' margin='0 0 8px 0'>
Submit solution to Gonito
</H2>
<FlexColumn as='article' gap='24px' alignmentX='flex-start' width='100%'>
<H3 as='h3'>
Manual submission
</H3>
<Body>
In case other methods fail, you can submit your solution manually — go to the <Medium>submit
form</Medium>.
</Body>
</FlexColumn>
<FlexColumn as='article' gap={IS_MOBILE() ? '16px' : '24px'} alignmentX='flex-start' width='100%'>
<H3 as='h3'>
Integration with external repos
</H3>
<Body>
If you use an external repo (e.g. at your own of Gitolite or at GitLab/GitHub), you can
configure a webhook.
</Body>
</FlexColumn>
</FlexColumn>
<FlexColumn as='article' gap={IS_MOBILE() ? '16px' : '24px'} alignmentX='flex-start' width='100%'>
<H3 as='h3'>
Integration with external repos
</H3>
<Body>
If you use an external repo (e.g. at your own of Gitolite or at GitLab/GitHub), you can
configure a webhook.
</Body>
</FlexColumn>
<FlexColumn as='article' gap={IS_MOBILE() ? '16px' : '24px'} alignmentX='flex-start' width='100%'>
<H3 as='h3'>
Submission metadata
</H3>
<Body>
Gonito can take the metadata (description, tags, parameters) of a submission from a number of
sources (in order of precedence):
</Body>
<Grid width='100%' gridTemplateColumns='auto 1fr' gridGap={IS_MOBILE() ? '8px' : '16px'}>
<CircleNumber number='1'/>
<Body as='p' margin='auto 0'>
The YAML files specified in the param-files field of the gonito.yaml file
<Media query='(max-width: 1224px)'>
<FlexColumn as='article' gap={IS_MOBILE() ? '16px' : '24px'} alignmentX='flex-start'
maxWidth='680px' width='100%'>
<H3 as='h3' margin='24px 0 0 0'>
Submission metadata
</H3>
<Body>
Gonito can take the metadata (description, tags, parameters) of a submission from a
number
of
sources (in order of precedence):
</Body>
</Grid>
<FlexRow gap='16px' alignmentX='flex-start' margin='0 0 0 44px'>
<Svg src={cubeIcon} width='24px' height='22px' size='cover'
backgroundColor={theme.colors.green}/>
<Body as='p' width='90%'>
only applicable for parameters
</Body>
</FlexRow>
<FlexRow gap='16px' alignmentX='flex-start' margin='0 0 0 44px'>
<Svg src={cubeIcon} width='24px' height='22px' size='cover'
backgroundColor={theme.colors.green}/>
<Body as='p' width='90%'>
<Medium>gonito.yaml</Medium> will be always skipped even if matches a mask given in the
param-files field,
</Body>
</FlexRow>
<FlexRow gap='16px' alignmentX='flex-start' margin='0 0 0 44px'>
<Svg src={cubeIcon} width='24px' height='22px' size='cover'
backgroundColor={theme.colors.green}/>
<Body as='p' width='90%'>
parameters blacklisted in the unwanted-params field of the gonito.yaml file will be
discarded,
</Body>
</FlexRow>
<Grid width='100%' gridTemplateColumns='auto 1fr' gridGap={IS_MOBILE() ? '8px' : '16px'}>
<CircleNumber number='2'/>
<Body as='p' margin='auto 0'>
<Medium>Gonito.yaml</Medium> file committed to the repository,
</Body>
</Grid>
<FlexRow gap='16px' alignmentX='flex-start' margin='0 0 0 44px'>
<Svg src={cubeIcon} width='24px' height='22px' size='cover'
backgroundColor={theme.colors.green}/>
<Body as='p' width='90%'>
description given in the description field,
</Body>
</FlexRow>
<FlexRow gap='16px' alignmentX='flex-start' margin='0 0 0 44px'>
<Svg src={cubeIcon} width='24px' height='22px' size='cover'
backgroundColor={theme.colors.green}/>
<Body as='p' width='90%'>
tags given in tags field,
</Body>
</FlexRow>
<FlexRow gap='16px' alignmentX='flex-start' margin='0 0 0 44px'>
<Svg src={cubeIcon} width='24px' height='22px' size='cover'
backgroundColor={theme.colors.green}/>
<Body as='p' width='90%'>
parameters given in params field,
</Body>
</FlexRow>
<Grid width='100%' gridTemplateColumns='auto 1fr' gridGap={IS_MOBILE() ? '8px' : '16px'}>
<CircleNumber number='3'/>
<Body as='p' margin='auto 0'>
Names of output files (only for parameters)
</Body>
</Grid>
<FlexRow gap='16px' alignmentX='flex-start' margin='0 0 0 44px'>
<Svg src={cubeIcon} width='24px' height='22px' size='cover'
backgroundColor={theme.colors.green}/>
<Body as='p' width='90%'>
e.g. if the output file
is <Medium>out-epochs=10</Medium>, <Medium>learning-rate=0.01</Medium>, then parameters
<Medium>epochs=10</Medium> and <Medium>learning-rare=0.01</Medium> will be extracted;
</Body>
</FlexRow>
<Grid width='100%' gridTemplateColumns='auto 1fr' gridGap={IS_MOBILE() ? '8px' : '16px'}>
<CircleNumber number='4'/>
<Body as='p' margin='auto 0'>
Submission form (when submitting manually)
</Body>
</Grid>
<Grid width='100%' gridTemplateColumns='auto 1fr' gridGap={IS_MOBILE() ? '8px' : '16px'}>
<CircleNumber number='5'/>
<Body as='p' margin='auto 0'>
Git commit message
</Body>
</Grid>
<FlexRow gap='16px' alignmentX='flex-start' margin='0 0 0 44px'>
<Svg src={cubeIcon} width='24px' height='22px' size='cover'
backgroundColor={theme.colors.green}/>
<Body as='p' width='90%'>
description taken from the first paragraph
</Body>
</FlexRow>
<FlexRow gap='16px' alignmentX='flex-start' margin='0 0 0 44px'>
<Svg src={cubeIcon} width='24px' height='22px' size='cover'
backgroundColor={theme.colors.green}/>
<Body as='p' width='90%'>
tags taken from a line starting with <Medium>tags:</Medium>
</Body>
</FlexRow>
<Body>
Here is an example of <Medium>gonito.yaml</Medium>, in which all metadata could be given (note
that you can also
add links to external resources using the <Medium>`links`</Medium> section):
</Body>
<CodeShell codeBlockIndex={5} disablePrompt
commands={['description: This my brilliant solution',
'tags:', '\t- neutral-network', '\t- left-to-right',
'params:', '\tepochs: 10', '\tlearning-rate: 0.01',
'unwanted-params:', '\t- model-file', '\t- vocab-file',
'param-files:', '\t- “*.yaml”*', '\t- config/*.yaml*/',
'links:', '\t- title: "Some external link"',
'\t\s\surl: "https://example.org/xyz"', '\t- title: "Yet another link"',
'\t\s\shttps://example.com/foo-bar-baz-123"',
'\t- url: "https://example.net/bare-link-without-text']}/>
<Body>
It might seem a little bit complicated, but you could simply use the method which is the most
convenient for you.
</Body>
</FlexColumn>
<Grid width='100%' gridTemplateColumns='auto 1fr' gridGap={IS_MOBILE() ? '8px' : '16px'}>
<CircleNumber number='1'/>
<Body as='p' margin='auto 0'>
The YAML files specified in the param-files field of the gonito.yaml file
</Body>
</Grid>
<FlexRow gap='16px' alignmentX='flex-start' margin='0 0 0 44px'>
<Svg src={cubeIcon} width='24px' height='22px' size='cover'
backgroundColor={theme.colors.green}/>
<Body as='p' width='90%'>
only applicable for parameters
</Body>
</FlexRow>
<FlexRow gap='16px' alignmentX='flex-start' margin='0 0 0 44px'>
<Svg src={cubeIcon} width='24px' height='22px' size='cover'
backgroundColor={theme.colors.green}/>
<Body as='p' width='90%'>
<Medium as='span'>gonito.yaml</Medium> will be always skipped even if matches a mask
given in the
param-files field,
</Body>
</FlexRow>
<FlexRow gap='16px' alignmentX='flex-start' margin='0 0 0 44px'>
<Svg src={cubeIcon} width='24px' height='22px' size='cover'
backgroundColor={theme.colors.green}/>
<Body as='p' width='90%'>
parameters blacklisted in the unwanted-params field of the gonito.yaml file will be
discarded,
</Body>
</FlexRow>
<Grid width='100%' gridTemplateColumns='auto 1fr' gridGap={IS_MOBILE() ? '8px' : '16px'}>
<CircleNumber number='2'/>
<Body as='p' margin='auto 0'>
<Medium as='span'>Gonito.yaml</Medium> file committed to the repository,
</Body>
</Grid>
<FlexRow gap='16px' alignmentX='flex-start' margin='0 0 0 44px'>
<Svg src={cubeIcon} width='24px' height='22px' size='cover'
backgroundColor={theme.colors.green}/>
<Body as='p' width='90%'>
description given in the description field,
</Body>
</FlexRow>
<FlexRow gap='16px' alignmentX='flex-start' margin='0 0 0 44px'>
<Svg src={cubeIcon} width='24px' height='22px' size='cover'
backgroundColor={theme.colors.green}/>
<Body as='p' width='90%'>
tags given in tags field,
</Body>
</FlexRow>
<FlexRow gap='16px' alignmentX='flex-start' margin='0 0 0 44px'>
<Svg src={cubeIcon} width='24px' height='22px' size='cover'
backgroundColor={theme.colors.green}/>
<Body as='p' width='90%'>
parameters given in params field,
</Body>
</FlexRow>
<Grid width='100%' gridTemplateColumns='auto 1fr' gridGap={IS_MOBILE() ? '8px' : '16px'}>
<CircleNumber number='3'/>
<Body as='p' margin='auto 0'>
Names of output files (only for parameters)
</Body>
</Grid>
<FlexRow gap='16px' alignmentX='flex-start' margin='0 0 0 44px'>
<Svg src={cubeIcon} width='24px' height='22px' size='cover'
backgroundColor={theme.colors.green}/>
<Body as='p' width='90%'>
e.g. if the output file
is <Medium as='span'>out-epochs=10</Medium>, <Medium
as='span'>learning-rate=0.01</Medium>, then parameters
<Medium as='span'>epochs=10</Medium> and <Medium
as='span'>learning-rare=0.01</Medium> will be extracted;
</Body>
</FlexRow>
<Grid width='100%' gridTemplateColumns='auto 1fr' gridGap={IS_MOBILE() ? '8px' : '16px'}>
<CircleNumber number='4'/>
<Body as='p' margin='auto 0'>
Submission form (when submitting manually)
</Body>
</Grid>
<Grid width='100%' gridTemplateColumns='auto 1fr' gridGap={IS_MOBILE() ? '8px' : '16px'}>
<CircleNumber number='5'/>
<Body as='p' margin='auto 0'>
Git commit message
</Body>
</Grid>
<FlexRow gap='16px' alignmentX='flex-start' margin='0 0 0 44px'>
<Svg src={cubeIcon} width='24px' height='22px' size='cover'
backgroundColor={theme.colors.green}/>
<Body as='p' width='90%'>
description taken from the first paragraph
</Body>
</FlexRow>
<FlexRow gap='16px' alignmentX='flex-start' margin='0 0 0 44px'>
<Svg src={cubeIcon} width='24px' height='22px' size='cover'
backgroundColor={theme.colors.green}/>
<Body as='p' width='90%'>
tags taken from a line starting with <Medium as='span'>tags:</Medium>
</Body>
</FlexRow>
<CodeShell codeBlockIndex={5} disablePrompt
commands={['description: This my brilliant solution',
'tags:', '\t- neutral-network', '\t- left-to-right',
'params:', '\tepochs: 10', '\tlearning-rate: 0.01',
'unwanted-params:', '\t- model-file', '\t- vocab-file',
'param-files:', '\t- “*.yaml”*', '\t- config/*.yaml*/',
'links:', '\t- title: "Some external link"',
'\t\s\surl: "https://example.org/xyz"', '\t- title: "Yet another link"',
'\t\s\shttps://example.com/foo-bar-baz-123"',
'\t- url: "https://example.net/bare-link-without-text']}/>
</FlexColumn>
</Media>
<Media query='(min-width: 1225px)'>
<FlexColumn as='article' gap={IS_MOBILE() ? '16px' : '24px'} width='100%'>
<FlexColumn alignmentX='flex-start' maxWidth='680px' gap='32px' margin='24px 0'>
<H3 as='h3'>
Submission metadata
</H3>
<Body>
Gonito can take the metadata (description, tags, parameters) of a submission from a
number
of
sources (in order of precedence):
</Body>
</FlexColumn>
<FlexRow gap='24px'>
<FlexColumn alignmentX='flex-start' maxWidth='422px' gap='20px'>
<Grid width='100%' gridTemplateColumns='auto 1fr'
gridGap={IS_MOBILE() ? '8px' : '16px'}>
<CircleNumber number='1'/>
<Body as='p' margin='auto 0'>
The YAML files specified in the param-files field of the gonito.yaml file
</Body>
</Grid>
<FlexRow gap='16px' alignmentX='flex-start' margin='0 0 0 44px'>
<Svg src={cubeIcon} width='24px' height='22px' size='cover'
backgroundColor={theme.colors.green}/>
<Body as='p' width='90%'>
only applicable for parameters
</Body>
</FlexRow>
<FlexRow gap='16px' alignmentX='flex-start' margin='0 0 0 44px'>
<Svg src={cubeIcon} width='24px' height='22px' size='cover'
backgroundColor={theme.colors.green}/>
<Body as='p' width='90%'>
<Medium as='span'>gonito.yaml</Medium> will be always skipped even if matches a
mask given
in
the
param-files field,
</Body>
</FlexRow>
<FlexRow gap='16px' alignmentX='flex-start' margin='0 0 0 44px'>
<Svg src={cubeIcon} width='24px' height='22px' size='cover'
backgroundColor={theme.colors.green}/>
<Body as='p' width='90%'>
parameters blacklisted in the unwanted-params field of the gonito.yaml file will
be
discarded,
</Body>
</FlexRow>
<Grid width='100%' gridTemplateColumns='auto 1fr'
gridGap={IS_MOBILE() ? '8px' : '16px'}>
<CircleNumber number='2'/>
<Body as='p' margin='auto 0'>
<Medium as='span'>Gonito.yaml</Medium> file committed to the repository,
</Body>
</Grid>
<FlexRow gap='16px' alignmentX='flex-start' margin='0 0 0 44px'>
<Svg src={cubeIcon} width='24px' height='22px' size='cover'
backgroundColor={theme.colors.green}/>
<Body as='p' width='90%'>
description given in the description field,
</Body>
</FlexRow>
<FlexRow gap='16px' alignmentX='flex-start' margin='0 0 0 44px'>
<Svg src={cubeIcon} width='24px' height='22px' size='cover'
backgroundColor={theme.colors.green}/>
<Body as='p' width='90%'>
tags given in tags field,
</Body>
</FlexRow>
<FlexRow gap='16px' alignmentX='flex-start' margin='0 0 0 44px'>
<Svg src={cubeIcon} width='24px' height='22px' size='cover'
backgroundColor={theme.colors.green}/>
<Body as='p' width='90%'>
parameters given in params field,
</Body>
</FlexRow>
<Grid width='100%' gridTemplateColumns='auto 1fr'
gridGap={IS_MOBILE() ? '8px' : '16px'}>
<CircleNumber number='3'/>
<Body as='p' margin='auto 0'>
Names of output files (only for parameters)
</Body>
</Grid>
<FlexRow gap='16px' alignmentX='flex-start' margin='0 0 0 44px'>
<Svg src={cubeIcon} width='24px' height='22px' size='cover'
backgroundColor={theme.colors.green}/>
<Body as='p' width='90%'>
e.g. if the output file
is <Medium as='span'>out-epochs=10</Medium>, <Medium
as='span'>learning-rate=0.01</Medium>, then
parameters
<Medium as='span'>epochs=10</Medium> and <Medium
as='span'>learning-rare=0.01</Medium> will be
extracted;
</Body>
</FlexRow>
<Grid width='100%' gridTemplateColumns='auto 1fr'
gridGap={IS_MOBILE() ? '8px' : '16px'}>
<CircleNumber number='4'/>
<Body as='p' margin='auto 0'>
Submission form (when submitting manually)
</Body>
</Grid>
<Grid width='100%' gridTemplateColumns='auto 1fr'
gridGap={IS_MOBILE() ? '8px' : '16px'}>
<CircleNumber number='5'/>
<Body as='p' margin='auto 0'>
Git commit message
</Body>
</Grid>
<FlexRow gap='16px' alignmentX='flex-start' margin='0 0 0 44px'>
<Svg src={cubeIcon} width='24px' height='22px' size='cover'
backgroundColor={theme.colors.green}/>
<Body as='p' width='90%'>
description taken from the first paragraph
</Body>
</FlexRow>
<FlexRow gap='16px' alignmentX='flex-start' margin='0 0 0 44px'>
<Svg src={cubeIcon} width='24px' height='22px' size='cover'
backgroundColor={theme.colors.green}/>
<Body as='p' width='90%'>
tags taken from a line starting with <Medium as='span'>tags:</Medium>
</Body>
</FlexRow>
</FlexColumn>
<CodeShell codeBlockIndex={5} disablePrompt maxWidth='446px'
commands={['description: This my brilliant solution',
'tags:', '\t- neutral-network', '\t- left-to-right',
'params:', '\tepochs: 10', '\tlearning-rate: 0.01',
'unwanted-params:', '\t- model-file', '\t- vocab-file',
'param-files:', '\t- “*.yaml”*', '\t- config/*.yaml*/',
'links:', '\t- title: "Some external link"',
'\t\s\surl: "https://example.org/xyz"', '\t- title: "Yet another link"',
'\t\s\shttps://example.com/foo-bar-baz-123"',
'\t- url: "https://example.net/bare-link-without-text']}/>
</FlexRow>
</FlexColumn>
</Media>
</FlexColumn>
</FlexColumn>
);

8
src/components/specific_challenge/Table.js
View File

@ -67,9 +67,9 @@ const Table = (props) => {
return (
<FlexColumn as='table' margin='32px 0 72px 0' width='100%'>
<FlexColumn as='tbody' width='100%'>
<Grid
gridGap='20px' position='relative' width='100%' padding='4px' margin='0 0 6px 0'
gridTemplateColumns={props.gridTemplateColumns}>
<Grid as='tr'
gridGap='20px' position='relative' width='100%' padding='4px' margin='0 0 6px 0'
gridTemplateColumns={props.gridTemplateColumns}>
{props.headerElements.map((elem, i) => {
return (
<FlexRow key={`table-header-${i}`} alignmentX='flex-start' as='td'
@ -96,7 +96,7 @@ const Table = (props) => {
</FlexRow>
);
})}
<Line height='2px' top='32px' shadow={theme.shadow}/>
<Line height='2px' top='32px' as='td' shadow={theme.shadow}/>
</Grid>
{elementsToMap.map((elem, index) => {
return (

2
src/pages/Challenge.js
View File

@ -62,7 +62,7 @@ const Challenge = (props) => {
return (
<>
<DesktopChallengeMenu setSection={setSection} section={section}/>
<FlexColumn minHeight='100vh' alignmentY='flex-start' padding='64px 0 64px 310px'>
<FlexColumn minHeight='100vh' alignmentY='flex-start' padding='64px 24px 64px 310px'>
<FlexRow gap='32px' margin='0 0 32px 0' padding='16px'>
<Loading visible={loading}/>
<FlexColumn alignmentX='flex-start' gap='24px' maxWidth='500px'>