Skip to content

Commit

Permalink
fix: make schema layout more responsive on small screen (#1411)
Browse files Browse the repository at this point in the history
  • Loading branch information
RomanHotsiy authored Oct 13, 2020
1 parent 086302b commit 84ab95d
Show file tree
Hide file tree
Showing 3 changed files with 43 additions and 7 deletions.
35 changes: 32 additions & 3 deletions src/common-elements/fields-layout.ts
Original file line number Diff line number Diff line change
@@ -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`
Expand All @@ -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;
Expand Down Expand Up @@ -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};
Expand All @@ -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`
Expand Down Expand Up @@ -125,6 +140,20 @@ export const PropertiesTable = styled.table`
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},
&
Expand Down
11 changes: 9 additions & 2 deletions src/components/SecurityRequirement/SecurityRequirement.tsx
Original file line number Diff line number Diff line change
@@ -1,7 +1,7 @@
// import { transparentize } from 'polished';
import * as React from 'react';

import styled from '../../styled-components';
import styled, { media } from '../../styled-components';

import { Link, UnderlinedHeader } from '../../common-elements/';
import { SecurityRequirementModel } from '../../services/models/SecurityRequirement';
Expand Down Expand Up @@ -85,11 +85,14 @@ export class SecurityRequirement extends React.PureComponent<SecurityRequirement
}

const AuthHeaderColumn = styled.div`
flex: 1;
flex: 1 1 auto;
`;

const SecuritiesColumn = styled.div`
width: ${props => props.theme.schema.defaultDetailsWidth};
${media.lessThan('small')`
margin-top: 10px;
`}
`;

const AuthHeader = styled(UnderlinedHeader)`
Expand All @@ -101,6 +104,10 @@ const Wrap = styled.div`
width: 100%;
display: flex;
margin: 1em 0;
${media.lessThan('small')`
flex-direction: column;
`}
`;

export interface SecurityRequirementsProps {
Expand Down
4 changes: 2 additions & 2 deletions src/styled-components.ts
Original file line number Diff line number Diff line change
Expand Up @@ -13,10 +13,10 @@ const {
} = styledComponents as styledComponents.ThemedStyledComponentsModule<ResolvedThemeInterface>;

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

0 comments on commit 84ab95d

Please sign in to comment.