Reduce wasted space

Should fix #3 for small devices
Hide the mainVideo area on small devices, instead display only bigger previews. Also switch to 2 cols for preview on large displays, not medium ones

public/js/vroom.js

@@ -104,7 +104,7 @@ function initVroom(room) {
     playSound('join.mp3');
     // The main div of this new video
     // will contain the video plus all other info like displayName, overlay and volume bar
-    var div = $('<div></div>').addClass('col-md-6 previewContainer').append(video).appendTo("#webRTCVideo");
+    var div = $('<div></div>').addClass('col-xs-6 col-sm-12 col-lg-6 previewContainer').append(video).appendTo("#webRTCVideo");
     // Peer isn't defined ? it's our own local screen
     var id;
     if (!peer){

templates/default/join.html.ep

@@ -87,8 +87,8 @@
         </form>
       </div>
       <div id="view" class="view row-fluid">
-        <div id="webRTCVideo" class="col-xs-4">
-          <div class="col-md-6 previewContainer">
+        <div id="webRTCVideo" class="col-xs-12 col-sm-4">
+          <div class="col-xs-6 col-sm-12 col-lg-6 previewContainer">
             <video id="webRTCVideoLocal" class="webRTCVideo" muted oncontextmenu="return false;">
             </video>
             <div id="localVolume" class="volumeBar">
@@ -97,7 +97,7 @@
             </div>
           </div>
         </div>
-        <div id="mainVideo" class="col-xs-8">
+        <div id="mainVideo" class="col-sm-8 hidden-xs">
         <div>
       </div>
     </div>