Improve iframe demo look

This commit is contained in:
afc163 2017-03-18 15:15:00 +08:00
parent c361165352
commit 3740fb7f3c
5 changed files with 64 additions and 118 deletions

View File

@ -1,6 +1,6 @@
--- ---
order: 2 order: 2
iframe: true iframe: 200
title: title:
zh-CN: 路由 zh-CN: 路由
en-US: React Router Integration en-US: React Router Integration
@ -30,7 +30,7 @@ const Apps = () => (
); );
const Home = ({ routes, params, children }) => ( const Home = ({ routes, params, children }) => (
<div> <div className="demo">
<div className="demo-nav"> <div className="demo-nav">
<Link to="/">Home</Link> <Link to="/">Home</Link>
<Link to="/apps">Application List</Link> <Link to="/apps">Application List</Link>
@ -55,20 +55,20 @@ ReactDOM.render(
```` ````
````css ````css
#components-breadcrumb-demo-router iframe { .demo {
height: 180px; margin: 16px;
} }
.demo-nav { .demo-nav {
height: 30px; height: 30px;
line-height: 30px; line-height: 30px;
margin-bottom: 15px; margin-bottom: 16px;
background: #f8f8f8; background: #f8f8f8;
} }
.demo-nav a { .demo-nav a {
line-height: 30px; line-height: 30px;
padding: 0 10px; padding: 0 8px;
} }
.app-list { .app-list {
margin-top: 15px; margin-top: 16px;
} }
```` ````

View File

@ -1,98 +1,53 @@
.window-frame { /* Browser mockup code
* Contribute: https://gist.github.com/jarthod/8719db9fef8deb937f4f
* Live example: https://updown.io
*/
.browser-mockup {
border-top: 2em solid rgba(230, 230, 230, 0.7);
box-shadow: 0 0.1em 0.5em 0 rgba(0, 0, 0, 0.28);
position: relative; position: relative;
margin: 0; border-radius: 3px 3px 0 0;
padding: 0;
border-radius: 5px;
border: 1px solid #ccc;
background-color: #fff;
line-height: 1;
} }
.window-frame .top-bar { .browser-mockup:before {
background: #dcd9dc; display: block;
background-image: -webkit-linear-gradient(#f6f6f6, #dadada);
background-image: linear-gradient(#f6f6f6, #dadada);
min-height: 2rem;
border-radius: 0.35rem 0.35rem 0 0;
padding: 0.41528rem 0.83056rem;
border-bottom: 1px solid transparent;
border-bottom-color: #ccc;
color: rgba(0, 0, 0, 0.5);
}
.window-frame .top-bar .address-bar {
border-radius: 0.245rem;
border: 1px solid rgba(0, 0, 0, 0.3);
color: black;
box-shadow: 0 0.5px 0 0 rgba(255, 255, 255, 0.75), inset 0 1px 1px rgba(0, 0, 0, 0.15);
display: inline-block;
padding: 0 0.5em 0 1em;
font-size: 0.75rem;
line-height: 2;
background: white;
width: 60%;
margin-left: 15%;
}
.window-frame .top-bar .controls {
display: inline-block;
vertical-align: top;
position: relative;
padding-top: 0.2em;
}
.window-frame .top-bar .controls > * {
position: relative;
vertical-align: middle;
line-height: 1;
display: inline-block;
margin-right: 0.41528rem;
-webkit-transition: 0.1s linear;
transition: 0.1s linear;
}
.window-frame .top-bar .control {
width: 0.83056rem;
height: 0.83056rem;
background: #dcd9dc;
border-radius: 0.83056rem;
border: 1px solid rgba(0, 0, 0, 0.08);
cursor: pointer;
}
.window-frame .top-bar .control:hover {
background: #b0adb0;
}
.window-frame .top-bar .control:before,
.window-frame .top-bar .control:after {
line-height: 0.5;
color: black;
text-align: center;
position: absolute; position: absolute;
top: 0; content: '';
left: 0; top: -1.25em;
right: 0; left: 1em;
bottom: 0; width: 0.5em;
vertical-align: middle; height: 0.5em;
} border-radius: 50%;
.window-frame .top-bar .control.close { background-color: #f44;
background: #fc625c; box-shadow: 0 0 0 2px #f44, 1.5em 0 0 2px #9b3, 3em 0 0 2px #fb5;
}
.window-frame .top-bar .control.minify {
background: #fdc041;
}
.window-frame .top-bar .control.expand {
background: #35cd4b;
}
.window-frame .window-content {
padding: 0;
line-height: 1.5;
overflow: auto;
height: 440px;
position: relative;
border-radius: 0 0 5px 5px;
background: #ececec;
} }
.window-frame .status-bar { .browser-mockup.with-tab:after {
height: 2rem; display: block;
border-radius: 0 0 0.35rem 0.35rem; position: absolute;
display: none; content: '';
top: -2em;
left: 5.5em;
width: 20%;
height: 0;
border-bottom: 2em solid white;
border-left: 0.8em solid transparent;
border-right: 0.8em solid transparent;
}
.browser-mockup.with-url:after {
display: block;
position: absolute;
content: '';
top: -1.6em;
left: 5.5em;
width: ~"calc(100% - 6em)";
height: 1.2em;
border-radius: 2px;
background-color: white;
}
.browser-mockup > * {
display: block;
} }

View File

@ -1,19 +0,0 @@
import React from 'react';
export default function BrowserDemo(props) {
return (
<article className="window-frame focus">
<header className="top-bar">
<div className="controls">
<div className="control close" />
<div className="control minify" />
<div className="control expand" />
</div>
<input className="address-bar" defaultValue="http://www.example.com" />
</header>
<section className="window-content">
{props.children}
</section>
</article>
);
}

View File

@ -0,0 +1,7 @@
import React from 'react';
export default ({ children }) => (
<div className="browser-mockup with-url">
{children}
</div>
);

View File

@ -5,6 +5,7 @@ import CopyToClipboard from 'react-copy-to-clipboard';
import classNames from 'classnames'; import classNames from 'classnames';
import { Icon, Tooltip } from 'antd'; import { Icon, Tooltip } from 'antd';
import EditButton from './EditButton'; import EditButton from './EditButton';
import BrowserFrame from '../BrowserFrame';
export default class Demo extends React.Component { export default class Demo extends React.Component {
static contextTypes = { static contextTypes = {
@ -82,7 +83,9 @@ export default class Demo extends React.Component {
expand, expand,
} = props; } = props;
if (!this.liveDemo) { if (!this.liveDemo) {
this.liveDemo = meta.iframe ? <iframe src={src} height={meta.iframe} /> : preview(React, ReactDOM); this.liveDemo = meta.iframe
? <BrowserFrame><iframe src={src} height={meta.iframe} /></BrowserFrame>
: preview(React, ReactDOM);
} }
const codeExpand = state.codeExpand || expand; const codeExpand = state.codeExpand || expand;
const codeBoxClass = classNames({ const codeBoxClass = classNames({