mirror of
https://github.com/kremalicious/blog.git
synced 2024-12-23 01:30:01 +01:00
prepare search UI
This commit is contained in:
parent
e90009ded4
commit
57b21190cb
6
src/components/atoms/Input.jsx
Normal file
6
src/components/atoms/Input.jsx
Normal 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
28
src/components/atoms/Input.module.scss
Normal 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
65
src/components/molecules/Search.jsx
Normal 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}
|
||||
>
|
||||
×
|
||||
</button>
|
||||
</section>
|
||||
)}
|
||||
</Fragment>
|
||||
)
|
||||
}
|
||||
}
|
||||
|
||||
export default Search
|
57
src/components/molecules/Search.module.scss
Normal file
57
src/components/molecules/Search.module.scss
Normal 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;
|
||||
}
|
@ -1,8 +1,8 @@
|
||||
import React, { PureComponent } from 'react'
|
||||
import { Link } from 'gatsby'
|
||||
import Container from '../atoms/Container'
|
||||
import Search from '../molecules/Search'
|
||||
import Menu from '../molecules/Menu'
|
||||
import Search from '../svg/MagnifyingGlass'
|
||||
|
||||
import styles from './Header.module.scss'
|
||||
|
||||
@ -19,33 +19,9 @@ class Header extends PureComponent {
|
||||
</h1>
|
||||
|
||||
<nav role="navigation" className={styles.nav}>
|
||||
<button type="button" className={styles.search}>
|
||||
<Search />
|
||||
</button>
|
||||
|
||||
<Menu />
|
||||
</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">×</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>
|
||||
</Container>
|
||||
</header>
|
||||
|
@ -87,35 +87,3 @@
|
||||
.nav {
|
||||
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%);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
@ -99,3 +99,20 @@ $screen-xs: 30em;
|
||||
$screen-sm: 40.625em;
|
||||
$screen-md: 60em;
|
||||
$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;
|
||||
|
Loading…
Reference in New Issue
Block a user