diff --git a/frontlog.css b/frontlog.css index 4da3e90..b19265b 100644 --- a/frontlog.css +++ b/frontlog.css @@ -6,9 +6,33 @@ frontlog { } flogelem { - display: log; + display:block; + border-width: 1px; + border-style: solid; + overflow: hidden; + max-height: 0; + margin-bottom: 0; + padding: 0; + opacity: 0; + -webkit-transition: max-height 3s, margin-bottom 3s, padding 3s,opacity 3s; + -moz-transition: max-height 3s, margin-bottom 3s, padding 3s,opacity 3s; + transition: max-height 3s, margin-bottom 3s, padding 3s,opacity 3s; +} + +.flshow { + max-height: 100px!important; + margin-bottom: 1em; + padding: 4px; + border-radius: 8px; + opacity: 1; +} + +fltitle { + display: block; + font-size: 120%; } flogelem img { + float: left; width: 25px; } \ No newline at end of file diff --git a/frontlog.js b/frontlog.js index 6c5001b..fd5ac4f 100644 --- a/frontlog.js +++ b/frontlog.js @@ -30,7 +30,7 @@ let frontlogPipe = function(title,icon,msg,col, time) { { let ch = 'abcdefghijklmnopqrstuvwxyz0123456789'; let chl = ch.length; - for ( let i = 0; i < length; i++ ) { + for ( let i = 0; i < 16; i++ ) { elemid += ch.charAt(Math.floor(Math.random() * chl)); } } @@ -50,10 +50,17 @@ let frontlogPipe = function(title,icon,msg,col, time) { elem.style = 'border-color: '+col+';'; elem.addEventListener('click',function(ev){ - frontlogVanish(ev.target); + let tg = ev.target; + if(tg.tagName.toLowerCase() != 'flogelem') { + tg = ev.target.parentNode; + } + frontlogVanish(tg); }); setTimeout(function(){ frontlogVanish(elem); },time*1000) frontlog.appendChild(elem); + setTimeout(function(){ + elem.classList.add('flshow'); + },10); }