From 5372cd033423365999dedbcc69f2897b85ca9391 Mon Sep 17 00:00:00 2001 From: James Barnsley Date: Tue, 25 Oct 2016 14:09:53 +1300 Subject: [PATCH] Build issue; Grid items --- build.sh | 9 +++++ npm-debug.log | 40 --------------------- package.json | 2 +- src/.htaccess | 6 ++++ src/js/components/AlbumGrid.js | 6 ++-- src/js/components/AlbumGridItem.js | 26 -------------- src/js/components/ArtistGrid.js | 28 +++++++++++++++ src/js/components/GridItem.js | 37 ++++++++++++++++++++ src/js/components/Track.js | 6 ++-- src/js/services/mopidy/reducer.js | 22 +++++------- src/js/views/Settings.js | 56 ++++++++++++++++-------------- src/scss/app.scss | 1 + src/scss/components/_grid.scss | 37 ++++++++++++++++++++ src/scss/components/_lists.scss | 13 ++++--- src/scss/components/_sidebar.scss | 13 +++---- src/scss/global/_core.scss | 11 ++++++ src/scss/global/_variables.scss | 7 ++++ 17 files changed, 195 insertions(+), 125 deletions(-) create mode 100755 build.sh delete mode 100644 npm-debug.log create mode 100755 src/.htaccess delete mode 100755 src/js/components/AlbumGridItem.js create mode 100755 src/js/components/ArtistGrid.js create mode 100755 src/js/components/GridItem.js create mode 100755 src/scss/components/_grid.scss diff --git a/build.sh b/build.sh new file mode 100755 index 00000000..7dae7370 --- /dev/null +++ b/build.sh @@ -0,0 +1,9 @@ +#!/bin/bash + +if [ ! -d production ]; then + mkdir production; +fi + +cp src/index.html production/index.html +cp src/.htaccess production/.htaccess +cp -R src/fonts production/fonts \ No newline at end of file diff --git a/npm-debug.log b/npm-debug.log deleted file mode 100644 index d8c18a1a..00000000 --- a/npm-debug.log +++ /dev/null @@ -1,40 +0,0 @@ -0 info it worked if it ends with ok -1 verbose cli [ '/usr/bin/nodejs', '/usr/bin/npm', 'run', 'dev' ] -2 info using npm@2.15.8 -3 info using node@v4.4.7 -4 verbose run-script [ 'predev', 'dev', 'postdev' ] -5 info predev iris@1.0.0 -6 info dev iris@1.0.0 -7 verbose unsafe-perm in lifecycle true -8 info iris@1.0.0 Failed to exec dev script -9 verbose stack Error: iris@1.0.0 dev: `mkdir production & cp src/index.html production/index.html & cp -R src/fonts production/fonts & NODE_ENV=development webpack & sass src/scss/app.scss production/app.css` -9 verbose stack Exit status 65 -9 verbose stack at EventEmitter. (/usr/lib/node_modules/npm/lib/utils/lifecycle.js:217:16) -9 verbose stack at emitTwo (events.js:87:13) -9 verbose stack at EventEmitter.emit (events.js:172:7) -9 verbose stack at ChildProcess. (/usr/lib/node_modules/npm/lib/utils/spawn.js:24:14) -9 verbose stack at emitTwo (events.js:87:13) -9 verbose stack at ChildProcess.emit (events.js:172:7) -9 verbose stack at maybeClose (internal/child_process.js:827:16) -9 verbose stack at Process.ChildProcess._handle.onexit (internal/child_process.js:211:5) -10 verbose pkgid iris@1.0.0 -11 verbose cwd /var/www/iris -12 error Linux 3.16.0-4-amd64 -13 error argv "/usr/bin/nodejs" "/usr/bin/npm" "run" "dev" -14 error node v4.4.7 -15 error npm v2.15.8 -16 error code ELIFECYCLE -17 error iris@1.0.0 dev: `mkdir production & cp src/index.html production/index.html & cp -R src/fonts production/fonts & NODE_ENV=development webpack & sass src/scss/app.scss production/app.css` -17 error Exit status 65 -18 error Failed at the iris@1.0.0 dev script 'mkdir production & cp src/index.html production/index.html & cp -R src/fonts production/fonts & NODE_ENV=development webpack & sass src/scss/app.scss production/app.css'. -18 error This is most likely a problem with the iris package, -18 error not with npm itself. -18 error Tell the author that this fails on your system: -18 error mkdir production & cp src/index.html production/index.html & cp -R src/fonts production/fonts & NODE_ENV=development webpack & sass src/scss/app.scss production/app.css -18 error You can get information on how to open an issue for this project with: -18 error npm bugs iris -18 error Or if that isn't available, you can get their info via: -18 error -18 error npm owner ls iris -18 error There is likely additional logging output above. -19 verbose exit [ 1, true ] diff --git a/package.json b/package.json index 91499a07..db6947b5 100755 --- a/package.json +++ b/package.json @@ -34,7 +34,7 @@ "react-fontawesome": "*" }, "scripts": { - "dev": "mkdir production & cp src/index.html production/index.html & cp -R src/fonts production/fonts & NODE_ENV=development webpack & sass src/scss/app.scss production/app.css", + "dev": "./build.sh & NODE_ENV=development webpack & sass src/scss/app.scss production/app.css", "prod": "NODE_ENV=production webpack" }, "author": "James Barnsley", diff --git a/src/.htaccess b/src/.htaccess new file mode 100755 index 00000000..5ec6699e --- /dev/null +++ b/src/.htaccess @@ -0,0 +1,6 @@ +RewriteEngine On + +RewriteBase / +RewriteCond %{REQUEST_FILENAME} !-f +RewriteCond %{REQUEST_FILENAME} !-d +RewriteRule . /index.html [L] diff --git a/src/js/components/AlbumGrid.js b/src/js/components/AlbumGrid.js index 019147d7..4e55c3c2 100755 --- a/src/js/components/AlbumGrid.js +++ b/src/js/components/AlbumGrid.js @@ -1,6 +1,6 @@ import React, { PropTypes } from 'react' -import AlbumGridItem from './AlbumGridItem' +import GridItem from './GridItem' export default class AlbumGrid extends React.Component{ @@ -15,7 +15,9 @@ export default class AlbumGrid extends React.Component{ { this.props.items.items.map( (album, index) => { - return + var link = album.uri; + if( album.album ) link = album.album.uri; + return } ) } diff --git a/src/js/components/AlbumGridItem.js b/src/js/components/AlbumGridItem.js deleted file mode 100755 index 4e15f9c9..00000000 --- a/src/js/components/AlbumGridItem.js +++ /dev/null @@ -1,26 +0,0 @@ - -import React, { PropTypes } from 'react' -import { Link } from 'react-router' -import Thumbnail from './Thumbnail' - -export default class AlbumGridItem extends React.Component{ - - constructor(props) { - super(props); - } - - render(){ - var item = this.props.item; - if( typeof(item.album) !== 'undefined' ){ - item.album.added_at = item.added_at; - item = item.album; - } - var link = '/album/' + item.uri; - return ( - - { item.images ? : item.name } - - ); - } -} - diff --git a/src/js/components/ArtistGrid.js b/src/js/components/ArtistGrid.js new file mode 100755 index 00000000..019147d7 --- /dev/null +++ b/src/js/components/ArtistGrid.js @@ -0,0 +1,28 @@ + +import React, { PropTypes } from 'react' +import AlbumGridItem from './AlbumGridItem' + +export default class AlbumGrid extends React.Component{ + + constructor(props) { + super(props); + } + + render(){ + if( this.props.items ){ + return ( +
    + { + this.props.items.items.map( + (album, index) => { + return + } + ) + } +
