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

using transform instead of position for moving the videoplayer around2

Browse Source
This commit is contained in:
Kasper Rynning-Tønnesen
2017-04-29 12:33:10 +02:00
parent d503d3a41b
commit 0236493e53
4 changed files with 27 additions and 11 deletions
Download Patch File Download Diff File Expand all files Collapse all files

24
public/css/style.css
View File

@@ -325,8 +325,10 @@
} }
#player_bottom_overlay{ #player_bottom_overlay{
z-index: 100; z-index: 999999999999;
cursor: pointer; cursor: pointer;
top: 0px;
left: 0px;
} }
.frontpage_modified_heights{ .frontpage_modified_heights{
@@ -336,9 +338,11 @@
.player_bottom{ .player_bottom{
position: fixed !important; position: fixed !important;
left: calc(100vw - 270px) !important; transform: translate(calc(100vw - 260px), calc(100vh - 210px)) !important;
top: calc(100vh - 210px) !important; /* left: calc(100vw - 270px) !important; */
/* top: calc(100vh - 210px) !important; */
/* bottom: 10px; */ /* bottom: 10px; */
/* top: 0px; */
width: 250px !important; width: 250px !important;
height: 200px !important; height: 200px !important;
/* right: 10px; */ /* right: 10px; */
@@ -1413,6 +1417,7 @@ ul #chat-log{
#playlist{ #playlist{
/*padding:0px 15px;*/ /*padding:0px 15px;*/
flex:1; flex:1;
z-index: 9;
position: relative; position: relative;
height: calc(100vh - 64px) !important; height: calc(100vh - 64px) !important;
/*background-color:rgba(0,0,0,0.2);*/ /*background-color:rgba(0,0,0,0.2);*/
@@ -1458,7 +1463,12 @@ ul #chat-log{
height:95%; height:95%;
height: calc(100% - 32px); height: calc(100% - 32px);
position: relative; position: relative;
-webkit-transition: all 1s ease-out; transform: translate(0%, 0%);
z-index: 99;
-webkit-transition: transform .5s ease-out;
transition: transform .5s ease-out;
-moz-transition: transform .5s ease-out;
-o-transition: transform .5s ease-out;
} }
#fireplace_player{ #fireplace_player{
@@ -1974,6 +1984,12 @@ nav ul li:hover, nav ul li.active {
cursor: ew-resize; cursor: ew-resize;
} }
#main_components {
position: absolute;
/* top: 96.3%; */
width: calc(100% - .75em);
}
/*************************************************************************** /***************************************************************************
**************************************************************************** ****************************************************************************
********************* Screen size specific rules *************************** ********************* Screen size specific rules ***************************

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

File diff suppressed because one or more lines are too long

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

File diff suppressed because one or more lines are too long

6
public/js/listeners.js
View File

@@ -627,8 +627,8 @@ function change_offline(enabled, already_offline){
}); });
$("#controls").on("mousemove", seekToMove); $("#controls").on("mousemove", seekToMove);
$("#controls").on("click", seekToClick); $("#controls").on("click", seekToClick);
$("body").append("<div id='seekToDuration' class='hide'>00:00/01:00</div>"); $("#main_components").append("<div id='seekToDuration' class='hide'>00:00/01:00</div>");
$("#seekToDuration").css("top", $("#controls").position().top + 10); $("#seekToDuration").css("top", $("#controls").position().top - 55);
if(!$("#controls").hasClass("ewresize")) $("#controls").addClass("ewresize"); if(!$("#controls").hasClass("ewresize")) $("#controls").addClass("ewresize");
} else { } else {
$("#controls").off("mouseenter"); $("#controls").off("mouseenter");
@@ -1344,7 +1344,7 @@ $(window).resize(function(){
$(".list-song").css("height", List.element_height + "px"); $(".list-song").css("height", List.element_height + "px");
$("#player_overlay").width($("#player").width()+1); $("#player_overlay").width($("#player").width()+1);
set_title_width(); set_title_width();
$("#seekToDuration").css("top", $("#controls").position().top + 10); if($("#controls").length > 0) $("#seekToDuration").css("top", $("#controls").position().top - 55);
} }
}) })