GitHub/storybook
1
0
Fork 0
mirror of https://github.com/storybookjs/storybook.git synced 2025-04-04 12:31:06 +08:00
Code Issues Packages Projects Releases Wiki Activity

ADD a search-field to the homepage

Browse Source
This commit is contained in:
Norbert de Langen 2017-06-11 22:06:47 +02:00
parent 89ed61fcec
commit 1488ae9a51
4 changed files with 104 additions and 44 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

115
docs/components/Homepage/MainLinks/index.js
View File

@ -1,39 +1,98 @@
import React from 'react';
import { Link } from 'react-router';
import { UsedByBg } from '../UsedBy/';
import './style.css';
const MainLinks = () =>
<div id="main-links" className="row">
<div className="col-md-12">
<div className="row">
<div className="main-links-container">
<div className="col-xs-6 try-now">
<h2>Try Now</h2>
<pre>
<code>
npm i -g @storybook/cli<br />
cd my-react-app<br />
getstorybook<br />
</code>
</pre>
</div>
<div id="main-links">
<div className="main-links-container">
<div className="try-now">
<h2>Try Now</h2>
<pre>
<code>
npm i -g @storybook/cli<br />
cd my-react-app<br />
getstorybook<br />
</code>
</pre>
</div>
<div className="col-xs-6 read-docs">
<h2>Read Docs</h2>
<div className="">
<input type="search" className="form-control" id="search" placeholder="Search" />
<Link to="/basics/introduction/">
<svg version="1.1" x="0px" y="0px" viewBox="0 0 60 60">
<g>
<path d="M53.707,58.293L51,55.586v-35l-0.497-0.497L46,15.586V0H6v52h5v5h38.586l2.707,2.707C52.488,59.902,52.744,60,53,60s0.512-0.098,0.707-0.293C54.098,59.316,54.098,58.684,53.707,58.293z M47.586,20H36V8.414l10,10L47.586,20z M8,50V2h36v11.586l-8.089-8.089L35.414,5H11v45H8z M13,55v-3V7h21v15h15v31.586l-7.514-7.514c1.74-2.06,2.795-4.717,2.795-7.619c0-6.522-5.306-11.828-11.828-11.828s-11.828,5.306-11.828,11.828s5.306,11.828,11.828,11.828c2.902,0,5.559-1.055,7.619-2.795L47.586,55H13z M32.453,48.281c-5.419,0-9.828-4.409-9.828-9.828s4.409-9.828,9.828-9.828s9.828,4.409,9.828,9.828S37.872,48.281,32.453,48.281z" />
<path d="M26.625,36h6c0.553,0,1-0.447,1-1s-0.447-1-1-1h-6c-0.553,0-1,0.447-1,1S26.072,36,26.625,36z" />
<path d="M38.625,40h-12c-0.553,0-1,0.447-1,1s0.447,1,1,1h12c0.553,0,1-0.447,1-1S39.178,40,38.625,40z" />
</g>
</svg>
</Link>
</div>
<div
className="row"
id="nav"
style={{
borderRight: '0 none',
position: 'relative',
}}
>
<UsedByBg
color="#a7d0ff"
style={{
transform: 'rotateY(180deg)',
}}
/>
<div className="col-xs-12 read-docs">
<h2 style={{ color: '#6DABF5' }}>Documentation</h2>
<div
className="form-group has-feedback"
style={{ maxWidth: '450px', margin: '20px auto' }}
>
<label className="sr-only control-label" htmlFor="search">
Search storybook documentation
</label>
<input
className="form-control"
type="search"
id="search"
placeholder="type to search"
/>
<span className="form-control-feedback" aria-hidden="true">🔍</span>
</div>
</div>
<div className="col-sm-4 read-docs">
<Link to="/basics/introduction/"><h3>Basics</h3></Link>
<ul>
<li><Link to="/basics/quick-start-guide/">Quick setup</Link></li>
<li><Link to="/basics/slow-start-guide/">Adding to existing project</Link></li>
<li><Link to="/basics/slow-start-guide/">Writing stories</Link></li>
</ul>
</div>
<div className="col-sm-4 read-docs">
<Link to="/configurations/default-config/"><h3>Configuration</h3></Link>
<ul>
<li><Link to="/configurations/custom-babel-config/">Babel configurations</Link></li>
<li>
<Link to="/configurations/custom-webpack-config/">Webpack configurations</Link>
</li>
<li>
<Link to="/configurations/add-custom-head-tags/">Custom scripts & styling</Link>
</li>
<li>
<Link to="/configurations/serving-static-files/">Serving static files</Link>
</li>
</ul>
</div>
<div className="col-sm-4 read-docs">
<Link to="/configurations/default-config/"><h3>Addons</h3></Link>
<ul>
<li><Link to="/addons/introduction/">Intro to Addons</Link></li>
<li>
<Link to="/addons/using-addons/">Using Addons</Link>
</li>
<li>
<Link to="/addons/addon-gallery/">Addon Gallery</Link>
</li>
<li>
<Link to="/addons/writing-addons/">Writing Addons</Link>
</li>
<li>
<Link to="/addons/api/">Api</Link>
</li>
</ul>
</div>
</div>
</div>
</div>;

18
docs/components/Homepage/MainLinks/style.css
View File

@ -11,27 +11,25 @@
}
#main-links h2 {
text-transform: uppercase;
text-align: center;
font-size: 25px;
font-weight: 600;
}
#main-links pre {
background-color: #444;
color: #DDD;
padding: 15px 30px;
padding: 15px 20px;
line-height: 22px;
border: 0;
border-radius: 0;
}
.docs-img {
background: url('./images/docs.png');
background-repeat: no-repeat;
width: 40px;
height: 54px;
margin-top: 25px;
.algolia-autocomplete {
display: block !important;
}
.try-now {
max-width: 450px;
margin: 40px auto;
}
@media only screen and (max-width: 700px) {

7
docs/components/Homepage/UsedBy/index.jsx
View File

@ -3,8 +3,8 @@ import React from 'react';
import { Link } from 'react-router';
import './style.css';
const UsedByBg = ({ color }) =>
<div className="used-by-bg">
export const UsedByBg = ({ color, style }) =>
<div className="used-by-bg" style={style}>
<svg
width="100%"
height="100%"
@ -28,9 +28,12 @@ const UsedByBg = ({ color }) =>
</div>;
UsedByBg.propTypes = {
color: PropTypes.string,
// eslint-disable-next-line
style: PropTypes.object,
};
UsedByBg.defaultProps = {
color: 'white',
style: {},
};
const User = ({ logo, demo, site, title }) =>

8
docs/components/Homepage/UsedBy/style.css
View File

@ -10,10 +10,10 @@
.used-by-bg {
position: absolute;
top: 0px;
left: 0px;
right: 0px;
bottom: 0px;
top: -30px;
left: -30px;
right: -30px;
bottom: -30px;
}
.used-by-bg svg {