For now midleman uses dumber implementation.

static/cranefly/css/cranefly.css

@@ -742,8 +742,8 @@ footer .container .credits p{margin-bottom:0;color:#555;font-size:90%}footer .co
 .navbar-header .navbar-inner .navbar-search-form .navbar-search-border>.extra .form-actions{border-radius:0 0 2px;margin:0;margin-top:7px;margin-bottom:0;padding:8px}.navbar-header .navbar-inner .navbar-search-form .navbar-search-border>.extra .form-actions .btn{margin:0;color:#fff}
 .navbar-header .navbar-inner .navbar-search-form .navbar-search-border>.extra .form-actions a:link,.navbar-header .navbar-inner .navbar-search-form .navbar-search-border>.extra .form-actions a:visited{margin-left:7px;position:relative;top:1px;color:#999;font-weight:bold}
 .navbar-header .navbar-inner .navbar-search-form .navbar-search-border>.extra .form-actions a:active,.navbar-header .navbar-inner .navbar-search-form .navbar-search-border>.extra .form-actions a:hover{color:#333}
-.navbar-header .navbar-inner .navbar-blocks{margin-left:6px}.navbar-header .navbar-inner .navbar-blocks>li{margin-left:6px}.navbar-header .navbar-inner .navbar-blocks>li form{margin:0;padding:0}
-.navbar-header .navbar-inner .navbar-blocks>li>a:link,.navbar-header .navbar-inner .navbar-blocks>li>a:visited,.navbar-header .navbar-inner .navbar-blocks>li>.btn-link{min-width:20px;font-size:17.5px;text-align:center}.navbar-header .navbar-inner .navbar-blocks>li>a:link .label,.navbar-header .navbar-inner .navbar-blocks>li>a:visited .label,.navbar-header .navbar-inner .navbar-blocks>li>.btn-link .label{background-color:#cf402e;margin-left:7px;padding-left:6px;padding-right:5px;padding-bottom:3px;position:relative;top:1px;color:#fff;font-size:14px;text-shadow:0 -1px 1px #7c261b}
+.navbar-header .navbar-inner .navbar-blocks{margin-left:6px}.navbar-header .navbar-inner .navbar-blocks>li form{margin:0;padding:0}
+.navbar-header .navbar-inner .navbar-blocks>li>a:link,.navbar-header .navbar-inner .navbar-blocks>li>a:visited,.navbar-header .navbar-inner .navbar-blocks>li>.btn-link{min-width:20px;font-size:17.5px;text-align:center}.navbar-header .navbar-inner .navbar-blocks>li>a:link .label,.navbar-header .navbar-inner .navbar-blocks>li>a:visited .label,.navbar-header .navbar-inner .navbar-blocks>li>.btn-link .label{background-color:#cf402e;margin-left:7px;padding-left:6px;padding-right:5px;padding-bottom:3px;position:relative;bottom:1px;color:#fff;font-size:14px;text-shadow:0 -1px 1px #7c261b}
 .navbar-header .navbar-inner .navbar-blocks>li a:hover,.navbar-header .navbar-inner .navbar-blocks>li a:active,.navbar-header .navbar-inner .navbar-blocks>li .btn-link:hover,.navbar-header .navbar-inner .navbar-blocks>li .btn-link:active{text-shadow:0 0 3px #fff}
 .navbar-header .navbar-inner .navbar-blocks>li.user-profile>a:link,.navbar-header .navbar-inner .navbar-blocks>li.user-profile>a:visited,.navbar-header .navbar-inner .navbar-blocks>li.user-profile>a:hover,.navbar-header .navbar-inner .navbar-blocks>li.user-profile>a:active{color:#555 !important;font-size:17.5px}
 .navbar-header .navbar-inner .navbar-blocks>li.user-profile a:link,.navbar-header .navbar-inner .navbar-blocks>li.user-profile a:visited,.navbar-header .navbar-inner .navbar-blocks>li.user-profile a:hover,.navbar-header .navbar-inner .navbar-blocks>li.user-profile a:active{background:none;border:none;margin-right:8px;margin-top:5px;color:#222;font-weight:bold;text-shadow:none}.navbar-header .navbar-inner .navbar-blocks>li.user-profile a:link img,.navbar-header .navbar-inner .navbar-blocks>li.user-profile a:visited img,.navbar-header .navbar-inner .navbar-blocks>li.user-profile a:hover img,.navbar-header .navbar-inner .navbar-blocks>li.user-profile a:active img{border-radius:3px;margin-right:6px;width:32px;height:32px;position:relative;bottom:1px}
@@ -768,11 +768,12 @@ footer .container .credits p{margin-bottom:0;color:#555;font-size:90%}footer .co
 .navbar-modbar .navbar-inner .navbar-search-form{background-color:#0d0d0d;border-radius:3px;margin-top:6px;padding:1px 0}.navbar-modbar .navbar-inner .navbar-search-form input{background-color:#0d0d0d;border:none;-webkit-box-shadow:none;-moz-box-shadow:none;box-shadow:none;margin:0;color:#eee;text-shadow:0 1px 0 #000}
 .navbar-modbar .navbar-inner .navbar-search-form button{margin:0;opacity:.6;filter:alpha(opacity=60)}.navbar-modbar .navbar-inner .navbar-search-form button i{background-image:url("../img/glyphicons-halflings-white.png");opacity:1;filter:alpha(opacity=100)}
 .navbar-modbar .navbar-inner .navbar-search-form button:hover,.navbar-modbar .navbar-inner .navbar-search-form button:active{opacity:1;filter:alpha(opacity=100)}
-.midman{display:none}.midman .midman-padding{background-color:#222;border-bottom:1px solid #fff;box-shadow:inset 0 4px 14px #000;padding:30px 0;color:#eee;text-shadow:0 1px 2px #000}.midman .midman-padding a:link,.midman .midman-padding a:visited{color:#e6e6e6}
+.midman{display:none;overflow:visible}.midman .midman-arrow{border-left:10px solid transparent;border-right:10px solid transparent;border-bottom:10px solid #000;width:0;height:0;margin-top:-10px;position:relative;bottom:30px}
+.midman .midman-padding{background-color:#222;border-bottom:1px solid #fff;box-shadow:inset 0 4px 14px #000;padding:30px 0;color:#eee;text-shadow:0 1px 2px #000}.midman .midman-padding a:link,.midman .midman-padding a:visited{color:#e6e6e6}
 .midman .midman-padding a:hover,.midman .midman-padding a:active{color:#fff}
 .midman .midman-padding .table td{border-color:#555}
+.midman .midman-padding .loaded-content{width:80%;margin:0 auto}
 .midman .midman-padding .ajax-error{display:none;color:#cf402e;font-size:35px;text-align:center}
-.midman .midman-padding .ajax-loader{padding-top:6px;font-size:21px;text-align:center}.midman .midman-padding .ajax-loader img{margin-top:-6px;margin-right:7px}
 .midman .midman-padding .btn{background-color:#999;border-color:#222;color:#eee !important;text-shadow:0 1px 1px #555}.midman .midman-padding .btn:hover,.midman .midman-padding .btn:active{color:#333 !important;text-shadow:0 1px 1px #fff}
 footer .breadcrumb{background:none;border:none;margin:0;padding:0;font-weight:bold;text-shadow:none}footer .breadcrumb li{text-shadow:none}footer .breadcrumb li a:link,footer .breadcrumb li a:active,footer .breadcrumb li a:visited,footer .breadcrumb li a:hover{color:#333}
 footer .breadcrumb li .divider{color:#999}

static/cranefly/css/cranefly/midman.less

@@ -3,6 +3,18 @@
 
 .midman {
   display: none;
+  overflow: visible;
+
+  .midman-arrow {
+    border-left: 10px solid transparent;
+    border-right: 10px solid transparent;
+    border-bottom: 10px solid @black;
+    width: 0;
+    height: 0;
+    margin-top: -10px;
+    position: relative;
+    bottom: @baseLineHeight * 1.5;
+  }
 
   .midman-padding {
     background-color: @midmanBackground;
@@ -27,6 +39,11 @@
       }
     }
 
+    .loaded-content {
+      width: 80%;
+      margin: 0px auto;
+    }
+
     .ajax-error {
       display: none;
 
@@ -35,18 +52,6 @@
       text-align: center;
     }
 
-    .ajax-loader {
-      padding-top: 6px;
-
-      font-size: @fontSizeLarge * 1.2;
-      text-align: center;
-
-      img {
-        margin-top: -6px;
-        margin-right: 7px;
-      }
-    }
-
     .btn {
       background-color: @grayLight;
       border-color: @grayDarker;

static/cranefly/css/cranefly/navbar.less

@@ -147,8 +147,6 @@
       margin-left: 6px;
 
       &>li {
-        margin-left: 6px;
-
         form {
           margin: 0px;
           padding: 0px;
@@ -167,7 +165,7 @@
             padding-right: 5px;
             padding-bottom: 3px;
             position: relative;
-            top: 1px;
+            bottom: 1px;
 
             color: @white;
             font-size: @baseFontSize;

static/cranefly/js/cranefly.js

@@ -1,9 +1,9 @@
 $(function () {
   // Register tooltips
-  $('.tooltip-top').tooltip({placement: 'top', container: 'body'})
-  $('.tooltip-bottom').tooltip({placement: 'bottom', container: 'body'})
-  $('.tooltip-left').tooltip({placement: 'left', container: 'body'})
-  $('.tooltip-right').tooltip({placement: 'right', container: 'body'})
+  $('body').tooltip({placement: 'top', container: 'body', selector: '.tooltip-top'})
+  $('body').tooltip({placement: 'bottom', container: 'body', selector: '.tooltip-bottom'})
+  $('body').tooltip({placement: 'left', container: 'body', selector: '.tooltip-left'})
+  $('body').tooltip({placement: 'right', container: 'body', selector: '.tooltip-right'})
 
   // Register popovers
   $('.popover-top').popover({placement: 'top'})
@@ -195,8 +195,8 @@ function youtube_player(element, movie_id, startfrom) {
 // Ajax: Reports and Alerts
 $(function() {
   var midman = $('.midman');
-  var animation_speed = 400;
-  var midman_loader = midman.find('.ajax-loader');
+  var animation_speed = 0;
+  var midman_arrow = midman.find('.midman-arrow');
   var midman_error = midman.find('.ajax-error');
   var midman_content = midman.find('.loaded-content');
   var midman_content_id = false;
@@ -216,25 +216,21 @@ $(function() {
     midman_content_id = content_id;
     $(midman_content_id).parent().addClass('active');
 
+    var button_offset = $(midman_content_id).parent().offset();
+    $(midman_arrow).css('left', button_offset.left + ($(midman_content_id).parent().width() / 2) - 10);
+
     if (midman_content_id in midman_cache) {
-      midman_loader.hide();
-      midman_content.show();
       midman_content.html(midman_cache[midman_content_id]);
-      midman.slideDown(animation_speed);
+      midman.show(animation_speed);
       return;
     }
 
-    midman_loader.show();
-    midman_content.hide();
-    midman.slideDown(animation_speed);
-
     midman_request = $.ajax({
       url: $(midman_content_id).attr('href')
     }).done(function(data) {
       midman_cache[midman_content_id] = data.html;
       midman_content.html(data.html);
-      midman_loader.hide();
-      midman_content.slideDown(animation_speed);
+      midman.show(animation_speed);
     });
   }
 
@@ -242,7 +238,7 @@ $(function() {
     if (midman_content_id != false) {
       $(midman_content_id).parent().removeClass('active');
       midman_content_id = false;
-      midman.slideUp(animation_speed);
+      midman.hide(animation_speed);
     }
   }
 

templates/cranefly/alerts/cleared.html

@@ -1,10 +1,8 @@
-<div class="row midman-alerts">
-  <div class="span10 offset1">
-    <h2>{% trans %}Your Notifications{% endtrans %}</h2>
-    <p class="lead">{% trans %}Your recent notifications list has been cleared.{% endtrans %}</p>
-    <p class="lead">
-      <a href="{{ url('alerts') }}" class="btn">{% trans %}All Notifications{% endtrans %}</a>
-      <a href="#" class="btn midman-close">{% trans %}Close{% endtrans %}</a>
-    </p>
-  </div>
+<div class="midman-alerts">
+  <h2>{% trans %}Your Notifications{% endtrans %}</h2>
+  <p class="lead">{% trans %}Your recent notifications list has been cleared.{% endtrans %}</p>
+  <p class="lead">
+    <a href="{{ url('alerts') }}" class="btn">{% trans %}All Notifications{% endtrans %}</a>
+    <a href="#" class="btn midman-close">{% trans %}Close{% endtrans %}</a>
+  </p>
 </div>

templates/cranefly/alerts/modal.html

@@ -1,43 +1,41 @@
-<div class="row midman-alerts">
-  <div class="span10 offset1">
-    {% if alerts %}
-    {% if user.alerts %}
-    <h2>{% trans alerts=user.alerts %}You have one new alert{% pluralize %}You have {{ alerts }} new alerts{% endtrans %}</h2>
-    {% else %}
-    <h2>{% trans %}Your Notifications{% endtrans %}</h2>
-    {% endif %}
-    <table class="table">
-      <tbody>
-        {% for alert in alerts %}
-        <tr>
-          <td class="alert-icon{% if alert.date > user.alerts_date %} alert-new{% endif %}">
-            {% if alert.date > user.alerts_date %}
-            <i class="icon-star tooltip-top" title="{% trans %}New notification{% endtrans %}"></i>
-            {% else %}
-            <i class="icon-star-empty tooltip-top" title="{% trans %}Old notification{% endtrans %}"></i>
-            {% endif %}
-          </td>
-          <td class="alert-message">{{ (_(alert.message) % alert.vars())|safe }}</td>
-          <td class="alert-date">{{ alert.date|reltimesince }}</td>
-        </tr>
-        {% endfor %}
-      </tbody>
-    </table>
-    <p class="lead">
-      <form action="{{ url('alerts_clear_recent') }}" method="post" class="form-inline">
-        <input type="hidden" name="{{ csrf_id }}" value="{{ csrf_token }}">
-        <a href="{{ url('alerts') }}" class="btn">{% trans %}All Notifications{% endtrans %}</a>
-        <button type="submit" class="btn">{% trans %}Clear List{% endtrans %}</button>
-        <a href="#" class="btn midman-close">{% trans %}Close{% endtrans %}</a>
-      </form>
-    </p>
-    {% else %}
-    <h2>{% trans %}Your Notifications{% endtrans %}</h2>
-    <p class="lead">{% trans %}You have no recent notifications.{% endtrans %}</p>
-    <p class="lead">
+<div class="midman-alerts">
+  {% if alerts %}
+  {% if user.alerts %}
+  <h2>{% trans alerts=user.alerts %}You have one new alert{% pluralize %}You have {{ alerts }} new alerts{% endtrans %}</h2>
+  {% else %}
+  <h2>{% trans %}Your Notifications{% endtrans %}</h2>
+  {% endif %}
+  <table class="table">
+    <tbody>
+      {% for alert in alerts %}
+      <tr>
+        <td class="alert-icon{% if alert.date > user.alerts_date %} alert-new{% endif %}">
+          {% if alert.date > user.alerts_date %}
+          <i class="icon-star tooltip-top" title="{% trans %}New notification{% endtrans %}"></i>
+          {% else %}
+          <i class="icon-star-empty tooltip-top" title="{% trans %}Old notification{% endtrans %}"></i>
+          {% endif %}
+        </td>
+        <td class="alert-message">{{ (_(alert.message) % alert.vars())|safe }}</td>
+        <td class="alert-date">{{ alert.date|reltimesince }}</td>
+      </tr>
+      {% endfor %}
+    </tbody>
+  </table>
+  <p class="lead">
+    <form action="{{ url('alerts_clear_recent') }}" method="post" class="form-inline">
+      <input type="hidden" name="{{ csrf_id }}" value="{{ csrf_token }}">
       <a href="{{ url('alerts') }}" class="btn">{% trans %}All Notifications{% endtrans %}</a>
+      <button type="submit" class="btn">{% trans %}Clear List{% endtrans %}</button>
       <a href="#" class="btn midman-close">{% trans %}Close{% endtrans %}</a>
-    </p>
-    {% endif %}
-  </div>
+    </form>
+  </p>
+  {% else %}
+  <h2>{% trans %}Your Notifications{% endtrans %}</h2>
+  <p class="lead">{% trans %}You have no recent notifications.{% endtrans %}</p>
+  <p class="lead">
+    <a href="{{ url('alerts') }}" class="btn">{% trans %}All Notifications{% endtrans %}</a>
+    <a href="#" class="btn midman-close">{% trans %}Close{% endtrans %}</a>
+  </p>
+  {% endif %}
 </div>

templates/cranefly/layout.html

@@ -142,8 +142,8 @@
 
   <div class="midman">
     <div class="midman-padding">
+      <div class="midman-arrow"></div>
       <div class="loaded-content"></div>
-      <div class="ajax-loader"><img src="{{ STATIC_URL }}cranefly/img/ajax-loader.gif" alt="{% trans %}Loading...{% endtrans %}">{% trans %}Loading...{% endtrans %}</div>
       <div class="ajax-error"><i class="icon-remove"></i></div>
     </div>
   </div>