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

fix: minor media print improvements

Browse Source
This commit is contained in:
Roman Hotsiy 2018-10-05 15:57:12 +03:00
parent 393681b99e
commit fbcec82275
No known key found for this signature in database
GPG Key ID: 5CB7B3ACABA57CB0
4 changed files with 19 additions and 8 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

8
src/common-elements/panels.ts
View File

@ -5,7 +5,7 @@ export const MiddlePanel = styled.div`
width: calc(100% - ${props => props.theme.rightPanel.width}); width: calc(100% - ${props => props.theme.rightPanel.width});
padding: 0 ${props => props.theme.spacing.sectionHorizontal}px; padding: 0 ${props => props.theme.spacing.sectionHorizontal}px;
${media.lessThan('medium')` ${media.lessThan('medium', true)`
width: 100%; width: 100%;
padding: ${props => padding: ${props =>
`${props.theme.spacing.sectionVertical}px ${props.theme.spacing.sectionHorizontal}px`}; `${props.theme.spacing.sectionVertical}px ${props.theme.spacing.sectionHorizontal}px`};
@ -19,7 +19,7 @@ export const Section = withProps<{ underlined?: boolean }>(
)` )`
padding: ${props => props.theme.spacing.sectionVertical}px 0; padding: ${props => props.theme.spacing.sectionVertical}px 0;
${media.lessThan('medium')` ${media.lessThan('medium', true)`
padding: 0; padding: 0;
`} `}
${props => ${props =>
@ -45,7 +45,7 @@ export const RightPanel = styled.div`
background-color: ${props => props.theme.rightPanel.backgroundColor}; background-color: ${props => props.theme.rightPanel.backgroundColor};
padding: 0 ${props => props.theme.spacing.sectionHorizontal}px; padding: 0 ${props => props.theme.spacing.sectionHorizontal}px;
${media.lessThan('medium')` ${media.lessThan('medium', true)`
width: 100%; width: 100%;
padding: ${props => padding: ${props =>
`${props.theme.spacing.sectionVertical}px ${props.theme.spacing.sectionHorizontal}px`}; `${props.theme.spacing.sectionVertical}px ${props.theme.spacing.sectionHorizontal}px`};
@ -61,7 +61,7 @@ export const Row = styled.div`
width: 100%; width: 100%;
padding: 0; padding: 0;
${media.lessThan('medium')` ${media.lessThan('medium', true)`
flex-direction: column; flex-direction: column;
`}; `};
`; `;

5
src/components/Redoc/styled.elements.tsx
View File

@ -30,9 +30,10 @@ export const ApiContentWrap = styled.div`
position: relative; position: relative;
overflow: hidden; overflow: hidden;
width: calc(100% - ${props => props.theme.menu.width}); width: calc(100% - ${props => props.theme.menu.width});
${media.lessThan('small')` ${media.lessThan('small', true)`
width: 100%; width: 100%;
`}; `};
contain: layout; contain: layout;
`; `;
@ -43,7 +44,7 @@ export const BackgroundStub = styled.div`
bottom: 0; bottom: 0;
right: 0; right: 0;
width: calc((100% - ${({ theme }) => theme.menu.width}) * 0.4); width: calc((100% - ${({ theme }) => theme.menu.width}) * 0.4);
${media.lessThan('medium')` ${media.lessThan('medium', true)`
display: none; display: none;
`}; `};
`; `;

9
src/components/StickySidebar/StickyResponsiveSidebar.tsx
View File

@ -43,6 +43,10 @@ const StyledStickySidebar = withProps<{ open?: boolean }>(styled.div)`
background: #ffffff; background: #ffffff;
display: ${props => (props.open ? 'flex' : 'none')}; display: ${props => (props.open ? 'flex' : 'none')};
`}; `};
@media print {
display: none;
}
`; `;
const FloatingButton = styled.div` const FloatingButton = styled.div`
@ -60,11 +64,16 @@ const FloatingButton = styled.div`
${media.lessThan('small')` ${media.lessThan('small')`
display: flex; display: flex;
`}; `};
bottom: 44px; bottom: 44px;
width: 60px; width: 60px;
height: 60px; height: 60px;
padding: 0 20px; padding: 0 20px;
@media print {
display: none;
}
`; `;
@observer @observer

5
src/styled-components.ts
View File

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