Moved offline status in the navigation bar

This commit is contained in:
benweet 2013-12-08 18:11:35 +00:00
parent 511ffafbf0
commit 8c29d27ecd
3 changed files with 28 additions and 12 deletions

View File

@ -52,6 +52,13 @@ define([
jGrowl("<i class='icon-white " + iconClass + "'></i> " + _.escape(message).replace(/\n/g, '<br/>'), options);
}
var $offlineStatusElt;
var $extensionButtonsElt;
notifications.onReady = function() {
$offlineStatusElt = $('.navbar .offline-status');
$extensionButtonsElt = $('.navbar .extension-buttons');
};
notifications.onMessage = function(message) {
showMessage(message);
};
@ -67,16 +74,13 @@ define([
};
notifications.onOfflineChanged = function(isOffline) {
$offlineStatusElt.toggleClass('hide', !isOffline);
$extensionButtonsElt.toggleClass('hide', isOffline);
if(isOffline === true) {
showMessage("You are offline.", "icon-attention-circled msg-offline", {
sticky: true,
close: function() {
showMessage("You are back online!", "icon-signal");
}
});
showMessage("You are offline.", "icon-attention-circled msg-offline");
}
else {
$(".msg-offline").parents(".jGrowl-notification").trigger('jGrowl.beforeClose');
showMessage("You are back online!", "icon-signal");
}
};

View File

@ -45,6 +45,11 @@
</button></li>
</ul>
<ul class="nav pull-right right-buttons">
<li class="offline-status hide">
<div class="text-danger">
<i class="icon-attention-circled"></i>offline
</div>
</li>
<li class="extension-buttons"></li>
</ul>
<ul class="nav pull-right">
@ -835,7 +840,7 @@
<p><b>Tip:</b> You can use a
<a href="http://jekyllrb.com/docs/frontmatter/"
target="_blank">YAML front matter</a> to specify the title and the tags/labels of your publication.</p>
<p><b>Interpreted variables:</b> <i>title, tags</i></p>
<p><b>Interpreted variables:</b> <code>title</code>, <code>tags</code>, <code>published</code>, <code>date</code>.</p>
</blockquote>
</div>
<div class="modal-footer">

View File

@ -7,9 +7,9 @@
/* Colors */
@logo-yellow: #FFD900;
@logo-blue: #3399FF;
@logo-orange: #FF610D;
@logo-green: #8DC213;
@logo-blue: #53a9ff;
@logo-orange: #ff7606;
@logo-green: #a5cc0a;
@primary: #0080FF;
@secondary: @primary;
@tertiary: @primary;
@ -43,7 +43,7 @@
// Panel buttons
@panel-button-bg-color: #FFF;
@panel-button-border-fade: 75%;
@panel-button-border-fade: 80%;
@panel-border-color: fade(@primary-desaturated, 10%);
@error-border: #FF6161;
@ -469,6 +469,13 @@ a {
}
}
.offline-status > div {
display: inline-block;
vertical-align: middle;
height: @input-height-base;
padding: 9px 10px;
}
.left-buttons-dropdown, .right-buttons-dropdown {
> .nav {
margin-left: 0;