From c8ef6de78c2a34e1ce89935572f9864b08628e2d Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Gr=C3=A9goire=20Delattre?= Date: Sat, 28 Jan 2017 18:42:58 +0100 Subject: [PATCH 1/3] Fix filter input on small devices --- src/public/js/components/list/filter.js | 6 +++--- src/public/less/app.less | 6 ++++++ 2 files changed, 9 insertions(+), 3 deletions(-) diff --git a/src/public/js/components/list/filter.js b/src/public/js/components/list/filter.js index 6137836..39450f1 100644 --- a/src/public/js/components/list/filter.js +++ b/src/public/js/components/list/filter.js @@ -3,9 +3,9 @@ import { Control, Form } from 'react-redux-form'; export default function ListFilter(props) { return ( -
-
-
+
+
+ h2 { color: @body-bg; } + +@media (max-width: @screen-xs-max) { + form.hidebtn-xs.input-group { + display: inherit; + } +} From 57af856a0ea12f3c29fc18fa7f15f714066e17c1 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Gr=C3=A9goire=20Delattre?= Date: Sat, 28 Jan 2017 18:51:01 +0100 Subject: [PATCH 2/3] Add infinite scroll on poster list --- package.json | 1 + src/public/js/app.js | 2 +- src/public/js/components/list/posters.js | 131 ++++++++++++++--------- yarn.lock | 18 +++- 4 files changed, 99 insertions(+), 53 deletions(-) diff --git a/package.json b/package.json index 1ea38c0..f877cf2 100644 --- a/package.json +++ b/package.json @@ -17,6 +17,7 @@ "react-bootstrap": "^0.30.6", "react-bootstrap-sweetalert": "^3.0.0", "react-dom": "^15.3.2", + "react-infinite": "^0.10.0", "react-loading": "^0.0.9", "react-redux": "^4.4.6", "react-redux-form": "^1.2.4", diff --git a/src/public/js/app.js b/src/public/js/app.js index f8bb1d1..6baf48a 100644 --- a/src/public/js/app.js +++ b/src/public/js/app.js @@ -110,7 +110,7 @@ ReactDOM.render(( - + diff --git a/src/public/js/components/list/posters.js b/src/public/js/components/list/posters.js index cf44062..789a186 100644 --- a/src/public/js/components/list/posters.js +++ b/src/public/js/components/list/posters.js @@ -1,62 +1,91 @@ import React from 'react' + import fuzzy from 'fuzzy'; +import Infinite from 'react-infinite'; import ListFilter from './filter' import ListPoster from './poster' -export default function ListPosters(props) { - let elmts = props.data.slice(); - - // Filter the list of elements - if (props.filter !== "") { - const filtered = fuzzy.filter(props.filter, elmts, { - extract: (el) => el.title +export default class ListPosters extends React.Component { + constructor(props) { + super(props); + this.state = { + elementHeight: 150, + elementWidth: 70, + containerWidth: 0, + elementPerRaw: 1, + fakeElementHeight: 100, + }; + this.updateDimensions = this.updateDimensions.bind(this); + } + updateDimensions() { + let thumbnails = document.getElementsByClassName("thumbnail"); + if (thumbnails.length === 0) { + return + } + let containers = document.getElementsByClassName("posters-infinite-container"); + if (containers.length === 0) { + return + } + let elementHeight = thumbnails[0].parentNode.clientHeight; + let elementWidth = thumbnails[0].parentNode.clientWidth; + let containerWidth = containers[0].clientWidth; + let elementPerRaw = Math.round(containerWidth/elementWidth); + let fakeElementHeight = Math.round(elementHeight/elementPerRaw); + this.setState({ + elementHeight: elementHeight, + elementWidth: elementWidth, + containerWidth: containerWidth, + elementPerRaw: elementPerRaw, + fakeElementHeight: fakeElementHeight, }); - elmts = filtered.map((el) => el.original); - } else { - // Get the page number if defined - let page = 1; - let perPage = props.perPage; - if (props.params && props.params.page) { - page = parseInt(props.params.page); - } - - let from = 0; - let to = perPage - 1; - if (page > 1) { - from = ((page - 1) * perPage) - 1; - to = from + perPage; - } - - // Limit the number of results - if ((from + perPage) > elmts.length) { - elmts = elmts.slice(from); - } else { - elmts = elmts.slice(from, to); - } + } + componentDidMount() { + window.addEventListener("resize", this.updateDimensions); + this.updateDimensions(); + } + componentWillUnmount() { + window.removeEventListener("resize", this.updateDimensions); } - return ( -
- -
- {elmts.map(function(el, index) { - const selected = (el.imdb_id === props.selectedImdbId) ? true : false; - return ( - props.onClick(el.imdb_id)} - /> - )} - )} + render() { + let elmts = this.props.data.slice(); + + // Filter the list of elements + if (this.props.filter !== "") { + const filtered = fuzzy.filter(this.props.filter, elmts, { + extract: (el) => el.title + }); + elmts = filtered.map((el) => el.original); + } + + return ( +
+ + + {elmts.map(function(el, index) { + const selected = (el.imdb_id === this.props.selectedImdbId) ? true : false; + return ( + this.props.onClick(el.imdb_id)} + /> + )} + , this)} +
-
- ); + ); + } } diff --git a/yarn.lock b/yarn.lock index a1fd710..9a29bab 100644 --- a/yarn.lock +++ b/yarn.lock @@ -2253,7 +2253,7 @@ lodash.isarguments@^3.0.0: version "3.1.0" resolved "https://registry.yarnpkg.com/lodash.isarguments/-/lodash.isarguments-3.1.0.tgz#2f573d85c6a24289ff00663b491c1d338ff3458a" -lodash.isarray@^3.0.0: +lodash.isarray@^3.0.0, lodash.isarray@3.0.4: version "3.0.4" resolved "https://registry.yarnpkg.com/lodash.isarray/-/lodash.isarray-3.0.4.tgz#79e4eb88c36a8122af86f844aa9bcd851b5fbb55" @@ -2261,6 +2261,10 @@ lodash.isempty@^4.2.1, lodash.isempty@4.4.0: version "4.4.0" resolved "https://registry.yarnpkg.com/lodash.isempty/-/lodash.isempty-4.4.0.tgz#6f86cbedd8be4ec987be9aaf33c9684db1b31e7e" +lodash.isfinite@3.2.0: + version "3.2.0" + resolved "https://registry.yarnpkg.com/lodash.isfinite/-/lodash.isfinite-3.2.0.tgz#aa69ffb93a37e82fab0ce18862655f9174ced339" + lodash.isplainobject@^4.0.4: version "4.0.6" resolved "https://registry.yarnpkg.com/lodash.isplainobject/-/lodash.isplainobject-4.0.6.tgz#7c526a52d89b45c45cc690b88163be0497f550cb" @@ -2604,6 +2608,10 @@ object-assign@^4.0.1, object-assign@^4.1.0: version "4.1.0" resolved "https://registry.yarnpkg.com/object-assign/-/object-assign-4.1.0.tgz#7a3b3d0e98063d43f4c03f2e8ae6cd51a86883a0" +object-assign@4.0.1: + version "4.0.1" + resolved "https://registry.yarnpkg.com/object-assign/-/object-assign-4.0.1.tgz#99504456c3598b5cad4fc59c26e8a9bb107fe0bd" + object.omit@^2.0.0: version "2.0.1" resolved "https://registry.yarnpkg.com/object.omit/-/object.omit-2.0.1.tgz#1a9c744829f39dbb858c76ca3579ae2a54ebd1fa" @@ -3087,6 +3095,14 @@ react-dom@^15.3.2: version "15.3.2" resolved "https://registry.yarnpkg.com/react-dom/-/react-dom-15.3.2.tgz#c46b0aa5380d7b838e7a59c4a7beff2ed315531f" +react-infinite: + version "0.10.0" + resolved "https://registry.yarnpkg.com/react-infinite/-/react-infinite-0.10.0.tgz#04567469dd26b2f0d53bd9793bafbcd26e05c58b" + dependencies: + lodash.isarray "3.0.4" + lodash.isfinite "3.2.0" + object-assign "4.0.1" + react-loading: version "0.0.9" resolved "https://registry.yarnpkg.com/react-loading/-/react-loading-0.0.9.tgz#e9fba6948915ba7742a508193828b6c73eb04956" From bea5d9c7e4bc569ce8611742d16e9733913d747a Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Gr=C3=A9goire=20Delattre?= Date: Sat, 28 Jan 2017 19:04:28 +0100 Subject: [PATCH 3/3] Add indicator in the poster list for no results --- src/public/js/components/list/posters.js | 5 +++++ 1 file changed, 5 insertions(+) diff --git a/src/public/js/components/list/posters.js b/src/public/js/components/list/posters.js index 789a186..734f84b 100644 --- a/src/public/js/components/list/posters.js +++ b/src/public/js/components/list/posters.js @@ -66,6 +66,11 @@ export default class ListPosters extends React.Component { controlModel={this.props.controlModel} controlPlaceHolder={this.props.controlPlaceHolder} /> + {elmts.length === 0 && +
+

No result

+
+ }