diff --git a/public/index.html b/public/index.html index aa069f2..ee79038 100644 --- a/public/index.html +++ b/public/index.html @@ -1,20 +1,20 @@ - - - - - + + + + + - + - + - React App - - - -
- - + To begin the development, run `npm start` or `yarn start`. + To create a production bundle, use `npm run build` or `yarn build`. +--> + diff --git a/src/components/elements/MiniChallenge.js b/src/components/elements/MiniChallenge.js index 6a72191..5b59790 100644 --- a/src/components/elements/MiniChallenge.js +++ b/src/components/elements/MiniChallenge.js @@ -4,7 +4,7 @@ import {Body, H3} from "../../utils/fonts"; import styled from "styled-components"; import IconLabel from "./IconLabel"; import {Link} from "react-router-dom"; -import {CHALLENGE_PAGE} from "../../utils/globals"; +import {CHALLENGE_PAGE, MINI_DESCRIPTION_LENGTH} from "../../utils/globals"; const ChallengeStyle = styled(FlexColumn)` padding: 12px; @@ -14,10 +14,6 @@ const ChallengeStyle = styled(FlexColumn)` position: relative; max-width: 420px; - p { - width: 80%; - } - * { cursor: pointer; } @@ -26,12 +22,19 @@ const ChallengeStyle = styled(FlexColumn)` transform: scale(1.05); } - a { - position: absolute; - top: 0; - left: 0; + article { width: 100%; - height: 100%; + align-items: flex-start; + + p { + width: 80%; + } + } + + @media (min-width: ${({theme}) => theme.overMobile}) { + width: 360px; + padding: 20px; + justify-content: flex-start; } `; @@ -54,43 +57,43 @@ const IconsGrid = styled(Grid)` `; const MiniChallenge = (props) => { - const renderDescription = (description) => { - if (description.length <= 200) + if (description.length <= MINI_DESCRIPTION_LENGTH) return description; - return `${description.slice(0, 100)}...` + return `${description.slice(0, MINI_DESCRIPTION_LENGTH)}...` } return ( - - -

- {props.title} -

- - - - - {props.description ? renderDescription(props.description) : 'xxx'} - - - - {props.metric ? props.metric : 'xxx'} - - - {props.bestScore ? props.bestScore : 'xxx'} - - - {props.deadline ? props.deadline.slice(0, 10) : 'xxx'} - - - {props.baseline ? props.baseline : 'xxx'} - - {props.prize ? - {props.prize} - : ''} - - + + + +

+ {props.title} +

+ {props.type ? : 'xxx'} + + + + {props.description ? renderDescription(props.description) : 'xxx'} + + + + {props.metric ? props.metric : 'xxx'} + + + {props.bestScore ? props.bestScore : 'xxx'} + + + {props.deadline ? props.deadline.slice(0, 10) : 'xxx'} + + + {props.baseline ? props.baseline : 'xxx'} + + {props.prize ? + {props.prize} + : ''} + + ); } diff --git a/src/components/elements/Pager.js b/src/components/elements/Pager.js index 68491a4..046fddc 100644 --- a/src/components/elements/Pager.js +++ b/src/components/elements/Pager.js @@ -5,26 +5,46 @@ import polygon from '../../assets/polygon.svg'; import styled from "styled-components"; import theme from "../../utils/theme"; +const PagerStyle = styled(FlexRow)` + gap: 14px; + + @media (min-width: ${({theme}) => theme.overMobile}) { + gap: 20px; + } +`; + const LeftArrow = styled(Svg)` background-color: ${({backgroundColor}) => backgroundColor}; cursor: ${({backgroundColor}) => (backgroundColor === 'transparent') ? 'auto' : 'pointer'}; + width: 10px; + height: 10px; + @media (min-width: ${({theme}) => theme.overMobile}) { + width: 12px; + height: 12px; + } `; const RightArrow = styled(Svg)` - display: ${({display}) => display}; + background-color: ${({backgroundColor}) => backgroundColor}; transform: rotate(180deg); cursor: ${({backgroundColor}) => (backgroundColor === 'transparent') ? 'auto' : 'pointer'}; + width: 10px; + height: 10px; + @media (min-width: ${({theme}) => theme.overMobile}) { + width: 12px; + height: 12px; + } `; const Pager = (props) => { return ( - - + - - + ); } diff --git a/src/components/sections/Footer.js b/src/components/sections/Footer.js index b6070ab..ac3ced4 100644 --- a/src/components/sections/Footer.js +++ b/src/components/sections/Footer.js @@ -19,6 +19,10 @@ const FooterStyle = styled(FlexRow)` text-decoration: underline; cursor: pointer; } + + @media (min-width: ${({theme}) => theme.overMobile}) { + height: 72px; + } `; const Footer = () => { diff --git a/src/pages/Challanges/Challenges.js b/src/pages/Challanges/Challenges.js index b76ec84..0cff6ca 100644 --- a/src/pages/Challanges/Challenges.js +++ b/src/pages/Challanges/Challenges.js @@ -1,6 +1,6 @@ import React from "react"; import {H1} from "../../utils/fonts"; -import {FlexColumn, Grid} from "../../utils/containers"; +import {FlexColumn} from "../../utils/containers"; import Search from "../../components/elements/Search"; import Pager from "../../components/elements/Pager"; import {ELEMENTS_PER_PAGE} from "../../utils/globals"; @@ -8,6 +8,8 @@ import FiltersMenu from "../../components/elements/FiltersMenu"; import _searchQueryHandler from "./_searchQueryHandler"; import _challengesRequest from "./_challengesRequest"; import _renderChallenges from "./_renderChallenges"; +import Media from "react-media"; +import theme from "../../utils/theme"; const Challenges = () => { const [pageNr, setPageNr] = React.useState(1); @@ -74,29 +76,59 @@ const Challenges = () => { setFiltersMenu(newFiltersMenu); } - return ( - <> - + const mobileRender = () => { + return ( + <> + + + +

+ Challenges +

+ + + {renderChallenges()} + + + + + + ); + } + + const desktopRender = () => { + return ( - -

+ minHeight='100vh' padding='112px 0 82px 0'> + +

Challenges

- - {renderChallenges()} - + {renderChallenges()} + ); + } + + return ( + <> + + {mobileRender()} + + + {desktopRender()} + ); } diff --git a/src/pages/Challanges/_renderChallenges.js b/src/pages/Challanges/_renderChallenges.js index db1f18d..97e8a05 100644 --- a/src/pages/Challanges/_renderChallenges.js +++ b/src/pages/Challanges/_renderChallenges.js @@ -1,18 +1,33 @@ import {ELEMENTS_PER_PAGE} from "../../utils/globals"; import MiniChallenge from "../../components/elements/MiniChallenge"; +import {Grid} from "../../utils/containers"; +import styled from "styled-components"; + +const ChallengesGrid = styled(Grid)` + margin: 32px 0; + grid-gap: 32px 0; + + @media (min-width: 1200px) { + margin: 96px 0; + grid-gap: 64px; + grid-template-columns: 1fr 1fr; + } +`; const _renderChallenges = (pageNr, challenges) => { const n = (pageNr - 1) * ELEMENTS_PER_PAGE; return ( - challenges.slice(n, n + ELEMENTS_PER_PAGE).map((challenge, index) => { - return ( - - ); - }) + + {challenges.slice(n, n + ELEMENTS_PER_PAGE).map((challenge, index) => { + return ( + + ); + })} + ) } diff --git a/src/utils/globals.js b/src/utils/globals.js index b9668f1..44fa20e 100644 --- a/src/utils/globals.js +++ b/src/utils/globals.js @@ -1,6 +1,7 @@ const ELEMENTS_PER_PAGE = 12; +const MINI_DESCRIPTION_LENGTH = 70; const API = 'https://gonito.net/api'; const CHALLENGES_PAGE = '/challenges'; const CHALLENGE_PAGE = '/challenge'; -export {ELEMENTS_PER_PAGE, API, CHALLENGES_PAGE, CHALLENGE_PAGE}; \ No newline at end of file +export {ELEMENTS_PER_PAGE, API, CHALLENGES_PAGE, CHALLENGE_PAGE, MINI_DESCRIPTION_LENGTH}; \ No newline at end of file