Various cleanups on the index page

lib/Vroom/I18N/en.pm

@@ -86,7 +86,7 @@ our %Lexicon = (
                                             "important data is sent directly. Only if you are behind a strict firewall, " .
                                             "streams will be relayed by our servers, as a last resort, but even in this case, " .
                                             "we will just relay encrypted blobs.",
-  "WORKS_EVERYWHERE"                     => "Works everywhere",
+  "WORKS_EVERYWHERE"                     => "Universal",
   "MODERN_BROWSERS"                      => "VROOM works with modern browsers (Chrome, Mozilla Firefox or Opera), " .
                                             "you don't have to install plugins, codecs, client software, then " .
                                             "send the tech documentation to all other parties. Just click, " .

lib/Vroom/I18N/fr.pm

@@ -93,7 +93,7 @@ our %Lexicon = (
                                                    "(comme un point de rendez-vous virtuel). Seulement si certains d'entre vous se trouvent " .
                                                    "derrière des pare feu stricts, les flux seront relayés à travers nos serveurs, en dernier " .
                                                    "recours, mais même dans ce cas, nous ne relayons que des flux chiffrés, inintelligibles",
-    "WORKS_EVERYWHERE"                          => "Fonctionne partout",
+    "WORKS_EVERYWHERE"                          => "Universel",
     "MODERN_BROWSERS"                           => "VROOM fonctionne avec les navigateurs modernes (Google Chrome, Mozilla Firefox, Opera), " .
                                                    "vous n'avez aucun plugin à installer, ni codec, ni client logiciel, ni à " .
                                                    "envoyer la doc technique aux autres participants. Vous n'avez qu'à cliquer, et discuter",

public/css/vroom.css

@@ -66,7 +66,7 @@
   padding-bottom: 2px;
 }
 #createRoomContainer {
-  max-width: 500px;
+  max-width: 700px;
   margin: auto;
 }
 #feedbackFormContainer {
@@ -137,7 +137,7 @@
   width: 149px;
   height: 149px;
 }
-.thumbnail {
+.panelIndex {
   text-align: justify;
   text-justify:inter-word;
 }

public/js/vroom.js

@@ -9,8 +9,6 @@ Copyright 2014 Firewall Services
 $.notify.defaults( { globalPosition: "bottom left" } );
 // Enable tooltip on required elements
 $('.help').tooltip({container: 'body'});
-// set the height of the thumbnails so they are always equals
-$(".thumbnail").height(Math.max.apply(null, $(".thumbnail").map(function() { return $(this).height(); })));
 
 // Strings we need translated
 var locale = {
@@ -53,6 +51,22 @@ function inviteUrlPopup(){
   return false;
 }
 
+// set the height of the thumbnails so they are always equals
+function setPanelHeight() {
+  $(".panel").height(Math.max.apply(null, $(".panel").map(function() { return $(this).height(); })));
+}
+
+setTimeout(function(){
+  setPanelHeight();
+}, 50);
+
+// Resize a few element on window resize
+window.onresize = function (){
+  $('#webRTCVideo').css('max-height', maxHeight());
+  $('#mainVideo>video').css('max-height', maxHeight());
+  setPanelHeight();
+};
+
 function initVroom(room) {
 
   var peers = {
@@ -714,10 +728,6 @@ function initVroom(room) {
   }, 60000);
 
   // Preview heigh is limited to the windows heigh, minus the navbar, minus 25px
-  window.onresize = function (){
-    $('#webRTCVideo').css('max-height', maxHeight());
-    $('#mainVideo>video').css('max-height', maxHeight());
-  };
   $('#webRTCVideo').css('max-height', maxHeight());
 
 };

templates/default/index.html.ep

@@ -3,13 +3,26 @@
 %= include 'public_toolbar'
 
 <div class="container-fluid">
-
   <div class="well" id="createRoomContainer">
-    <form id="createRoom" class="form-inline" action="<%=url_for('/create')%>" method="post">
+    <h2>
+      <center>
+        <%=l 'CREATE_ROOM' %>
+      </center>
+    </h2>
+    <form id="createRoom" class="form-inline" action="<%= $self->url_for('/create') %>" method="post">
       <fieldset>
-        <legend><center><%=l 'CREATE_ROOM' %></center></legend>
         <div class="control-group">
-          <div class="input-group">
+          <div class="input-group input-group-lg">
+            <span class="input-group-addon">
+              <strong class="text-muted">
+                <%
+                  my $url = $self->url_for('/')->to_abs;
+                  $url =~ s/^https?:\/\///;
+                  $url .= ($url =~ m/\/$/)? '':'/';
+                %>
+                <%= $url %>
+              </strong>
+            </span>
             <input id="roomName" name="roomName" type="text" placeholder="<%=l 'ROOM_NAME' %>" class="form-control help" data-toggle="tooltip" data-placement="bottom" title="<%=l 'RANDOM_IF_EMPTY' %>" autofocus>
             <span class="input-group-btn">
               <button type="submit" class="btn btn-default"><span class="glyphicon glyphicon-log-in"></span></button>
@@ -21,41 +34,35 @@
   </div>
   <br/><br/>
   <div class="row">
-    <div class="col-sm-12 col-md-4">
-      <div class="thumbnail">
-        <div>
+    <div class="col-md-4">
+      <div class="panel panel-default">
+        <div class="panel-body">
           <center>
             <img src="/img/lock.png" alt="Secure">
+            <h1><%=l 'SECURE' %></h1>
           </center>
-        </div>
-        <div class="caption">
-          <h3><center><%=l 'SECURE' %></center></h3>
           <p><%=l "P2P_COMMUNICATION" %></p>
         </div>
       </div>
     </div>
-    <div class="col-sm-12 col-md-4">
-      <div class="thumbnail">
-        <div>
+    <div class="col-md-4">
+      <div class="panel panel-default">
+        <div class="panel-body">
           <center>
             <img src="/img/universal.png" alt="Universal">
+            <h1><%=l 'WORKS_EVERYWHERE' %></h1>
           </center>
-        </div>
-        <div class="caption">
-          <h3><center><%=l 'WORKS_EVERYWHERE' %></center></h3>
           <p><%=l "MODERN_BROWSERS" %></p>
         </div>
       </div>
     </div>
-    <div class="col-sm-12 col-md-4">
-      <div class="thumbnail">
-        <div>
+    <div class="col-md-4">
+      <div class="panel panel-default">
+        <div class="panel-body">
           <center>
             <img src="/img/share.png" alt="Peer to peer">
+            <h1><%=l 'MULTI_USER' %></h1>
           </center>
-        </div>
-        <div class="caption">
-          <h3><center><%=l 'MULTI_USER' %></center></h3>
           <p><%=l "THE_LIMIT_IS_YOUR_PIPE" %></p>
         </div>
       </div>

templates/default/public_toolbar.html.ep

@@ -6,7 +6,9 @@
       <div class="navbar-header">
         <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#toolBar">
           <span class="sr-only"></span>
-          <span class="glyphicon glyphicon-th"></span>
+          <span class="icon-bar"></span>
+          <span class="icon-bar"></span>
+          <span class="icon-bar"></span>
         </button>
         <a href="#"><img id="navBarLogo" src="/img/logo_vroom_alpha.png" class="hidden-xs"/></a>
       </div>