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.type = elem.getAttribute('notification');
|
||||||
this.textElem = elem.querySelector('span');
|
this.textElem = elem.querySelector('span');
|
||||||
this.autohide = this.elem.hasAttribute('data-autohide');
|
this.autohide = this.elem.hasAttribute('data-autohide');
|
||||||
|
this.elem.style.display = 'grid';
|
||||||
|
|
||||||
window.$events.listen(this.type, text => {
|
window.$events.listen(this.type, text => {
|
||||||
this.show(text);
|
this.show(text);
|
||||||
});
|
});
|
||||||
elem.addEventListener('click', this.hide.bind(this));
|
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);
|
this.hideCleanup = this.hideCleanup.bind(this);
|
||||||
}
|
}
|
||||||
|
@ -4,17 +4,18 @@
|
|||||||
top: 0;
|
top: 0;
|
||||||
right: 0;
|
right: 0;
|
||||||
margin: $-xl*2 $-xl;
|
margin: $-xl*2 $-xl;
|
||||||
padding: $-l $-xl;
|
padding: $-m $-l;
|
||||||
background-color: #EEE;
|
background-color: #EEE;
|
||||||
border-radius: 3px;
|
border-radius: 3px;
|
||||||
box-shadow: $bs-med;
|
box-shadow: $bs-card;
|
||||||
z-index: 999999;
|
z-index: 999999;
|
||||||
cursor: pointer;
|
cursor: pointer;
|
||||||
max-width: 360px;
|
max-width: 360px;
|
||||||
transition: transform ease-in-out 280ms;
|
transition: transform ease-in-out 280ms;
|
||||||
transform: translate3d(580px, 0, 0);
|
transform: translateX(580px);
|
||||||
display: grid;
|
display: grid;
|
||||||
grid-template-columns: 64px 1fr;
|
grid-template-columns: 42px 1fr;
|
||||||
|
color: #FFF;
|
||||||
span, svg {
|
span, svg {
|
||||||
vertical-align: middle;
|
vertical-align: middle;
|
||||||
justify-self: center;
|
justify-self: center;
|
||||||
@ -22,9 +23,9 @@
|
|||||||
}
|
}
|
||||||
svg {
|
svg {
|
||||||
fill: #EEEEEE;
|
fill: #EEEEEE;
|
||||||
width: 4em;
|
width: 2.8rem;
|
||||||
height: 4em;
|
height: 2.8rem;
|
||||||
padding-right: $-m;
|
padding-right: $-s;
|
||||||
}
|
}
|
||||||
span {
|
span {
|
||||||
vertical-align: middle;
|
vertical-align: middle;
|
||||||
@ -32,18 +33,15 @@
|
|||||||
}
|
}
|
||||||
&.pos {
|
&.pos {
|
||||||
background-color: $positive;
|
background-color: $positive;
|
||||||
color: #EEE;
|
|
||||||
}
|
}
|
||||||
&.neg {
|
&.neg {
|
||||||
background-color: $negative;
|
background-color: $negative;
|
||||||
color: #EEE;
|
|
||||||
}
|
}
|
||||||
&.warning {
|
&.warning {
|
||||||
background-color: $secondary;
|
background-color: $secondary;
|
||||||
color: #EEE;
|
|
||||||
}
|
}
|
||||||
&.showing {
|
&.showing {
|
||||||
transform: translate3d(0, 0, 0);
|
transform: translateX(0);
|
||||||
}
|
}
|
||||||
&.showing:hover {
|
&.showing:hover {
|
||||||
transform: translate3d(0, -2px, 0);
|
transform: translate3d(0, -2px, 0);
|
||||||
|
@ -59,4 +59,5 @@ $text-light: #EEE;
|
|||||||
// Shadows
|
// Shadows
|
||||||
$bs-light: 0 0 4px 1px #CCC;
|
$bs-light: 0 0 4px 1px #CCC;
|
||||||
$bs-med: 0 1px 3px 1px rgba(76, 76, 76, 0.26);
|
$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);
|
$bs-hover: 0 2px 2px 1px rgba(0,0,0,.13);
|
@ -1,12 +1,11 @@
|
|||||||
|
<div notification="success" style="display: none;" data-autohide class="pos" @if(session()->has('success')) data-show @endif>
|
||||||
<div notification="success" data-autohide class="pos" @if(session()->has('success')) data-show @endif>
|
|
||||||
@icon('check-circle') <span>{!! nl2br(htmlentities(session()->get('success'))) !!}</span>
|
@icon('check-circle') <span>{!! nl2br(htmlentities(session()->get('success'))) !!}</span>
|
||||||
</div>
|
</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>
|
@icon('info') <span>{!! nl2br(htmlentities(session()->get('warning'))) !!}</span>
|
||||||
</div>
|
</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>
|
@icon('danger') <span>{!! nl2br(htmlentities(session()->get('error'))) !!}</span>
|
||||||
</div>
|
</div>
|
||||||
|
Loading…
Reference in New Issue
Block a user