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

Related artists list

Browse Source
This commit is contained in:
James Barnsley
2018-11-09 16:45:57 +13:00
parent c5a961cc0a
commit 509a25feba
13 changed files with 125 additions and 110 deletions
Download Patch File Download Diff File Expand all files Collapse all files

76
mopidy_iris/static/app.css
View File

@ -2766,17 +2766,17 @@ h1 {
font-weight: 600;
color: #FFFFFF;
font-weight: 700;
font-size: 3rem;
line-height: 3.2rem; }
font-size: 3.4rem;
line-height: 3.4rem; }
.light-theme h1 {
color: #181818; }
h2 {
font-weight: 400;
font-family: "Overpass";
letter-spacing: -0.04em;
font-weight: 600;
font-size: 2rem;
font-weight: 400;
line-height: 2.2rem; }
h2 a {
color: inherit;
@ -4010,8 +4010,8 @@ input[type="submit"] {
padding: 14px 0 10px; }
.list__item__column--right {
float: right; }
.list__item__column--right .list__item {
padding: 10px 0 0 14px;
.list__item__column--right .list__item__column__item {
padding-left: 10px;
display: inline-block; }
.list__item__column__item--thumbnail, .list__item__column__item--thumbnail.thumbnail {
width: 40px;
@ -4066,34 +4066,6 @@ input[type="submit"] {
margin-top: -8px;
pointer-events: none; }
.list--related-artists {
padding-bottom: 20px;
cursor: pointer; }
.list--related-artists .artist {
display: block;
border: 0;
margin: 20px 0; }
.list--related-artists .artist::after {
content: '';
clear: both;
display: block; }
.list--related-artists .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;
border-radius: 50%;
width: 60px;
margin-right: 15px;
float: left;
border: 3px solid transparent; }
.list--related-artists .artist .name {
display: block;
padding-top: 20px; }
.list--related-artists a.artist:hover .thumbnail {
border-color: #08d58f;
opacity: 1; }
@media (max-width: 800px) {
.list__item__content {
padding: 10px 0; }
@ -6300,6 +6272,40 @@ main header {
animation-timing-function: ease-out;
animation-iteration-count: 1; }
.related-artists {
padding-bottom: 20px;
cursor: pointer; }
.related-artists__item {
display: block;
border: 0;
margin: 20px 0;
padding: 0; }
.related-artists__item::after {
content: '';
clear: both;
display: block; }
.related-artists__item__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;
border-radius: 50%;
width: 60px;
margin-right: 15px;
float: left;
border: 3px solid transparent; }
.related-artists__item__name {
display: block;
padding-top: 20px; }
.related-artists__item--link {
border: none !important; }
.related-artists__item--link:hover {
background: transparent;
border: 0; }
.related-artists__item--link:hover .related-artists__item__thumbnail {
border-color: #08d58f;
opacity: 1; }
.artist-view .body-loader:not(.lazy-loader) {
padding: 15vh 0; }
@ -6427,6 +6433,8 @@ main .album-view {
main .album-view .parallax {
height: 60vh;
opacity: 0.5; }
main .album-view .title h2 {
padding-top: 10px; }
main .album-view .title h2 a:hover {
color: #706e6c; }
main .album-view .title .details {
@ -6481,6 +6489,8 @@ main .playlist-view {
main .playlist-view .parallax {
height: 60vh;
opacity: 0.5; }
main .playlist-view .title h2 {
padding-top: 10px; }
main .playlist-view .title h2 a:hover {
color: #706e6c; }
main .playlist-view .title .details {

31
mopidy_iris/static/app.js
View File

@ -26992,15 +26992,6 @@ var Track = function (_React$Component) {
}
}
/*
if (this.props.show_source_icon){
track_details.push(
<li className="list__item__details__item list__item__details__item--source" key="source">
<Icon type="fontawesome" name={helpers.sourceIcon(track.uri)} fixedWidth />
</li>
)
}*/
// If we're touchable, and can sort this tracklist
var drag_zone = null;
if (helpers.isTouchDevice() && this.props.can_sort) {
@ -27062,6 +27053,11 @@ var Track = function (_React$Component) {
{ className: 'list__item__column__item list__item__column__item--duration' },
track.duration ? _react2.default.createElement(_Dater2.default, { type: 'length', data: track.duration }) : '-'
),
this.props.show_source_icon ? _react2.default.createElement(
'span',
{ className: 'list__item__column__item list__item__column__item--source' },
_react2.default.createElement(_Icon2.default, { type: 'fontawesome', name: helpers.sourceIcon(track.uri), fixedWidth: true })
) : null,
_react2.default.createElement(_ContextMenuTrigger2.default, { className: 'list__item__column__item--context-menu-trigger subtle', onTrigger: function onTrigger(e) {
return _this2.props.handleContextMenu(e);
} })
@ -27155,7 +27151,7 @@ var RelatedArtists = function (_React$Component) {
return _react2.default.createElement(
'div',
{ className: 'list related-artist-list' },
{ className: 'related-artists' },
this.props.artists.map(function (artist, index) {
var images = artist.images;
@ -27166,22 +27162,22 @@ var RelatedArtists = function (_React$Component) {
if (artist.uri) {
return _react2.default.createElement(
_URILink2.default,
{ type: 'artist', uri: artist.uri, key: artist.uri, className: 'artist' },
_react2.default.createElement(_Thumbnail2.default, { circle: true, size: 'small', images: images }),
{ type: 'artist', uri: artist.uri, key: artist.uri, className: 'related-artists__item related-artists__item--link' },
_react2.default.createElement(_Thumbnail2.default, { className: 'related-artists__item__thumbnail', circle: true, size: 'small', images: images }),
_react2.default.createElement(
'span',
{ className: 'name' },
{ className: 'related-artists__item__name' },
artist.name
)
);
} else {
return _react2.default.createElement(
'span',
{ key: artist.uri, className: 'artist' },
_react2.default.createElement(_Thumbnail2.default, { circle: true, size: 'small', images: images }),
{ key: artist.uri, className: 'related-artists__item' },
_react2.default.createElement(_Thumbnail2.default, { className: 'related-artists__item__thumbnail', circle: true, size: 'small', images: images }),
_react2.default.createElement(
'span',
{ className: 'name' },
{ className: 'related-artists__item__name' },
artist.name
)
);
@ -71616,7 +71612,8 @@ var QueueHistory = function (_React$Component) {
_react2.default.createElement(_TrackList2.default, {
className: 'queue-history-track-list',
context: 'history',
tracks: tracks
tracks: tracks,
show_source_icon: true
})
)
);

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

File diff suppressed because one or more lines are too long

2
mopidy_iris/static/index.html
View File

@ -98,7 +98,7 @@
// Release details
// These are automatically injected to built HTML
var build = "1541702973";
var build = "1541707458";
var version = "3.29.2";
// Construct the script tag

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

@ -13,7 +13,7 @@ export default class RelatedArtists extends React.Component{
if (!this.props.artists ) return null
return (
<div className="list related-artist-list">
<div className="related-artists">
{
this.props.artists.map((artist, index) => {
@ -24,16 +24,16 @@ export default class RelatedArtists extends React.Component{
if (artist.uri){
return (
<URILink type="artist" uri={artist.uri} key={artist.uri} className="artist">
<Thumbnail circle={true} size="small" images={images} />
<span className="name">{ artist.name }</span>
<URILink type="artist" uri={artist.uri} key={artist.uri} className="related-artists__item related-artists__item--link">
<Thumbnail className="related-artists__item__thumbnail" circle={true} size="small" images={images} />
<span className="related-artists__item__name">{ artist.name }</span>
</URILink>
)
} else {
return (
<span key={artist.uri} className="artist">
<Thumbnail circle={true} size="small" images={images} />
<span className="name">{ artist.name }</span>
<span key={artist.uri} className="related-artists__item">
<Thumbnail className="related-artists__item__thumbnail" circle={true} size="small" images={images} />
<span className="related-artists__item__name">{ artist.name }</span>
</span>
)
}

12
src/js/components/Track.js
View File

@ -259,15 +259,6 @@ export default class Track extends React.Component{
}
}
/*
if (this.props.show_source_icon){
track_details.push(
<li className="list__item__details__item list__item__details__item--source" key="source">
<Icon type="fontawesome" name={helpers.sourceIcon(track.uri)} fixedWidth />
</li>
)
}*/
// If we're touchable, and can sort this tracklist
var drag_zone = null;
if (helpers.isTouchDevice() && this.props.can_sort){
@ -304,6 +295,9 @@ export default class Track extends React.Component{
<span className="list__item__column__item list__item__column__item--duration">
{track.duration ? <Dater type="length" data={track.duration} /> : '-'}
</span>
{this.props.show_source_icon ? <span className="list__item__column__item list__item__column__item--source">
<Icon type="fontawesome" name={helpers.sourceIcon(track.uri)} fixedWidth />
</span> : null}
<ContextMenuTrigger className="list__item__column__item--context-menu-trigger subtle" onTrigger={e => this.props.handleContextMenu(e)} />
</div>
<div className="list__item__column list__item__column--name">

1
src/js/views/QueueHistory.js
View File

@ -73,6 +73,7 @@ class QueueHistory extends React.Component{
className="queue-history-track-list"
context="history"
tracks={tracks}
show_source_icon={true}
/>
</section>

1
src/scss/app.scss
View File

@ -35,6 +35,7 @@
@import 'components/colour-field';
@import 'components/icon-field';
@import 'components/commands';
@import 'components/related-artists';
@import 'views/artist';
@import 'views/user';

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

@ -139,8 +139,8 @@
&--right {
float: right;
.list__item {
padding: 10px 0 0 14px;
.list__item__column__item {
padding-left: 10px;
display: inline-block;
}
}
@ -230,39 +230,6 @@
}
}
&--related-artists {
padding-bottom: 20px;
cursor: pointer;
.artist {
display: block;
border: 0;
margin: 20px 0;
@include clearfix;
.thumbnail {
@include animate();
border-radius: 50%;
width: 60px;
margin-right: 15px;
float: left;
border: 3px solid transparent;
}
.name {
display: block;
padding-top: 20px;
}
}
a.artist:hover {
.thumbnail {
border-color: colour(turquoise);
opacity: 1;
}
}
}
@include responsive($bp_medium){
&__item {

41
src/scss/components/_related-artists.scss Executable file
View File

@ -0,0 +1,41 @@
.related-artists {
padding-bottom: 20px;
cursor: pointer;
&__item {
@include clearfix();
display: block;
border: 0;
margin: 20px 0;
padding: 0;
&__thumbnail {
@include animate();
border-radius: 50%;
width: 60px;
margin-right: 15px;
float: left;
border: 3px solid transparent;
}
&__name {
display: block;
padding-top: 20px;
}
&--link {
border: none !important;
&:hover {
background: transparent;
border: 0;
.related-artists__item__thumbnail {
border-color: colour(turquoise);
opacity: 1;
}
}
}
}
}

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

@ -174,8 +174,8 @@ h1 {
@include feature_font();
color: colour(white);
font-weight: 700;
font-size: 3rem;
line-height: 3.2rem;
font-size: 3.4rem;
line-height: 3.4rem;
.light-theme & {
color: colour(dark_grey);
@ -183,9 +183,9 @@ h1 {
}
h2 {
font-weight: 400;
@include feature_font();
font-size: 2rem;
font-weight: 400;
line-height: 2.2rem;
a {

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

@ -10,6 +10,8 @@ main .album-view {
.title {
h2 {
padding-top: 10px;
a:hover {
color: darken(colour(mid_grey), 20%);
}

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

@ -10,6 +10,8 @@ main .playlist-view {
.title {
h2 {
padding-top: 10px;
a:hover {
color: darken(colour(mid_grey), 20%);
}