secstate/Iris
Public Access
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases 1 Wiki Activity

More immersive album and playlist mobile layouts + parallax

Browse Source
This commit is contained in:
James Barnsley
2018-10-28 21:14:54 +13:00
parent 97dcc716fb
commit ba1d4295e5
18 changed files with 10578 additions and 13821 deletions
Download Patch File Download Diff File Expand all files Collapse all files

3
src/js/App.js
View File

@ -312,6 +312,9 @@ class App extends React.Component{
if (this.props.touch_dragging){
className += ' touch-dragging';
}
if (this.props.context_menu){
className += ' context-menu-open';
}
if (this.props.slim_mode){
className += ' slim-mode';
}

7
src/js/components/ContextMenu.js
View File

@ -44,8 +44,7 @@ class ContextMenu extends React.Component{
// if we've been given a menu object (ie activated) when we didn't have one prior
if (nextProps.menu && !this.props.menu){
this.setState({ submenu_expanded: false })
$('body').addClass('context-menu-open')
this.setState({ submenu_expanded: false });
var context = this.getContext(nextProps);
@ -66,10 +65,6 @@ class ContextMenu extends React.Component{
this.props.lastfmActions.getTrack(nextProps.menu.items[0].uri);
}
}
// we DID have one prior, and now we don't
} else if (this.props.menu && !nextProps.menu){
$('body').removeClass('context-menu-open')
}
}

11
src/js/views/Album.js
View File

