Do not hide the main div on XS screen

Instead, reduce the previews size (up to 4 previews in a row), and place the main div just under, using all the available width
Not perfect yet, but much better than before, so fix #73

public/css/vroom.css

@@ -39,9 +39,16 @@
   margin-bottom: 5px;
   display: none;
 }
+@media screen and (min-width: 768px) {
   .previewContainer:nth-child(2n+1){
     clear: left;
   }
+}
+@media screen and (max-width: 767px) {
+  .previewContainer:nth-child(4n+1){
+    clear: left;
+  }
+}
 .volumeBar {
   position: absolute;
   width: 5px;

public/js/vroom.js

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

templates/default/join.html.ep

@@ -36,7 +36,7 @@
             </button>
           </div>
           <% if ($etherpad eq 'true'){ %>
-          <div class="btn-group hidden-xs" data-toggle="buttons">
+          <div class="btn-group" data-toggle="buttons">
             <label class="btn btn-default help" id="etherpadLabel" data-toggle="tooltip" data-placement="bottom" title="<%=l 'OPEN_ETHERPAD' %>">
               <input type = "checkbox" id="etherpadButton">
                 <span class="glyphicon glyphicon-pencil">
@@ -869,7 +869,7 @@
       <audio id="mohPlayer" src="<%= $self->get_url('/') %>snd/moh/<%= $moh %>" loop></audio>
       <div id="view" class="view row-fluid">
         <div id="webRTCVideo" class="col-xs-12 col-sm-4">
-          <div class="col-xs-6 col-sm-12 col-lg-6 previewContainer" id="videoLocalContainer">
+          <div class="col-xs-3 col-sm-12 col-lg-6 previewContainer" id="videoLocalContainer">
             <video id="webRTCVideoLocal" class="webRTCVideo latencyUnknown" muted oncontextmenu="return false;">
             </video>
             <div id="localVolume" class="volumeBar">
@@ -878,7 +878,7 @@
             </div>
           </div>
         </div>
-        <div id="mainView" class="col-sm-8 hidden-xs">
+        <div id="mainView" class="col-xs-12 col-sm-8">
           <% if ($etherpad eq 'true'){ %>
           <div id="etherpadContainer"></div>
           <% } %>