diff --git a/src/static/css/pad/gritter.css b/src/static/css/pad/gritter.css
index ae6427de4..690a1eac1 100644
--- a/src/static/css/pad/gritter.css
+++ b/src/static/css/pad/gritter.css
@@ -1,19 +1,20 @@
#gritter-container {
position: absolute;
bottom: 0;
- right: 0;
- left: 0;
+ right: 50%;
+ transform: translateX(50%);
text-align: center;
z-index: 9999;
}
.gritter-item.popup {
position: relative;
- max-width: 400px;
- min-width: 0;
- margin: 0 auto;
+ max-width: 450px;
visibility: visible;
+ right: auto;
+ left: auto;
top: auto;
+ bottom: auto;
}
.gritter-item .popup-content {
display: flex;
@@ -24,14 +25,9 @@
}
.gritter-item .gritter-close {
- display: none;
align-self: center;
}
-.gritter-item.sticky .gritter-close {
- display: block;
-}
-
.gritter-item.error .popup-content {
color: #a84341;
background-color: #eed3d4;
diff --git a/src/static/js/gritter.js b/src/static/js/gritter.js
index 64295ade2..0e1d95ed7 100644
--- a/src/static/js/gritter.js
+++ b/src/static/js/gritter.js
@@ -23,7 +23,7 @@
$.gritter.options = {
position: '',
class_name: '', // could be set to 'gritter-light' to use white notifications
- time: 6000 // hang on the screen for...
+ time: 3000 // hang on the screen for...
}
/**
@@ -68,8 +68,6 @@
var Gritter = {
// Public - options to over-ride with $.gritter.options in "add"
- fade_in_speed: '300',
- fade_out_speed: '200',
time: '',
// Private - no touchy the private parts
@@ -86,7 +84,7 @@
'[[title]]',
'[[text]]
',
'',
- '
',
+ '
',
'',
''].join(''),
@@ -164,28 +162,20 @@
var item = $('#gritter-item-' + this._item_count);
- item.addClass('popup-show').fadeIn(this.fade_in_speed, function(){
- Gritter['_after_open_' + number]($(this));
- });
+ setTimeout(function() { item.addClass('popup-show'); }, 0);
+ Gritter['_after_open_' + number](item);
if(!sticky){
this._setFadeTimer(item, number);
+ // Bind the hover/unhover states
+ $(item).on('mouseenter', function(event) {
+ Gritter._restoreItemIfFading($(this), number);
+ });
+ $(item).on('mouseleave', function(event) {
+ Gritter._setFadeTimer($(this), number);
+ });
}
- // Bind the hover/unhover states
- $(item).bind('mouseenter mouseleave', function(event){
- if(event.type == 'mouseenter'){
- if(!sticky){
- Gritter._restoreItemIfFading($(this), number);
- }
- }
- else {
- if(!sticky){
- Gritter._setFadeTimer($(this), number);
- }
- }
- });
-
// Clicking (X) makes the perdy thing close
$(item).find('.gritter-close').click(function(){
Gritter.removeSpecific(number, {}, null, true);
@@ -208,11 +198,10 @@
e.remove();
this['_after_close_' + unique_id](e, manual_close);
- // Check if the wrapper is empty, if it is.. remove the wrapper
- if($('.gritter-item-wrapper').length == 0){
+ // Remove container if empty
+ if ($('#gritter-container .gritter-item').length == 0) {
$('#gritter-container').remove();
}
-
},
/**
@@ -220,14 +209,13 @@
* @private
* @param {Object} e The jQuery element to get rid of
* @param {Integer} unique_id The id of the element to remove
- * @param {Object} params An optional list of params to set fade speeds etc.
+ * @param {Object} params An optional list of params.
* @param {Boolean} unbind_events Unbind the mouseenter/mouseleave events if they click (X)
*/
_fade: function(e, unique_id, params, unbind_events){
var params = params || {},
fade = (typeof(params.fade) != 'undefined') ? params.fade : true,
- fade_out_speed = params.speed || this.fade_out_speed,
manual_close = unbind_events;
this['_before_close_' + unique_id](e, manual_close);
@@ -239,15 +227,10 @@
// Fade it out or remove it
if(fade){
-
- e.animate({
- opacity: 0
- }, fade_out_speed, function(){
- e.animate({ height: 0 }, 300, function(){
- Gritter._countRemoveWrapper(unique_id, e, manual_close);
- })
- }).removeClass('popup-show')
-
+ e.removeClass('popup-show');
+ setTimeout(function() {
+ Gritter._countRemoveWrapper(unique_id, e, manual_close);
+ }, 300)
}
else {
@@ -308,11 +291,11 @@
* @param {Object} item The HTML element we're dealing with
* @param {Integer} unique_id The ID of the element
*/
- _setFadeTimer: function(e, unique_id){
+ _setFadeTimer: function(item, unique_id){
var timer_str = (this._custom_timer) ? this._custom_timer : this.time;
this['_int_id_' + unique_id] = setTimeout(function(){
- Gritter._fade(e, unique_id);
+ Gritter._fade(item, unique_id);
}, timer_str);
},
diff --git a/src/static/js/pad_savedrevs.js b/src/static/js/pad_savedrevs.js
index 34323b22f..c0edd3654 100644
--- a/src/static/js/pad_savedrevs.js
+++ b/src/static/js/pad_savedrevs.js
@@ -24,9 +24,7 @@ exports.saveNow = function(){
// (string | mandatory) the text inside the notification
text: _("pad.savedrevs.timeslider") || "You can view saved revisions in the timeslider",
// (bool | optional) if you want it to fade out on its own or just sit there
- sticky: false,
- // (int | optional) the time you want it to be alive for before fading out
- time: '2000'
+ sticky: false
});
}
diff --git a/src/static/skins/colibris/src/components/gritter.css b/src/static/skins/colibris/src/components/gritter.css
index b2c2cd112..f77a7244d 100644
--- a/src/static/skins/colibris/src/components/gritter.css
+++ b/src/static/skins/colibris/src/components/gritter.css
@@ -1,3 +1,7 @@
+#gritter-container {
+ top: 20px;
+ bottom: auto;
+}
.gritter-item .popup-content {
color: white;
margin-bottom: 10px;
@@ -7,7 +11,7 @@
margin: 0;
}
.gritter-item .gritter-title {
- margin-bottom: 20px;
+ margin-bottom: 10px;
}
.gritter-item .gritter-close {
margin-left: 10px;
@@ -21,4 +25,13 @@
margin-top: 10px;
margin-bottom: 0;
}
+}
+
+.gritter-item.popup > .popup-content {
+ transform: scale(0.8) translateY(-100px);
+}
+
+.gritter-item.popup.popup-show > .popup-content {
+ transform: scale(1) translateY(0);
+ transition: all 0.4s cubic-bezier(0.74, -0.05, 0.27, 1.75)
}
\ No newline at end of file