diff options
| -rw-r--r-- | src/client/views/search/CheckBox.tsx | 20 | ||||
| -rw-r--r-- | src/client/views/search/CollectionFilters.tsx | 5 | ||||
| -rw-r--r-- | src/client/views/search/NaviconButton.scss | 95 | ||||
| -rw-r--r-- | src/client/views/search/NaviconButton.tsx | 28 | ||||
| -rw-r--r-- | src/client/views/search/SearchBox.tsx | 10 |
5 files changed, 142 insertions, 16 deletions
diff --git a/src/client/views/search/CheckBox.tsx b/src/client/views/search/CheckBox.tsx index 9f0b75887..c75980e7c 100644 --- a/src/client/views/search/CheckBox.tsx +++ b/src/client/views/search/CheckBox.tsx @@ -78,15 +78,19 @@ export class CheckBox extends React.Component<CheckBoxProps>{ @action.bound reset() { - if(this.props.default){ - this._status = true; - this.checkTimeline.play(); - this.checkTimeline.restart(); + if (this.props.default) { + if (!this._status) { + this._status = true; + this.checkTimeline.play(); + this.checkTimeline.restart(); + } } - else{ - this._status = false; - this.uncheckTimeline.play(); - this.uncheckTimeline.restart(); + else { + if (this._status) { + this._status = false; + this.uncheckTimeline.play(); + this.uncheckTimeline.restart(); + } } this.props.updateStatus(this.props.default); diff --git a/src/client/views/search/CollectionFilters.tsx b/src/client/views/search/CollectionFilters.tsx index a5e479567..5bfe37efb 100644 --- a/src/client/views/search/CollectionFilters.tsx +++ b/src/client/views/search/CollectionFilters.tsx @@ -47,6 +47,11 @@ export class CollectionFilters extends React.Component<CollectionFilterProps> { duration: 500, opacity: 1, }); + + if(this.collectionsSelected){ + this.timeline.play(); + this.timeline.reverse(); + } } @action.bound diff --git a/src/client/views/search/NaviconButton.scss b/src/client/views/search/NaviconButton.scss new file mode 100644 index 000000000..529f11a57 --- /dev/null +++ b/src/client/views/search/NaviconButton.scss @@ -0,0 +1,95 @@ +@import "../globalCssVariables"; + + +@import url(https://fonts.googleapis.com/css?family=Montserrat:400,700); + +// $background: #3d566e; +$color: #ecf0f1; + +$height-icon: 20px; +$width-line: 30px; +$height-line: 4px; + +$transition-time: 0.4s; +$rotation: 45deg; +$translateY: ($height-icon / 2); +$translateX: 0; + +// body { +// background: $background; +// color: $color; +// font-family: 'Montserrat', sans-serif; +// -webkit-font-smoothing: antialiased; +// text-align:center; +// } + +#hamburger-icon { + width:$width-line; + height:$height-icon; + position:relative; + display:block; +// margin: ($height-icon * 2) auto $height-icon auto; + + .line { + display:block; + background:$color; + width:$width-line; + height:$height-line; + position:absolute; + left:0; + border-radius:($height-line / 2); + transition: all $transition-time; + -webkit-transition: all $transition-time; + -moz-transition: all $transition-time; + + &.line-1 { + top:0; + } + &.line-2 { + top:50%; + } + &.line-3 { + top:100%; + } + } + &:hover, &:focus { + .line-1 { + transform: translateY($height-line / 2 * -1); + -webkit-transform: translateY($height-line / 2 * -1); + -moz-transform: translateY($height-line / 2 * -1); + } + .line-3 { + transform: translateY($height-line / 2); + -webkit-transform: translateY($height-line / 2); + -moz-transform: translateY($height-line / 2); + } + } + &.active { + .line-1 { + transform: translateY($translateY) translateX($translateX) rotate($rotation); + -webkit-transform: translateY($translateY) translateX($translateX) rotate($rotation); + -moz-transform: translateY($translateY) translateX($translateX) rotate($rotation); + } + .line-2 { + opacity:0; + } + .line-3 { + transform: translateY($translateY * -1) translateX($translateX) rotate($rotation * -1); + -webkit-transform: translateY($translateY * -1) translateX($translateX) rotate($rotation * -1); + -moz-transform: translateY($translateY * -1) translateX($translateX) rotate($rotation * -1); + } + } +} + +// h1 { +// text-transform:uppercase; +// } +// a { +// text-decoration:none; +// color:#95a5a6; +// margin: 0.5em 1.5em; +// display:inline-block; +// &:hover, &:focus { +// color:$color; +// } +// }
\ No newline at end of file diff --git a/src/client/views/search/NaviconButton.tsx b/src/client/views/search/NaviconButton.tsx new file mode 100644 index 000000000..aa9e627c0 --- /dev/null +++ b/src/client/views/search/NaviconButton.tsx @@ -0,0 +1,28 @@ +import * as React from 'react'; +import { observer } from 'mobx-react'; +import "./NaviconButton.scss"; +import * as $ from 'jquery'; + + +export class NaviconButton extends React.Component { + + componentDidMount = () => { + $(document).ready(function () { + var hamburger = $('#hamburger-icon'); + hamburger.click(function () { + hamburger.toggleClass('active'); + return false; + }); + }); + } + + render() { + return ( + <a id="hamburger-icon" href="#" title="Menu"> + <span className="line line-1"></span> + <span className="line line-2"></span> + <span className="line line-3"></span> + </a> + ); + } +}
\ No newline at end of file diff --git a/src/client/views/search/SearchBox.tsx b/src/client/views/search/SearchBox.tsx index 2ff960aeb..71472886f 100644 --- a/src/client/views/search/SearchBox.tsx +++ b/src/client/views/search/SearchBox.tsx @@ -30,6 +30,7 @@ import { CollectionView } from '../collections/CollectionView'; import { CollectionPDFView } from '../collections/CollectionPDFView'; import { CollectionVideoView } from '../collections/CollectionVideoView'; import { CollectionFilters } from './CollectionFilters'; +import { NaviconButton } from './NaviconButton'; export enum Keys { TITLE = "title", @@ -82,14 +83,7 @@ export class SearchBox extends React.Component { ToggleBar.Instance.resetToggle(); IconBar.Instance.selectAll(); FieldFilters.Instance.resetFieldFilters(); - // console.log("field filters at end") - // console.log("title", this.titleFieldStatus, "author:", this.authorFieldStatus, "data:", this.dataFieldStatus) - // console.log("should be true, true, true\n") - CollectionFilters.Instance.resetCollectionFilters(); - // console.log("collection filters at end") - // console.log("normal;", this.collectionStatus, "self:", this.collectionSelfStatus, "parent:", this.collectionParentStatus) - // console.log("should be fase, true, true") } @action.bound @@ -324,7 +318,7 @@ export class SearchBox extends React.Component { @action openFilter = () => { - this._filterOpen = true; + this._filterOpen = !this._filterOpen; this._resultsOpen = false; this._results = []; } |