KevinMidboe/zoff
1
0
Fork 0
mirror of https://github.com/KevinMidboe/zoff.git synced 2025-10-29 18:00:23 +00:00
Code Issues Packages Projects Releases Wiki Activity

More material volumeslider, and new order of hiding for the the pagination-buttons

Browse Source
This commit is contained in:
Kasper Rynning-Tønnesen
2017-02-01 15:43:57 +01:00
parent 3dc7a89718
commit 01e1cefc70
4 changed files with 38 additions and 16 deletions
Download Patch File Download Diff File Expand all files Collapse all files

42
public/css/style.css
View File

@@ -32,6 +32,13 @@
cursor: pointer; cursor: pointer;
} }
#pageButtons{
display: flex;
align-items: center;
flex-shrink: initial;
justify-content: space-between;
}
#pageButtons, #pageButtons a{ #pageButtons, #pageButtons a{
color:white !important; color:white !important;
} }
@@ -1655,6 +1662,10 @@ nav ul li:hover, nav ul li.active {
padding-right:1%; padding-right:1%;
} }
#viewers .material-icons{
padding-right: 5px;
}
#play, #pause, #volume-button, #fullscreen #play, #pause, #volume-button, #fullscreen
{ {
font-size: 30px; font-size: 30px;
@@ -1689,16 +1700,27 @@ nav ul li:hover, nav ul li.active {
} }
#volume .ui-slider-handle { #volume .ui-slider-handle {
height:15px; height: 15px;
width:5px; width: 15px;
background:#fff 50% 50% repeat-x; background: #fff 50% 50% repeat-x;
position: absolute; position: absolute;
cursor: pointer; cursor: pointer;
outline: none; outline: none;
border: none; border: none;
/*display: none;*/ margin-left: -7.5px;
margin-left:-2.5px; margin-top: 0px;
margin-top:0px; border-radius: 1000px;
border: 1px solid black;
transition: background 0.2s ease, box-shadow 0.2s ease;
}
#volume .ui-state-active {
box-shadow: 0 1px 3px 1px rgba(0, 0, 0, 0.01), 0 0 0 7px rgba(255,255,255,0.3);
position: absolute;
width: 14px;
height: 14px;
border-radius: 21px;
background: #dadada;
} }
.ui-slider-handle .ui-slider-handle

4
public/dist/embed.min.js vendored
View File

File diff suppressed because one or more lines are too long

2
public/dist/main.min.js vendored
View File

File diff suppressed because one or more lines are too long

6
public/js/list.js
View File

