Merge branch 'ux' into 'master'

UX

See merge request !81

src/public/js/components/buttons/download.js

@@ -47,7 +47,7 @@ export default class DownloadButton extends React.PureComponent {
           </MenuItem>
         </Dropdown.Menu>
 
-        <Modal show={this.state.showModal} onHide={this.hideModal}>
+        <Modal show={this.state.showModal} onHide={this.hideModal} dialogClassName="player-modal">
           <Modal.Header closeButton>
             <Modal.Title>
               <i className="fa fa-globe"></i>

src/public/js/components/list/poster.js

@@ -1,41 +1,18 @@
 import React from "react"
 
-export default class Poster extends React.Component {
+export default function Poster(props) {
-  constructor(props) {
+  const selected = props.selected ? " thumbnail-selected" : "";
-    super(props);
-  }
-  shouldComponentUpdate(nextProps) {
-    if (nextProps.index !== this.props.index) { return true }
-    if (nextProps.selected !== this.props.selected) { return true }
-    if (nextProps.data.get("poster_url") !== this.props.data.get("poster_url")) { return true }
-    return false;
-  }
-  render() {
-    const selected = this.props.selected ? " thumbnail-selected" : "";
   const imgClass = "thumbnail" + selected;
-    const displayClearFixLg = (this.props.index % 6) === 0;
-    const displayClearFixMd = (this.props.index % 4) === 0;
-    const displayClearFixSm = (this.props.index % 2) === 0;
   return (
     <div>
-        {displayClearFixLg &&
-            <div className="clearfix visible-lg"></div>
-        }
-        {displayClearFixMd &&
-            <div className="clearfix visible-md"></div>
-        }
-        {displayClearFixSm &&
-            <div className="clearfix visible-sm"></div>
-        }
       <div className="col-xs-12 col-sm-6 col-md-3 col-lg-2">
         <a className={imgClass}>
           <img
-              src={this.props.data.get("poster_url")}
+            src={props.data.get("poster_url")}
-              onClick={this.props.onClick}
+            onClick={props.onClick}
           />
         </a>
       </div>
     </div>
   );
 }
-}

src/public/js/components/list/posters.js

@@ -131,14 +131,26 @@ class Posters extends React.PureComponent {
           {this.props.elmts.toIndexedSeq().map(function(movie, index) {
             const imdbId = movie.get("imdb_id");
             const selected = (imdbId === this.props.selectedImdbId) ? true : false;
+
+            let clearFixes = [];
+            if ((index % 6) === 0) { clearFixes.push("clearfix visible-lg") };
+            if ((index % 4) === 0) { clearFixes.push("clearfix visible-md") };
+            if ((index % 2) === 0) { clearFixes.push("clearfix visible-sm") };
+
             return (
+              <div>
+                {clearFixes.length > 0 && clearFixes.map(function(el, i) {
+                  return (
+                    <div key={`${imdbId}-${i}`} className={el}></div>
+                  );
+                })}
                 <Poster
-                index={index}
                   data={movie}
                   key={imdbId}
                   selected={selected}
                   onClick={() => this.props.onClick(imdbId)}
                 />
+              </div>
             )
           } ,this)}
         </InfiniteScroll>

src/public/js/components/navbar.js

@@ -2,14 +2,16 @@ import React from "react"
 import { Nav, Navbar, NavItem, NavDropdown, MenuItem } from "react-bootstrap"
 import { LinkContainer } from "react-router-bootstrap"
 
-export default class NavBar extends React.PureComponent {
+export default class AppNavBar extends React.PureComponent {
   constructor(props) {
     super(props);
     this.state = {
       userLoggedIn: (props.username !== ""),
       displayMoviesSearch: this.shouldDisplayMoviesSearch(props.router),
       displayShowsSearch: this.shouldDisplayShowsSearch(props.router),
+      expanded: false,
     };
+    this.setExpanded = this.setExpanded.bind(this);
   }
   componentWillReceiveProps(nextProps) {
     // Update the state based on the next props
@@ -34,10 +36,14 @@ export default class NavBar extends React.PureComponent {
     const location = router.getCurrentLocation().pathname;
     return (location.indexOf(keyword) !== -1)
   }
+  setExpanded(value) {
+    if (this.state.expanded === value) { return }
+    this.setState({ expanded: value });
+  }
   render() {
     return (
       <div>
-        <Navbar fluid fixedTop collapseOnSelect>
+        <Navbar fluid fixedTop collapseOnSelect expanded={this.state.expanded} onToggle={this.setExpanded}>
           <Navbar.Header>
             <LinkContainer to="/">
               <Navbar.Brand><a href="#">Canapé</a></Navbar.Brand>
@@ -63,6 +69,7 @@ export default class NavBar extends React.PureComponent {
                 placeholder="Search movies"
                 router={this.props.router}
                 path='/movies/search'
+                setExpanded={this.setExpanded}
               />
             }
             {(this.state.displayShowsSearch && this.state.userLoggedIn) &&
@@ -70,6 +77,7 @@ export default class NavBar extends React.PureComponent {
                 placeholder="Search shows"
                 router={this.props.router}
                 path='/shows/search'
+                setExpanded={this.setExpanded}
               />
             }
           </Navbar.Collapse>
@@ -86,6 +94,7 @@ class Search extends React.Component {
   }
   handleSearch(ev) {
     ev.preventDefault();
+    this.props.setExpanded(false);
     this.props.router.push(`${this.props.path}/${encodeURI(this.input.value)}`);
   }
   render() {

src/public/js/components/torrents/list.js

@@ -36,7 +36,11 @@ class AddTorrent extends React.PureComponent {
   handleChange(event) {
     this.setState({ url: event.target.value });
   }
-  handleSubmit() {
+  handleSubmit(ev) {
+    if (ev) {
+      ev.preventDefault();
+    }
+
     if (this.state.url === "") {
       return;
     }

src/public/less/app.less

@@ -8,8 +8,14 @@ body {
 }
 
 .thumbnail-selected {
-    border-color: @brand-primary;
+    transition: border 400ms ease-in-out;
-    background-color: @brand-primary;
+    animation-name: select-thumbnail;
+    animation-duration: 400ms;
+    animation-fill-mode: forwards;
+}
+@keyframes select-thumbnail {
+    0%   { background-color: @gray-light;    }
+    100% { background-color: @brand-primary; }
 }
 
 .clickable {
@@ -65,3 +71,7 @@ div.sweet-alert > h2 {
         display: inherit;
     }
 }
+
+.player-modal {
+    width: 90%;
+}