Re-style Search; Upgrade Inferno
This commit is contained in:
parent
067489225a
commit
8b6dbc0e8e
|
|
@ -38,9 +38,9 @@
|
|||
"babel-polyfill": "^6.23.0",
|
||||
"bulma": "^0.4.0",
|
||||
"dexie": "^1.5.1",
|
||||
"inferno": "^1.6.0",
|
||||
"inferno-component": "^1.6.0",
|
||||
"inferno-devtools": "^1.6.0",
|
||||
"inferno": "^3.0.5",
|
||||
"inferno-component": "^3.0.5",
|
||||
"inferno-devtools": "^3.0.5",
|
||||
"marked": "^0.3.6",
|
||||
"papaparse": "^4.2.0"
|
||||
}
|
||||
|
|
|
|||
|
|
@ -2,14 +2,11 @@ import Inferno from 'inferno';
|
|||
import Component from 'inferno-component';
|
||||
import marked from 'marked';
|
||||
|
||||
import {SearchBox} from '../management/SearchBox';
|
||||
|
||||
const DISPLAY = {
|
||||
NONE: false
|
||||
, DESCRIPTION: 1
|
||||
, DETAILS: 2
|
||||
, STATS: 3
|
||||
, SEARCH: 4
|
||||
}
|
||||
|
||||
export class DictionaryDetails extends Component {
|
||||
|
|
@ -124,11 +121,6 @@ export class DictionaryDetails extends Component {
|
|||
);
|
||||
break;
|
||||
}
|
||||
|
||||
case DISPLAY.SEARCH : {
|
||||
displayJSX = <SearchBox />;
|
||||
break;
|
||||
}
|
||||
}
|
||||
|
||||
return (
|
||||
|
|
@ -154,46 +146,35 @@ export class DictionaryDetails extends Component {
|
|||
|
||||
<div className='level-right'>
|
||||
<div className='level-item'>
|
||||
<div className='field is-grouped'>
|
||||
<div className='control'>
|
||||
<a className='button' onClick={this.toggleDisplay.bind(this, DISPLAY.SEARCH)}>
|
||||
Search
|
||||
</a>
|
||||
</div>
|
||||
<div className='control'>
|
||||
<div className='field'>
|
||||
<p className='control'>
|
||||
<a className='button'>
|
||||
Edit Dictionary
|
||||
</a>
|
||||
</div>
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className='level'>
|
||||
<div className='level-left'>
|
||||
<div className='level-item'>
|
||||
<div className='tabs is-toggle'>
|
||||
<ul>
|
||||
<li className={(this.state.currentDisplay === DISPLAY.DESCRIPTION) ? 'is-active' : null}>
|
||||
<a onClick={this.toggleDisplay.bind(this, DISPLAY.DESCRIPTION)}>
|
||||
<span>Description</span>
|
||||
</a>
|
||||
</li>
|
||||
<li className={(this.state.currentDisplay === DISPLAY.DETAILS) ? 'is-active' : null}>
|
||||
<a onClick={this.toggleDisplay.bind(this, DISPLAY.DETAILS)}>
|
||||
<span>Details</span>
|
||||
</a>
|
||||
</li>
|
||||
<li className={(this.state.currentDisplay === DISPLAY.STATS) ? 'is-active' : null}>
|
||||
<a onClick={this.toggleDisplay.bind(this, DISPLAY.STATS)}>
|
||||
<span>Stats</span>
|
||||
</a>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div className='tabs is-toggle'>
|
||||
<ul>
|
||||
<li className={(this.state.currentDisplay === DISPLAY.DESCRIPTION) ? 'is-active' : null}>
|
||||
<a onClick={this.toggleDisplay.bind(this, DISPLAY.DESCRIPTION)}>
|
||||
<span>Description</span>
|
||||
</a>
|
||||
</li>
|
||||
<li className={(this.state.currentDisplay === DISPLAY.DETAILS) ? 'is-active' : null}>
|
||||
<a onClick={this.toggleDisplay.bind(this, DISPLAY.DETAILS)}>
|
||||
<span>Details</span>
|
||||
</a>
|
||||
</li>
|
||||
<li className={(this.state.currentDisplay === DISPLAY.STATS) ? 'is-active' : null}>
|
||||
<a onClick={this.toggleDisplay.bind(this, DISPLAY.STATS)}>
|
||||
<span>Stats</span>
|
||||
</a>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
{this.displayInfo()}
|
||||
|
|
|
|||
|
|
@ -4,77 +4,158 @@ import Component from 'inferno-component';
|
|||
export class SearchBox extends Component {
|
||||
constructor (props) {
|
||||
super(props);
|
||||
|
||||
this.state = {
|
||||
searchingIn: 'name'
|
||||
, searchTerm: ''
|
||||
, showHeader: false
|
||||
, showAdvanced: false
|
||||
};
|
||||
}
|
||||
|
||||
displaySearchHeader () {
|
||||
if (this.state.showHeader) {
|
||||
return (
|
||||
<header className='search-bar is-small'>
|
||||
<div className='search-body'>
|
||||
<div className='search-background'
|
||||
onClick={() => this.hideHeader()} />
|
||||
|
||||
<div className='container'>
|
||||
<div className='box'>
|
||||
<div className='columns is-mobile'>
|
||||
|
||||
<div className='column'>
|
||||
<div className='field has-addons'>
|
||||
<p className='control'>
|
||||
<span className='select'>
|
||||
<select value={this.state.searchingIn}
|
||||
onChange={event => {
|
||||
console.log(event);
|
||||
this.setState({searchingIn: event.target.value});
|
||||
}}>
|
||||
<option value='name'>Word</option>
|
||||
<option value='definition'>Definition</option>
|
||||
<option value='details'>Details</option>
|
||||
</select>
|
||||
</span>
|
||||
</p>
|
||||
<p className='control is-expanded'>
|
||||
<input className='input' type='text' placeholder='Search Term'
|
||||
value={this.state.searchTerm}
|
||||
onChange={event => {
|
||||
console.log(event);
|
||||
this.setState({searchTerm: event.target.value});
|
||||
}} />
|
||||
</p>
|
||||
</div>
|
||||
|
||||
{this.showFilterOptions()}
|
||||
|
||||
</div>
|
||||
|
||||
<div className='column is-narrow'>
|
||||
<div className='field has-addons'>
|
||||
<a className='delete'
|
||||
onClick={() => this.hideHeader()} />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</header>
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
showFilterOptions () {
|
||||
if (this.props.hasOwnProperty('partsOfSpeech')
|
||||
&& this.props.partsOfSpeech.length > 0) {
|
||||
let filterOptionsJSX = this.props.partsOfSpeech.map((partOfSpeech) => {
|
||||
return (
|
||||
<label key={'filterPartOfSpeech' + Date.now()}
|
||||
className='checkbox'>
|
||||
<input type='checkbox' />
|
||||
{partOfSpeech}
|
||||
</label>
|
||||
);
|
||||
});
|
||||
let filterSectionJSX = (
|
||||
<div className='field is-horizontal'>
|
||||
<div className='field-label is-normal'>
|
||||
<label className='label'>Filter</label>
|
||||
</div>
|
||||
<div className='field-body'>
|
||||
<div className='field is-grouped'>
|
||||
{this.props.partsOfSpeech.map((partOfSpeech) => {
|
||||
return (
|
||||
<p className='control'>
|
||||
<label key={'filterPartOfSpeech' + Date.now()}
|
||||
className='checkbox'>
|
||||
<input type='checkbox' checked={true} />
|
||||
{partOfSpeech}
|
||||
</label>
|
||||
</p>
|
||||
);
|
||||
})}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
|
||||
let advancedSectionJSX = (
|
||||
<div className='column'>
|
||||
<div className='box'>
|
||||
{filterSectionJSX}
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
|
||||
return (
|
||||
<div className='field'>
|
||||
<label>Filter</label>
|
||||
<p className='control'>
|
||||
{filterOptionsJSX}
|
||||
</p>
|
||||
<div class='columns'>
|
||||
<div class='column is-narrow'>
|
||||
<div className='field'>
|
||||
<p className='control'>
|
||||
<a className='button is-link is-small'
|
||||
onClick={() => this.setState({showAdvanced: !this.state.showAdvanced})}>
|
||||
Advanced
|
||||
</a>
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
{this.state.showAdvanced ? advancedSectionJSX : null}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
showHeader () {
|
||||
this.setState({
|
||||
showHeader: true
|
||||
});
|
||||
}
|
||||
|
||||
hideHeader () {
|
||||
this.setState({
|
||||
showHeader: false
|
||||
});
|
||||
}
|
||||
|
||||
render () {
|
||||
return (
|
||||
<div className='message'>
|
||||
<div class="message-header">
|
||||
<span>
|
||||
Search
|
||||
</span>
|
||||
<button class="delete"></button>
|
||||
<div>
|
||||
<div className='field has-addons is-hidden-touch'>
|
||||
<p className='control'>
|
||||
<input className='input' type='text' readonly={true}
|
||||
value={this.state.searchTerm}
|
||||
onClick={() => this.showHeader()} />
|
||||
</p>
|
||||
<p className='control'>
|
||||
<a className='button is-link'
|
||||
onClick={() => this.showHeader()}>
|
||||
Search
|
||||
</a>
|
||||
</p>
|
||||
</div>
|
||||
<div class="message-body">
|
||||
<div className='field'>
|
||||
<div className='control'>
|
||||
<input className='input' type='text' placeholder='Search Term' />
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className='field is-horizontal'>
|
||||
<div className='field-label'>
|
||||
<label className='label'>
|
||||
Search In
|
||||
</label>
|
||||
</div>
|
||||
<div className='field-body'>
|
||||
<div className='field is-narrow'>
|
||||
<div className='control'>
|
||||
<label className='radio'>
|
||||
<input type='radio' name='member' value='Word' checked />
|
||||
Word
|
||||
</label>
|
||||
<label className='radio'>
|
||||
<input type='radio' name='member' />
|
||||
Definition
|
||||
</label>
|
||||
<label className='radio'>
|
||||
<input type='radio' name='member' />
|
||||
Details
|
||||
</label>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{this.showFilterOptions()}
|
||||
|
||||
<a className='button is-hidden-desktop'
|
||||
onClick={() => this.showHeader()}>
|
||||
S
|
||||
</a>
|
||||
|
||||
{this.displaySearchHeader()}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,6 +1,8 @@
|
|||
import Inferno from 'inferno';
|
||||
import Component from 'inferno-component';
|
||||
|
||||
import {SearchBox} from '../management/SearchBox';
|
||||
|
||||
export class Header extends Component {
|
||||
constructor (props) {
|
||||
super(props);
|
||||
|
|
@ -15,7 +17,14 @@ export class Header extends Component {
|
|||
</a>
|
||||
</div>
|
||||
|
||||
<span class="nav-toggle">
|
||||
<div className='nav-center'>
|
||||
<div className='nav-item'>
|
||||
<SearchBox
|
||||
partsOfSpeech={['Noun','Adjective','Verb']} />
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<span class='nav-toggle'>
|
||||
<span></span>
|
||||
<span></span>
|
||||
<span></span>
|
||||
|
|
|
|||
|
|
@ -0,0 +1,29 @@
|
|||
@import 'variables';
|
||||
@import '../../node_modules/bulma/bulma';
|
||||
|
||||
.input {
|
||||
&[readonly] {
|
||||
&.is-clickable {
|
||||
cursor: pointer;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.search-bar {
|
||||
@extend .hero;
|
||||
background: transparent;
|
||||
position: fixed;
|
||||
top: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
z-index: 100;
|
||||
|
||||
.search-body {
|
||||
@extend .hero-body;
|
||||
@extend .is-paddingless;
|
||||
|
||||
.search-background {
|
||||
@extend .modal-background;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
@ -1,2 +1,127 @@
|
|||
////////////////////////////////////////////////
|
||||
////////////////////////////////////////////////
|
||||
// 1. Initial variables
|
||||
|
||||
// Colors
|
||||
$black: hsl(0, 0%, 4%);
|
||||
$black-bis: hsl(0, 0%, 7%);
|
||||
$black-ter: hsl(0, 0%, 14%);
|
||||
|
||||
$grey-darker: hsl(0, 0%, 21%);
|
||||
$grey-dark: hsl(0, 0%, 29%);
|
||||
$grey: hsl(0, 0%, 48%);
|
||||
$grey-light: hsl(0, 0%, 71%);
|
||||
$grey-lighter: hsl(0, 0%, 86%);
|
||||
|
||||
$white-ter: hsl(0, 0%, 96%);
|
||||
$white-bis: hsl(0, 0%, 98%);
|
||||
$white: hsl(0, 0%, 100%);
|
||||
|
||||
$orange: hsl(14, 100%, 53%);
|
||||
$yellow: hsl(48, 100%, 67%);
|
||||
$green: hsl(141, 71%, 48%);
|
||||
$turquoise: hsl(171, 100%, 41%);
|
||||
$blue: hsl(217, 71%, 53%);
|
||||
$purple: hsl(271, 100%, 71%);
|
||||
$red: hsl(348, 100%, 61%);
|
||||
|
||||
// Typography
|
||||
$family-sans-serif: -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen", "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue", "Helvetica", "Arial", sans-serif;
|
||||
$family-monospace: monospace;
|
||||
|
||||
$size-1: 3rem;
|
||||
$size-2: 2.5rem;
|
||||
$size-3: 2rem;
|
||||
$size-4: 1.5rem;
|
||||
$size-5: 1.25rem;
|
||||
$size-6: 1rem;
|
||||
$size-7: 0.75rem;
|
||||
|
||||
$weight-light: 300;
|
||||
$weight-normal: 400;
|
||||
$weight-semibold: 500;
|
||||
$weight-bold: 700;
|
||||
|
||||
// Body
|
||||
$body-background: $white;
|
||||
$body-size: 16px;
|
||||
|
||||
// Responsiveness
|
||||
// 960, 1152, and 1344 have been chosen because
|
||||
// they are divisible by both 12 and 16
|
||||
$tablet: 769px;
|
||||
// 960px container + 40px
|
||||
$desktop: 1000px;
|
||||
// 1152px container + 40
|
||||
$widescreen: 1192px;
|
||||
// 1344px container + 40
|
||||
$fullhd: 1384px;
|
||||
|
||||
// Miscellaneous
|
||||
$easing: ease-out;
|
||||
// $radius-small: 2px;
|
||||
// $radius: 3px;
|
||||
// $radius-large: 5px;
|
||||
$radius-small: 0;
|
||||
$radius: 0;
|
||||
$radius-large: 0;
|
||||
$speed: 86ms;
|
||||
|
||||
////////////////////////////////////////////////
|
||||
////////////////////////////////////////////////
|
||||
// 2. Primary colors
|
||||
|
||||
$primary: $turquoise;
|
||||
|
||||
$info: $blue;
|
||||
$success: $green;
|
||||
$warning: $yellow;
|
||||
$danger: $red;
|
||||
|
||||
$light: $white-ter;
|
||||
$dark: $grey-darker;
|
||||
|
||||
////////////////////////////////////////////////
|
||||
////////////////////////////////////////////////
|
||||
// 3. Applied variables
|
||||
|
||||
// General colors
|
||||
$background: $white-ter;
|
||||
|
||||
$border: $grey-lighter;
|
||||
$border-hover: $grey-light;
|
||||
|
||||
// Text colors
|
||||
$text: $grey-dark;
|
||||
$text-light: $grey;
|
||||
$text-strong: $grey-darker;
|
||||
|
||||
// Code colors
|
||||
$code: $red;
|
||||
$code-background: $background;
|
||||
|
||||
$pre: $text;
|
||||
$pre-background: $background;
|
||||
|
||||
// Link colors
|
||||
$link: $primary;
|
||||
$link-visited: $purple;
|
||||
|
||||
$link-hover: $grey-darker;
|
||||
$link-hover-border: $grey-light;
|
||||
|
||||
$link-focus: $grey-darker;
|
||||
$link-focus-border: $primary;
|
||||
|
||||
$link-active: $grey-darker;
|
||||
$link-active-border: $grey-dark;
|
||||
|
||||
// Typography
|
||||
$family-primary: $family-sans-serif;
|
||||
$family-code: $family-monospace;
|
||||
|
||||
$size-small: $size-7;
|
||||
$size-normal: $size-6;
|
||||
$size-medium: $size-5;
|
||||
$size-large: $size-4;
|
||||
|
||||
|
|
|
|||
|
|
@ -1,2 +1,3 @@
|
|||
@import 'variables';
|
||||
@import '../../node_modules/bulma/bulma';
|
||||
@import 'styles';
|
||||
|
|
|
|||
48
yarn.lock
48
yarn.lock
|
|
@ -1381,41 +1381,41 @@ indexof@0.0.1:
|
|||
version "0.0.1"
|
||||
resolved "https://registry.yarnpkg.com/indexof/-/indexof-0.0.1.tgz#82dc336d232b9062179d05ab3293a66059fd435d"
|
||||
|
||||
inferno-component@^1.6.0:
|
||||
version "1.6.0"
|
||||
resolved "https://registry.yarnpkg.com/inferno-component/-/inferno-component-1.6.0.tgz#ba5c4f04d3508950cd4c602d5c8df823b9628495"
|
||||
inferno-component@3.0.5, inferno-component@^3.0.5:
|
||||
version "3.0.5"
|
||||
resolved "https://registry.yarnpkg.com/inferno-component/-/inferno-component-3.0.5.tgz#f39584dbdd8e43167fbbfcfa8d2bc5509dac5c33"
|
||||
dependencies:
|
||||
inferno "^1.6.0"
|
||||
inferno-shared "^1.6.0"
|
||||
inferno-vnode-flags "^1.6.0"
|
||||
inferno "3.0.5"
|
||||
inferno-shared "^3.0.0"
|
||||
inferno-vnode-flags "^3.0.0"
|
||||
|
||||
inferno-devtools@^1.6.0:
|
||||
version "1.6.0"
|
||||
resolved "https://registry.yarnpkg.com/inferno-devtools/-/inferno-devtools-1.6.0.tgz#869953c1d5a85fa899f9ee8405e5d93d470629d0"
|
||||
inferno-devtools@^3.0.5:
|
||||
version "3.0.5"
|
||||
resolved "https://registry.yarnpkg.com/inferno-devtools/-/inferno-devtools-3.0.5.tgz#19669dcb900c5416dcc73225f84b6b53e7234942"
|
||||
dependencies:
|
||||
inferno "^1.6.0"
|
||||
inferno-component "^1.6.0"
|
||||
inferno-shared "^1.6.0"
|
||||
inferno-vnode-flags "^1.6.0"
|
||||
inferno "3.0.5"
|
||||
inferno-component "3.0.5"
|
||||
inferno-shared "^3.0.0"
|
||||
inferno-vnode-flags "^3.0.0"
|
||||
|
||||
inferno-shared@^1.6.0:
|
||||
version "1.6.0"
|
||||
resolved "https://registry.yarnpkg.com/inferno-shared/-/inferno-shared-1.6.0.tgz#8b85ec17c7140a2fe1320e556df05accc4af7145"
|
||||
inferno-shared@^3.0.0:
|
||||
version "3.0.0"
|
||||
resolved "https://registry.yarnpkg.com/inferno-shared/-/inferno-shared-3.0.0.tgz#daaeaf1b52803ab0572c7765ccfcfb925cfe8272"
|
||||
|
||||
inferno-vnode-flags@1.5.1:
|
||||
version "1.5.1"
|
||||
resolved "https://registry.yarnpkg.com/inferno-vnode-flags/-/inferno-vnode-flags-1.5.1.tgz#3b1b54ee5e9f167863b89e6bee1b19fd3941329f"
|
||||
|
||||
inferno-vnode-flags@^1.6.0:
|
||||
version "1.6.0"
|
||||
resolved "https://registry.yarnpkg.com/inferno-vnode-flags/-/inferno-vnode-flags-1.6.0.tgz#a4937aad290aec2abe743db8221af57531b3c941"
|
||||
inferno-vnode-flags@^3.0.0:
|
||||
version "3.0.0"
|
||||
resolved "https://registry.yarnpkg.com/inferno-vnode-flags/-/inferno-vnode-flags-3.0.0.tgz#f396390f3dafae3b76eea04d04eed6cf2004473b"
|
||||
|
||||
inferno@^1.6.0:
|
||||
version "1.6.0"
|
||||
resolved "https://registry.yarnpkg.com/inferno/-/inferno-1.6.0.tgz#e5cb246dab5fee58738513fe0a9e4d725d65fb4b"
|
||||
inferno@3.0.5, inferno@^3.0.5:
|
||||
version "3.0.5"
|
||||
resolved "https://registry.yarnpkg.com/inferno/-/inferno-3.0.5.tgz#e827b8db339e5e91bae25a14a1537ebd1f7b89df"
|
||||
dependencies:
|
||||
inferno-shared "^1.6.0"
|
||||
inferno-vnode-flags "^1.6.0"
|
||||
inferno-shared "^3.0.0"
|
||||
inferno-vnode-flags "^3.0.0"
|
||||
|
||||
inflight@^1.0.4:
|
||||
version "1.0.6"
|
||||
|
|
|
|||
Loading…
Reference in New Issue