Redocly/redoc
1
1
Fork 0
mirror of https://github.com/Redocly/redoc.git synced 2024-11-26 10:33:44 +03:00
Code Issues Packages Projects Releases Wiki Activity

fix: basic responsiveness

Browse Source
This commit is contained in:
Roman Hotsiy 2018-01-30 15:35:18 +02:00
parent a66de6cb58
commit a29c3ccc2d
No known key found for this signature in database
GPG Key ID: 5CB7B3ACABA57CB0
10 changed files with 78 additions and 23 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

1
demo/playground/index.html
View File

@ -3,6 +3,7 @@
<head> <head>
<meta charset="UTF-8" /> <meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>ReDoc</title> <title>ReDoc</title>
<style> <style>
body { body {

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

@ -1,8 +1,12 @@
import styled from '../styled-components'; import styled, { media } from '../styled-components';
export const MiddlePanel = styled.div` export const MiddlePanel = styled.div`
width: ${props => 100 - props.theme.rightPanel.width}%; width: ${props => 100 - props.theme.rightPanel.width}%;
padding: ${props => props.theme.spacingUnit * 2}px; padding: ${props => props.theme.spacingUnit * 2}px;
${media.lessThan('medium')`
width: 100%;
`};
`; `;
export const RightPanel = styled.div` export const RightPanel = styled.div`
@ -10,13 +14,27 @@ export const RightPanel = styled.div`
color: #fafbfc; color: #fafbfc;
bckground-color: ${props => props.theme.rightPanel.backgroundColor}; bckground-color: ${props => props.theme.rightPanel.backgroundColor};
padding: ${props => props.theme.spacingUnit * 2}px; padding: ${props => props.theme.spacingUnit * 2}px;
${media.lessThan('medium')`
width: 100%;
`};
`; `;
export const DarkRightPanel = styled(RightPanel)` export const DarkRightPanel = styled(RightPanel)`
background-color: ${props => props.theme.rightPanel.backgroundColor}; background-color: ${props => props.theme.rightPanel.backgroundColor};
`; `;
export const EmptyDarkRightPanel = styled(DarkRightPanel)`
${media.lessThan('medium')`
padding: 0
`};
`;
export const Row = styled.div` export const Row = styled.div`
display: flex; display: flex;
width: 100%; width: 100%;
${media.lessThan('medium')`
flex-direction: column;
`};
`; `;

4
src/components/ApiInfo/ApiInfo.tsx
View File

@ -3,7 +3,7 @@ import * as React from 'react';
import { AppStore } from '../../services/AppStore'; 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 { Markdown } from '../Markdown/Markdown';
import { SecurityDefs } from '../SecuritySchemes/SecuritySchemes'; import { SecurityDefs } from '../SecuritySchemes/SecuritySchemes';
@ -110,7 +110,7 @@ export class ApiInfo extends React.Component<ApiInfoProps> {
/> />
</div> </div>
</MiddlePanel> </MiddlePanel>
<DarkRightPanel /> <EmptyDarkRightPanel />
</Row> </Row>
); );
} }

4
src/components/ContentItems/ContentItems.tsx
View File

@ -4,7 +4,7 @@ import * as React from 'react';
import { SECTION_ATTR } from '../../services/MenuStore'; import { SECTION_ATTR } from '../../services/MenuStore';
import { Markdown } from '../Markdown/Markdown'; 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 { ContentItemModel } from '../../services/MenuBuilder';
import { OperationModel } from '../../services/models'; import { OperationModel } from '../../services/models';
import { Operation } from '../Operation/Operation'; import { Operation } from '../Operation/Operation';
@ -70,7 +70,7 @@ export class TagItem extends React.Component<ContentItemProps> {
</H1> </H1>
{description !== undefined && <Markdown source={description} />} {description !== undefined && <Markdown source={description} />}
</MiddlePanel> </MiddlePanel>
<DarkRightPanel key="right" /> <EmptyDarkRightPanel key="right" />
</Row> </Row>
); );
} }

2
src/components/Operation/Operation.tsx
View File

@ -21,7 +21,7 @@ import { OperationModel as OperationType } from '../../services/models';
const OperationRow = styled(Row)` const OperationRow = styled(Row)`
transform: translateZ(0); transform: translateZ(0);
overflow: hidden; overflow: hidden;
positioin: relative; position: relative;
&:after { &:after {
position: absolute; position: absolute;

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

@ -1,5 +1,5 @@
import { hoverColor } from '../../common-elements/mixins'; import { hoverColor } from '../../common-elements/mixins';
import styled from '../../styled-components'; import styled, { media } from '../../styled-components';
export { ClassAttributes } from 'react'; export { ClassAttributes } from 'react';
export const RedocWrap = styled.div` export const RedocWrap = styled.div`
@ -38,4 +38,7 @@ export const ApiContent = styled.div`
z-index: 10; z-index: 10;
position: relative; position: relative;
width: calc(100% - ${props => props.theme.menu.width}); width: calc(100% - ${props => props.theme.menu.width});
${media.lessThan('small')`
width: 100%;
`};
`; `;

28
src/components/SecurityRequirement/SecuirityRequirement.tsx
View File

@ -36,14 +36,10 @@ export class SecurityRequirement extends React.PureComponent<SecurityRequirement
} }
} }
const AuthHeaderColumn = styled.div` const AuthHeaderColumn = styled.td``;
display: inline-block;
width: calc(100% - ${props => props.theme.schemaView.defaultDetailsWidth});
`;
const SecuritiesColumn = styled.div` const SecuritiesColumn = styled.td`
width: ${props => props.theme.schemaView.defaultDetailsWidth}; width: ${props => props.theme.schemaView.defaultDetailsWidth};
display: inline-block;
`; `;
const AuthHeader = styled(UnderlinedHeader)` const AuthHeader = styled(UnderlinedHeader)`
@ -61,14 +57,18 @@ export class SecurityRequirements extends React.PureComponent<SecurityRequiremen
return null; return null;
} }
return ( return (
<div> <table>
<AuthHeaderColumn> <tr>
<AuthHeader>Authorizations: </AuthHeader> <AuthHeaderColumn>
</AuthHeaderColumn> <AuthHeader>Authorizations: </AuthHeader>
<SecuritiesColumn> </AuthHeaderColumn>
{securities.map((security, idx) => <SecurityRequirement key={idx} security={security} />)} <SecuritiesColumn>
</SecuritiesColumn> {securities.map((security, idx) => (
</div> <SecurityRequirement key={idx} security={security} />
))}
</SecuritiesColumn>
</tr>
</table>
); );
} }
} }

