Added the left-hand sliding menu in portrait mode.

bigbluebutton-html5/app/client/globals.coffee

@@ -262,6 +262,26 @@ Handlebars.registerHelper "visibility", (section) ->
     setInSession "display_usersList", !getInSession "display_usersList"
   setTimeout(redrawWhiteboard, 0)
 
+@toggleLeftHandSlidingMenu = ->
+  if $('#container').css('position') is 'fixed'
+    $('#container').animate
+      left: '0'
+    , 500, () ->
+      $('#container').css('position', '')
+      $('#container').css('left', 0)
+    $('#background-menus').animate
+      left: '-250px'
+    , 500
+  else
+    $('#container').css('left', '0')
+    $('#container').css('position', 'fixed')
+    $('#container').animate
+      left: '500px'
+    , 500
+    $('#background-menus').animate
+      left: '0'
+    , 500
+
 # Periodically check the status of the WebRTC call, when a call has been established attempt to hangup,
 # retry if a call is in progress, send the leave voice conference message to BBB
 @exitVoiceCall = (event) ->
@@ -408,6 +428,9 @@ Handlebars.registerHelper "visibility", (section) ->
   navigator.userAgent.match(/BlackBerry/i) or
   navigator.userAgent.match(/webOS/i)
 
+@isLandscape = ->
+  window.matchMedia('(orientation: landscape)').matches
+
 # Checks if the view is portrait and a mobile device is being used
 @isPortraitMobile = () ->
  isMobile() and

bigbluebutton-html5/app/client/main.coffee

@@ -114,7 +114,7 @@ Meteor.startup ->
       amplify.store key, value
       return
   )
-
+
 Template.header.events
   "click .joinAudioButton": (event) ->
     onAudioJoinHelper()
@@ -189,7 +189,10 @@ Template.header.events
     $("#navbarMinimizedButton").addClass("navbarMinimizedButtonLarge")
 
   "click .toggleUserlist": (event) ->
-    toggleUsersList()
+    if isLandscape()
+      toggleUsersList()
+    else
+      toggleLeftHandSlidingMenu()
 
 Template.slidingMenu.events
   'click .joinAudioButton': (event) ->

bigbluebutton-html5/app/client/main.html

@@ -1,4 +1,4 @@
-<template name="header">
+<template name="header">
   <nav id="navbar" class="myNavbar gradientBar top-bar" role="navigation">
     {{#if getInSession "display_usersList"}}
       {{> makeButton btn_class="toggleUserlist navbarButton" i_class="ion-navicon-round" rel="tooltip" data_placement="bottom" title="Close Userlist"}}
@@ -19,6 +19,9 @@
 </template>
 
 <template name="main">
+  <div id="background-menus">
+    {{> usersList id="users-left" name="usersList"}}
+  </div>
   <div id="container">
     {{#if isDisconnected}}
       {{>status}}

bigbluebutton-html5/app/client/stylesheets/style.less

@@ -238,6 +238,7 @@ body {
   }
   @media @mobile-portrait, @mobile-portrait-with-keyboard {
     font-size: 4vw;
+    height: 110px;
   }
 }
 
@@ -253,6 +254,7 @@ body {
   }
   width: 100%;
   height: 100%;
+  background-color: extract(@white, 3);
 }
 
 .ui-widget-overlay {
@@ -627,3 +629,13 @@ body {
   height: 28px;
   width: 87px;
 }
+
+#background-menus {
+  position: fixed;
+  top: 0;
+  left: -250px;
+  width: calc(~'100% + 500px');
+  height: 100%;
+  background-color: #484c55;
+  z-index: -1000;
+}

bigbluebutton-html5/app/client/stylesheets/users.less

@@ -66,6 +66,11 @@
   }
 }
 
+#users-left {
+  width: 500px;
+  height: 100%;
+}
+
 #user-contents {
   height: 83vh; /* for the inside scrolling list to utilize as much room as possible, this surrounding window must also take up as much room as possible */