chore: fix deme on mobile

This commit is contained in:
Roman Hotsiy 2018-03-22 18:22:11 +02:00
parent 2b52bf2641
commit d92ed428f9
No known key found for this signature in database
GPG Key ID: 5CB7B3ACABA57CB0
5 changed files with 22 additions and 6 deletions

View File

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

View File

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

View File

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

View File

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

View File

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