2
src/services/MenuStore.ts
View File

@ -1,4 +1,4 @@
import { action, computed } from 'mobx'; import { action, computed, observable } from 'mobx';
import { querySelector } from '../utils/dom'; import { querySelector } from '../utils/dom';
import { GroupModel, OperationModel, SpecStore } from './models'; import { GroupModel, OperationModel, SpecStore } from './models';

30
src/styled-components.ts
View File

@ -1,6 +1,6 @@
import * as styledComponents from 'styled-components'; import * as styledComponents from 'styled-components';
import { ThemeInterface } from './theme'; import theme, { ThemeInterface } from './theme';
export type StyledFunction<T> = styledComponents.ThemedStyledFunction<T, ThemeInterface>; export type StyledFunction<T> = styledComponents.ThemedStyledFunction<T, ThemeInterface>;
@ -21,5 +21,33 @@ const {
any any
>) as styledComponents.ThemedStyledComponentsModule<ThemeInterface>; >) 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 { css, injectGlobal, keyframes, ThemeProvider, withTheme, withProps };
export default styled; export default styled;

5
src/theme.ts
View File

@ -1,5 +1,10 @@
const theme = { const theme = {
spacingUnit: 20, spacingUnit: 20,
breakpoints: {
small: '50rem',
medium: '85rem',
large: '105rem',
},
colors: { colors: {
main: '#32329f', main: '#32329f',
success: '#00aa13', success: '#00aa13',