Commit 2bca3583 authored by Simon Daron's avatar Simon Daron

Debug chromium & larger button for player play (mobile)

parent d35cd5b0
......@@ -155,7 +155,7 @@ dl.metadata dd {
}
button {display:inline-block;}
nav button {
button {
font-family: "RegloBold";
text-transform: uppercase;
}
......@@ -267,13 +267,6 @@ img.right, img.left{max-width:50%;}
.relative{
position:relative;
}
.spinning {
position:relative;
-webkit-animation: rotation 10s infinite linear;
-moz-animation: rotation 10s infinite linear;
-o-animation: rotation 10s infinite linear;
animation: rotation 10s infinite linear;
}
.nowrap {
white-space: nowrap;
}
......@@ -293,6 +286,13 @@ img.right, img.left{max-width:50%;}
@-o-keyframes loading {0%{opacity:1 !important;}50%{opacity:0 !important;}100%{opacity:1 !important;}}
@keyframes loading {0%{opacity:1 !important;}50%{opacity:0 !important;}100%{opacity:1 !important;}}
.spinning {
position:relative;
-webkit-animation: rotation 10s infinite linear;
-moz-animation: rotation 10s infinite linear;
-o-animation: rotation 10s infinite linear;
animation: rotation 10s infinite linear;
}
@-webkit-keyframes rotation {
from {-webkit-transform: rotate(0deg);}
to {-webkit-transform: rotate(359deg);}
......
......@@ -200,7 +200,6 @@ body{
#metaNav ul{
}
#metaNav li{
height: 2em;
border-left:1px solid #333;
border-right:1px solid #333;
}
......@@ -210,12 +209,17 @@ body{
overflow:hidden;
}
#metaNav ul li a{
padding:0.2em;
display:inline-block !important;
height: 2em;
display:block !important;
color:white;
}
#metaNav .active{
background:#003446;
#metaNav ul li a span{
padding:0.5em 0;
display:inline-block;
}
#metaNav .active, #metaNav a:focus, #metaNav a:hover{
background:#003446 !important;
font-weight:normal;
}
@media screen and (max-width:500px){
#metaNav .iconLabel {display:none;}
......@@ -342,6 +346,7 @@ background-color:#ff6633; border-color:#fff;}
padding:0 0 0 0;
}
#DirectStreamPanikControler .label{
font-size:1.5em !important;
padding-top:10px;
}
#player-container.fixed{
......@@ -382,9 +387,14 @@ background-color:#ff6633; border-color:#fff;}
#Playlist .playListControls{
}
#Playlist .playListControls button{
margin-right:0.2em;
margin-right:0.5em;
display:inline-block;
}
#Playlist .playListControls .playPause{
font-size:50px;
float:left;
}
#Playlist .playing .icon-pause{
-webkit-animation: loading 1s infinite linear;
-moz-animation: loading 1s infinite linear;
......@@ -400,10 +410,9 @@ background-color:#ff6633; border-color:#fff;}
#Playlist .soundControls button{}
#player-container #Playlist ol{
margin-left:60px;
clear:right;
padding:0 0 0 1.5em;
}
#player-container #Playlist ol{
margin-top:0.5em;
height:1.3em;
overflow:hidden;
......
......@@ -14,7 +14,7 @@
*/
options: {
playlist: [],
html5audioOptions:{controls:true,preload:"none"},
html5audioOptions:{controls:true},
classes: "",
itemClasses: "",
controlContainer: $('<div>'),
......@@ -175,20 +175,22 @@
// Build controls
buildPlaylistControls: function() {
this.controls = $('<div>',{class:'playlistControls controls'});
this.registerControl('toggleList',{class:"icon-list hidden",click: function(){
/*
this.registerControl('toggleList',{class:"icon-list",click: function(){
thePlaylist.playlistContainer.toggle();
}});
this.registerControl('clearList',{class:"icon-trash",click: function(){
thePlaylist.playlistContainer.empty();
thePlaylist._update();
}});
*/
this.registerControl('previous',{class:"icon-step-backward",click:function(){
thePlaylist.playPrevious();
}});
this.registerControl('stop',{class:"icon-stop",click: function(){
thePlaylist.stopSounds();
}});
this.registerControl('playpause',{class:"icon-play",click: function(){
this.registerControl('playpause',{class:"icon-play playPause",click: function(){
thePlaylist.playPauseList();
}});
this.registerControl('next',{class:"icon-step-forward",click: function(){
......
......@@ -72,7 +72,7 @@ $(function() {
this.each(function() {
$(this).unbind('click');
$(this).bind('click',function(){
$(this).addClass('loading');
$(this).addClass('loading active');
var href = $(this).attr("href");
/* this checks the link points to a local document, be
* it because it's just a path, or because the server
......@@ -176,19 +176,22 @@ $(function() {
controlContainer: $('<div>',{class:"playListControls label"}).sortable(),
playlistContainer: $('<ol>',{id:"myPlaylist",class:"custom"}).sortable(),
onLoad:function(self){
$('#playlistLabel').on('click',function(){
$('#toggleList').on('click',function(){
self.playlistContainer.toggleClass('deploy');
});
if(self.isActive){self.playlistContainer.scrollTo(self.isActive, 800 );}
$('#emptyList').on('click',function(){
self.playlistContainer.empty();
self._update();
});
if(self.isActive){
self.playlistContainer.scrollTo(self.isActive, 800 );
self.isActive.find('audio').attr('preload',"preload")
}
},
onPlay:function(self){
$('#DirectStreamPanik')[0].pause();
self.playlistContainer.scrollTo(self.isActive, 800 );
/*self.isPlaying[0].scrollIntoView();
var posScroll = self.playlistContainer.scrollTop() + self.isPlaying.position().top - self.playlistContainer.height()/2 + self.isPlaying.height()/2;
self.playlistContainer.animate({
scrollTop:posScroll
}, 'slow'); */
},
onAdd:function(self){
//self.isLastAdd[0].scrollIntoView();
......@@ -239,7 +242,7 @@ $(function() {
if($(this).attr('data-player-action') == "registerAudio"){
$localList.playlist("registerAudio",audio,doLog(audio.attr('title')+' has been added to your playlist.','ok'));
}else if($(this).attr('data-player-action') == "playAudio"){
$localList.playlist("registerAudio",audio,doLog(audio.attr('title')+' has been added to your playlist.','ok'));
$localList.playlist("registerAudio",audio,doLog(audio.attr('title')+' has been added to your playlist.','ok'));alert('yes');
$localList.playlist("playLast");
}else{
$localList.playlist($(this).attr('data-player-action'));
......
......@@ -34,7 +34,12 @@
</div>
<div id="Playlist" class="sub cf">
<div id="localList" class="padded">
<div id="playlistLabel" class="label button">Playlist&nbsp;<span class="icon-list" title="Show/Hide playlist"></span></div>
<div id="playlistLabel" class="label"
>
<button title="Empty playlist" id="emptyList" class="icon-trash button" style="float:right;"></button>
<button title="Show/Hide playlist" id="toggleList" class="button" ><span class="icon-list"></span>&nbsp;Playlist</button>
</div>
</div>
</div>
</div>
......
Markdown is supported
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment