archive/BookStackApp_BookStack
0
0
Fork 0
mirror of https://github.com/BookStackApp/BookStack.git synced 2025-05-01 23:19:51 +00:00
Code Issues Projects Releases Wiki Activity

Prevented error notification being visible on load

Browse source 
Fixes 

Also made design a little more compact
This commit is contained in:
Dan Brown 2018-07-29 15:34:54 +01:00
parent 6d35fb5237
commit 69a0f8d502
No known key found for this signature in database
GPG key ID: 46D9F943C24A2EF9
4 changed files with 19 additions and 16 deletions
resources
assets
js/components
notification.js
sass
_components.scss_variables.scss
views/partials
notifications.blade.php

7
resources/assets/js/components/notification.js
View file

@ -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);
} }

20
resources/assets/sass/_components.scss
View file

@ -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);

1
resources/assets/sass/_variables.scss
View file

@ -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);

7
resources/views/partials/notifications.blade.php
View file

@ -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>