mirror of
https://github.com/BookStackApp/BookStack.git
synced 2024-08-26 12:16:07 +00:00
Prevented error notification being visible on load
Fixes #897 Also made design a little more compact
This commit is contained in:
parent
6d35fb5237
commit
69a0f8d502
@ -6,11 +6,16 @@ class Notification {
|
||||
this.type = elem.getAttribute('notification');
|
||||
this.textElem = elem.querySelector('span');
|
||||
this.autohide = this.elem.hasAttribute('data-autohide');
|
||||
this.elem.style.display = 'grid';
|
||||
|
||||
window.$events.listen(this.type, text => {
|
||||
this.show(text);
|
||||
});
|
||||
elem.addEventListener('click', this.hide.bind(this));
|
||||
if (elem.hasAttribute('data-show')) this.show(this.textElem.textContent);
|
||||
|
||||
if (elem.hasAttribute('data-show')) {
|
||||
setTimeout(() => this.show(this.textElem.textContent), 100);
|
||||
}
|
||||
|
||||
this.hideCleanup = this.hideCleanup.bind(this);
|
||||
}
|
||||
|
@ -4,17 +4,18 @@
|
||||
top: 0;
|
||||
right: 0;
|
||||
margin: $-xl*2 $-xl;
|
||||
padding: $-l $-xl;
|
||||
padding: $-m $-l;
|
||||
background-color: #EEE;
|
||||
border-radius: 3px;
|
||||
box-shadow: $bs-med;
|
||||
box-shadow: $bs-card;
|
||||
z-index: 999999;
|
||||
cursor: pointer;
|
||||
max-width: 360px;
|
||||
transition: transform ease-in-out 280ms;
|
||||
transform: translate3d(580px, 0, 0);
|
||||
transform: translateX(580px);
|
||||
display: grid;
|
||||
grid-template-columns: 64px 1fr;
|
||||
grid-template-columns: 42px 1fr;
|
||||
color: #FFF;
|
||||
span, svg {
|
||||
vertical-align: middle;
|
||||
justify-self: center;
|
||||
@ -22,9 +23,9 @@
|
||||
}
|
||||
svg {
|
||||
fill: #EEEEEE;
|
||||
width: 4em;
|
||||
height: 4em;
|
||||
padding-right: $-m;
|
||||
width: 2.8rem;
|
||||
height: 2.8rem;
|
||||
padding-right: $-s;
|
||||
}
|
||||
span {
|
||||
vertical-align: middle;
|
||||
@ -32,18 +33,15 @@
|
||||
}
|
||||
&.pos {
|
||||
background-color: $positive;
|
||||
color: #EEE;
|
||||
}
|
||||
&.neg {
|
||||
background-color: $negative;
|
||||
color: #EEE;
|
||||
}
|
||||
&.warning {
|
||||
background-color: $secondary;
|
||||
color: #EEE;
|
||||
}
|
||||
&.showing {
|
||||
transform: translate3d(0, 0, 0);
|
||||
transform: translateX(0);
|
||||
}
|
||||
&.showing:hover {
|
||||
transform: translate3d(0, -2px, 0);
|
||||
|
@ -59,4 +59,5 @@ $text-light: #EEE;
|
||||
// Shadows
|
||||
$bs-light: 0 0 4px 1px #CCC;
|
||||
$bs-med: 0 1px 3px 1px rgba(76, 76, 76, 0.26);
|
||||
$bs-card: 0 1px 3px 1px rgba(76, 76, 76, 0.26), 0 1px 12px 0px rgba(76, 76, 76, 0.2);
|
||||
$bs-hover: 0 2px 2px 1px rgba(0,0,0,.13);
|
@ -1,12 +1,11 @@
|
||||
|
||||
<div notification="success" data-autohide class="pos" @if(session()->has('success')) data-show @endif>
|
||||
<div notification="success" style="display: none;" data-autohide class="pos" @if(session()->has('success')) data-show @endif>
|
||||
@icon('check-circle') <span>{!! nl2br(htmlentities(session()->get('success'))) !!}</span>
|
||||
</div>
|
||||
|
||||
<div notification="warning" class="warning" @if(session()->has('warning')) data-show @endif>
|
||||
<div notification="warning" style="display: none;" class="warning" @if(session()->has('warning')) data-show @endif>
|
||||
@icon('info') <span>{!! nl2br(htmlentities(session()->get('warning'))) !!}</span>
|
||||
</div>
|
||||
|
||||
<div notification="error" class="neg" @if(session()->has('error')) data-show @endif>
|
||||
<div notification="error" style="display: none;" class="neg" @if(session()->has('error')) data-show @endif>
|
||||
@icon('danger') <span>{!! nl2br(htmlentities(session()->get('error'))) !!}</span>
|
||||
</div>
|
||||
|
Loading…
Reference in New Issue
Block a user