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

Table responsive corrections

Browse Source
This commit is contained in:
Mateusz Tylka 2023-04-11 16:07:06 +02:00
parent d23a5b5566
commit 4d20a97f79
8 changed files with 53 additions and 30 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
src/components/specific_challenge/AllEntries/AllEntries.js
View File

@ -199,7 +199,7 @@ const AllEntries = (props) => {
const desktopRender = () => { const desktopRender = () => {
return ( return (
<FlexColumn padding="24px" as="section" width="100%" maxWidth="1400px"> <FlexColumn padding="24px" as="section" width="100%" maxWidth="1600px">
<H2 as="h2" margin="0 0 32px 0"> <H2 as="h2" margin="0 0 32px 0">
All Entries All Entries
</H2> </H2>

2
src/components/specific_challenge/Challenge.js
View File

@ -115,7 +115,7 @@ const Challenge = (props) => {
<FlexColumn <FlexColumn
minHeight="100vh" minHeight="100vh"
alignmentY="flex-start" alignmentY="flex-start"
padding="64px 24px 64px 310px" padding="64px 24px 64px 280px"
id="start" id="start"
> >
<FlexRow gap="32px" margin="0 0 32px 0" padding="16px"> <FlexRow gap="32px" margin="0 0 32px 0" padding="16px">

9
src/components/specific_challenge/ColumnFilterIcon.js
View File

@ -9,7 +9,8 @@ const ColumnFilterIcon = (props) => {
if (props.index === props.active) { if (props.index === props.active) {
return ( return (
<Svg <Svg
width="8px" minWidth="8px"
maxWidth="8px"
src={filterIco} src={filterIco}
cursor={props.cursor} cursor={props.cursor}
backgroundColor={theme.colors.dark} backgroundColor={theme.colors.dark}
@ -20,7 +21,8 @@ const ColumnFilterIcon = (props) => {
} else { } else {
return ( return (
<Svg <Svg
width="8px" minWidth="8px"
maxWidth="8px"
src={arrow} src={arrow}
cursor={props.cursor} cursor={props.cursor}
backgroundColor={theme.colors.dark} backgroundColor={theme.colors.dark}
@ -33,7 +35,8 @@ const ColumnFilterIcon = (props) => {
return ( return (
<> <>
<Svg <Svg
width="8px" minWidth="8px"
maxWidth="8px"
rotate="180deg" rotate="180deg"
src={arrow} src={arrow}
cursor={props.cursor} cursor={props.cursor}

10
src/components/specific_challenge/DesktopChallengeMenu.js
View File

@ -8,6 +8,7 @@ import { Link } from 'react-router-dom';
import { import {
MENU_CHALLENGE_SECTIONS_WITH_LOGIN, MENU_CHALLENGE_SECTIONS_WITH_LOGIN,
MENU_CHALLENGE_SECTIONS_NO_LOGIN, MENU_CHALLENGE_SECTIONS_NO_LOGIN,
IS_MOBILE,
} from '../../utils/globals'; } from '../../utils/globals';
const DesktopChallengeMenuStyle = styled(FlexColumn)` const DesktopChallengeMenuStyle = styled(FlexColumn)`
@ -15,7 +16,7 @@ const DesktopChallengeMenuStyle = styled(FlexColumn)`
position: fixed; position: fixed;
left: 0; left: 0;
overflow-y: auto; overflow-y: auto;
width: 280px; width: 240px;
height: 100vh; height: 100vh;
top: 50px; top: 50px;
padding: 64px 0 0 0; padding: 64px 0 0 0;
@ -58,7 +59,12 @@ const DesktopChallengeMenu = (props) => {
.toLowerCase() .toLowerCase()
.replace(' ', '')}`} .replace(' ', '')}`}
> >
<H3 textTransform="uppercase">{option}</H3> <H3
fontSize={IS_MOBILE() ? '18px' : '22px'}
textTransform="uppercase"
>
{option}
</H3>
</Option> </Option>
); );
})} })}

2
src/components/specific_challenge/Leaderboard/Leaderboard.js
View File

@ -225,7 +225,7 @@ const Leaderboard = (props) => {
const desktopRender = () => { const desktopRender = () => {
return ( return (
<FlexColumn padding="24px" as="section" width="100%" maxWidth="1200px"> <FlexColumn padding="24px" as="section" width="100%" maxWidth="1600px">
<H2 as="h2" margin="0 0 32px 0"> <H2 as="h2" margin="0 0 32px 0">
Leaderboard Leaderboard
</H2> </H2>

4
src/components/specific_challenge/MyEntries/MyEntries.js
View File

@ -175,7 +175,7 @@ const MyEntries = (props) => {
const desktopRender = () => { const desktopRender = () => {
return ( return (
<FlexColumn padding="24px" as="section" width="100%" maxWidth="1400px"> <FlexColumn padding="24px" as="section" width="100%" maxWidth="1600px">
<FlexColumn padding="24px 12px" width="70%" as="section" id="start"> <FlexColumn padding="24px 12px" width="70%" as="section" id="start">
<H2 as="h2" margin="0 0 32px 0"> <H2 as="h2" margin="0 0 32px 0">
My Entries My Entries
@ -189,7 +189,7 @@ const MyEntries = (props) => {
headerElements={getMyEntriesHeader()} headerElements={getMyEntriesHeader()}
possibleMetrics={getPossibleMetrics()} possibleMetrics={getPossibleMetrics()}
gridTemplateColumns={ gridTemplateColumns={
'1fr ' + '4fr '.repeat(getMyEntriesHeader().length - 1) '1fr ' + '3fr '.repeat(getMyEntriesHeader().length - 2) + ' 4fr'
} }
staticColumnElements={[ staticColumnElements={[
{ name: 'id', format: null, order: 1, align: 'left' }, { name: 'id', format: null, order: 1, align: 'left' },

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

@ -106,6 +106,8 @@ const Table = (props) => {
order={props.iterableColumnElement.order} order={props.iterableColumnElement.order}
textAlign={props.iterableColumnElement.align} textAlign={props.iterableColumnElement.align}
minWidth="72px" minWidth="72px"
margin="auto 0"
overflowWrap="anywhere"
> >
{IS_MOBILE() && ( {IS_MOBILE() && (
<Container className="mobile-table-header"> <Container className="mobile-table-header">
@ -130,6 +132,8 @@ const Table = (props) => {
as="td" as="td"
order={elemName.order} order={elemName.order}
textAlign={elemName.align} textAlign={elemName.align}
margin="auto 0"
overflowWrap="anywhere"
> >
{IS_MOBILE() && ( {IS_MOBILE() && (
<Container className="mobile-table-header"> <Container className="mobile-table-header">
@ -156,7 +160,8 @@ const Table = (props) => {
gridGap="20px" gridGap="20px"
position="relative" position="relative"
width="100%" width="100%"
padding="4px" padding="0 6px"
minHeight="44px"
margin="0 0 6px 0" margin="0 0 6px 0"
gridTemplateColumns={props.gridTemplateColumns} gridTemplateColumns={props.gridTemplateColumns}
> >
@ -183,8 +188,8 @@ const Table = (props) => {
cursor={elem !== '#' ? 'pointer' : ''} cursor={elem !== '#' ? 'pointer' : ''}
textAlign={elem === 'when' ? 'right' : 'left'} textAlign={elem === 'when' ? 'right' : 'left'}
width={elem === 'when' ? '100%' : 'auto'} width={elem === 'when' ? '100%' : 'auto'}
padding="0 6px 0 0" padding="0 4px 0 0"
overflowWrap="break-word" overflowWrap="anywhere"
minWidth={elem === 'result' ? '72px' : 'none'} minWidth={elem === 'result' ? '72px' : 'none'}
> >
{elem.replace('.', ' ')} {elem.replace('.', ' ')}
@ -200,7 +205,12 @@ const Table = (props) => {
</FlexRow> </FlexRow>
); );
})} })}
<Line height="2px" top="100%" as="td" shadow={theme.shadow} /> <Line
height="2px"
top="calc(100% + 2px)"
as="td"
shadow={theme.shadow}
/>
</Grid> </Grid>
{elementsToMap.map((elem, index) => { {elementsToMap.map((elem, index) => {
return ( return (
@ -215,6 +225,7 @@ const Table = (props) => {
position="relative" position="relative"
width="100%" width="100%"
padding="4px" padding="4px"
minHeight="48px"
> >
{rowRender(elem)} {rowRender(elem)}
{props.headerElements ? metricsRender(elem) : ''} {props.headerElements ? metricsRender(elem) : ''}

35
src/utils/fonts.js
View File

@ -1,5 +1,5 @@
import styled from 'styled-components'; import styled from 'styled-components';
import {Container} from './containers'; import { Container } from './containers';
const H1 = styled(Container)` const H1 = styled(Container)`
display: inline-block; display: inline-block;
@ -8,7 +8,7 @@ const H1 = styled(Container)`
font-size: 24px; font-size: 24px;
line-height: 24px; line-height: 24px;
letter-spacing: 0.1px; letter-spacing: 0.1px;
@media (min-width: ${({theme}) => theme.overMobile}) { @media (min-width: ${({ theme }) => theme.overMobile}) {
font-size: 48px; font-size: 48px;
line-height: 52px; line-height: 52px;
} }
@ -16,7 +16,7 @@ const H1 = styled(Container)`
const H2 = styled(H1)` const H2 = styled(H1)`
font-size: 20px; font-size: 20px;
@media (min-width: ${({theme}) => theme.overMobile}) { @media (min-width: ${({ theme }) => theme.overMobile}) {
font-size: 32px; font-size: 32px;
line-height: 36px; line-height: 36px;
} }
@ -25,9 +25,12 @@ const H2 = styled(H1)`
const H3 = styled(H1)` const H3 = styled(H1)`
font-size: 18px; font-size: 18px;
line-height: 22px; line-height: 22px;
@media (min-width: ${({theme}) => theme.overMobile}) { font-size: ${({ fontSize }) => (fontSize ? fontSize : '18px')};
@media (min-width: ${({ theme }) => theme.overMobile}) {
font-size: 24px; font-size: 24px;
line-height: 26px; line-height: 26px;
font-size: ${({ fontSize }) => (fontSize ? fontSize : '24px')};
} }
`; `;
@ -37,7 +40,7 @@ const Body = styled(Container)`
font-weight: 300; font-weight: 300;
font-size: 14px; font-size: 14px;
line-height: 20px; line-height: 20px;
@media (min-width: ${({theme}) => theme.overMobile}) { @media (min-width: ${({ theme }) => theme.overMobile}) {
font-weight: 400; font-weight: 400;
font-size: 16px; font-size: 16px;
line-height: 22px; line-height: 22px;
@ -46,9 +49,9 @@ const Body = styled(Container)`
const Medium = styled(Body)` const Medium = styled(Body)`
font-weight: 400; font-weight: 400;
@media (min-width: ${({theme}) => theme.overMobile}) { @media (min-width: ${({ theme }) => theme.overMobile}) {
font-weight: 500; font-weight: 500;
font-size: ${({fontSize}) => fontSize ? fontSize : '16px'} font-size: ${({ fontSize }) => (fontSize ? fontSize : '16px')};
} }
`; `;
@ -63,7 +66,7 @@ const Menu = styled(Container)`
const Label = styled(Menu)` const Label = styled(Menu)`
display: inline-block; display: inline-block;
font-weight: 300; font-weight: 300;
@media (min-width: ${({theme}) => theme.overMobile}) { @media (min-width: ${({ theme }) => theme.overMobile}) {
font-size: 22px; font-size: 22px;
line-height: 24px; line-height: 24px;
} }
@ -75,22 +78,22 @@ const Code = styled(Container)`
font-size: 12px; font-size: 12px;
line-height: 18px; line-height: 18px;
font-weight: 300; font-weight: 300;
color: ${({theme}) => theme.colors.white}; color: ${({ theme }) => theme.colors.white};
max-width: 600px; max-width: 600px;
overflow-wrap: break-word; overflow-wrap: break-word;
&:before { &:before {
display: ${({before}) => before ? 'inline-block' : 'none'}; display: ${({ before }) => (before ? 'inline-block' : 'none')};
content: '~$'; content: '~$';
color: ${({theme}) => theme.colors.green}; color: ${({ theme }) => theme.colors.green};
font-weight: 400; font-weight: 400;
margin: 0 4px 0 0; margin: 0 4px 0 0;
@media (min-width: ${({theme}) => theme.overMobile}) { @media (min-width: ${({ theme }) => theme.overMobile}) {
font-weight: 500; font-weight: 500;
} }
} }
@media (min-width: ${({theme}) => theme.overMobile}) { @media (min-width: ${({ theme }) => theme.overMobile}) {
font-size: 16px; font-size: 16px;
line-height: 24px; line-height: 24px;
font-weight: 400; font-weight: 400;
@ -98,11 +101,11 @@ const Code = styled(Container)`
`; `;
const CodeMedium = styled(Code)` const CodeMedium = styled(Code)`
color: ${({theme}) => theme.colors.green}; color: ${({ theme }) => theme.colors.green};
font-weight: 400; font-weight: 400;
@media (min-width: ${({theme}) => theme.overMobile}) { @media (min-width: ${({ theme }) => theme.overMobile}) {
font-weight: 500; font-weight: 500;
} }
`; `;
export {H1, H2, H3, Body, Medium, Menu, Label, Code, CodeMedium}; export { H1, H2, H3, Body, Medium, Menu, Label, Code, CodeMedium };