mobile menu correction

src/App.js

@@ -11,6 +11,7 @@ import {
   POLICY_PRIVACY_PAGE,
   LOGIN_REQUIRED_PAGES,
   ROOT_URL,
+  CHALLENGE_SECTIONS,
 } from './utils/globals';
 import KeyCloakService from './services/KeyCloakService';
 import React from 'react';
@@ -121,36 +122,36 @@ const App = () => {
           <Routes>
             <Route
               path={`${CHALLENGE_PAGE}/:challengeId`}
-              element={<Challenge section={0} />}
+              element={<Challenge section={CHALLENGE_SECTIONS.LEADERBOARD} />}
             />
             <Route
               path={`${CHALLENGE_PAGE}/:challengeId/leaderboard`}
-              element={<Challenge section={0} />}
+              element={<Challenge section={CHALLENGE_SECTIONS.LEADERBOARD} />}
             />
             <Route
               path={`${CHALLENGE_PAGE}/:challengeId/allentries`}
-              element={<Challenge section={1} />}
+              element={<Challenge section={CHALLENGE_SECTIONS.ALL_ENTRIES} />}
             />
             <Route
               path={`${CHALLENGE_PAGE}/:challengeId/readme`}
-              element={<Challenge section={2} />}
+              element={<Challenge section={CHALLENGE_SECTIONS.README} />}
             />
             <Route
               path={`${CHALLENGE_PAGE}/:challengeId/howto`}
               element={
                 <Challenge
                   popUpMessageHandler={popUpMessageHandler}
-                  section={3}
+                  section={CHALLENGE_SECTIONS.HOW_TO}
                 />
               }
             />
             <Route
               path={`${CHALLENGE_PAGE}/:challengeId/myentries`}
-              element={<Challenge section={4} />}
+              element={<Challenge section={CHALLENGE_SECTIONS.MY_ENTRIES} />}
             />
             <Route
               path={`${CHALLENGE_PAGE}/:challengeId/submit`}
-              element={<Challenge section={5} />}
+              element={<Challenge section={CHALLENGE_SECTIONS.SUBMIT} />}
             />
             <Route path={CHALLENGES_PAGE} element={<Challenges />} />
             <Route

src/components/specific_challenge/Challenge.js

@@ -11,7 +11,7 @@ import MyEntries from './MyEntries/MyEntries';
 import Submit from './Submit';
 import Media from 'react-media';
 import DesktopChallengeMenu from './DesktopChallengeMenu';
-import { RENDER_ICO } from '../../utils/globals';
+import { CHALLENGE_SECTIONS, RENDER_ICO } from '../../utils/globals';
 import textIco from '../../assets/text_ico.svg';
 import getChallengeInfo from '../../api/getChallengeInfo';
 import Loading from '../generic/Loading';
@@ -31,7 +31,7 @@ const Challenge = (props) => {
 
   const sectionRender = () => {
     switch (props.section) {
-      case 0:
+      case CHALLENGE_SECTIONS.LEADERBOARD:
         return (
           <Leaderboard
             challengeName={challengeName}
@@ -39,11 +39,11 @@ const Challenge = (props) => {
             user={user}
           />
         );
-      case 1:
+      case CHALLENGE_SECTIONS.ALL_ENTRIES:
         return (
           <AllEntries challengeName={challengeName} setLoading={setLoading} />
         );
-      case 2:
+      case CHALLENGE_SECTIONS.README:
         return (
           <Readme
             challengeName={challengeName}
@@ -52,7 +52,7 @@ const Challenge = (props) => {
             deadline={challenge.deadline}
           />
         );
-      case 3:
+      case CHALLENGE_SECTIONS.HOW_TO:
         return (
           <HowTo
             popUpMessageHandler={props.popUpMessageHandler}
@@ -60,9 +60,9 @@ const Challenge = (props) => {
             user={user}
           />
         );
-      case 4:
+      case CHALLENGE_SECTIONS.MY_ENTRIES:
         return <MyEntries challengeName={challengeName} />;
-      case 5:
+      case CHALLENGE_SECTIONS.SUBMIT:
         return <Submit challengeName={challengeName} setLoading={setLoading} />;
       default:
         return (

src/components/specific_challenge/DesktopChallengeMenu.js

@@ -5,6 +5,10 @@ import { H3 } from '../../utils/fonts';
 import PropsTypes from 'prop-types';
 import KeyCloakService from '../../services/KeyCloakService';
 import { Link } from 'react-router-dom';
+import {
+  MENU_CHALEENGE_SECTIONS_WITH_LOGIN,
+  MENU_CHALLENGE_SECTIONS_NO_LOGIN,
+} from '../../utils/globals';
 
 const DesktopChallengeMenuStyle = styled(FlexColumn)`
   justify-content: flex-start;
@@ -27,6 +31,7 @@ const Option = styled(FlexColumn)`
   cursor: pointer;
   background-color: ${({ theme, active }) =>
     active ? theme.colors.green05 : theme.colors.white};
+  text-decoration: none;
 
   * {
     cursor: pointer;
@@ -38,16 +43,9 @@ const Option = styled(FlexColumn)`
 `;
 
 const DesktopChallengeMenu = (props) => {
-  let options = ['Leaderboard', 'All entries', 'Readme', 'How to'];
+  let options = MENU_CHALLENGE_SECTIONS_NO_LOGIN;
   if (KeyCloakService.isLoggedIn())
-    options = [
-      'Leaderboard',
-      'All entries',
-      'Readme',
-      'How to',
-      'My entries',
-      'Submit',
-    ];
+    options = MENU_CHALEENGE_SECTIONS_WITH_LOGIN;
   return (
     <DesktopChallengeMenuStyle>
       {options.map((option, index) => {

src/components/specific_challenge/MobileChallengeMenu.js

@@ -4,6 +4,12 @@ import styled from 'styled-components';
 import { Medium } from '../../utils/fonts';
 import PropsTypes from 'prop-types';
 import KeyCloakService from '../../services/KeyCloakService';
+import {
+  CHALLENGE_SECTIONS,
+  MENU_CHALEENGE_SECTIONS_WITH_LOGIN,
+  MENU_CHALLENGE_SECTIONS_NO_LOGIN,
+} from '../../utils/globals';
+import { Link } from 'react-router-dom';
 
 const MenuOption = styled(Medium)`
   cursor: pointer;
@@ -17,54 +23,83 @@ const MenuOption = styled(Medium)`
 `;
 
 const MobileChallengeMenu = (props) => {
-  let options = ['Leaderboard', 'Readme', 'How to'];
+  let options = MENU_CHALLENGE_SECTIONS_NO_LOGIN;
   if (KeyCloakService.isLoggedIn())
-    options = ['Leaderboard', 'Readme', 'How to', 'My entries', 'Submit'];
+    options = MENU_CHALEENGE_SECTIONS_WITH_LOGIN;
   const renderLoggedOptions = () => {
-    if (options.length > 3) {
     return (
       <FlexRow gap="36px">
         <MenuOption
-            as="button"
-            active={3 === props.section}
-            to={`${props.challengeName}/${options[3].toLowerCase()}`}
+          as={Link}
+          active={CHALLENGE_SECTIONS.HOW_TO === props.section}
+          to={`/challenge/${props.challengeName}/${options[
+            CHALLENGE_SECTIONS.HOW_TO
+          ]
+            .toLowerCase()
+            .replace(' ', '')}`}
         >
-            {options[3]}
+          {options[CHALLENGE_SECTIONS.HOW_TO]}
         </MenuOption>
         <MenuOption
-            as="button"
-            active={4 === props.section}
-            to={`${props.challengeName}/${options[4].toLowerCase()}`}
+          as={Link}
+          active={CHALLENGE_SECTIONS.MY_ENTRIES === props.section}
+          to={`/challenge/${props.challengeName}/${options[
+            CHALLENGE_SECTIONS.MY_ENTRIES
+          ]
+            .toLowerCase()
+            .replace(' ', '')}`}
         >
-            {options[4]}
+          {options[CHALLENGE_SECTIONS.MY_ENTRIES]}
+        </MenuOption>
+        <MenuOption
+          as={Link}
+          active={CHALLENGE_SECTIONS.SUBMIT === props.section}
+          to={`/challenge/${props.challengeName}/${options[
+            CHALLENGE_SECTIONS.SUBMIT
+          ]
+            .toLowerCase()
+            .replace(' ', '')}`}
+        >
+          {options[CHALLENGE_SECTIONS.SUBMIT]}
         </MenuOption>
       </FlexRow>
     );
-    }
   };
   return (
     <>
       <FlexRow gap="32px">
         <MenuOption
-          as="button"
-          active={0 === props.section}
-          to={`${props.challengeName}/${options[0].toLowerCase()}`}
+          as={Link}
+          active={CHALLENGE_SECTIONS.LEADERBOARD === props.section}
+          to={`/challenge/${props.challengeName}/${options[
+            CHALLENGE_SECTIONS.LEADERBOARD
+          ]
+            .toLowerCase()
+            .replace(' ', '')}`}
         >
-          {options[0]}
+          {options[CHALLENGE_SECTIONS.LEADERBOARD]}
         </MenuOption>
         <MenuOption
-          as="button"
-          active={1 === props.section}
-          to={`${props.challengeName}/${options[1].toLowerCase()}`}
+          as={Link}
+          active={CHALLENGE_SECTIONS.ALL_ENTRIES === props.section}
+          to={`/challenge/${props.challengeName}/${options[
+            CHALLENGE_SECTIONS.ALL_ENTRIES
+          ]
+            .toLowerCase()
+            .replace(' ', '')}`}
         >
-          {options[1]}
+          {options[CHALLENGE_SECTIONS.ALL_ENTRIES]}
         </MenuOption>
         <MenuOption
-          as="button"
-          active={2 === props.section}
-          to={`${props.challengeName}/${options[2].toLowerCase()}`}
+          as={Link}
+          active={CHALLENGE_SECTIONS.README === props.section}
+          to={`/challenge/${props.challengeName}/${options[
+            CHALLENGE_SECTIONS.README
+          ]
+            .toLowerCase()
+            .replace(' ', '')}`}
         >
-          {options[2]}
+          {options[CHALLENGE_SECTIONS.README]}
         </MenuOption>
       </FlexRow>
       {renderLoggedOptions()}

src/components/specific_challenge/MyEntries/MyEntries.js

@@ -132,6 +132,27 @@ const MyEntries = (props) => {
         {!loading ? (
           <>
             <Search searchQueryHandler={searchQueryHandler} />
+            <Table
+              challengeName={props.challengeName}
+              headerElements={getMyEntriesHeader()}
+              possibleMetrics={getPossibleMetrics()}
+              gridTemplateColumns={
+                '1fr ' + '4fr '.repeat(getMyEntriesHeader().length - 1)
+              }
+              staticColumnElements={[
+                { name: 'id', format: null, order: 1, align: 'left' },
+                { name: 'when', format: RENDER_WHEN, order: 3, align: 'right' },
+              ]}
+              iterableColumnElement={{
+                name: 'evaluations',
+                format: EVALUATIONS_FORMAT,
+                order: 2,
+                align: 'left',
+              }}
+              pageNr={pageNr}
+              elements={myEntries}
+              sortByUpdate={sortByUpdate}
+            />
             <Pager
               pageNr={pageNr}
               width="48px"
@@ -176,7 +197,6 @@ const MyEntries = (props) => {
                 format: EVALUATIONS_FORMAT,
                 order: 2,
                 align: 'left',
-                mobileRender,
               }}
               pageNr={pageNr}
               elements={myEntries}

src/components/specific_challenge/Readme.js

@@ -1,10 +1,9 @@
 import React from 'react';
-import {FlexColumn} from '../../utils/containers';
-import {Body, H2} from '../../utils/fonts';
+import { FlexColumn } from '../../utils/containers';
+import { Body, H2 } from '../../utils/fonts';
 import Media from 'react-media';
 import theme from '../../utils/theme';
 import getChallengeFullDescription from '../../api/getChallengeFullDescription';
-// import {markdown} from 'markdown';
 import styled from 'styled-components';
 import InfoList from '../generic/InfoList';
 import Loading from '../generic/Loading';
@@ -29,7 +28,7 @@ const ReadmeStyle = styled(Body)`
     line-height: 22px;
     margin: 24px 0;
 
-    @media (min-width: ${({theme}) => theme.overMobile}) {
+    @media (min-width: ${({ theme }) => theme.overMobile}) {
       font-size: 22px;
       line-height: 26px;
     }
@@ -41,7 +40,7 @@ const ReadmeStyle = styled(Body)`
     font-size: 14px;
     line-height: 20px;
 
-    @media (min-width: ${({theme}) => theme.overMobile}) {
+    @media (min-width: ${({ theme }) => theme.overMobile}) {
       font-weight: 400;
       font-size: 16px;
       line-height: 22px;
@@ -53,10 +52,10 @@ const ReadmeStyle = styled(Body)`
     font-weight: 400;
     font-size: 14px;
     line-height: 20px;
-    color: ${({theme}) => theme.colors.dark};
+    color: ${({ theme }) => theme.colors.dark};
     text-decoration: none;
 
-    @media (min-width: ${({theme}) => theme.overMobile}) {
+    @media (min-width: ${({ theme }) => theme.overMobile}) {
       font-size: 16px;
       line-height: 22px;
       font-weight: 500;
@@ -69,7 +68,11 @@ const Readme = (props) => {
   const [loading, setLoading] = React.useState(true);
 
   React.useEffect(() => {
-        getChallengeFullDescription(setFullDescription, setLoading, props.challengeName);
+    getChallengeFullDescription(
+      setFullDescription,
+      setLoading,
+      props.challengeName
+    );
   }, [props.challengeName]);
 
   const parseMarkdownResponse = (response) => {
@@ -91,77 +94,50 @@ const Readme = (props) => {
 
   const mobileRender = () => {
     return (
-            <FlexColumn as='section' padding='20px' gap='24px'>
-                <FlexColumn gap='12px' alignmentX='flex-start'>
-                    <H2 as='h2'>
-                        Info
-                    </H2>
-                    <InfoList iconsSize='24px' metric={props.metric} deadline={props.deadline}/>
+      <FlexColumn as="section" padding="20px" gap="24px">
+        <FlexColumn gap="12px" alignmentX="flex-start">
+          <H2 as="h2">Info</H2>
+          <InfoList
+            iconsSize="24px"
+            metric={props.metric}
+            deadline={props.deadline}
+          />
         </FlexColumn>
-                <FlexColumn alignmentX='flex-start' maxWidth='260px'>
-                    {/* <H2 as='h2'>
-                        Description
-                    </H2> */}
-                    <ReadmeStyle as={fullDescription ? 'article' : 'p'} dangerouslySetInnerHTML={{
+        <FlexColumn alignmentX="flex-start" maxWidth="260px">
+          <ReadmeStyle
+            as={fullDescription ? 'article' : 'p'}
+            dangerouslySetInnerHTML={{
               __html: fullDescription
-                            ? parseMarkdownResponse(fullDescription) : props.description
-                    }}/>
+                ? parseMarkdownResponse(fullDescription)
+                : props.description,
+            }}
+          />
         </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 (
-            <FlexColumn as='section' padding='20px' gap='64px'>
-                <FlexColumn gap='32px'>
-                    <H2 as='h2'>
-                        Info
-                    </H2>
-                    <InfoList iconsSize='32px' metric={props.metric} deadline={props.deadline}/>
+      <FlexColumn as="section" padding="20px" gap="64px">
+        <FlexColumn gap="32px">
+          <H2 as="h2">Info</H2>
+          <InfoList
+            iconsSize="32px"
+            metric={props.metric}
+            deadline={props.deadline}
+          />
         </FlexColumn>
-                <FlexColumn alignmentX='flex-start' width='80%' maxWidth='1200px'>
-                    {/* <H2 as='h2'>
-                        Description
-                    </H2> */}
-                    <ReadmeStyle as={fullDescription ? 'section' : 'p'} dangerouslySetInnerHTML={{
-                        __html: fullDescription ? parseMarkdownResponse(fullDescription) : props.description
-                    }}/>
+        <FlexColumn alignmentX="flex-start" width="80%" maxWidth="1200px">
+          <ReadmeStyle
+            as={fullDescription ? 'section' : 'p'}
+            dangerouslySetInnerHTML={{
+              __html: fullDescription
+                ? parseMarkdownResponse(fullDescription)
+                : props.description,
+            }}
+          />
         </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>
     );
   };
@@ -169,10 +145,10 @@ const Readme = (props) => {
   return (
     <>
       <Media query={theme.mobile}>
-                {!loading ? mobileRender() : <Loading visible={loading}/>}
+        {!loading ? mobileRender() : <Loading visible={loading} />}
       </Media>
       <Media query={theme.desktop}>
-                {!loading ? desktopRender() : <Loading visible={loading}/>}
+        {!loading ? desktopRender() : <Loading visible={loading} />}
       </Media>
     </>
   );

src/utils/globals.js

@@ -18,6 +18,30 @@ const ROOT_URL = window.location.origin;
 
 const LOGIN_REQUIRED_PAGES = ['myentries', 'submit'];
 
+const MENU_CHALLENGE_SECTIONS_NO_LOGIN = [
+  'Leaderboard',
+  'All entries',
+  'Readme',
+  'How to',
+];
+const MENU_CHALEENGE_SECTIONS_WITH_LOGIN = [
+  'Leaderboard',
+  'All entries',
+  'Readme',
+  'How to',
+  'My entries',
+  'Submit',
+];
+
+const CHALLENGE_SECTIONS = {
+  LEADERBOARD: 0,
+  ALL_ENTRIES: 1,
+  README: 2,
+  HOW_TO: 3,
+  MY_ENTRIES: 4,
+  SUBMIT: 5,
+};
+
 const MINI_DESCRIPTION_RENDER = (description) => {
   if (description) {
     if (description.length <= MINI_DESCRIPTION_LENGTH) return description;
@@ -86,6 +110,9 @@ export {
   POLICY_PRIVACY_PAGE,
   ROOT_URL,
   LOGIN_REQUIRED_PAGES,
+  CHALLENGE_SECTIONS,
+  MENU_CHALLENGE_SECTIONS_NO_LOGIN,
+  MENU_CHALEENGE_SECTIONS_WITH_LOGIN,
   MINI_DESCRIPTION_RENDER,
   RENDER_ICO,
   CALC_PAGES,