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
This commit is contained in:
Sebastian Castro
muxator
parent
c0d9797d0f
commit
a482a94fb8
5 changed files with 60 additions and 181 deletions
|
|
@ -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;
|
||||
}
|
||||
|
|
@ -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()
|
||||
|
|
|
|||
|
|
@ -7,6 +7,8 @@
|
|||
*
|
||||
* Date: February 24, 2012
|
||||
* Version: 1.7.4
|
||||
*
|
||||
* Edited by Sebastian Castro <sebastian.castro@protonmail.com> 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: '<div class="gritter-close"></div>',
|
||||
_tpl_title: '<span class="gritter-title">[[title]]</span>',
|
||||
_tpl_item: '<div id="gritter-item-[[number]]" class="gritter-item-wrapper [[item_class]]" style="display:none"><div class="gritter-top"></div><div class="gritter-item">[[close]][[image]]<div class="[[class_name]]">[[title]]<p>[[text]]</p></div><div style="clear:both"></div></div><div class="gritter-bottom"></div></div>',
|
||||
_tpl_wrap: '<div id="gritter-notice-wrapper" aria-live="polite" aria-atomic="false" aria-relevant="additions" role="log"></div>',
|
||||
_tpl_wrap: '<div id="gritter-container"></div>',
|
||||
_tpl_close: '',
|
||||
_tpl_title: '<h3 class="gritter-title">[[title]]</h3>',
|
||||
_tpl_item: [
|
||||
'<div id="gritter-item-[[number]]" class="popup gritter-item [[item_class]]">',
|
||||
'<div class="gritter-content">',
|
||||
'[[title]]',
|
||||
'<p>[[text]]</p>',
|
||||
'</div>',
|
||||
'<div class="gritter-close"><i class="buttonicon buttonicon-cancel"></i></div>',
|
||||
'</div>'].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 != '') ? '<img src="' + image + '" class="gritter-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);
|
||||
}
|
||||
|
||||
}
|
||||
|
|
|
|||
|
|
@ -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
|
||||
|
|
|
|||
|
|
@ -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;
|
||||
}
|
||||
}
|
||||
|
|
|
|||
Loading…
Reference in a new issue