From a29c3ccc2d9be36d50067cd3b11a435bdc66c8c6 Mon Sep 17 00:00:00 2001
From: Roman Hotsiy <gotsijroman@gmail.com>
Date: Tue, 30 Jan 2018 15:35:18 +0200
Subject: [PATCH] fix: basic responsiveness

---
 demo/playground/index.html                    |  1 +
 src/common-elements/panels.ts                 | 20 ++++++++++++-
 src/components/ApiInfo/ApiInfo.tsx            |  4 +--
 src/components/ContentItems/ContentItems.tsx  |  4 +--
 src/components/Operation/Operation.tsx        |  2 +-
 src/components/Redoc/elements.tsx             |  5 +++-
 .../SecuirityRequirement.tsx                  | 28 ++++++++---------
 src/services/MenuStore.ts                     |  2 +-
 src/styled-components.ts                      | 30 ++++++++++++++++++-
 src/theme.ts                                  |  5 ++++
 10 files changed, 78 insertions(+), 23 deletions(-)
diff --git a/demo/playground/index.html b/demo/playground/index.html
index 094f8b49dc..7a3a5092f1 100644
--- a/demo/playground/index.html
+++ b/demo/playground/index.html
@@ -3,6 +3,7 @@
 
 <head>
   <meta charset="UTF-8" />
