From a482a94fb880b9325e8d0f0b833294d3ad9a2eda Mon Sep 17 00:00:00 2001 From: Sebastian Castro Date: Tue, 31 Mar 2020 18:16:04 +0200 Subject: [PATCH] css: improve gritter - rename DOM wrapper because is was blacklisted by some ad blocker - make the template and the lib to add gritter more simple (remove unused option, make template simpler) - add style for gritter error message --- src/static/css/pad/gritter.css | 152 ++++-------------- src/static/js/chat.js | 4 +- src/static/js/gritter.js | 75 ++++----- src/static/js/pad.js | 6 - .../skins/colibris/src/components/gritter.css | 4 +- 5 files changed, 60 insertions(+), 181 deletions(-) diff --git a/src/static/css/pad/gritter.css b/src/static/css/pad/gritter.css index 6a88b1dae..1cafe41ff 100644 --- a/src/static/css/pad/gritter.css +++ b/src/static/css/pad/gritter.css @@ -1,130 +1,36 @@ -#gritter-notice-wrapper { - position:fixed; - top:20px; - right:20px; - width:301px; - z-index:9999; - background-color:#666; -} -#gritter-notice-wrapper.bottom-right { - top: auto; - left: auto; - bottom: 20px; - right: 20px; -} -.gritter-item-wrapper { - position:relative; - margin:0 0 10px 0; +#gritter-container { + position: absolute; + bottom: 0; + right: 0; + left: 0; + text-align: center; + z-index: 9999; } -.gritter-top { - height:10px; -} -.hover .gritter-top { - background-position:right -30px; -} -.gritter-bottom { - height:8px; - margin:0; -} -.hover .gritter-bottom { - background-position: bottom right; -} .gritter-item { - display:block; - color: #eee; - padding: 2px 11px 8px 11px; - font-size: 11px; -} -.hover .gritter-item { - background-position:right -40px; -} -.gritter-item p { - padding:0; - margin:0; -} -.gritter-close { - display:none; - position:absolute; - top:5px; - left:3px; - cursor:pointer; - width:30px; - height:30px; -} -.gritter-title { - font-size:14px; - font-weight:bold; - padding:0 0 7px 0; - display:block; - text-shadow:1px 1px 0 #000; /* Not supported by IE :( */ -} -.gritter-image { - width:48px; - height:48px; - float:left; -} -.gritter-with-image, -.gritter-without-image { - padding:0 0 5px 0; -} -.gritter-with-image { - width:220px; - float:right; -} -/* for the light (white) version of the gritter notice */ -.gritter-light .gritter-item, -.gritter-light .gritter-bottom, -.gritter-light .gritter-top, -.gritter-close { - color: #222; -} -.gritter-light .gritter-title { - text-shadow: none; + position: relative; + max-width: 400px; + min-width: 0; + width: 100%; + margin: 0 auto; + display: flex; } -@media all and (max-width: 400px){ - #gritter-notice-wrapper{ - max-height:172px; - overflow:hidden; - width:100% !important; - background-color: #ccc; - bottom:20px; - left:0px; - right:0px; - color:#000; - } - .gritter-close { - display:block !important; - left: auto !important; - right:5px; - } - #gritter-notice-wrapper.bottom-right{ - left:0px !important; - bottom:30px !important; - right:0px !important; - } - .gritter-item p{ - color:black; - font-size:16px; - } - .gritter-title{ - text-shadow: none !important; - color:black; - } - .gritter-item{ - padding:2px 11px 8px 4px; - } - .gritter-item-wrapper{ - margin:0; - } - .gritter-item-wrapper > div{ - background: none; - } +.gritter-item .gritter-content { + flex: 1 auto; + text-align: center; } -@media only screen and (max-width: 720px) { - #gritter-notice-wrapper{ - bottom:43px !important; - right:10px !important; - } + +.gritter-item .gritter-close { + display: none; + align-self: center; +} + +.gritter-item.sticky .gritter-close { + display: block; +} + +.gritter-item.error { + color: #a84341; + background-color: #eed3d4; } \ No newline at end of file diff --git a/src/static/js/chat.js b/src/static/js/chat.js index 531109ef1..1309691ed 100755 --- a/src/static/js/chat.js +++ b/src/static/js/chat.js @@ -32,7 +32,7 @@ var chat = (function() { $("#chaticon").hide(); $("#chatbox").css('display', 'flex'); - $("#gritter-notice-wrapper").hide(); + $("#gritter-container").hide(); self.scrollDown(); chatMentions = 0; Tinycon.setBubble(0); @@ -81,7 +81,7 @@ var chat = (function() $("#chaticon").show(); $("#chatbox").hide(); $.gritter.removeAll(); - $("#gritter-notice-wrapper").show(); + $("#gritter-container").show(); } }, scrollDown: function() diff --git a/src/static/js/gritter.js b/src/static/js/gritter.js index f37650d1f..bbaeb3d46 100644 --- a/src/static/js/gritter.js +++ b/src/static/js/gritter.js @@ -7,6 +7,8 @@ * * Date: February 24, 2012 * Version: 1.7.4 + * + * Edited by Sebastian Castro on 2020-03-31 */ (function($){ @@ -66,19 +68,26 @@ var Gritter = { // Public - options to over-ride with $.gritter.options in "add" - position: '', - fade_in_speed: '', - fade_out_speed: '', + fade_in_speed: '300', + fade_out_speed: '200', time: '', // Private - no touchy the private parts _custom_timer: 0, _item_count: 0, _is_setup: 0, - _tpl_close: '
', - _tpl_title: '[[title]]', - _tpl_item: '', - _tpl_wrap: '
', + _tpl_wrap: '
', + _tpl_close: '', + _tpl_title: '

