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

fix: make schema layout more responsive on small screen (#1411)

Browse Source
This commit is contained in:
Roman Hotsiy 2020-10-13 16:21:36 +03:00 committed by GitHub
parent 086302bb23
commit 84ab95ddc7
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
3 changed files with 43 additions and 7 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

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

11
src/components/SecurityRequirement/SecurityRequirement.tsx
View File

@ -1,7 +1,7 @@
// import { transparentize } from 'polished'; // import { transparentize } from 'polished';
import * as React from 'react'; import * as React from 'react';
import styled from '../../styled-components'; import styled, { media } from '../../styled-components';
import { Link, UnderlinedHeader } from '../../common-elements/'; import { Link, UnderlinedHeader } from '../../common-elements/';
import { SecurityRequirementModel } from '../../services/models/SecurityRequirement'; import { SecurityRequirementModel } from '../../services/models/SecurityRequirement';
@ -85,11 +85,14 @@ export class SecurityRequirement extends React.PureComponent<SecurityRequirement
} }
const AuthHeaderColumn = styled.div` const AuthHeaderColumn = styled.div`
flex: 1; flex: 1 1 auto;
`; `;
const SecuritiesColumn = styled.div` const SecuritiesColumn = styled.div`
width: ${props => props.theme.schema.defaultDetailsWidth}; width: ${props => props.theme.schema.defaultDetailsWidth};
${media.lessThan('small')`
margin-top: 10px;
`}
`; `;
const AuthHeader = styled(UnderlinedHeader)` const AuthHeader = styled(UnderlinedHeader)`
@ -101,6 +104,10 @@ const Wrap = styled.div`
width: 100%; width: 100%;
display: flex; display: flex;
margin: 1em 0; margin: 1em 0;
${media.lessThan('small')`
flex-direction: column;
`}
`; `;
export interface SecurityRequirementsProps { export interface SecurityRequirementsProps {

4
src/styled-components.ts
View File

@ -13,10 +13,10 @@ const {
} = styledComponents as styledComponents.ThemedStyledComponentsModule<ResolvedThemeInterface>; } = styledComponents as styledComponents.ThemedStyledComponentsModule<ResolvedThemeInterface>;
export const media = { export const media = {
lessThan(breakpoint, print?: boolean) { lessThan(breakpoint, print?: boolean, extra?: string) {
return (...args) => css` return (...args) => css`
@media ${print ? 'print, ' : ''} screen and (max-width: ${props => @media ${print ? 'print, ' : ''} screen and (max-width: ${props =>
props.theme.breakpoints[breakpoint]}) { props.theme.breakpoints[breakpoint]})${extra || ''} {
${(css as any)(...args)}; ${(css as any)(...args)};
} }
`; `;