GitHub/storybook
1
0
Fork 0
mirror of https://github.com/storybookjs/storybook.git synced 2025-04-07 21:41:46 +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

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

@ -1,13 +1,12 @@
import React from 'react'; import React from 'react';
import { Link } from 'react-router'; import { Link } from 'react-router';
import { UsedByBg } from '../UsedBy/';
import './style.css'; import './style.css';
const MainLinks = () => const MainLinks = () =>
<div id="main-links" className="row"> <div id="main-links">
<div className="col-md-12">
<div className="row">
<div className="main-links-container"> <div className="main-links-container">
<div className="col-xs-6 try-now"> <div className="try-now">
<h2>Try Now</h2> <h2>Try Now</h2>
<pre> <pre>
<code> <code>
@ -18,21 +17,81 @@ const MainLinks = () =>
</pre> </pre>
</div> </div>
<div className="col-xs-6 read-docs"> <div
<h2>Read Docs</h2> className="row"
<div className=""> id="nav"
<input type="search" className="form-control" id="search" placeholder="Search" /> style={{
<Link to="/basics/introduction/"> borderRight: '0 none',
<svg version="1.1" x="0px" y="0px" viewBox="0 0 60 60"> position: 'relative',
<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" /> <UsedByBg
<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" /> color="#a7d0ff"
</g> style={{
</svg> transform: 'rotateY(180deg)',
</Link> }}
/>
<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> </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>
</div> </div>

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

@ -11,27 +11,25 @@
} }
#main-links h2 { #main-links h2 {
text-transform: uppercase;
text-align: center; text-align: center;
font-size: 25px;
font-weight: 600;
} }
#main-links pre { #main-links pre {
background-color: #444; background-color: #444;
color: #DDD; color: #DDD;
padding: 15px 30px; padding: 15px 20px;
line-height: 22px; line-height: 22px;
border: 0; border: 0;
border-radius: 0; border-radius: 0;
} }
.docs-img { .algolia-autocomplete {
background: url('./images/docs.png'); display: block !important;
background-repeat: no-repeat; }
width: 40px;
height: 54px; .try-now {
margin-top: 25px; max-width: 450px;
margin: 40px auto;
} }
@media only screen and (max-width: 700px) { @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 { Link } from 'react-router';
import './style.css'; import './style.css';
const UsedByBg = ({ color }) => export const UsedByBg = ({ color, style }) =>
<div className="used-by-bg"> <div className="used-by-bg" style={style}>
<svg <svg
width="100%" width="100%"
height="100%" height="100%"
@ -28,9 +28,12 @@ const UsedByBg = ({ color }) =>
</div>; </div>;
UsedByBg.propTypes = { UsedByBg.propTypes = {
color: PropTypes.string, color: PropTypes.string,
// eslint-disable-next-line
style: PropTypes.object,
}; };
UsedByBg.defaultProps = { UsedByBg.defaultProps = {
color: 'white', color: 'white',
style: {},
}; };
const User = ({ logo, demo, site, title }) => const User = ({ logo, demo, site, title }) =>

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

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