[[title]]

', + _tpl_item: [ + ''].join(''), + /** * Add a gritter notification to the screen @@ -107,11 +116,14 @@ image = params.image || '', sticky = params.sticky || false, item_class = params.class_name || $.gritter.options.class_name, - position = $.gritter.options.position, time_alive = params.time || ''; this._verifyWrapper(); + if (sticky) { + item_class += " sticky"; + } + this._item_count++; var number = this._item_count, tmp = this._tpl_item; @@ -129,9 +141,6 @@ this._custom_timer = time_alive; } - var image_str = (image != '') ? '' : '', - class_name = (image != '') ? 'gritter-with-image' : 'gritter-without-image'; - // String replacements on the template if(title){ title = this._str_replace('[[title]]',title,this._tpl_title); @@ -140,8 +149,8 @@ } tmp = this._str_replace( - ['[[title]]', '[[text]]', '[[close]]', '[[image]]', '[[number]]', '[[class_name]]', '[[item_class]]'], - [title, text, this._tpl_close, image_str, this._item_count, class_name, item_class], tmp + ['[[title]]', '[[text]]', '[[number]]', '[[item_class]]'], + [title, text, this._item_count, item_class], tmp ); // If it's false, don't show another gritter message @@ -149,7 +158,7 @@ return false; } - $('#gritter-notice-wrapper').addClass(position).append(tmp); + $('#gritter-container').append(tmp); var item = $('#gritter-item-' + this._item_count); @@ -173,7 +182,6 @@ Gritter._setFadeTimer($(this), number); } } - Gritter._hoverState($(this), event.type); }); // Clicking (X) makes the perdy thing close @@ -200,7 +208,7 @@ // Check if the wrapper is empty, if it is.. remove the wrapper if($('.gritter-item-wrapper').length == 0){ - $('#gritter-notice-wrapper').remove(); + $('#gritter-container').remove(); } }, @@ -247,35 +255,6 @@ }, - /** - * Perform actions based on the type of bind (mouseenter, mouseleave) - * @private - * @param {Object} e The jQuery element - * @param {String} type The type of action we're performing: mouseenter or mouseleave - */ - _hoverState: function(e, type){ - - // Change the border styles and add the (X) close button when you hover - if(type == 'mouseenter'){ - - e.addClass('hover'); - - // Show close button - e.find('.gritter-close').show(); - - } - // Remove the border styles and hide (X) close button when you mouse out - else { - - e.removeClass('hover'); - - // Hide close button - e.find('.gritter-close').hide(); - - } - - }, - /** * Remove a specific notification based on an ID * @param {Integer} unique_id The ID used to delete a specific notification @@ -346,7 +325,7 @@ var before_close = ($.isFunction(params.before_close)) ? params.before_close : function(){}; var after_close = ($.isFunction(params.after_close)) ? params.after_close : function(){}; - var wrap = $('#gritter-notice-wrapper'); + var wrap = $('#gritter-container'); before_close(wrap); wrap.fadeOut(function(){ $(this).remove(); @@ -404,8 +383,8 @@ */ _verifyWrapper: function(){ - if($('#gritter-notice-wrapper').length == 0){ - $('body').append(this._tpl_wrap); + if($('#gritter-container').length == 0){ + $('#editorcontainerbox').append(this._tpl_wrap); } } diff --git a/src/static/js/pad.js b/src/static/js/pad.js index f0860c590..2732f3492 100644 --- a/src/static/js/pad.js +++ b/src/static/js/pad.js @@ -364,12 +364,6 @@ function handshake() }); } -$.extend($.gritter.options, { - position: 'bottom-right', // defaults to 'top-right' but can be 'bottom-left', 'bottom-right', 'top-left', 'top-right' (added in 1.7.1) - fade: false, // dont fade, too jerky on mobile - time: 6000 // hang on the screen for... -}); - var pad = { // don't access these directly from outside this file, except // for debugging diff --git a/src/static/skins/colibris/src/components/gritter.css b/src/static/skins/colibris/src/components/gritter.css index 7c514010c..0b0d3827b 100644 --- a/src/static/skins/colibris/src/components/gritter.css +++ b/src/static/skins/colibris/src/components/gritter.css @@ -4,7 +4,7 @@ text-shadow: none; } -#gritter-notice-wrapper { +#gritter-container { background-color: #fff; box-shadow: 0 0 0 1px rgba(99, 114, 130, 0.16), 0 8px 16px rgba(27, 39, 51, 0.08); border-radius: 3px; @@ -14,7 +14,7 @@ } @media (max-width: 1100px) { - #gritter-notice-wrapper { + #gritter-container { display: none; } }