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

Artistlist; Nicer sliders

Browse Source
This commit is contained in:
James Barnsley
2016-11-04 15:55:17 +13:00
parent 4ef7d935dd
commit 5b2604583f
14 changed files with 95 additions and 52 deletions
Download Patch File Download Diff File Expand all files Collapse all files

36
mopidy_iris/static/app.css
View File

@ -3310,11 +3310,6 @@ label .input input {
height: 100%;
}
.slider.horizontal:hover .track {
top: 7px;
height: 6px;
}
.slider.vertical {
margin: 10px 0;
width: 20px;
@ -3438,6 +3433,7 @@ label .input input {
font-size: 16px;
text-transform: uppercase;
text-align: center;
padding-bottom: 15px;
}
.player .current-track .title {
@ -3480,7 +3476,11 @@ label .input input {
opacity: 1.0;
}
.player .slider.animating .progress {
.player .slider.horizontal {
margin-bottom: 0;
}
.player .slider.horizontal.animating .progress {
/* @include animate(10s); */
}
@ -3667,7 +3667,7 @@ aside .player .artist-sentence .artist:hover {
.artist-list .artist {
display: block;
border: 0;
margin-bottom: 15px;
margin-bottom: 5px;
}
.artist-list .artist::after {
@ -3677,18 +3677,22 @@ aside .player .artist-sentence .artist:hover {
}
.artist-list .artist .thumbnail {
-webkit-transition: all 0.2s ease-in-out;
-moz-transition: all 0.2s ease-in-out;
-o-transition: all 0.2s ease-in-out;
transition: all 0.2s ease-in-out;
width: 50px;
margin-right: 20px;
margin-right: 15px;
float: left;
border: 3px solid transparent;
}
.artist-list .artist .name {
display: inline-block;
padding-top: 15px;
display: block;
padding-top: 20px;
}
.artist-list .artist:hover .thumbnail {
.artist-list .artist.a:hover .thumbnail {
border-color: #08d58f;
opacity: 0.8;
}
@ -3861,6 +3865,10 @@ main header h1 {
padding-bottom: 45px;
}
.artist-view .artist-list {
padding-top: 15px;
}
.album-view .main {
padding-left: 35%;
}
@ -4011,7 +4019,7 @@ main header h1 {
.queue-view .player {
text-align: center;
padding: 40px 0;
padding: 40px 0 10px;
}
.queue-view .player .artwork,
@ -4055,4 +4063,8 @@ main header h1 {
padding: 10px;
}
.settings-view section {
padding: 40px;
}
/*# sourceMappingURL=app.css.map*/

2
mopidy_iris/static/app.css.map
View File

File diff suppressed because one or more lines are too long

40
mopidy_iris/static/app.js
View File

@ -17758,7 +17758,7 @@
key: 'render',
value: function render() {
return _react2.default.createElement(
'span',
'div',
{ className: 'artist-list' },
this.props.artists.map(function (artist, index) {
var link = '/artist/' + artist.uri;
@ -18676,17 +18676,25 @@
return _react2.default.createElement(
'div',
null,
_react2.default.createElement(_Thumbnail2.default, { circle: true, size: 'small', images: this.props.spotify.me.images }),
'Logged in as ',
this.props.spotify.me.display_name ? this.props.spotify.me.display_name : null,
'\xA0(',
{ className: 'artist-list' },
_react2.default.createElement(
_reactRouter.Link,
{ to: '/user/' + this.props.spotify.me.id },
this.props.spotify.me.id
),
')'
'div',
{ className: 'artist' },
_react2.default.createElement(_Thumbnail2.default, { circle: true, size: 'small', images: this.props.spotify.me.images }),
_react2.default.createElement(
'div',
{ className: 'name' },
'Logged in as ',
this.props.spotify.me.display_name ? this.props.spotify.me.display_name : null,
'\xA0(',
_react2.default.createElement(
_reactRouter.Link,
{ to: '/user/' + this.props.spotify.me.id },
this.props.spotify.me.id
),
')'
)
)
);
}
}, {
@ -18705,14 +18713,14 @@
return _react2.default.createElement(
'div',
null,
this.renderMe(),
_react2.default.createElement(
'button',
{ onClick: function onClick() {
return _this2.props.actions.authorizationRevoked();
} },
'Log out'
),
this.renderMe()
)
);
} else {
return _react2.default.createElement(
@ -20825,7 +20833,11 @@
'div',
{ className: 'view queue-view' },
_react2.default.createElement(_FullPlayer2.default, null),
this.renderTrackList()
_react2.default.createElement(
'section',
{ className: 'list-wrapper' },
this.renderTrackList()
)
);
}
}]);

2
mopidy_iris/static/app.js.map
View File

File diff suppressed because one or more lines are too long

4
src/js/components/ArtistList.js
View File

@ -11,7 +11,7 @@ export default class ArtistList extends React.Component{
render(){
return (
<span className="artist-list">
<div className="artist-list">
{
this.props.artists.map( (artist, index) => {
var link = '/artist/' + artist.uri;
@ -23,7 +23,7 @@ export default class ArtistList extends React.Component{
);
})
}
</span>
</div>
);
}
}

14
src/js/components/SpotifyAuthenticationFrame.js
View File

@ -63,10 +63,14 @@ class SpotifyAuthenticationFrame extends React.Component{
if( !this.props.spotify.me ) return null;
return (
<div>
<Thumbnail circle={true} size="small" images={this.props.spotify.me.images} />
Logged in as {this.props.spotify.me.display_name ? this.props.spotify.me.display_name : null }
&nbsp;(<Link to={'/user/'+this.props.spotify.me.id}>{ this.props.spotify.me.id }</Link>)
<div className="artist-list">
<div className="artist">
<Thumbnail circle={true} size="small" images={this.props.spotify.me.images} />
<div className="name">
Logged in as {this.props.spotify.me.display_name ? this.props.spotify.me.display_name : null }
&nbsp;(<Link to={'/user/'+this.props.spotify.me.id}>{ this.props.spotify.me.id }</Link>)
</div>
</div>
</div>
)
}
@ -83,8 +87,8 @@ class SpotifyAuthenticationFrame extends React.Component{
}else if( this.props.spotify.authorized ){
return (
<div>
<button onClick={() => this.props.actions.authorizationRevoked()}>Log out</button>
{ this.renderMe() }
<button onClick={() => this.props.actions.authorizationRevoked()}>Log out</button>
</div>
);
}else{

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

@ -55,8 +55,13 @@ class Queue extends React.Component{
render(){
return (
<div className="view queue-view">
<FullPlayer />
{ this.renderTrackList() }
<section className="list-wrapper">
{ this.renderTrackList() }
</section>
</div>
);
}

1
src/scss/app.scss
View File

@ -23,4 +23,5 @@
@import 'views/playlist';
@import 'views/queue';
@import 'views/search';
@import 'views/settings';

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

@ -75,22 +75,23 @@
.artist {
display: block;
border: 0;
margin-bottom: 15px;
margin-bottom: 5px;
@include clearfix;
.thumbnail {
@include animate();
width: 50px;
margin-right: 20px;
margin-right: 15px;
float: left;
border: 3px solid transparent;
}
.name {
display: inline-block;
padding-top: 15px;
display: block;
padding-top: 20px;
}
&:hover {
&.a:hover {
.thumbnail {
border-color: $turquoise;
opacity: 0.8;

11
src/scss/components/_player.scss
View File

@ -5,6 +5,7 @@
font-size: 16px;
text-transform: uppercase;
text-align: center;
padding-bottom: 15px;
.title {
@include one_line_text;
@ -43,9 +44,13 @@
}
}
.slider.animating {
.progress{
/* @include animate(10s); */
.slider.horizontal {
margin-bottom: 0;
&.animating {
.progress{
/* @include animate(10s); */
}
}
}
}

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

@ -129,13 +129,6 @@ label {
height: 100%;
}
}
&:hover {
.track {
top: 7px;
height: 6px;
}
}
}
&.vertical {

4
src/scss/views/_artist.scss
View File

@ -17,4 +17,8 @@
padding-bottom: 45px;
}
}
.artist-list {
padding-top: 15px;
}
}

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

@ -3,7 +3,7 @@
.player {
text-align: center;
padding: 40px 0;
padding: 40px 0 10px;
.artwork,
.controls a {

6
src/scss/views/_settings.scss Executable file
View File

@ -0,0 +1,6 @@
.settings-view {
section {
padding: 40px;
}
}