Redocly/redoc
1
1
Fork 0
mirror of https://github.com/Redocly/redoc.git synced 2025-08-07 13:44:54 +03:00
Code Issues Packages Projects Releases Wiki Activity

fix: make schema layout more responsive on small screen

Browse Source
This commit is contained in:
romanhotsiy 2020-10-13 14:40:59 +03:00
parent f805271d90
commit c0509b3770
No known key found for this signature in database
GPG Key ID: 0BC2221278CCBBB8
1 changed files with 25 additions and 3 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

28
src/common-elements/fields-layout.ts
View File

@ -1,6 +1,6 @@
// import { transparentize } from 'polished';
import styled, { extensionsHook } from '../styled-components';
import styled, { extensionsHook, media } from '../styled-components';
import { deprecatedCss } from './mixins';
export const PropertiesTableCaption = styled.caption`
@ -16,6 +16,11 @@ export const PropertyCell = styled.td<{ kind?: string }>`
position: relative;
padding: 10px 10px 10px 0;
${media.lessThan('small')`
display: block;
overflow: hidden;
`}
tr:first-of-type > &,
tr.last > & {
border-left-width: 0;
@ -63,7 +68,7 @@ export const PropertyNameCell = styled(PropertyCell)`
line-height: 20px;
white-space: nowrap;
font-size: 13px;
font-family: ${props => props.theme.typography.code.fontFamily};
font-family: ${(props) => props.theme.typography.code.fontFamily};
&.deprecated {
${deprecatedCss};
@ -77,12 +82,22 @@ export const PropertyNameCell = styled(PropertyCell)`
export const PropertyDetailsCell = styled.td`
border-bottom: 1px solid #9fb4be;
padding: 10px 0;
width: ${props => props.theme.schema.defaultDetailsWidth};
width: ${(props) => props.theme.schema.defaultDetailsWidth};
box-sizing: border-box;
tr.expanded & {
border-bottom: none;
}
${media.lessThan('small')`
padding: 0 20px;
border-bottom: none;
border-left: 1px solid ${(props) => props.theme.schema.linesColor};
tr.last > & {
border-left: none;
}
`}
`;
export const PropertyBullet = styled.span`
@ -125,6 +140,13 @@ export const PropertiesTable = styled.table`
vertical-align: middle;
}
${media.lessThan('small')`
display: block;
> tr, > tbody, tr {
display: block;
}
`}
&
${InnerPropertiesWrap},
&