Skip to content

Commit

Permalink
Merge pull request #106 from jaedb/develop
Browse files Browse the repository at this point in the history 
Hotfix
  • Loading branch information
@jaedb
jaedb authored Jul 3, 2016
2 parents 60ff835 + e50d28d commit 49c437e
Show file tree
Hide file tree
Showing 13 changed files with 219 additions and 161 deletions.
2 changes: 1 addition & 1 deletion mopidy_spotmop/__init__.py
View file
Original file line number Diff line number Diff line change
Expand Up @@ -11,7 +11,7 @@
from services.auth import auth
from mopidy import config, ext

__version__ = '2.7.2'
__version__ = '2.7.3'
__ext_name__ = 'spotmop'
__verbosemode__ = False

Expand Down
41 changes: 26 additions & 15 deletions mopidy_spotmop/static/app.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -30378,7 +30378,7 @@ angular.module('spotmop.browse.album', [])

$scope.album = response;
$scope.album.totalTracks = response.tracks.total;
$scope.album.images = $filter('sizedImages')(response.images);
$scope.album.images = response.images;
$scope.tracklist = response.tracks;
$scope.tracklist.type = 'track';
$scope.tracklist.tracks = response.tracks.items;
Expand Down Expand Up @@ -32297,7 +32297,7 @@ angular.module('spotmop.directives', [])
}

},
template: '<div class="image animate"></div>'
template: '<div class="thumbnail-image image animate"></div>'
};
}])

Expand Down Expand Up @@ -32517,7 +32517,11 @@ angular.module('spotmop.directives', [])
);

// setup initial variables
var scrollTop = 0;
var state = {
scrollTop: 0,
windowWidth: $(window).width(),
windowHeight: $(window).height()
};
var canvasDOM = document.getElementById('backgroundparallax');
var context = canvasDOM.getContext('2d');
var url = '';
Expand All @@ -32535,7 +32539,7 @@ angular.module('spotmop.directives', [])
width: 0,
height: 0,
url: url
}
};

// create our new image object (to be plugged into canvas)
var imageObject = new Image();
Expand Down Expand Up @@ -32588,7 +32592,7 @@ angular.module('spotmop.directives', [])
}

// figure out where we want the image to be, based on scroll position
var percent = Math.round( scrollTop / canvasHeight * 100 );
var percent = Math.round( state.scrollTop / canvasHeight * 100 );
var position = Math.round( (canvasHeight / 2) * (percent/100) ) - 100;

image.x = ( canvasWidth / 2 ) - ( image.width / 2 );
Expand All @@ -32605,18 +32609,25 @@ angular.module('spotmop.directives', [])

var bannerPanel = $(document).find('.intro');

// if we've scrolled
if( scrollTop != $(document).scrollTop() ){
scrollTop = $(document).scrollTop();

var bannerHeight = bannerPanel.outerHeight();
// if we've scrolled or resized
if(
state.scrollTop != $(document).scrollTop() ||
state.windowWidth != $(window).width() ||
state.windowHeight != $(window).height() ){

// update our state
state.scrollTop = $(document).scrollTop();
state.windowWidth = $(window).width();
state.windowHeight = $(window).height();

var bannerHeight = bannerPanel.outerHeight();

// and if we're within the bounds of our document
// this helps prevent us animating when the objects in question are off-screen
if( scrollTop < bannerHeight ){
positionArtistBackground( image );
// and if we're within the bounds of our document
// this helps prevent us animating when the objects in question are off-screen
if( state.scrollTop < bannerHeight ){
positionArtistBackground( image );
}
}
}
});
},
10
Expand Down
12 changes: 6 additions & 6 deletions mopidy_spotmop/static/app.min.js
View file

Large diffs are not rendered by default.

23 changes: 10 additions & 13 deletions mopidy_spotmop/static/app/browse/album/template.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -3,24 +3,21 @@
<span class="menu-reveal-trigger" ng-click="showMenu()"><i class="fa fa-bars"></i></span>

<div class="asset-sidebar">

<div
class="thumbnail-wrapper album slim-intro-wrapper"
draggable="false"
candrag
dragobj="album">

<div class="thumbnail-wrapper slim-intro-wrapper">

<div class="thumbnail album" ng-if="album.images.medium" style="background-image: url({{ album.images.medium }});"></div>

<div class="thumbnail album placeholder" ng-if="!album.images || !album.images.medium "></div>
<div class="drag-wrapper primary-thumbnail" draggable="false" candrag dragobj="album">
<thumbnail size="medium" images="album.images"></thumbnail>
</div>

