Animation on dropdown menus

Fix #48

public/js/vroom.js

@@ -9,6 +9,14 @@ $.notify.defaults( { globalPosition: 'bottom left' } );
 // Enable tooltip on required elements
 $('.help').tooltip({container: 'body'});
 
+// Animation on dropdown menus
+$('.dropdown').on('show.bs.dropdown', function(e){
+  $(this).find('.dropdown-menu').first().stop(true, true).slideDown(150);
+});
+$('.dropdown').on('hide.bs.dropdown', function(e){
+  $(this).find('.dropdown-menu').first().stop(true, true).slideUp(150);
+});
+
 // Strings we need translated
 var locale = {
   ERROR_MAIL_INVALID: '',

templates/default/join.html.ep

@@ -55,7 +55,7 @@
           </label>
         </div>
         <div class="btn-group navbar-form navbar-left">
-          <div class="btn-group ownerEl">
+          <div class="btn-group dropdown ownerEl">
             <button class="btn btn-default dropdown-toggle help" type="button" id="inviteMenuButton" data-toggle="dropdown" data-toggle="tooltip" data-placement="bottom" title="<%=l 'INVITE_PEOPLE' %>">
               <span class="glyphicon glyphicon-user"></span>
               <span class="caret"></span>
@@ -96,7 +96,7 @@
               </li>
             </ul>
           </div>
-          <div class="btn-group ownerEl">
+          <div class="btn-group dropdown ownerEl">
             <button class="btn btn-default dropdown-toggle help" type="button" id="confMenuButton" data-toggle="dropdown" data-toggle="tooltip" data-placement="bottom" title="<%=l 'CONFIGURE' %>">
               <span class="glyphicon glyphicon-wrench"></span>
               <span class="caret"></span>