Merge branch 'meteor-client-new-ui' of https://github.com/gthacoder/bigbluebutton into meteor-ui

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

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

@@ -8,15 +8,16 @@
 }
 
 #chat {
+  @media @landscape {
     -webkit-flex: 3 3 30%;
     -moz-flex: 3 3 30%;
     -ms-flex: 3 3 30%;
     flex: 3 3 30%;
     height: 100%;
+  }
   margin-left: 2px;
   margin-right: 2px;
   margin-top: 5px;
-  height: 100%;
 }
 
 .chat {

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

@@ -31,7 +31,6 @@ body {
   background: extract(@white, 1);
   border: 1px solid extract(@lightGrey, 3);
   float: left;
-  height: 100%;
 }
 
 .extraConversationScrollableMenu {
@@ -243,6 +242,7 @@ body {
 }
 
 #container {
+  @media @landscape {
     display: -moz-flex;
     display: -ms-flexbox;
     display: -ms-flex;
@@ -250,6 +250,7 @@ body {
     display: flex;
     -webkit-flex-flow: row;
     flex-flow: row;
+  }
   width: 100%;
   height: 100%;
 }
@@ -591,11 +592,16 @@ body {
 }
 
 #main {
+  @media @landscape {
     -webkit-flex: 4 4 80%;
     -moz-flex: 4 4 80%;
     -ms-flex: 4 4 80%;
     flex: 4 4 80%;
     height: 99%;
+  }
+  @media @mobile-portrait-with-keyboard, @desktop-portrait, @mobile-portrait {
+  height: 100%;
+  }
 }
 
 #panels {
@@ -604,8 +610,14 @@ body {
   display: -ms-flex;
   display: -webkit-flex;
   display: flex;
+  @media @landscape {
     -webkit-flex-flow: row;
     flex-flow: row;
+  }
+  @media @mobile-portrait-with-keyboard, @desktop-portrait, @mobile-portrait {
+    -webkit-flex-flow: column;
+    flex-flow: column;
+  }
   width: 100%;
   height: calc(~'100% - 55px');
   margin-bottom: 1%;

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

@@ -1,11 +1,13 @@
 @import "variables";
 
 #whiteboard {
+  @media @landscape {
     -webkit-flex: 7 7 70%;
     -moz-flex: 7 7 70%;
     -ms-flex: 7 7 70%;
     flex: 7 7 70%;
     height: 100%;
+  }
   margin-left: 4px;
   margin-right: 2px;
   margin-top: 5px;