Basic dropdown menu

5 files changed, 110 insertions, 53 deletions

diff --git a/res/client.js b/res/client.js
index 37f4207..c197ff2 100644
--- a/res/client.js
+++ b/res/client.js
@@ -549,21 +549,33 @@ client_Buttons.onVideoResize = function() {
 	window.document.querySelector("#messagebuffer").style.height = "" + height + "px";
 	window.document.querySelector("#userlist").style.height = "" + height + "px";
 };
+client_Buttons.onClick = function(el,func) {
+	var isTouch = 'ontouchstart' in window;
+	if(!isTouch) {
+		el.onclick = func;
+	} else {
+		el.ontouchend = func;
+	}
+};
 client_Buttons.initNavBar = function(main) {
+	var onclick = function(e) {
+		return window.document.querySelector("#nav-collapsible").classList.toggle("in");
+	};
+	client_Buttons.onClick(window.document.querySelector("#toggleMenu"),onclick);
 	var classes = window.document.querySelectorAll(".dropdown-toggle");
 	var _g = 0;
 	while(_g < classes.length) {
 		var klass = [classes[_g]];
 		++_g;
 		klass[0].onclick = (function(klass1) {
-			return function(e) {
-				klass1[0].classList.toggle("focus");
+			return function(e1) {
+				var isActive = klass1[0].classList.toggle("focus");
 				client_Buttons.hideMenus();
 				var menu = klass1[0].parentElement.querySelector(".dropdown-menu");
-				if(menu.style.display == "") {
+				if(isActive) {
 					return menu.style.display = "block";
 				} else {
-					return menu.style.display = "";
+					return menu.style.display = "none";
 				}
 			};
 		})(klass);
@@ -575,7 +587,7 @@ client_Buttons.initNavBar = function(main) {
 		var klass2 = [classes1[_g1]];
 		++_g1;
 		klass2[0].onmouseleave = (function(klass3) {
-			return function(e1) {
+			return function(e2) {
 				var toggle = klass3[0].querySelector(".dropdown-toggle");
 				toggle.classList.remove("focus");
 				toggle.blur();
@@ -584,7 +596,7 @@ client_Buttons.initNavBar = function(main) {
 		})(klass2);
 	}
 	var exitBtn = window.document.querySelector("#exitBtn");
-	exitBtn.onclick = function(e2) {
+	exitBtn.onclick = function(e3) {
 		if((main.personal.group & 1) != 0) {
 			main.send({ type : "Logout"});
 		} else {
@@ -595,7 +607,7 @@ client_Buttons.initNavBar = function(main) {
 		return;
 	};
 	var synchThresholdBtn = window.document.querySelector("#synchThresholdBtn");
-	synchThresholdBtn.onclick = function(e3) {
+	synchThresholdBtn.onclick = function(e4) {
 		var secs = main.synchThreshold + 1;
 		if(secs > 5) {
 			secs = 1;
@@ -607,7 +619,7 @@ client_Buttons.initNavBar = function(main) {
 	};
 	synchThresholdBtn.innerText += ": " + main.synchThreshold + "s";
 	var swapLayoutBtn = window.document.querySelector("#swapLayoutBtn");
-	swapLayoutBtn.onclick = function(e4) {
+	swapLayoutBtn.onclick = function(e5) {
 		var p = window.document.querySelector("#main");
 		p.insertBefore(p.children[2],p.children[0]);
 		p.insertBefore(p.children[2],p.children[1]);
@@ -621,7 +633,7 @@ client_Buttons.initNavBar = function(main) {
 		return;
 	};
 	var removeBtn = window.document.querySelector("#removeVideoBtn");
-	removeBtn.onclick = function(e5) {
+	removeBtn.onclick = function(e6) {
 		if(main.toggleVideoElement()) {
 			removeBtn.innerText = Lang.get("removeVideo");
 		} else {
diff --git a/res/css/des.css b/res/css/des.css
index b04528f..45cd8d5 100644
--- a/res/css/des.css
+++ b/res/css/des.css
@@ -487,39 +487,39 @@ textarea.form-control {
   margin-top:4px \9
 }
 @media (min-width:768px) {
-.form-inline .form-group {
-display:inline-block;
-margin-bottom:0;
-vertical-align:middle
-}
-.form-inline .form-control {
-display:inline-block;
-width:auto;
-vertical-align:middle
-}
-.form-inline .input-group {
-display:inline-table;
-vertical-align:middle
-}
-.form-inline .input-group .input-group-btn, .form-inline .input-group .form-control {
-width:auto
-}
-.form-inline .input-group>.form-control {
-width:100%
-}
-.form-inline .checkbox {
-display:inline-block;
-margin-top:0;
-margin-bottom:0;
-vertical-align:middle
-}
-.form-inline .checkbox label {
-padding-left:0
-}
-.form-inline .checkbox input[type="checkbox"] {
-position:relative;
-margin-left:0
-}
+  .form-inline .form-group {
+  display:inline-block;
+  margin-bottom:0;
+  vertical-align:middle
+  }
+  .form-inline .form-control {
+  display:inline-block;
+  width:auto;
+  vertical-align:middle
+  }
+  .form-inline .input-group {
+  display:inline-table;
+  vertical-align:middle
+  }
+  .form-inline .input-group .input-group-btn, .form-inline .input-group .form-control {
+  width:auto
+  }
+  .form-inline .input-group>.form-control {
+  width:100%
+  }
+  .form-inline .checkbox {
+  display:inline-block;
+  margin-top:0;
+  margin-bottom:0;
+  vertical-align:middle
+  }
+  .form-inline .checkbox label {
+  padding-left:0
+  }
+  .form-inline .checkbox input[type="checkbox"] {
+  position:relative;
+  margin-left:0
+  }
 }
 .form-horizontal .checkbox {
   margin-top:0;
@@ -534,11 +534,11 @@ margin-left:0
   margin-right:-15px
 }
 @media (min-width:768px) {
-.form-horizontal .control-label {
-text-align:right;
-margin-bottom:0;
-padding-top:9px
-}
+  .form-horizontal .control-label {
+  text-align:right;
+  margin-bottom:0;
+  padding-top:9px
+  }
 }
 .btn {
   display:inline-block;
@@ -669,7 +669,12 @@ padding-top:9px
   display:none;
   visibility:hidden
 }
+.collapse.in {
+  display: block;
+  visibility: visible;
+}
 .caret {
+  pointer-events: none;
   display:inline-block;
   width:0;
   height:0;
@@ -936,6 +941,28 @@ border-top-left-radius:0
   padding-bottom:10px;
   line-height:20px
 }
+.navbar-toggle {
+  display: block;
+  position: relative;
+  float: left;
+  padding: 0;
+  margin-left: 5px;
+  margin-top: 3px;
+  background-color: transparent;
+  background-image: none;
+  border: 1px solid transparent;
+  border-radius: 0px;
+}
+.navbar-inverse .navbar-toggle .icon-bar {
+  background-color: #c8c8c8;
+}
+.navbar-toggle .icon-bar {
+  display: block;
+  width: 22px;
+  height: 2px;
+  border-radius: 1px;
+  margin-top: 4px;
+}
 @media (min-width:768px) {
   .navbar-nav {
   float:left;
@@ -948,6 +975,9 @@ border-top-left-radius:0
   padding-top:15px;
   padding-bottom:15px
   }
+  .navbar-toggle {
+    display: none;
+  }
 }
 .navbar-nav>li>.dropdown-menu {
   margin-top:0;
diff --git a/res/css/mobile-view.css b/res/css/mobile-view.css
index 596dcde..5560818 100644
--- a/res/css/mobile-view.css
+++ b/res/css/mobile-view.css
@@ -55,9 +55,8 @@
 	margin-bottom: 0;
 }
 
-@media (max-width:799px)  {
+@media (max-width:767px)  {
 	.navbar {
-		/* display: none; */
 		border-color: #272b30 !important;
 		background: rgb(39, 43, 48) !important;
 		margin-bottom: 0;
diff --git a/res/index.html b/res/index.html
index 773dca6..7fef888 100644
--- a/res/index.html
+++ b/res/index.html
@@ -25,6 +25,11 @@
       <nav class="navbar navbar-inverse" role="navigation">
         <div class="navbar-header">
           <a class="navbar-brand" href="#">SyncTube</a>
+          <button id="toggleMenu" class="navbar-toggle collapsed" type="button" aria-expanded="false">
+            <span class="icon-bar"></span>
+            <span class="icon-bar"></span>
+            <span class="icon-bar"></span>
+          </button>
         </div>
         <div class="collapse navbar-collapse" id="nav-collapsible">
           <ul class="nav navbar-nav">
diff --git a/src/client/Buttons.hx b/src/client/Buttons.hx
index d566d68..31f1e86 100644
--- a/src/client/Buttons.hx
+++ b/src/client/Buttons.hx
@@ -168,15 +168,27 @@ class Buttons {
 		ge("#userlist").style.height = '${height}px';
 	}
 
+	static function onClick(el:Element, func:Any->Void):Void {
+		final isTouch = untyped __js__("'ontouchstart' in window");
+		if (!isTouch) el.onclick = func;
+		else el.ontouchend = func;
+	}
+
 	static function initNavBar(main:Main):Void {
+		final toggleMenu = ge("#toggleMenu");
+		final onclick = e -> {
+			ge("#nav-collapsible").classList.toggle("in");
+		}
+		onClick(toggleMenu, onclick);
+
 		final classes:Array<Element> = cast document.querySelectorAll(".dropdown-toggle");
 		for (klass in classes) {
 			klass.onclick = e -> {
-				klass.classList.toggle("focus");
+				final isActive = klass.classList.toggle("focus");
 				hideMenus();
 				final menu = klass.parentElement.querySelector(".dropdown-menu");
-				if (menu.style.display == "") menu.style.display = "block";
-				else menu.style.display = "";
+				if (isActive) menu.style.display = "block";
+				else menu.style.display = "none";
 			}
 			klass.onmouseover = klass.onclick;
 		}
@@ -206,7 +218,6 @@ class Buttons {
 			updateSynchThresholdBtn(main);
 			synchThresholdBtn.blur();
 		}
-		final text = synchThresholdBtn.innerText;
 		final secs = main.synchThreshold;
 		synchThresholdBtn.innerText += ': ${secs}s';