From 80a7cb61cff3a919294b177c41ee5012a9b8980b Mon Sep 17 00:00:00 2001
From: Daniel Berteaud <daniel@firewall-services.com>
Date: Fri, 4 Apr 2014 17:52:41 +0200
Subject: [PATCH] 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             | 2 +-
 templates/default/join.html.ep | 6 +++---
 2 files changed, 4 insertions(+), 4 deletions(-)

diff --git a/public/js/vroom.js b/public/js/vroom.js
index cde1861..f567a35 100644
--- a/public/js/vroom.js
+++ b/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){
diff --git a/templates/default/join.html.ep b/templates/default/join.html.ep
index 68a9a36..6773a69 100644
--- a/templates/default/join.html.ep
+++ b/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>