From 88fb41263e4e10fd712452a19845937a5cd13abc Mon Sep 17 00:00:00 2001
From: Maxim Khlobystov <maxim.khlobystov@gmail.com>
Date: Thu, 20 Aug 2015 15:45:26 -0400
Subject: [PATCH] Modified the UI styling to start using CSS pixels + separated
 phone, tablet and desktop views.

---
 bigbluebutton-html5/app/client/main.coffee    |   4 +
 bigbluebutton-html5/app/client/main.html      |   4 +
 .../app/client/stylesheets/chat.less          |  37 +++--
 .../app/client/stylesheets/style.less         | 148 ++++++++++++------
 .../app/client/stylesheets/users.less         |   8 +-
 .../app/client/stylesheets/whiteboard.less    |  89 +++++++++--
 6 files changed, 213 insertions(+), 77 deletions(-)
diff --git a/bigbluebutton-html5/app/client/main.coffee b/bigbluebutton-html5/app/client/main.coffee
index daa4411887..7cb55dd826 100755
--- a/bigbluebutton-html5/app/client/main.coffee
+++ b/bigbluebutton-html5/app/client/main.coffee
@@ -73,11 +73,15 @@ Template.header.events
     toggleRightDrawer()
     toggleRightArrowClockwise()
 
+  "click .btn": (event) ->
+    $(".ui-tooltip").hide()
+
 Template.menu.events
   'click .slideButton': (event) ->
     toggleShield()
     toggleRightDrawer()
     toggleRightArrowClockwise()
+    $('.slideButton').blur()
 
   'click .toggleChatButton': (event) ->
     toggleChatbar()
diff --git a/bigbluebutton-html5/app/client/main.html b/bigbluebutton-html5/app/client/main.html
index 80b3af3348..8f1b3895de 100755
--- a/bigbluebutton-html5/app/client/main.html
+++ b/bigbluebutton-html5/app/client/main.html
@@ -41,6 +41,10 @@
   </nav>
 </template>
 
