handle copy commands from CodeShell and some html structure refactor

src/assets/check_ico.svg

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

src/components/generic/CodeShell.js

@@ -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,14 +23,41 @@ 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';
+        }
+        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 = () => {
@@ -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>
     );

src/components/specific_challenge/HowTo.js

@@ -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'>
+                    gap={IS_MOBILE() ? '24px' : '48px'} alignmentX={IS_MOBILE() ? 'flex-start' : 'center'}
-            <FlexColumn as='article' gap={IS_MOBILE() ? '16px' : '24px'} alignmentX='flex-start'>
+                    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,7 +82,8 @@ 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'>
+            <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>
@@ -101,12 +105,17 @@ const HowTo = () => {
                             configure a webhook.
                         </Body>
                     </FlexColumn>
-                <FlexColumn as='article' gap={IS_MOBILE() ? '16px' : '24px'} alignmentX='flex-start' width='100%'>
+                </FlexColumn>
-                    <H3 as='h3'>
+                <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
+                            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'}>
@@ -126,7 +135,8 @@ const HowTo = () => {
                             <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
+                                <Medium as='span'>gonito.yaml</Medium> will be always skipped even if matches a mask
+                                given in the
                                 param-files field,
                             </Body>
                         </FlexRow>
@@ -141,7 +151,7 @@ const HowTo = () => {
                         <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,
+                                <Medium as='span'>Gonito.yaml</Medium> file committed to the repository,
                             </Body>
                         </Grid>
                         <FlexRow gap='16px' alignmentX='flex-start' margin='0 0 0 44px'>
@@ -176,8 +186,10 @@ const HowTo = () => {
                                  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
+                                is <Medium as='span'>out-epochs=10</Medium>, <Medium
-                            <Medium>epochs=10</Medium> and <Medium>learning-rare=0.01</Medium> will be extracted;
+                                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'}>
@@ -203,14 +215,9 @@ const HowTo = () => {
                             <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>
+                                tags taken from a line starting with <Medium as='span'>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',
@@ -221,11 +228,147 @@ const HowTo = () => {
                                        '\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>
-                        It might seem a little bit complicated, but you could simply use the method which is the most
+                                Gonito can take the metadata (description, tags, parameters) of a submission from a
-                        convenient for you.
+                                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>
     );

src/components/specific_challenge/Table.js

@@ -67,7 +67,7 @@ const Table = (props) => {
             return (
                 <FlexColumn as='table' margin='32px 0 72px 0' width='100%'>
                     <FlexColumn as='tbody' width='100%'>
-                        <Grid
+                        <Grid as='tr'
                               gridGap='20px' position='relative' width='100%' padding='4px' margin='0 0 6px 0'
                               gridTemplateColumns={props.gridTemplateColumns}>
                             {props.headerElements.map((elem, i) => {
@@ -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 (

src/pages/Challenge.js

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