mirror of
https://github.com/Redocly/redoc.git
synced 2024-11-10 19:06:34 +03:00
chore: fix deme on mobile
This commit is contained in:
parent
2b52bf2641
commit
d92ed428f9
|
@ -89,6 +89,12 @@ const Button = styled.button`
|
|||
line-height: 1;
|
||||
outline: none;
|
||||
width: 80px;
|
||||
|
||||
white-space: nowrap;
|
||||
|
||||
@media screen and (max-width: 450px) {
|
||||
display: none;
|
||||
}
|
||||
`;
|
||||
|
||||
export interface ComboBoxProps {
|
||||
|
|
|
@ -24,7 +24,7 @@ const DEFAULT_SPEC = 'openapi.yaml';
|
|||
class DemoApp extends React.Component<
|
||||
{},
|
||||
{ specUrl: string; dropdownOpen: boolean; cors: boolean }
|
||||
> {
|
||||
> {
|
||||
constructor(props) {
|
||||
super(props);
|
||||
|
||||
|
@ -122,15 +122,21 @@ const ControlsContainer = styled.div`
|
|||
|
||||
const CorsCheckbox = styled.div`
|
||||
margin-left: 10px;
|
||||
white-space: nowrap;
|
||||
|
||||
label {
|
||||
font-size: 13px;
|
||||
}
|
||||
|
||||
@media screen and (max-width: 550px) {
|
||||
display: none;
|
||||
}
|
||||
`;
|
||||
|
||||
const Heading = styled.nav`
|
||||
position: sticky;
|
||||
top: 0;
|
||||
width: 100%;
|
||||
height: 50px;
|
||||
box-sizing: border-box;
|
||||
background: white;
|
||||
|
@ -148,6 +154,10 @@ const Logo = styled.img`
|
|||
width: 124px;
|
||||
display: inline-block;
|
||||
margin-right: 15px;
|
||||
|
||||
@media screen and (max-width: 950px) {
|
||||
display: none;
|
||||
}
|
||||
`;
|
||||
|
||||
render(<DemoApp />, document.getElementById('container'));
|
||||
|
|
|
@ -42,7 +42,7 @@
|
|||
"changelog": "conventional-changelog -p angular -i CHANGELOG.md -s -r 1",
|
||||
"lint": "tslint --project tsconfig.json",
|
||||
"benchmark": "node ./benchmark/benchmark.js",
|
||||
"start:demo": "webpack-dev-server --hot --config demo/webpack.config.ts",
|
||||
"start:demo": "webpack-dev-server --hot --config demo/webpack.config.ts --mode=development",
|
||||
"compile:cli": "tsc cli/index.ts --target es6 --module commonjs --types yargs",
|
||||
"build:demo": "webpack --mode=production --config demo/webpack.config.ts",
|
||||
"deploy:demo": "npm run build:demo && deploy-to-gh-pages --update demo/dist"
|
||||
|
|
|
@ -3,7 +3,7 @@ import styled from '../../styled-components';
|
|||
|
||||
export const LogoImgEl = styled.img`
|
||||
max-height: ${props => props.theme.logo.maxHeight};
|
||||
width: ${props => props.theme.logo.width};
|
||||
max-width: ${props => props.theme.logo.maxWidth};
|
||||
display: block;
|
||||
`;
|
||||
|
||||
|
|
|
@ -58,8 +58,8 @@ const defaultTheme: ThemeInterface = {
|
|||
backgroundColor: '#fafafa',
|
||||
},
|
||||
logo: {
|
||||
maxHeight: 'none',
|
||||
width: '100%',
|
||||
maxHeight: ({ menu }) => menu.width,
|
||||
maxWidth: ({ menu }) => menu.width,
|
||||
},
|
||||
rightPanel: {
|
||||
backgroundColor: '#263238',
|
||||
|
@ -162,7 +162,7 @@ export interface ResolvedThemeInterface {
|
|||
};
|
||||
logo: {
|
||||
maxHeight: string;
|
||||
width: string;
|
||||
maxWidth: string;
|
||||
};
|
||||
rightPanel: {
|
||||
backgroundColor: string;
|
||||
|
|
Loading…
Reference in New Issue
Block a user