Some small tweaks in alerts slider.

static/cranefly/css/cranefly.css

@@ -743,8 +743,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 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;bottom:3px;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 -2px 2px #fff}
+.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>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}
 .navbar-header .navbar-inner .navbar-compact{display:none}.navbar-header .navbar-inner .navbar-compact li.user-profile>a:link,.navbar-header .navbar-inner .navbar-compact li.user-profile>a:visited{-webkit-border-radius:0;-moz-border-radius:0;border-radius:0;margin-top:0;padding:14px;padding-top:10px;padding-bottom:8px}.navbar-header .navbar-inner .navbar-compact li.user-profile>a:link img,.navbar-header .navbar-inner .navbar-compact li.user-profile>a:visited img{margin-right:0;margin-left:6px}
@@ -768,12 +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{background-color:#222;border-bottom:1px solid #fff;box-shadow:inset 0 4px 14px #000;display:none;padding:30px 0;color:#eee;text-shadow:0 1px 2px #000}.midman a:link,.midman a:visited{color:#e6e6e6}
-.midman a:hover,.midman a:active{color:#fff}
-.midman .table td{border-color:#555}
-.midman .ajax-error{display:none;color:#cf402e;font-size:35px;text-align:center}
-.midman .ajax-loader{padding-top:6px;font-size:21px;text-align:center}.midman .ajax-loader img{margin-top:-6px;margin-right:7px}
-.midman .btn{background-color:#999;border-color:#222;color:#eee !important;text-shadow:0 1px 1px #555}.midman .btn:hover,.midman .btn:active{color:#333 !important;text-shadow:0 1px 1px #fff}
+.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 .midman-padding a:hover,.midman .midman-padding a:active{color:#fff}
+.midman .midman-padding .table td{border-color:#555}
+.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}
 footer .breadcrumb li.active{color:#555}

static/cranefly/css/cranefly/midman.less

@@ -2,59 +2,62 @@
 // -------------------------
 
 .midman {
-	background-color: @midmanBackground;
-	border-bottom: 1px solid lighten(@bodyBackground, 8%);
-	box-shadow: inset 0px 4px 14px @black;
-	display: none;
-	padding: (@baseLineHeight * 1.5) 0px;
-
-	color: @grayLighter;
-	text-shadow: 0px 1px 2px @black;
-
-	a:link, a:visited {
-		color: darken(@white, 10%);
-	}
-
-	a:hover, a:active {
-		color: @white;
-	}
-
-	.table {
-		td {
-			border-color: @gray;
-		}
-	}
-
-	.ajax-error {
-		display: none;
-
-		color: @red;
-		font-size: @fontSizeLarge * 2;
-		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;
-
-		color: @grayLighter !important;
-		text-shadow: 0px 1px 1px @gray;
-
-		&:hover, &:active {
-			color: @textColor !important;
-			text-shadow: 0px 1px 1px @white;
-		}
-	}
+  display: none;
+
+  .midman-padding {
+    background-color: @midmanBackground;
+    border-bottom: 1px solid lighten(@bodyBackground, 8%);
+    box-shadow: inset 0px 4px 14px @black;
+    padding: (@baseLineHeight * 1.5) 0px;
+
+    color: @grayLighter;
+    text-shadow: 0px 1px 2px @black;
+
+    a:link, a:visited {
+      color: darken(@white, 10%);
+    }
+
+    a:hover, a:active {
+      color: @white;
+    }
+
+    .table {
+      td {
+        border-color: @gray;
+      }
+    }
+
+    .ajax-error {
+      display: none;
+
+      color: @red;
+      font-size: @fontSizeLarge * 2;
+      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;
+
+      color: @grayLighter !important;
+      text-shadow: 0px 1px 1px @gray;
+
+      &:hover, &:active {
+        color: @textColor !important;
+        text-shadow: 0px 1px 1px @white;
+      }
+    }
+  }
 }

static/cranefly/css/cranefly/navbar.less

@@ -167,7 +167,7 @@
             padding-right: 5px;
             padding-bottom: 3px;
             position: relative;
-            bottom: 3px;
+            top: 1px;
 
             color: @white;
             font-size: @baseFontSize;
@@ -176,7 +176,7 @@
         }
 
         a:hover, a:active, .btn-link:hover, .btn-link:active {
-        	text-shadow: 0px -2px 2px @white;
+        	text-shadow: 0px 0px 3px @white;
         }
 
         &.user-profile {

static/cranefly/js/cranefly.js

@@ -195,6 +195,7 @@ 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 midman_error = midman.find('.ajax-error');
   var midman_content = midman.find('.loaded-content');
@@ -203,7 +204,7 @@ $(function() {
   var midman_request = false;
 
   function midman_open(content_id) {
-    midman_error.slideUp(200);
+    midman_error.hide();
 
     if (midman_content_id != false) {
       midman_close();
@@ -219,21 +220,21 @@ $(function() {
       midman_loader.hide();
       midman_content.show();
       midman_content.html(midman_cache[midman_content_id]);
-      midman.slideDown(200);
+      midman.slideDown(animation_speed);
       return;
     }
 
     midman_loader.show();
     midman_content.hide();
-    midman.slideDown(200);
+    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_content.slideDown(200);
-      midman_loader.fadeOut(200);
+      midman_loader.hide();
+      midman_content.slideDown(animation_speed);
     });
   }
 
@@ -241,7 +242,7 @@ $(function() {
     if (midman_content_id != false) {
       $(midman_content_id).parent().removeClass('active');
       midman_content_id = false;
-      midman.slideUp(200);
+      midman.slideUp(animation_speed);
     }
   }
 
@@ -253,9 +254,7 @@ $(function() {
     var csrf_token = $(this).find('input[name="_csrf_token"]').val();
     $.post(this.action, {'_csrf_token': csrf_token}, "json").done(function(data, textStatus, jqXHR) {
       midman_cache[midman_content_id] = data.html;
-      midman_content.fadeOut(100);
       midman_content.html(data.html);
-      midman_content.fadeIn(100);
     });
     return false;
   });

templates/cranefly/layout.html

@@ -141,9 +141,11 @@
   </div>
 
   <div class="midman">
-    <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 class="midman-padding">
+      <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>
 
   {% block container %}