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 = () => {
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">
All Entries
</H2>

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

@ -115,7 +115,7 @@ const Challenge = (props) => {
<FlexColumn
minHeight="100vh"
alignmentY="flex-start"
padding="64px 24px 64px 310px"
padding="64px 24px 64px 280px"
id="start"
>
<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) {
return (
<Svg
width="8px"
minWidth="8px"
maxWidth="8px"
src={filterIco}
cursor={props.cursor}
backgroundColor={theme.colors.dark}
@ -20,7 +21,8 @@ const ColumnFilterIcon = (props) => {
} else {
return (
<Svg
width="8px"
minWidth="8px"
maxWidth="8px"
src={arrow}
cursor={props.cursor}
backgroundColor={theme.colors.dark}
@ -33,7 +35,8 @@ const ColumnFilterIcon = (props) => {
return (
<>
<Svg
width="8px"
minWidth="8px"
maxWidth="8px"
rotate="180deg"
src={arrow}
cursor={props.cursor}

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

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

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

@ -225,7 +225,7 @@ const Leaderboard = (props) => {
const desktopRender = () => {
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">
Leaderboard
</H2>

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

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

7
src/utils/fonts.js
View File

@ -25,9 +25,12 @@ const H2 = styled(H1)`
const H3 = styled(H1)`
font-size: 18px;
line-height: 22px;
font-size: ${({ fontSize }) => (fontSize ? fontSize : '18px')};
@media (min-width: ${({ theme }) => theme.overMobile}) {
font-size: 24px;
line-height: 26px;
font-size: ${({ fontSize }) => (fontSize ? fontSize : '24px')};
}
`;
@ -48,7 +51,7 @@ const Medium = styled(Body)`
font-weight: 400;
@media (min-width: ${({ theme }) => theme.overMobile}) {
font-weight: 500;
font-size: ${({fontSize}) => fontSize ? fontSize : '16px'}
font-size: ${({ fontSize }) => (fontSize ? fontSize : '16px')};
}
`;
@ -80,7 +83,7 @@ const Code = styled(Container)`
overflow-wrap: break-word;
&:before {
display: ${({before}) => before ? 'inline-block' : 'none'};
display: ${({ before }) => (before ? 'inline-block' : 'none')};
content: '~$';
color: ${({ theme }) => theme.colors.green};
font-weight: 400;