+<head>
+  <meta name="viewport" content="width=device-width, initial-scale=1.0">
+</head>
+
 <template name="main">
   <div id="container" class="{{containerPosition}}">
     {{#if isDisconnected}}
diff --git a/bigbluebutton-html5/app/client/stylesheets/chat.less b/bigbluebutton-html5/app/client/stylesheets/chat.less
index 3169ef440d..374cbf786e 100755
--- a/bigbluebutton-html5/app/client/stylesheets/chat.less
+++ b/bigbluebutton-html5/app/client/stylesheets/chat.less
@@ -202,7 +202,7 @@
 }
 
 #sendMessageButton {
-  width: 20%; /* 75% for the message input, 5% margin between the two */
+  width: 25%;
   color: extract(@black, 1);
   background-color: #3896D3;
   font-weight: bold;
@@ -210,25 +210,29 @@
   margin: 0px;
   border: 1px solid extract(@lightGrey, 3);
   @media @desktop-portrait {
-    width: 20%; /* 75% for the message input, 5% margin between the two */
     font-size: 30px;
-    height: 60px;
     &:hover {
       background: #3A82D4;
     }
+    padding-left: 7%;
   }
-  @media @mobile-portrait {
-    width: 15vw;
-    height: 8vw;
-    font-size: 4vw;
+  @media @phone-portrait {
+    font-size: 20px;
+    padding-left: 5%;
   }
-  @media @mobile-portrait-with-keyboard {
-    width: 19vw;
-    height: 21vh;
-    font-size: 3vh;
+  @media @tablet-portrait {
+    font-size: 25px;
+    padding-left: 7%;
+  }
+  @media @phone-portrait-with-keyboard {
+    font-size: 20px;
+    padding-left: 7%;
+  }
+  @media @tablet-portrait-with-keyboard {
+    font-size: 25px;
+    padding-left: 7%;
   }
   @media @landscape {
-    height: 50px;
     padding: 0px;
     position: absolute;
     bottom: 10px;
@@ -236,6 +240,15 @@
       background: #3A82D4;
     }
   }
+  @media @phone-landscape {
+    font-size: 14px;
+  }
+  @media @tablet-landscape {
+    font-size: 18px;
+  }
+  @media @desktop-landscape {
+    font-size: 15px;
+  }
 }
 
 .timestamp {
diff --git a/bigbluebutton-html5/app/client/stylesheets/style.less b/bigbluebutton-html5/app/client/stylesheets/style.less
index c78d525458..7a7df4ea34 100755
--- a/bigbluebutton-html5/app/client/stylesheets/style.less
+++ b/bigbluebutton-html5/app/client/stylesheets/style.less
@@ -9,10 +9,12 @@ body {
   right: 0;
   @media @landscape {
     height: 100%;
-    min-width: 768px;
     position: absolute;
     top: 0;
   }
+  @media @desktop-landscape {
+    min-width: 768px;
+  }
   @media @mobile-portrait-with-keyboard, @desktop-portrait, @mobile-portrait {
     position: relative;
     top: 0;
@@ -59,6 +61,21 @@ body {
       height:25%;
     }
   }
+
+  i {
+    @media @phone-landscape {
+      font-size: 29px;
+    }
+    @media @desktop-portrait, @desktop-landscape, @tablet-landscape {
+      font-size: 30px;
+    }
+    @media @phone-portrait-with-keyboard, @phone-portrait {
+      font-size: 35px;
+    }
+    @media @tablet-portrait-with-keyboard, @tablet-portrait {
+      font-size: 40px;
+    }
+  }
 }
 
 .myNavbar {
@@ -78,8 +95,8 @@ body {
       width: 51.2px;
     }
     @media @phone-landscape {
-      height: 67px;
-      width: 67px;
+      height: 47px;
+      width: 47px;
     }
     @media @desktop-landscape {
       height: 50px;
@@ -100,11 +117,16 @@ body {
       }
     }
     @media @mobile-portrait-with-keyboard, @mobile-portrait {
-      height: 100px !important;
-      width: 10%;
-      min-width: 60px;
       .linear-gradient(rgb(72,76,85), rgb(65,68,77));
     }
+    @media @phone-portrait-with-keyboard, @phone-portrait {
+      height: 50px !important;
+      width: 50px;
+    }
+    @media @tablet-portrait-with-keyboard, @tablet-portrait {
+      height: 55px !important;
+      width: 55px;
+    }
     .push-menu-icon {
       .icon-bar {
         margin-left: auto;
@@ -131,15 +153,17 @@ body {
     height: 50px;
   }
   @media @phone-landscape {
-    height: 67px;
+    height: 47px;
   }
 
   @media @desktop-landscape {
     height: 50px;
   }
-  @media @mobile-portrait-with-keyboard, @mobile-portrait {
-    min-width: 630px;
-    height: 110px;
+  @media @phone-portrait-with-keyboard, @phone-portrait {
+    height: 50px;
+  }
+  @media @tablet-portrait-with-keyboard, @tablet-portrait {
+    height: 55px;
   }
   @media @desktop-portrait {
     min-width: 400px;
@@ -155,14 +179,20 @@ body {
     position: absolute;
     @media @mobile-portrait-with-keyboard, @mobile-portrait {
       color: extract(@white, 1);
-      font-size: 35px;
-      height: 72px;
       margin-left: auto;
       margin-right: auto;
-      height: 110px;
-      padding-top: 55px; // half the height
-      padding-left: 30px;
-      padding-right: 30px;
+      padding-left: 10px;
+      padding-right: 10px;
+    }
+    @media @phone-portrait-with-keyboard, @phone-portrait {
+      height: 50px;
+      padding-top: 25px; // half the height
+      font-size: 18px;
+    }
+    @media @tablet-portrait-with-keyboard, @tablet-portrait {
+      height: 55px;
+      padding-top: 27.5px; // half the height
+      font-size: 21px;
     }
 
     @media @tablet-landscape {
@@ -171,9 +201,9 @@ body {
       padding-top: 25px; // half the height
     }
     @media @phone-landscape {
-      font-size: 28px;
-      height: 67px;
-      padding-top: 33.5px; // half the height
+      font-size: 18px;
+      height: 47px;
+      padding-top: 23.5px; // half the height
     }
     @media @desktop-landscape {
       font-size: 16px;
@@ -195,7 +225,7 @@ body {
         left: 51.2px;
       }
       @media @mobile-portrait, @mobile-portrait-with-keyboard {
-        left: 10%;
+        left: 50px;
       }
 
       @media @landscape {
@@ -205,7 +235,7 @@ body {
         max-width: calc(~'100% - 102.4px'); // leaves room for 2 buttons
       }
       @media @mobile-portrait, @mobile-portrait-with-keyboard {
-        width: 80%;
+        width: calc(~'100% - 100px');
       }
     }
     &.shiftedTitle {
@@ -213,7 +243,7 @@ body {
         left: 102.4px;
       }
       @media @mobile-portrait, @mobile-portrait-with-keyboard {
-        left: 20%;
+        left: 100px;
       }
 
       @media @landscape {
@@ -223,7 +253,7 @@ body {
         max-width: calc(~'100% - 153.6px'); // leaves for 3 buttons
       }
       @media @mobile-portrait, @mobile-portrait-with-keyboard {
-        width: 70%;
+        width: calc(~'100% - 150px');
       }
     }
   }
@@ -267,21 +297,21 @@ body {
     height: 50px;
   }
   @media @phone-landscape {
-    font-size: 28px;
-    height: 67px;
+    font-size: 19px;
+    height: 47px;
   }
   @media @phone-portrait, @phone-portrait-with-keyboard {
-    font-size: 36px;
+    font-size: 18px;
   }
   @media @tablet-portrait, @tablet-portrait-with-keyboard {
-    font-size: 3px;
+    font-size: 18px;
   }
 
   @media @mobile-portrait, @mobile-portrait-with-keyboard {
     .linear-gradient(rgb(72,76,85), rgb(65,68,77));
-    padding-top: 20px;
+    padding-top: 8px;
     color: white;
-    height: 110px;
+    height: 50px;
   }
   @media @desktop-portrait {
     background-color: white;
@@ -380,20 +410,39 @@ body {
       margin-left: 20px;
     }
   }
-  @media @mobile-portrait-with-keyboard, @mobile-portrait {
-    height: 110px;
-    font-size: 40px;
+  @media @phone-portrait-with-keyboard, @phone-portrait {
+    height: 50px;
+    font-size: 18px;
+  }
+  @media @tablet-portrait-with-keyboard, @tablet-portrait {
+    height: 50px;
+    font-size: 18px;
   }
   @media @desktop-portrait {
     height: 50px;
     font-size: 20px;
   }
+
+  i {
+    @media @phone-landscape {
+      font-size: 29px;
+    }
+    @media @desktop-portrait, @desktop-landscape, @tablet-landscape {
+      font-size: 30px;
+    }
+    @media @phone-portrait-with-keyboard, @phone-portrait {
+      font-size: 30px;
+    }
+    @media @tablet-portrait-with-keyboard, @tablet-portrait {
+      font-size: 25px;
+    }
+  }
 }
 
 .titleArea {
   width: 100%;
   @media @mobile-portrait-with-keyboard, @mobile-portrait {
-    height: 110px;
+    height: 50px;
     .linear-gradient(rgb(72,76,85), rgb(65,68,77));
   }
   @media @desktop-portrait {
@@ -443,7 +492,12 @@ body {
     flex-flow: column;
   }
   width: 100%;
-  height: calc(~'100% - 50px'); // 50px for narbar height
+  @media @desktop-landscape {
+    height: calc(~'100% - 50px'); // 50px for narbar height
+  }
+  @media @phone-landscape, @tablet-landscape {
+    height: calc(~'100% - 47px'); // 47px for narbar height
+  }
 }
 
 .signOutIcon {
@@ -512,11 +566,6 @@ body {
 
 .toggleUserlistButton, .toggleMenuButton {
   outline: none;
-  &:hover {
-    span {
-      background-color: #2A5E7C;
-    }
-  }
 }
 
 .settingsIcon {
@@ -628,17 +677,6 @@ body {
     padding-left: 10px;
     padding-right: 10px;
   }
-  i {
-    @media @phone-landscape {
-      font-size: 45px;
-    }
-    @media @desktop-portrait, @desktop-landscape, @tablet-landscape {
-      font-size: 30px;
-    }
-    @media @mobile-portrait-with-keyboard, @mobile-portrait {
-      font-size: 80px;
-    }
-  }
 }
 
 .verticallyCentered {
@@ -672,7 +710,13 @@ body {
 
 .sl-left-drawer {
   height: 100%;
-  @media @landscape {
+  @media @tablet-landscape {
+    width: 200px;
+  }
+  @media @phone-landscape {
+    width: 200px;
+  }
+  @media @desktop-landscape {
     width: 300px;
   }
 }
@@ -701,7 +745,7 @@ body {
     top: 50px;
   }
   @media @mobile-portrait-with-keyboard, @mobile-portrait {
-    top: 110px;
+    top: 50px;
   }
   @media @landscape {
     display: none;
diff --git a/bigbluebutton-html5/app/client/stylesheets/users.less b/bigbluebutton-html5/app/client/stylesheets/users.less
index cb9083abb2..8502a800cd 100755
--- a/bigbluebutton-html5/app/client/stylesheets/users.less
+++ b/bigbluebutton-html5/app/client/stylesheets/users.less
@@ -83,7 +83,13 @@
 }
 
 #user-contents {
-  height: calc(~'100% - 50px'); /* user-contents = user-contens - meetingTitle */
+  @media @phone-landscape {
+    height: calc(~'100% - 46px');
+  }
+  @media @tablet-landscape, @desktop-landscape,
+  @mobile-portrait, @mobile-portrait-with-keyboard, @desktop-portrait {
+    height: calc(~'100% - 50px'); /* user-contents = user-contens - meetingTitle */
+  }
   @media @landscape, @desktop-portrait{
     background-color: #34495E;
   }
diff --git a/bigbluebutton-html5/app/client/stylesheets/whiteboard.less b/bigbluebutton-html5/app/client/stylesheets/whiteboard.less
index da58aafa58..50bc356a46 100755
--- a/bigbluebutton-html5/app/client/stylesheets/whiteboard.less
+++ b/bigbluebutton-html5/app/client/stylesheets/whiteboard.less
@@ -154,28 +154,80 @@
 }
 
 .whiteboardFullscreenButton {
-  top: 10px;
-  right: 10px;
-  @media @landscape {
+  @media @desktop-landscape {
     height: 50px;
     width: 50px;
+    top: 5px;
+    right: 5px;
   }
-  @media @mobile-portrait-with-keyboard, @mobile-portrait {
-    height: 100px;
-    width: 10%;
+  @media @phone-landscape {
+    height: 45px;
+    width: 45px;
+    top: 5px;
+    right: 5px;
+  }
+  @media @tablet-landscape {
+    height: 50px;
+    width: 50px;
+    top: 5px;
+    right: 5px;
+  }
+  @media @phone-portrait-with-keyboard, @phone-portrait {
+    height: 50px;
+    width: 50px;
+    top: 2px;
+    right: 2px;
+  }
+  @media @tablet-portrait-with-keyboard, @tablet-portrait {
+    height: 53px;
+    width: 53px;
+    top: 5px;
+    right: 5px;
+  }
+  @media @desktop-portrait {
+    height: 50px;
+    width: 50px;
+    top: 5px;
+    right: 5px;
   }
 }
 
 .raiseHandButton {
-  bottom: 10px;
-  right: 10px;
-  @media @desktop-portrait, @landscape {
+  @media @desktop-landscape {
+    height: 40px;
+    width: 40px;
+    bottom: 5px;
+    right: 5px;
+  }
+  @media @phone-landscape {
+    height: 45px;
+    width: 45px;
+    bottom: 5px;
+    right: 5px;
+  }
+  @media @tablet-landscape {
     height: 50px;
     width: 50px;
+    bottom: 5px;
+    right: 5px;
   }
-  @media @mobile-portrait-with-keyboard, @mobile-portrait {
-    height: 100px;
-    width: 10%;
+  @media @phone-portrait-with-keyboard, @phone-portrait {
+    height: 50px;
+    width: 50px;
+    bottom: 2px;
+    right: 2px;
+  }
+  @media @tablet-portrait-with-keyboard, @tablet-portrait {
+    height: 53px;
+    width: 53px;
+    bottom: 5px;
+    right: 5px;
+  }
+  @media @desktop-portrait {
+    height: 40px;
+    width: 40px;
+    bottom: 5px;
+    right: 5px;
   }
 }
 
@@ -207,6 +259,19 @@
   }
   i {
     color: black;
+
+    @media @phone-landscape {
+      font-size: 29px;
+    }
+    @media @desktop-portrait, @desktop-landscape, @tablet-landscape {
+      font-size: 30px;
+    }
+    @media @phone-portrait-with-keyboard, @phone-portrait {
+      font-size: 35px;
+    }
+    @media @tablet-portrait-with-keyboard, @tablet-portrait {
+      font-size: 40px;
+    }
   }
 }
 