+ ); + } + return null; + } +} + diff --git a/src/js/components/GridItem.js b/src/js/components/GridItem.js new file mode 100755 index 00000000..22451def --- /dev/null +++ b/src/js/components/GridItem.js @@ -0,0 +1,37 @@ + +import React, { PropTypes } from 'react' +import { Link, browserHistory } from 'react-router' + +import Thumbnail from './Thumbnail' +import ArtistList from './ArtistList' + +export default class GridItem extends React.Component{ + + constructor(props) { + super(props); + } + + handleClick(e){ + if( e.target.tagName.toLowerCase() !== 'a' ){ + browserHistory.push( this.props.link ); + } + } + + render(){ + var item = this.props.item; + if( typeof(item.album) !== 'undefined' ){ + item.album.added_at = item.added_at; + item = item.album; + } + return ( +
this.handleClick(e) }> + { item.images ? : item.name } +
{ item.name }
+
+ { item.artists ? : null } +
+
+ ); + } +} + diff --git a/src/js/components/Track.js b/src/js/components/Track.js index 375b1b1e..b5053788 100755 --- a/src/js/components/Track.js +++ b/src/js/components/Track.js @@ -40,9 +40,7 @@ export default class Track extends React.Component{ render(){ var className = 'list-item track'; - var selectedIcon = 'square-o'; if( typeof(this.props.track.selected) !== 'undefined' && this.props.track.selected ){ - selectedIcon = 'check-square-o'; className += ' selected'; } @@ -55,12 +53,12 @@ export default class Track extends React.Component{ className={className} onDoubleClick={ (e) => this.handleDoubleClick(e) } onClick={ (e) => this.handleClick(e) }> - + { this.props.track.selected ? : null } {this.props.track.name} - + { this.props.track.artists ? : null } { this.props.track.album ? : null } diff --git a/src/js/services/mopidy/reducer.js b/src/js/services/mopidy/reducer.js index f374601d..eee80942 100755 --- a/src/js/services/mopidy/reducer.js +++ b/src/js/services/mopidy/reducer.js @@ -19,18 +19,6 @@ export default function reducer(mopidy = {}, action){ tlid: action.tlid }); - case 'MOPIDY_HIGHLIGHT_CURRENT_TLTRACK': - if( !action.data ) return mopidy; - for( var i = 0; i < mopidy.tracks.length; i++ ){ - if( mopidy.tracks[i].tlid == action.data.tlid ){ - action.data.track.playing = true; - Object.assign(mopidy.tracks[i], action.data); - }else{ - mopidy.tracks[i].track.playing = false; - } - } - return Object.assign({}, mopidy, { tracks: mopidy.tracks }); - case 'MOPIDY_PLAYLISTS_LOADED': if( !action.data ) return mopidy; return Object.assign({}, mopidy, { playlists: action.data }); @@ -65,8 +53,16 @@ export default function reducer(mopidy = {}, action){ }); case 'MOPIDY_CURRENTTLTRACK': + var tracks = []; + Object.assign(tracks, mopidy.tracks); + + for( var i = 0; i < tracks.length; i++ ){ + Object.assign(tracks[i].track, { playing: ( tracks[i].tlid == action.data.tlid ) }); + } + return Object.assign({}, mopidy, { - currentTlTrack: action.data + currentTlTrack: action.data, + tracks: tracks }); case 'MOPIDY_VOLUME': diff --git a/src/js/views/Settings.js b/src/js/views/Settings.js index 097acfb8..fd9f6898 100755 --- a/src/js/views/Settings.js +++ b/src/js/views/Settings.js @@ -46,35 +46,39 @@ class Settings extends React.Component{ title="Settings" /> -

Mopidy

-
this.setMopidyConfig()}> - - - -
+
-

Spotify

-
this.setSpotifyConfig()}> - - - -
+

