krikkert/habitica
1
0
Fork 0
mirror of https://github.com/HabitRPG/habitica.git synced 2025-12-18 07:07:35 +01:00
Code Issues Packages Projects Releases Wiki Activity

Rework Notifications: separate and bundle to an amount of 4 (#13300)

Browse Source 
* WIP notifications only show 2 at once

* separate and bundle notifications to pairs

* notification fadein/-out/move animations - remove notifications on an interval instead of calculated timeouts

* easier way to import all sprite css files

* add stories + fix sizes / paddings + click to hide + animation fixes

* keep notification at the top but always under the toolbars

* change animations to ease-in 0.25s + add prop to change the delay between deletion and add

* fix adding logic in a rare case of added notifications when only one item is currently visible + add debug mode

* disable lint for notification console

* add more notification example trigger buttons

* potential fix of animation / queue

* increase amount of notifications to 4

* fix sanity

* fix test:unit call again

* new notification styles - fix animations

* keep error notifications visible until manually removed + refactor adding/removal logic

* fix margins

* prevent multiple filling + different delay on filling

* stop and restart removal timer on new notifications

* reduce line-height / apply different margin for icons

* move sprites.scss out and use it in app.vue as well

* update sprites back to 31
This commit is contained in:
negue
2021-08-27 02:56:41 +02:00
committed by GitHub
parent 7f0bdd6a9c
commit 53424d548a
9 changed files with 696 additions and 262 deletions
Download Patch File Download Diff File Expand all files Collapse all files

34
website/client/src/app.vue
View File

@@ -520,37 +520,5 @@ export default {
<style src="axios-progress-bar/dist/nprogress.css"></style>
<style src="@/assets/scss/index.scss" lang="scss"></style>
<style src="@/assets/css/sprites/spritesmith-largeSprites-0.css"></style>
<style src="@/assets/css/sprites/spritesmith-main-0.css"></style>
<style src="@/assets/css/sprites/spritesmith-main-1.css"></style>
<style src="@/assets/css/sprites/spritesmith-main-2.css"></style>
<style src="@/assets/css/sprites/spritesmith-main-3.css"></style>
<style src="@/assets/css/sprites/spritesmith-main-4.css"></style>
<style src="@/assets/css/sprites/spritesmith-main-5.css"></style>
<style src="@/assets/css/sprites/spritesmith-main-6.css"></style>
<style src="@/assets/css/sprites/spritesmith-main-7.css"></style>
<style src="@/assets/css/sprites/spritesmith-main-8.css"></style>
<style src="@/assets/css/sprites/spritesmith-main-9.css"></style>
<style src="@/assets/css/sprites/spritesmith-main-10.css"></style>
<style src="@/assets/css/sprites/spritesmith-main-11.css"></style>
<style src="@/assets/css/sprites/spritesmith-main-12.css"></style>
<style src="@/assets/css/sprites/spritesmith-main-13.css"></style>
<style src="@/assets/css/sprites/spritesmith-main-14.css"></style>
<style src="@/assets/css/sprites/spritesmith-main-15.css"></style>
<style src="@/assets/css/sprites/spritesmith-main-16.css"></style>
<style src="@/assets/css/sprites/spritesmith-main-17.css"></style>
<style src="@/assets/css/sprites/spritesmith-main-18.css"></style>
<style src="@/assets/css/sprites/spritesmith-main-19.css"></style>
<style src="@/assets/css/sprites/spritesmith-main-20.css"></style>
<style src="@/assets/css/sprites/spritesmith-main-21.css"></style>
<style src="@/assets/css/sprites/spritesmith-main-22.css"></style>
<style src="@/assets/css/sprites/spritesmith-main-23.css"></style>
<style src="@/assets/css/sprites/spritesmith-main-24.css"></style>
<style src="@/assets/css/sprites/spritesmith-main-25.css"></style>
<style src="@/assets/css/sprites/spritesmith-main-26.css"></style>
<style src="@/assets/css/sprites/spritesmith-main-27.css"></style>
<style src="@/assets/css/sprites/spritesmith-main-28.css"></style>
<style src="@/assets/css/sprites/spritesmith-main-29.css"></style>
<style src="@/assets/css/sprites/spritesmith-main-30.css"></style>
<style src="@/assets/css/sprites/spritesmith-main-31.css"></style>
<style src="@/assets/css/sprites.css"></style>
<style src="@/assets/scss/sprites.scss" lang="scss"></style>
<style src="smartbanner.js/dist/smartbanner.min.css"></style>