Add the error class only on the input zone

WHen you type an invalid room name

public/js/vroom.js

@@ -243,7 +243,10 @@ function initIndex(){
     e.preventDefault();
     // Do not submit if we know the name is invalid
     if (!$('#roomName').val().match(/^[\w\-]{0,49}$/)){
-      $('#roomName').notify(locale.ERROR_NAME_INVALID, 'error');
+      $('#roomName').parent().parent().notify(locale.ERROR_NAME_INVALID, {
+         class: 'error',
+         position: 'bottom center'
+      });
     }
     else{
       $.ajax({
@@ -263,7 +266,7 @@ function initIndex(){
             $('#conflictModal').modal('show');
           }
           else{
-            $('#roomName').notify(data.msg, 'error');
+            $('#roomName').parent().parent().notify(data.msg, 'error');
           }
         },
         error: function(){

templates/default/index.html.ep

@@ -11,23 +11,23 @@
     </h2>
     <form id="createRoom" class="form-inline" action="<%= $self->get_url('/create') %>" method="post">
       <fieldset>
-        <div class="control-group">
+        <div class="input-group input-group-lg">
-          <div class="input-group input-group-lg">
+          <span class="input-group-addon hidden-xs">
-            <span class="input-group-addon hidden-xs">
+            <strong class="text-muted">
-              <strong class="text-muted">
+              <%
-                <%
+                my $url = $self->url_for('/')->to_abs;
-                  my $url = $self->url_for('/')->to_abs;
+                $url =~ s/^https?:\/\///;
-                  $url =~ s/^https?:\/\///;
+                $url .= ($url =~ m/\/$/)? '':'/';
-                  $url .= ($url =~ m/\/$/)? '':'/';
+              %>
-                %>
+              <%= $url %>
-                <%= $url %>
+            </strong>
-              </strong>
+          </span>
-            </span>
+          <div class="control-group">
-            <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>
+            <input id="roomName" name="roomName" type="text" placeholder="<%=l 'ROOM_NAME' %>" class="form-control input-lg 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>
-            </span>
           </div>
+          <span class="input-group-btn">
+            <button type="submit" class="btn btn-default"><span class="glyphicon glyphicon-log-in"></span></button>
+          </span>
         </div>
       </fieldset>
     </form>