Redocly/redoc
1
1
Fork 0
mirror of https://github.com/Redocly/redoc.git synced 2024-11-22 08:36:33 +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>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>ReDoc</title>
<style>
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`
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;
`};
`;

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

@ -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>
);
}

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

@ -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>
);
}

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

@ -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;

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

@ -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%;
`};
`;

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

@ -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>
);
}
}

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 { GroupModel, OperationModel, SpecStore } from './models';

30
src/styled-components.ts
View File

@ -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;

5
src/theme.ts
View File

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