+  <meta name="viewport" content="width=device-width, initial-scale=1">
   <title>ReDoc</title>
   <style>
     body {
diff --git a/src/common-elements/panels.ts b/src/common-elements/panels.ts
index ea5d5fdc76..be6ff931af 100644
--- a/src/common-elements/panels.ts
+++ b/src/common-elements/panels.ts
@@ -1,8 +1,12 @@
-import styled from '../styled-components';
+import styled, { media } from '../styled-components';
 
 export const MiddlePanel = styled.div`
   width: ${props => 100 - props.theme.rightPanel.width}%;
   padding: ${props => props.theme.spacingUnit * 2}px;
+
+  ${media.lessThan('medium')`
+    width: 100%;
+  `};
 `;
 
 export const RightPanel = styled.div`
@@ -10,13 +14,27 @@ export const RightPanel = styled.div`
   color: #fafbfc;
   bckground-color: ${props => props.theme.rightPanel.backgroundColor};
   padding: ${props => props.theme.spacingUnit * 2}px;
+
+  ${media.lessThan('medium')`
+    width: 100%;
+  `};
 `;
 
 export const DarkRightPanel = styled(RightPanel)`
   background-color: ${props => props.theme.rightPanel.backgroundColor};
 `;
 
+export const EmptyDarkRightPanel = styled(DarkRightPanel)`
+  ${media.lessThan('medium')`
+    padding: 0
+  `};
+`;
+
 export const Row = styled.div`
   display: flex;
   width: 100%;
+
+  ${media.lessThan('medium')`
+    flex-direction: column;
+  `};
 `;
diff --git a/src/components/ApiInfo/ApiInfo.tsx b/src/components/ApiInfo/ApiInfo.tsx
index f1d517498e..e0aaa7d570 100644
--- a/src/components/ApiInfo/ApiInfo.tsx
+++ b/src/components/ApiInfo/ApiInfo.tsx
@@ -3,7 +3,7 @@ import * as React from 'react';
 
 import { AppStore } from '../../services/AppStore';
 
-import { DarkRightPanel, MiddlePanel, Row } from '../../common-elements/';
+import { MiddlePanel, Row, EmptyDarkRightPanel } from '../../common-elements/';
 import { Markdown } from '../Markdown/Markdown';
 import { SecurityDefs } from '../SecuritySchemes/SecuritySchemes';
 
@@ -110,7 +110,7 @@ export class ApiInfo extends React.Component<ApiInfoProps> {
             />
           </div>
         </MiddlePanel>
-        <DarkRightPanel />
+        <EmptyDarkRightPanel />
       </Row>
     );
   }
diff --git a/src/components/ContentItems/ContentItems.tsx b/src/components/ContentItems/ContentItems.tsx
index 56217c0eb1..eaf024bc34 100644
--- a/src/components/ContentItems/ContentItems.tsx
+++ b/src/components/ContentItems/ContentItems.tsx
@@ -4,7 +4,7 @@ import * as React from 'react';
 import { SECTION_ATTR } from '../../services/MenuStore';
 import { Markdown } from '../Markdown/Markdown';
 
-import { DarkRightPanel, H1, MiddlePanel, Row, ShareLink } from '../../common-elements';
+import { EmptyDarkRightPanel, H1, MiddlePanel, Row, ShareLink } from '../../common-elements';
 import { ContentItemModel } from '../../services/MenuBuilder';
 import { OperationModel } from '../../services/models';
 import { Operation } from '../Operation/Operation';
@@ -70,7 +70,7 @@ export class TagItem extends React.Component<ContentItemProps> {
           </H1>
           {description !== undefined && <Markdown source={description} />}
         </MiddlePanel>
-        <DarkRightPanel key="right" />
+        <EmptyDarkRightPanel key="right" />
       </Row>
     );
   }
diff --git a/src/components/Operation/Operation.tsx b/src/components/Operation/Operation.tsx
index 15493a23e5..8db73f39d0 100644
--- a/src/components/Operation/Operation.tsx
+++ b/src/components/Operation/Operation.tsx
@@ -21,7 +21,7 @@ import { OperationModel as OperationType } from '../../services/models';
 const OperationRow = styled(Row)`
   transform: translateZ(0);
   overflow: hidden;
-  positioin: relative;
+  position: relative;
 
   &:after {
     position: absolute;
diff --git a/src/components/Redoc/elements.tsx b/src/components/Redoc/elements.tsx
index 5b3c71e1c4..e6371c51c4 100644
--- a/src/components/Redoc/elements.tsx
+++ b/src/components/Redoc/elements.tsx
@@ -1,5 +1,5 @@
 import { hoverColor } from '../../common-elements/mixins';
-import styled from '../../styled-components';
+import styled, { media } from '../../styled-components';
 export { ClassAttributes } from 'react';
 
 export const RedocWrap = styled.div`
@@ -38,4 +38,7 @@ export const ApiContent = styled.div`
   z-index: 10;
   position: relative;
   width: calc(100% - ${props => props.theme.menu.width});
+  ${media.lessThan('small')`
+    width: 100%;
+  `};
 `;
diff --git a/src/components/SecurityRequirement/SecuirityRequirement.tsx b/src/components/SecurityRequirement/SecuirityRequirement.tsx
index 1ca5f003df..b590882444 100644
--- a/src/components/SecurityRequirement/SecuirityRequirement.tsx
+++ b/src/components/SecurityRequirement/SecuirityRequirement.tsx
@@ -36,14 +36,10 @@ export class SecurityRequirement extends React.PureComponent<SecurityRequirement
   }
 }
 
-const AuthHeaderColumn = styled.div`
-  display: inline-block;
-  width: calc(100% - ${props => props.theme.schemaView.defaultDetailsWidth});
-`;
+const AuthHeaderColumn = styled.td``;
 
-const SecuritiesColumn = styled.div`
+const SecuritiesColumn = styled.td`
   width: ${props => props.theme.schemaView.defaultDetailsWidth};
-  display: inline-block;
 `;
 
 const AuthHeader = styled(UnderlinedHeader)`
@@ -61,14 +57,18 @@ export class SecurityRequirements extends React.PureComponent<SecurityRequiremen
       return null;
     }
     return (
-      <div>
-        <AuthHeaderColumn>
-          <AuthHeader>Authorizations: </AuthHeader>
-        </AuthHeaderColumn>
-        <SecuritiesColumn>
-          {securities.map((security, idx) => <SecurityRequirement key={idx} security={security} />)}
-        </SecuritiesColumn>
-      </div>
+      <table>
+        <tr>
+          <AuthHeaderColumn>
+            <AuthHeader>Authorizations: </AuthHeader>
+          </AuthHeaderColumn>
+          <SecuritiesColumn>
+            {securities.map((security, idx) => (
+              <SecurityRequirement key={idx} security={security} />
+            ))}
+          </SecuritiesColumn>
+        </tr>
+      </table>
     );
   }
 }
diff --git a/src/services/MenuStore.ts b/src/services/MenuStore.ts
index b08c7a2971..4a1cb3fd95 100644
--- a/src/services/MenuStore.ts
+++ b/src/services/MenuStore.ts
@@ -1,4 +1,4 @@
-import { action, computed } from 'mobx';
+import { action, computed, observable } from 'mobx';
 import { querySelector } from '../utils/dom';
 import { GroupModel, OperationModel, SpecStore } from './models';
 
diff --git a/src/styled-components.ts b/src/styled-components.ts
index 6f35e52a75..14df738f04 100644
--- a/src/styled-components.ts
+++ b/src/styled-components.ts
@@ -1,6 +1,6 @@
 import * as styledComponents from 'styled-components';
 
-import { ThemeInterface } from './theme';
+import theme, { ThemeInterface } from './theme';
 
 export type StyledFunction<T> = styledComponents.ThemedStyledFunction<T, ThemeInterface>;
 
@@ -21,5 +21,33 @@ const {
   any
 >) as styledComponents.ThemedStyledComponentsModule<ThemeInterface>;
 
+export const media = {
+  lessThan(breakpoint) {
+    return (...args) => css`
+      @media (max-width: ${theme.breakpoints[breakpoint]}) {
+        ${(css as any)(...args)};
+      }
+    `;
+  },
+
+  greaterThan(breakpoint) {
+    return (...args) => css`
+      @media (min-width: ${theme.breakpoints[breakpoint]}) {
+        ${(css as any)(...args)};
+      }
+    `;
+  },
+
+  between(firstBreakpoint, secondBreakpoint) {
+    return (...args) => css`
+      @media (min-width: ${theme.breakpoints[firstBreakpoint]}) and (max-width: ${theme.breakpoints[
+          secondBreakpoint
+        ]}) {
+        ${(css as any)(...args)};
+      }
+    `;
+  },
+};
+
 export { css, injectGlobal, keyframes, ThemeProvider, withTheme, withProps };
 export default styled;
diff --git a/src/theme.ts b/src/theme.ts
index cb6f689100..72430c9664 100644
--- a/src/theme.ts
+++ b/src/theme.ts
@@ -1,5 +1,10 @@
 const theme = {
   spacingUnit: 20,
+  breakpoints: {
+    small: '50rem',
+    medium: '85rem',
+    large: '105rem',
+  },
   colors: {
     main: '#32329f',
     success: '#00aa13',