<div class="slim-intro mobile-show" ng-if="mediumScreen()">
<thumbnail size="medium" images="album.images"></thumbnail>
<h1 ng-bind="album.name"></h1>
<div class="slim-intro mobile-show" ng-if="mediumScreen()">
<thumbnail size="medium" images="album.images"></thumbnail>
<h1 ng-bind="album.name"></h1>
<h2 class="description">
<artistlist artists="album.artists" sentence></artistlist>
</h2>
</div>
</div>

</div>

<div class="clear-left"><!-- clear --></div>
Expand Down
18 changes: 6 additions & 12 deletions mopidy_spotmop/static/app/browse/playlist/template.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -5,19 +5,13 @@
<div class="asset-sidebar">

<div class="thumbnail-wrapper slim-intro-wrapper">

<div class="thumbnail playlist"
ng-if="playlist.images.length > 0"
ng-repeat="image in playlist.images | limitTo:1"
style="background-image: url({{ image.url }});"
draggable="false"
candrag
dragobj="playlist"
></div>
<div class="thumbnail playlist placeholder" ng-if=" !playlist.images || playlist.images.length <= 0"></div>

<div class="drag-wrapper primary-thumbnail" draggable="false" candrag dragobj="playlist">
<thumbnail size="medium" images="playlist.images"></thumbnail>
</div>

<div class="slim-intro mobile-show" ng-if="mediumScreen()">
<thumbnail ng-if="playlist.images" size="medium" images="playlist.images"></thumbnail>
<thumbnail size="medium" images="playlist.images"></thumbnail>
<h1 ng-bind="playlist.name"></h1>
<h2 class="description" ng-bind-html="playlist.description" ng-show="playlist.description">Loading</h2>
</div>
Expand Down Expand Up @@ -82,7 +76,7 @@ <h2 class="description" ng-bind-html="playlist.description" ng-show="playlist.de
</div>
<div class="info-item">
<a class="playlist-owner" ui-sref="browse.user({ uri: playlist.owner.uri })">
<span class="thumbnail animate" ng-repeat="image in playlist.owner.images | limitTo: 1 : playlist.owner.images.length-1" style="background-image: url('{{ image.url }}');"><span class="border animate"></span></span>
<thumbnail size="small" images="playlist.owner.images"></thumbnail>
<span class="name" ng-bind="playlist.owner.display_name"></span>
</a>
</div>
Expand Down
99 changes: 63 additions & 36 deletions mopidy_spotmop/static/assets/css/style.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -649,8 +649,6 @@ body.dragging .body * {
#dropzones .dropzone.queue .dropzone.add-to-queue-next .label {
padding: 0;
}





Expand Down Expand Up @@ -1282,13 +1280,9 @@ h1 .flag {
width: 50px;
height: 50px;
border-radius: 100px;
padding: 0;
float: left;
margin-right: 14px;
background-image: url('../svg/no-image.svg');
background-color: #E9E9E9;
background-repeat: no-repeat;
background-position: 50% 50%;
background-size: cover;
border: 2px solid #f5f5f5;
}

Expand Down Expand Up @@ -1655,6 +1649,23 @@ body.dragging .tracklist .track.dropping {
width: 40%;
}
}


/**
* Thumbnail images
* Just the default settings, which will be manipulated on a contextual basis
**/

.thumbnail-image.image {
width: 100%;
padding-bottom: 100%;
margin: 0;
background-image: url('../svg/no-image.svg');
background-color: #E9E9E9;
background-position: 50% 50%;
background-size: cover;
}



/**
Expand Down Expand Up @@ -1912,15 +1923,11 @@ slider .item-container > .square-panel {
padding: 40px 20px 40px 20px;
}

.playlist-page .playlist.thumbnail,
.album-page .album.thumbnail {
.playlist-page .thumbnail-wrapper .image,
.album-page .thumbnail-wrapper .image {
width: 100%;
padding-bottom: 100%;
margin: 0;
background-image: url('../svg/no-image.svg');
background-color: #E9E9E9;
background-position: 50% 50%;
background-size: cover;
}

.playlist-page h1,
Expand Down Expand Up @@ -1963,8 +1970,6 @@ slider .item-container > .square-panel {
border: 0 !important;
}

.playlist-owner:hover .thumbnail .border { border-color: #08d58f; }

.playlist-owner .name {
display: block;
font-size: 15px;
Expand All @@ -1973,7 +1978,19 @@ slider .item-container > .square-panel {
padding-top: 5px;
}

.playlist-owner .thumbnail .border {
.playlist-owner .image {
border-radius: 60px;
display: block;
float: left;
height: 30px;
margin-right: 8px;
width: 30px;
padding: 0;
position: relative;
}

.playlist-owner .image::after {
content: '';
display: block;
position: absolute;
top: -1px;
Expand All @@ -1985,19 +2002,8 @@ slider .item-container > .square-panel {
z-index: 2;
}

.playlist-owner .thumbnail {
background-color: #e9e9e9;
background-image: url("../svg/no-image.svg");
background-position: 50% 50%;
background-repeat: no-repeat;
background-size: cover;
border-radius: 60px;
display: block;
float: left;
height: 30px;
margin-right: 8px;
width: 30px;
position: relative;
.playlist-owner:hover .image::after {
border-color: #08d58f;
}


Expand Down Expand Up @@ -2072,10 +2078,7 @@ slider .item-container > .square-panel {
.artist-page .info-panel .thumbnail-wrapper .image {
width: 250px;
height: 250px;
background-image: url('../svg/no-image.svg');
background-color: #E9E9E9;
background-size: cover;
background-position: 50% 50%;
padding: 0;
position: absolute;
bottom: 0;
left: 0;
Expand Down Expand Up @@ -3394,6 +3397,30 @@ input[type="submit"]{
#player .slider.progress:hover .track {
height: 2px;
}


/**
* Dropzones
**/

