Commit 60cb961c authored by Gautam Chitnis's avatar Gautam Chitnis

Fix (mobile view): Fixed the playlist open/close operation.

This commit allows the user to expand and shrink the playlist properly.
Previously it would only let the user expand the playlist.

Gautam C.
parent d41f96cb
......@@ -2,16 +2,17 @@
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="initial-scale=1">
<title>VLC media player - Web Interface</title>
<link rel="stylesheet" href="css/plyr-custom.css">
<link rel="stylesheet" href="bootstrap/bootstrap.min.css">
<link rel="stylesheet" href="css/style.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.12.1/jquery.min.js"></script>
<script src='js/vue.js'></script>
<script src="js/plyr.js"></script>
<script src='js/vue.methods.js'></script>
<script src="js/plyr.methods.js"></script>
<script src="js/script.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.12.1/jquery.min.js"></script>
<script src="js/jstree.min.js"></script>
<link rel="stylesheet" href="css/jstree-theme.css" />
<script src="bootstrap/bootstrap.min.js"></script>
......@@ -26,7 +27,7 @@
});
</script>
<div id="sideNav" class="sideNav">
<a href="javascript:void(0)" class="closebtn" onclick="closeNav()">Menu<span class="closespn">&times;</span></a>
<a href="javascript:void(0)" class="closebtn" onclick="closeNav()">Menu</span></a>
<a href="#" data-toggle="modal" data-target="#fileModal" onclick="">Open File</a>
<!--<input type="file" id="videoInput"/>-->
<a href="#">Local Network</a>
......@@ -37,21 +38,15 @@
</div>
<!-- Use any element to open the sidenav -->
<span onclick="openNav()" style="color: orange;"><i class="glyphicon glyphicon-menu-hamburger"></i></span>
<span id= "menuHam" onclick="openNav()" style="color: orange;"><i class="glyphicon glyphicon-menu-hamburger"></i></span>
<div id="videoPlayer" class="">
<!-- Video -->
<video></video>
</div>
<script>
$(function(){
$("#videoPlayer").click(function(){
if($(window).width() <= 480){
$("playlistNav").css("width","0%");
}
});
});
<script type="text/javascript">
</script>
<div id="playlistNav" class="playlistNav">
......@@ -90,7 +85,7 @@
</div>
<div id="playlistNavMobile" class="playlistNavMobile" onclick="openPlaylist()">
Playlist
P<br>l<br>a<br>y<br>l<br>i<br>s<br>t
</div>
<!-- Modal -->
......
......@@ -16,6 +16,7 @@ function plyrInit()
});
player[0].on('loadstart', function(event) {
sendCommand(0,"command=pl_play&id="+id);
});
}
......
......@@ -4,21 +4,43 @@ var fileInput;
var jsonData;
var data;
window.onload = function() {
$(function() { // Handler for .ready() called.
plyrInit();
vueInit();
playlistInit();
}
$(document).click(function(e){
var container = $("#playlistNav");
if($(window).width() <= 480 && !container.is(e.target) && container.has(e.target).length === 0 && container.css("width") != "0px"){
closePlaylist();
}
});
});
function openNav() {
document.getElementById("sideNav").style.width = "20%";
if(screen.width <= 480){
document.getElementById("sideNav").style.width = "60%";
}
else
{
document.getElementById("sideNav").style.width = "20%";
}
}
function openNavMobile() {
document.getElementById("sideNav").style.width = "60%";
}
function openPlaylist() {
document.getElementById("playlistNav").style.width = "20%";
document.getElementById("playlistNav").style.width = "60%";
document.getElementById("playlistNavMobile").style.width = "0%";
}
function closePlaylist() {
document.getElementById("playlistNav").style.width = "0%";
document.getElementById("playlistNavMobile").style.width = "10%";
}
function closeNav() {
document.getElementById("sideNav").style.width = "0";
}
......
......@@ -113,7 +113,6 @@ body {
height: 100%;
}
.btn-circle {
width: 30px;
height: 30px;
......@@ -161,4 +160,16 @@ body {
body {
height: auto;
}
#playlist {
width: 95%;
height: 90%;
}
#videoPlayer {
padding-right: 12%;
padding-left: 2%;
top: initial;
left: initial;
margin:0 auto;
width:100%;
}
}
\ No newline at end of file
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