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

fix table style with many metrics

Browse Source
This commit is contained in:
Mateusz Tylka 2023-04-26 20:46:16 +02:00
parent c1bb79d0cd
commit da775bda3b
1 changed files with 11 additions and 4 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -7,6 +7,10 @@ import { Body, Medium } from '../../utils/fonts';
import styled from 'styled-components'; import styled from 'styled-components';
import ColumnFilterIcon from './ColumnFilterIcon'; import ColumnFilterIcon from './ColumnFilterIcon';
const TableStyle = styled(FlexColumn)`
overflow-x: ${({metrics}) => metrics > 10 ? 'scroll' : 'auto'};
`;
const Line = styled(FlexRow)` const Line = styled(FlexRow)`
position: absolute; position: absolute;
top: ${({ top }) => (top ? top : 'auto')}; top: ${({ top }) => (top ? top : 'auto')};
@ -105,7 +109,7 @@ const Table = (props) => {
as="td" as="td"
order={props.iterableColumnElement.order} order={props.iterableColumnElement.order}
textAlign={props.iterableColumnElement.align} textAlign={props.iterableColumnElement.align}
minWidth="72px" minWidth="88px"
margin="auto 0" margin="auto 0"
overflowWrap="anywhere" overflowWrap="anywhere"
> >
@ -133,6 +137,7 @@ const Table = (props) => {
order={elemName.order} order={elemName.order}
textAlign={elemName.align} textAlign={elemName.align}
margin="auto 0" margin="auto 0"
minWidth="88px"
overflowWrap="anywhere" overflowWrap="anywhere"
> >
{IS_MOBILE() && ( {IS_MOBILE() && (
@ -153,7 +158,7 @@ const Table = (props) => {
let elementsToMap = props.elements.slice(n, n + ELEMENTS_PER_PAGE * 2); let elementsToMap = props.elements.slice(n, n + ELEMENTS_PER_PAGE * 2);
if (elementsToMap.length > 0) { if (elementsToMap.length > 0) {
return ( return (
<FlexColumn as="table" margin="32px 0 72px 0" width="100%"> <TableStyle as="table" margin="32px 0 72px 0" width="100%">
<FlexColumn as="tbody" width="100%"> <FlexColumn as="tbody" width="100%">
<Grid <Grid
as="tr" as="tr"
@ -190,7 +195,9 @@ const Table = (props) => {
width={elem === 'when' ? '100%' : 'auto'} width={elem === 'when' ? '100%' : 'auto'}
padding="0 4px 0 0" padding="0 4px 0 0"
overflowWrap="anywhere" overflowWrap="anywhere"
minWidth={elem === 'result' ? '72px' : 'none'} minWidth="72px"
// minWidth={elem === 'result' ? '72px' : 'none'}
> >
{elem.replace('.', ' ')} {elem.replace('.', ' ')}
</Medium> </Medium>
@ -233,7 +240,7 @@ const Table = (props) => {
); );
})} })}
</FlexColumn> </FlexColumn>
</FlexColumn> </TableStyle>
); );
} }
return <Medium margin="72px 0">No results ;c</Medium>; return <Medium margin="72px 0">No results ;c</Medium>;