fix: minor media print improvements

Redocly · Oct 5, 2018 · fbcec82 · fbcec82
1 parent 393681b
commit fbcec82
Show file tree

Hide file tree

Showing 4 changed files with 19 additions and 8 deletions.
diff --git a/src/common-elements/panels.ts b/src/common-elements/panels.ts
@@ -5,7 +5,7 @@ export const MiddlePanel = styled.div`
  width: calc(100% - ${props => props.theme.rightPanel.width});
  padding: 0 ${props => props.theme.spacing.sectionHorizontal}px;
 
- ${media.lessThan('medium')`
+ ${media.lessThan('medium', true)`
  width: 100%;
  padding: ${props =>
  `${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;
 
- ${media.lessThan('medium')`
+ ${media.lessThan('medium', true)`
  padding: 0;
  `}
  ${props =>
@@ -45,7 +45,7 @@ export const RightPanel = styled.div`
  background-color: ${props => props.theme.rightPanel.backgroundColor};
  padding: 0 ${props => props.theme.spacing.sectionHorizontal}px;
 
- ${media.lessThan('medium')`
+ ${media.lessThan('medium', true)`
  width: 100%;
  padding: ${props =>
  `${props.theme.spacing.sectionVertical}px ${props.theme.spacing.sectionHorizontal}px`};
@@ -61,7 +61,7 @@ export const Row = styled.div`
  width: 100%;
  padding: 0;
 
- ${media.lessThan('medium')`
+ ${media.lessThan('medium', true)`
  flex-direction: column;
  `};
 `;
diff --git a/src/components/Redoc/styled.elements.tsx b/src/components/Redoc/styled.elements.tsx
@@ -30,9 +30,10 @@ export const ApiContentWrap = styled.div`
  position: relative;
  overflow: hidden;
  width: calc(100% - ${props => props.theme.menu.width});
- ${media.lessThan('small')`
+ ${media.lessThan('small', true)`
  width: 100%;
  `};
+
  contain: layout;
 `;
 
@@ -43,7 +44,7 @@ export const BackgroundStub = styled.div`
  bottom: 0;
  right: 0;
  width: calc((100% - ${({ theme }) => theme.menu.width}) * 0.4);
- ${media.lessThan('medium')`
+ ${media.lessThan('medium', true)`
  display: none;
  `};
 `;
diff --git a/src/components/StickySidebar/StickyResponsiveSidebar.tsx b/src/components/StickySidebar/StickyResponsiveSidebar.tsx
@@ -43,6 +43,10 @@ const StyledStickySidebar = withProps<{ open?: boolean }>(styled.div)`
  background: #ffffff;
  display: ${props => (props.open ? 'flex' : 'none')};
  `};
+
+ @media print {
+ display: none;
+ }
 `;
 
 const FloatingButton = styled.div`
@@ -60,11 +64,16 @@ const FloatingButton = styled.div`
  ${media.lessThan('small')`
  display: flex;
  `};
+
  bottom: 44px;
 
  width: 60px;
  height: 60px;
  padding: 0 20px;
+
+ @media print {
+ display: none;
+ }
 `;
 
 @observer

diff --git a/src/styled-components.ts b/src/styled-components.ts
@@ -26,9 +26,10 @@ const {
 >;
 
 export const media = {
- lessThan(breakpoint) {
+ lessThan(breakpoint, print?: boolean) {
  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)};
  }
  `;