m/blog
1
0
Fork 0
mirror of https://github.com/kremalicious/blog.git synced 2024-12-23 01:30:01 +01:00
Code

prepare search UI

Browse Source
This commit is contained in:
Matthias Kretschmann 2018-08-25 11:15:40 +02:00
parent e90009ded4
commit 57b21190cb
Signed by: m
GPG Key ID: 606EEEF3C479A91F
7 changed files with 175 additions and 58 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

6
src/components/atoms/Input.jsx Normal file
View File

@ -0,0 +1,6 @@
import React from 'react'
import styles from './Input.module.scss'
const Input = props => <input className={styles.input} {...props} />
export default Input

28
src/components/atoms/Input.module.scss Normal file
View File

@ -0,0 +1,28 @@
@import 'variables';
.input {
display: block;
width: 100%;
padding: $padding-base-vertical $padding-base-horizontal;
font-size: $input-font-size;
font-weight: $input-font-weight;
line-height: $line-height;
color: $input-color;
background-color: $input-bg;
background-image: none; // Reset unusual Firefox-on-Android default style
border: 0;
border-radius: $input-border-radius;
box-shadow: none;
transition: all ease-in-out .15s;
-webkit-appearance: none; // screw you, iOS default inset box-shadow
&:hover {
background: lighten($input-bg, 30%);
}
&:focus {
background-color: $input-bg-focus;
border-color: $input-border-focus;
outline: 0;
}
}

65
src/components/molecules/Search.jsx Normal file
View File

@ -0,0 +1,65 @@
import React, { PureComponent, Fragment } from 'react'
// import { Link } from 'gatsby'
import Helmet from 'react-helmet'
import Input from '../atoms/Input'
import SearchIcon from '../svg/MagnifyingGlass'
import styles from './Search.module.scss'
class Search extends PureComponent {
constructor(props) {
super(props)
this.state = {
searchOpen: false,
query: '',
results: []
}
}
toggleSearch = () => {
this.setState(prevState => ({
searchOpen: !prevState.searchOpen
}))
}
isSearchOpen = () => this.state.searchOpen === true
render() {
return (
<Fragment>
<Helmet>
<body className={this.isSearchOpen() ? 'has-search-open' : null} />
</Helmet>
<button
type="button"
className={styles.searchButton}
onClick={this.toggleSearch}
>
<SearchIcon />
</button>
{this.state.searchOpen && (
<section className={styles.search}>
<Input
autoFocus
type="search"
placeholder="Search everything"
onBlur={this.toggleSearch}
value={this.state.query}
// onChange={this.search}
/>
<button
className={styles.searchInputClose}
onClick={this.toggleSearch}
>
&times;
</button>
</section>
)}
</Fragment>
)
}
}
export default Search

57
src/components/molecules/Search.module.scss Normal file
View File

@ -0,0 +1,57 @@
@import 'variables';
.searchButton {
padding: .65rem .85rem;
text-align: center;
line-height: 1;
vertical-align: middle;
display: inline-block;
margin-right: $spacer / 4;
&:focus {
outline: 0;
}
svg {
fill: $text-color-light;
width: 21px;
height: 21px;
}
&:hover,
&:focus {
svg {
fill: $brand-cyan;
}
}
&:active {
svg {
fill: darken($brand-cyan, 30%);
}
}
}
.search {
position: absolute;
left: $spacer / 2;
right: $spacer / 2;
top: 0;
z-index: 10;
// transition: transform .3s ease-out;
// transform: translate3d(0, -150%, 0);
// :global(.has-search-open) & {
// transform: translate3d(0, 0, 0);
// }
input {
width: 100%;
}
}
.searchInputClose {
position: absolute;
right: $spacer / 4;
top: $spacer / 4;
}

28
src/components/organisms/Header.jsx
View File

@ -1,8 +1,8 @@
import React, { PureComponent } from 'react' import React, { PureComponent } from 'react'
import { Link } from 'gatsby' import { Link } from 'gatsby'
import Container from '../atoms/Container' import Container from '../atoms/Container'
import Search from '../molecules/Search'
import Menu from '../molecules/Menu' import Menu from '../molecules/Menu'
import Search from '../svg/MagnifyingGlass'
import styles from './Header.module.scss' import styles from './Header.module.scss'
@ -19,33 +19,9 @@ class Header extends PureComponent {
</h1> </h1>
<nav role="navigation" className={styles.nav}> <nav role="navigation" className={styles.nav}>
<button type="button" className={styles.search}> <Search />
<Search />
</button>
<Menu /> <Menu />
</nav> </nav>
{/* <section class="site-search">
<div class="search-area">
<input type="search" id="search-input" class="form-control input-search search-field" placeholder="Search everything">
<button class="close search-close">&times;</button>
</div>
</section> */}
{/* <ul class="nav-popover grid grid--half grid-medium--third">
<li class="grid__col">
<a class="nav-link" href="/{{ category | first }}/">
{{ category | first }}
</a>
</li>
</ul> */}
{/* <div id="search-popover" class="search-popover hide">
<div class="container">
<nav id="search-results" class="search-results"></nav>
</div>
</div> */}
</div> </div>
</Container> </Container>
</header> </header>

32
src/components/organisms/Header.module.scss
View File

@ -87,35 +87,3 @@
.nav { .nav {
display: inline-block; display: inline-block;
} }
.search {
padding: .65rem .85rem;
text-align: center;
line-height: 1;
vertical-align: middle;
display: inline-block;
margin-right: $spacer / 4;
&:focus {
outline: 0;
}
svg {
fill: $text-color-light;
width: 21px;
height: 21px;
}
&:hover,
&:focus {
svg {
fill: $brand-cyan;
}
}
&:active {
svg {
fill: darken($brand-cyan, 30%);
}
}
}

17
src/styles/_variables.scss
View File

@ -99,3 +99,20 @@ $screen-xs: 30em;
$screen-sm: 40.625em; $screen-sm: 40.625em;
$screen-md: 60em; $screen-md: 60em;
$screen-lg: 87.5em; $screen-lg: 87.5em;
// Forms
/////////////////////////////////////
$input-bg: rgba(#fff, .85);
$input-bg-focus: #fff;
$input-bg-disabled: $brand-grey-light;
$input-font-size: $font-size-base;
$input-font-weight: $font-weight-base;
$input-color: $font-color-base;
$input-color-placeholder: rgba(46, 79, 92, .3);
$input-border: $brand-grey-light;
$input-border-radius: $border-radius;
$input-border-focus: $brand-cyan;