@@ -124,7 +124,7 @@ var List = {
} }
}); });
if($("#wrapper").children().length > List.can_fit && !$("#pageButtons").length){ if($("#wrapper").children().length > List.can_fit && !$("#pageButtons").length){
$('<div id="pageButtons"><span class="first_page_hide btn-flat"><i class="material-icons">first_page</i></span><a class="first_page waves-effect waves-light btn-flat"><i class="material-icons">first_page</i></a><span class="prev_page_hide btn-flat"><i class="material-icons">navigate_before</i> prev</span><a class="prev_page waves-effect waves-light btn-flat"><i class="material-icons">navigate_before</i> prev</a> <span id="pageNumber">1</span> <a class="last_page waves-effect waves-light btn-flat"><i class="material-icons">last_page</i></a><span class="last_page_hide btn-flat"><i class="material-icons">last_page</i></span><a class="next_page waves-effect waves-light btn-flat">next <i class="material-icons">navigate_next</i></a><span class="next_page_hide btn-flat">next <i class="material-icons">navigate_next</i></span></div>').insertAfter("#wrapper"); $('<div id="pageButtons"><span class="first_page_hide btn-flat"><i class="material-icons">first_page</i></span><a class="first_page waves-effect waves-light btn-flat"><i class="material-icons">first_page</i></a> <a class="last_page waves-effect waves-light btn-flat"><i class="material-icons">last_page</i></a><span class="last_page_hide btn-flat"><i class="material-icons">last_page</i></span> <span id="pageNumber">1</span> <a class="next_page waves-effect waves-light btn-flat">next <i class="material-icons">navigate_next</i></a><span class="next_page_hide btn-flat">next <i class="material-icons">navigate_next</i></span><span class="prev_page_hide btn-flat"><i class="material-icons">navigate_before</i> prev</span><a class="prev_page waves-effect waves-light btn-flat"><i class="material-icons">navigate_before</i> prev</a></div>').insertAfter("#wrapper");
$(".prev_page").css("display", "none"); $(".prev_page").css("display", "none");
$(".first_page").css("display", "none"); $(".first_page").css("display", "none");
$(".next_page_hide").css("display","none"); $(".next_page_hide").css("display","none");
@@ -136,7 +136,7 @@ var List = {
$(".last_page").removeClass("hide"); $(".last_page").removeClass("hide");
}*/ }*/
} else if(!$("#pageButtons").length){ } else if(!$("#pageButtons").length){
$('<div id="pageButtons"><span class="first_page_hide btn-flat"><i class="material-icons">first_page</i></span><a class="first_page waves-effect waves-light btn-flat"><i class="material-icons">first_page</i></a><span class="prev_page_hide btn-flat"><i class="material-icons">navigate_before</i> prev</span><a class="prev_page waves-effect waves-light btn-flat"><i class="material-icons">navigate_before</i> prev</a> <span id="pageNumber">1</span> <a class="last_page waves-effect waves-light btn-flat"><i class="material-icons">last_page</i></a><span class="last_page_hide btn-flat"><i class="material-icons">last_page</i></span><a class="next_page waves-effect waves-light btn-flat">next <i class="material-icons">navigate_next</i></a><span class="next_page_hide btn-flat">next <i class="material-icons">navigate_next</i></span></div>').insertAfter("#wrapper"); $('<div id="pageButtons"><span class="first_page_hide btn-flat"><i class="material-icons">first_page</i></span><a class="first_page waves-effect waves-light btn-flat"><i class="material-icons">first_page</i></a> <a class="last_page waves-effect waves-light btn-flat"><i class="material-icons">last_page</i></a><span class="last_page_hide btn-flat"><i class="material-icons">last_page</i></span> <span id="pageNumber">1</span> <a class="next_page waves-effect waves-light btn-flat">next <i class="material-icons">navigate_next</i></a><span class="next_page_hide btn-flat">next <i class="material-icons">navigate_next</i></span><span class="prev_page_hide btn-flat"><i class="material-icons">navigate_before</i> prev</span><a class="prev_page waves-effect waves-light btn-flat"><i class="material-icons">navigate_before</i> prev</a></div>').insertAfter("#wrapper");
$(".prev_page").css("display", "none"); $(".prev_page").css("display", "none");
$(".next_page").css("display", "none"); $(".next_page").css("display", "none");
$(".last_page").css("display", "none"); $(".last_page").css("display", "none");
@@ -160,7 +160,7 @@ var List = {
List.empty = true; List.empty = true;
$("#wrapper").append("<span id='empty-channel-message'>The playlist is empty.</span>"); $("#wrapper").append("<span id='empty-channel-message'>The playlist is empty.</span>");
if(!$("#pageButtons").length){ if(!$("#pageButtons").length){
$('<div id="pageButtons"><span class="first_page_hide btn-flat"><i class="material-icons">first_page</i></span><a class="first_page waves-effect waves-light btn-flat"><i class="material-icons">first_page</i></a><span class="prev_page_hide btn-flat"><i class="material-icons">navigate_before</i> prev</span><a class="prev_page waves-effect waves-light btn-flat"><i class="material-icons">navigate_before</i> prev</a> <span id="pageNumber">1</span> <a class="last_page waves-effect waves-light btn-flat"><i class="material-icons">last_page</i></a><span class="last_page_hide btn-flat"><i class="material-icons">last_page</i></span><a class="next_page waves-effect waves-light btn-flat">next <i class="material-icons">navigate_next</i></a><span class="next_page_hide btn-flat">next <i class="material-icons">navigate_next</i></span></div>').insertAfter("#wrapper"); $('<div id="pageButtons"><span class="first_page_hide btn-flat"><i class="material-icons">first_page</i></span><a class="first_page waves-effect waves-light btn-flat"><i class="material-icons">first_page</i></a> <a class="last_page waves-effect waves-light btn-flat"><i class="material-icons">last_page</i></a><span class="last_page_hide btn-flat"><i class="material-icons">last_page</i></span> <span id="pageNumber">1</span> <a class="next_page waves-effect waves-light btn-flat">next <i class="material-icons">navigate_next</i></a><span class="next_page_hide btn-flat">next <i class="material-icons">navigate_next</i></span><span class="prev_page_hide btn-flat"><i class="material-icons">navigate_before</i> prev</span><a class="prev_page waves-effect waves-light btn-flat"><i class="material-icons">navigate_before</i> prev</a></div>').insertAfter("#wrapper");
} }
$(".prev_page").css("display", "none"); $(".prev_page").css("display", "none");
$(".next_page").css("display", "none"); $(".next_page").css("display", "none");