#dropzones .dropzone > .liner {
padding-top: 19px;
padding-bottom: 19px;
font-size: 15px;
}
#dropzones .dropzone .label {
padding-top: 6px;
}
#dropzones .dropzone .menu-item {
font-size: 12px;
padding: 4px 12px;
}
#dropzones .dropzone.queue .dropzone.add-to-queue {
padding: 4px 20px 4px;
}
#dropzones .dropzone.queue .dropzone.add-to-queue-next {
padding: 4.5px 20px;
}

}

Expand Down Expand Up @@ -3682,7 +3709,7 @@ input[type="submit"]{
position: relative;
}

.thumbnail-wrapper.slim-intro-wrapper > .thumbnail {
.thumbnail-wrapper.slim-intro-wrapper .primary-thumbnail > .image {
opacity: 0.25;
padding-bottom: 0;
width: auto;
Expand All @@ -3704,7 +3731,7 @@ input[type="submit"]{
padding: 60px 20px 40px;
}

.thumbnail-wrapper.slim-intro-wrapper .slim-intro .thumbnail {
.thumbnail-wrapper.slim-intro-wrapper .slim-intro .image {
display: block;
width: 180px;
height: 180px;
Expand Down Expand Up @@ -3734,7 +3761,7 @@ input[type="submit"]{
margin-top: -20px;
}

.artist-page .info-panel .thumbnail {
.artist-page .info-panel .image {
display: none;
}

Expand Down
4 changes: 2 additions & 2 deletions mopidy_spotmop/static/assets/css/style.min.css
View file

Large diffs are not rendered by default.

2 changes: 1 addition & 1 deletion src/app/browse/album/controller.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -130,7 +130,7 @@ angular.module('spotmop.browse.album', [])

$scope.album = response;
$scope.album.totalTracks = response.tracks.total;
$scope.album.images = $filter('sizedImages')(response.images);
$scope.album.images = response.images;
$scope.tracklist = response.tracks;
$scope.tracklist.type = 'track';
$scope.tracklist.tracks = response.tracks.items;
Expand Down
23 changes: 10 additions & 13 deletions src/app/browse/album/template.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -3,24 +3,21 @@
<span class="menu-reveal-trigger" ng-click="showMenu()"><i class="fa fa-bars"></i></span>

<div class="asset-sidebar">

<div
class="thumbnail-wrapper album slim-intro-wrapper"
draggable="false"
candrag
dragobj="album">

<div class="thumbnail-wrapper slim-intro-wrapper">

<div class="thumbnail album" ng-if="album.images.medium" style="background-image: url({{ album.images.medium }});"></div>

<div class="thumbnail album placeholder" ng-if="!album.images || !album.images.medium "></div>
<div class="drag-wrapper primary-thumbnail" draggable="false" candrag dragobj="album">
<thumbnail size="medium" images="album.images"></thumbnail>
</div>

<div class="slim-intro mobile-show" ng-if="mediumScreen()">
<thumbnail size="medium" images="album.images"></thumbnail>
<h1 ng-bind="album.name"></h1>
<div class="slim-intro mobile-show" ng-if="mediumScreen()">
<thumbnail size="medium" images="album.images"></thumbnail>
<h1 ng-bind="album.name"></h1>
<h2 class="description">
<artistlist artists="album.artists" sentence></artistlist>
</h2>
</div>
</div>

</div>

<div class="clear-left"><!-- clear --></div>
Expand Down
Loading

0 comments on commit 49c437e

Please sign in to comment.