@ -128,7 +128,10 @@ class Album extends React.Component{
}
return (
<div className="view album-view content-wrapper">
<div className="view album-view content-wrapper preserve-3d">
<Parallax image={album.images ? album.images.huge : null} blur />
<div className="thumbnail-wrapper">
<Thumbnail size="large" canZoom images={album.images} />
</div>
@ -139,11 +142,11 @@ class Album extends React.Component{
<ul className="details">
{!this.props.slim_mode ? <li className="tooltip"><Icon type="fontawesome" name={helpers.sourceIcon(album.uri )} /><span className="tooltip__content">{helpers.uriSource(this.props.params.uri )} {album.type ? album.type : 'album'}</span></li> : null}
{!this.props.slim_mode && album.artists && album.artists.length > 0 ? <li><ArtistSentence artists={album.artists} /></li> : null}
{album.artists && album.artists.length > 0 ? <li><ArtistSentence artists={album.artists} /></li> : null}
{album.release_date ? <li><Dater type="date" data={album.release_date} /></li> : null}
<li>
{!this.props.slim_mode ? <li>
{album.tracks ? <span>{album.tracks.length} tracks, <Dater type="total-time" data={album.tracks} /></span> : '0 tracks, 0 mins' }
</li>
</li> : null }
</ul>
</div>

3
src/js/views/Artist.js
View File

@ -296,7 +296,7 @@ class Artist extends React.Component{
<div className="view artist-view preserve-3d">
<div className="intro preserve-3d">
<Parallax image={image} theme={this.props.theme} disabled={this.props.disable_parallax} />
<Parallax image={image} />
<div className="liner">
<h1>{this.props.artist ? this.props.artist.name : null}</h1>
@ -326,7 +326,6 @@ class Artist extends React.Component{
const mapStateToProps = (state, ownProps) => {
var uri = ownProps.params.uri;
return {
disable_parallax: state.ui.disable_parallax,
theme: state.ui.theme,
slim_mode: state.ui.slim_mode,
load_queue: state.ui.load_queue,

12
src/js/views/Playlist.js
View File

@ -3,11 +3,12 @@ import React, { PropTypes } from 'react'
import { connect } from 'react-redux'
import { bindActionCreators } from 'redux'
import { hashHistory } from 'react-router'
import Link from '../components/Link';
import ReactGA from 'react-ga'
import Link from '../components/Link';
import TrackList from '../components/TrackList'
import Thumbnail from '../components/Thumbnail'
import Parallax from '../components/Parallax'
import Dater from '../components/Dater'
import ConfirmationButton from '../components/Fields/ConfirmationButton'
import LazyLoadListener from '../components/LazyLoadListener'
@ -200,6 +201,9 @@ class Playlist extends React.Component{
return (
<div className="view playlist-view content-wrapper">
<Parallax image={playlist.images ? playlist.images.huge : null} blur />
<div className="thumbnail-wrapper">
<Thumbnail size="large" canZoom images={playlist.images} />
</div>
@ -210,9 +214,9 @@ class Playlist extends React.Component{
<ul className="details">
{!this.props.slim_mode ? <li className="tooltip"><Icon type="fontawesome" name={helpers.sourceIcon(playlist.uri)} /><span className="tooltip__content">{helpers.uriSource(playlist.uri)} playlist</span></li> : null }
{playlist.user_uri && !this.props.slim_mode ? <li><URILink type="user" uri={playlist.user_uri}>{playlist.user ? playlist.user.name : helpers.getFromUri('userid',playlist.user_uri)}</URILink></li> : null }
{playlist.followers !== undefined ? <li>{playlist.followers.toLocaleString()} followers</li> : null }
{playlist.last_modified_date ? <li>Edited <Dater type="ago" data={playlist.last_modified_date} /></li> : null }
{playlist.user_uri ? <li><URILink type="user" uri={playlist.user_uri}>{playlist.user ? playlist.user.name : helpers.getFromUri('userid',playlist.user_uri)}</URILink></li> : null }
{!this.props.slim_mode && playlist.followers !== undefined ? <li>{playlist.followers.toLocaleString()} followers</li> : null }
{!this.props.slim_mode && playlist.last_modified_date ? <li>Edited <Dater type="ago" data={playlist.last_modified_date} /></li> : null }
<li>
{playlist.tracks_total ? playlist.tracks_total : (playlist.tracks ? playlist.tracks.length : '0')} tracks,&nbsp;
<Dater type="total-time" data={playlist.tracks} />

2
src/js/views/Queue.js
View File

@ -162,7 +162,7 @@ class Queue extends React.Component{
return (
<div className="view queue-view preserve-3d">
<Header className="overlay" options={options} uiActions={this.props.uiActions}>
<Header options={options} uiActions={this.props.uiActions}>
<Icon name="play_arrow" type="material" />
Now playing
</Header>

10
src/scss/components/_lists.scss
View File

@ -385,7 +385,15 @@
}
&.header {
display: none;
padding: 0 !important;
&:before {
border-top: none;
}
.liner {
display: none;
}
}
}

7
src/scss/global/_core.scss
View File

@ -65,7 +65,7 @@ body {
}
.smooth-scroll {
scroll-behavior: smooth;
scroll-behavior: smooth;
}
main {
@ -74,11 +74,12 @@ main {
left: 220px;
bottom: 50px;
right: 0;
overflow-y: scroll;
overflow-x: hidden;
perspective: 100px;
background: colour(dark_grey);
z-index: 1;
overflow-y: scroll;
overflow-x: hidden;
overscroll-behavior: contain;
/**
* iOS drops smooth-scrolling on divs, so we need to manually re-set it

35
src/scss/views/_album.scss
View File

@ -3,6 +3,12 @@ main .album-view {
padding-left: 30%;
position: relative;
@include responsive(null, $bp_medium){
.parallax {
display: none;
}
}
.title {
h2 {
a:hover {
@ -37,10 +43,11 @@ main .album-view {
padding-left: 10px;
.thumbnail-wrapper {
width: 40%;
padding: 10px 20px 10px 0;
float: left;
width: 300px;
max-width: 60%;
padding: 30px 0 0 0;
position: static;
margin: 0 auto;
.thumbnail {
float: none;
@ -50,7 +57,12 @@ main .album-view {
}
.title {
padding: 30px 0 20px 40%;
padding: 40px 0 0 0;
text-align: center;
.description {
padding-top: 10px;
}
.details {
padding: 5px 0;
@ -59,19 +71,8 @@ main .album-view {
.actions {
@include clearfix();
padding: 10px 0 20px 40%;
}
}
@include responsive($bp_small){
.title {
@include clearfix();
padding: 20px 20px 10px 40%;
min-height: 20vw;
}
.actions {
padding: 0;
text-align: center;
padding: 30px 0 20px 0;
}
}
}

35
src/scss/views/_playlist.scss
View File

@ -3,6 +3,12 @@ main .playlist-view {
padding-left: 30%;
position: relative;
@include responsive(null, $bp_medium){
.parallax {
display: none;
}
}
.title {
h2 {
a:hover {
@ -37,10 +43,11 @@ main .playlist-view {
padding-left: 10px;
.thumbnail-wrapper {
width: 40%;
padding: 10px 20px 10px 0;
float: left;
width: 300px;
max-width: 60%;
padding: 30px 0 0 0;
position: static;
margin: 0 auto;
.thumbnail {
float: none;
@ -50,7 +57,12 @@ main .playlist-view {
}
.title {
padding: 30px 0 20px 40%;
padding: 40px 0 0 0;
text-align: center;
.description {
padding-top: 10px;
}
.details {
padding: 5px 0;
@ -59,19 +71,8 @@ main .playlist-view {
.actions {
@include clearfix();
padding: 10px 0 20px 40%;
}
}
@include responsive($bp_small){
.title {
@include clearfix();
padding: 20px 20px 10px 40%;
min-height: 20vw;
}
.actions {
padding: 0;
text-align: center;
padding: 30px 0 20px 0;
}
}
}

8
src/scss/views/_queue.scss
View File

@ -8,7 +8,7 @@
.current-track {
text-align: center;
padding: 60px 0;
padding: 40px 0;
.artwork {
position: relative;
@ -54,5 +54,11 @@
position: relative;
z-index: 2;
}
@include responsive($bp_medium){
.artwork {
width: 80%;
}
}
}
}