Mopidy

+
this.setMopidyConfig()}> + + + +
- +

Spotify

+
this.setSpotifyConfig()}> + + + +
- this.resetAllSettings()} /> + + + this.resetAllSettings()} /> + +
); } diff --git a/src/scss/app.scss b/src/scss/app.scss index 3f4a5b71..60a481a2 100755 --- a/src/scss/app.scss +++ b/src/scss/app.scss @@ -10,5 +10,6 @@ @import 'components/icon'; @import 'components/sidebar'; @import 'components/lists'; +@import 'components/grid'; @import 'components/header'; diff --git a/src/scss/components/_grid.scss b/src/scss/components/_grid.scss new file mode 100755 index 00000000..7dd8343f --- /dev/null +++ b/src/scss/components/_grid.scss @@ -0,0 +1,37 @@ + +.grid { + + padding: 40px 20px; + + .grid-item { + width: 16%; + margin: 0 2% 3%; + display: inline-block; + vertical-align: top; + border-bottom: 0; + + .thumbnail { + max-width: 100%; + } + + .name { + @include one_line_text; + padding-top: 8px; + } + + .secondary { + @include one_line_text; + padding-top: 2px; + color: $secondary_grey; + } + + &:nth-child(5)::after { + @include clear; + } + + &:hover{ + cursor: pointer; + opacity: 0.75; + } + } +} \ No newline at end of file diff --git a/src/scss/components/_lists.scss b/src/scss/components/_lists.scss index 93bb4d83..ff23649c 100755 --- a/src/scss/components/_lists.scss +++ b/src/scss/components/_lists.scss @@ -10,7 +10,7 @@ display: block; position: relative; - padding: 8px 10px 8px 30px; + padding: 9px 10px 9px 40px; border-top: 1px solid #EEEEEE; border-bottom: 1px solid #EEEEEE; margin-bottom: -1px; @@ -22,9 +22,7 @@ } &::after { - content: ''; - clear: both; - display: block; + @include clear; } &.selected { @@ -57,12 +55,13 @@ .select-state { position: absolute; - top: 10px; - left: 10px; + top: 12px; + left: 15px; + font-size: 10px; } &.playing { - font-weight: 500; + font-weight: 600; } } diff --git a/src/scss/components/_sidebar.scss b/src/scss/components/_sidebar.scss index 0d2f799a..83cd5f4c 100755 --- a/src/scss/components/_sidebar.scss +++ b/src/scss/components/_sidebar.scss @@ -5,10 +5,11 @@ aside{ top: 0; left: 0; bottom: 0; - background: #333333; + background: #111111; width: 200px; overflow: hidden; - + box-shadow: inset -20px 0px 30px -20px rgba(0, 0, 0, 0.5); + .thumbnail { position: absolute; top: 0; @@ -36,11 +37,11 @@ aside{ &.active { border-color: $turquoise; - background: rgba( 0,0,0,0.1 ); + background: rgba( 0, 0, 0, 0.5 ); } &:hover { - background: rgba( 255,255,255,0.1 ); + background: rgba( 255, 255, 255, 0.1 ); } } @@ -73,13 +74,13 @@ aside{ color: #FFFFFF; .title { - @include one_line_text + @include one_line_text; } .artist-list { opacity: 0.5; display: block; - @include one_line_text + @include one_line_text; .artist a { color: inherit; diff --git a/src/scss/global/_core.scss b/src/scss/global/_core.scss index 70babc4c..402a5ff6 100755 --- a/src/scss/global/_core.scss +++ b/src/scss/global/_core.scss @@ -27,4 +27,15 @@ main { } } + section { + padding: 40px; + } + + h3 { + font-size: 14px; + margin-bottom: 14px; + padding-bottom: 4px; + border-bottom: 1px solid #000000; + text-transform: uppercase; + } } \ No newline at end of file diff --git a/src/scss/global/_variables.scss b/src/scss/global/_variables.scss index c9d89b21..22462a01 100755 --- a/src/scss/global/_variables.scss +++ b/src/scss/global/_variables.scss @@ -1,8 +1,15 @@ $turquoise: #08d58f; +$secondary_grey: #888888; @mixin one_line_text { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; +} + +@mixin clear { + content: ''; + clear: both; + display: block; } \ No newline at end of file