IntenseWebs/discourse
3
0
Fork 0
mirror of https://github.com/discourse/discourse.git synced 2025-02-25 18:55:32 -06:00
Code Issues Packages Projects Releases Wiki Activity

UX: Wizard static confetti (#23973)

Browse Source 
* UX: add static confetti bacgkround image on wizard steps

* DEV: slow down speed animation for confetti

* DEV: compress image file size

* UX: use an image that has transparent background

* DEV: use correct image file name
This commit is contained in:
Ella E 2023-10-18 15:19:00 -06:00 committed by GitHub
parent a125c9e63e
commit 7af291b40d
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
3 changed files with 13 additions and 7 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

BIN
app/assets/images/bubbles-bg.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 24 KiB

2
app/assets/javascripts/wizard/addon/components/wizard-canvas.js
View File

@ -22,7 +22,7 @@ class Particle {
reset() {
this.y = -SIZE;
this.origX = Math.random() * (width + SIZE);
this.speed = 1 + Math.random();
this.speed = 0.5 + Math.random();
this.ang = Math.random() * 2 * Math.PI;
this.scale = Math.random() * 0.4 + 0.2;
this.radius = Math.random() * 25 + 25;

18
app/assets/stylesheets/wizard.scss
View File

@ -12,6 +12,10 @@
}
}
:root {
--d-max-width: 100%;
}
body.wizard {
background-color: var(--primary-50);
color: var(--primary-very-high);
@ -22,13 +26,14 @@ body.wizard {
display: flex;
flex-direction: column;
align-items: center;
padding-top: 1.5em;
background-image: url(../assets/bubbles-bg.png);
height: 100%;
}
@media screen and (max-height: 900px) {
.desktop-view & {
#main-outlet {
padding-top: 0;
}
.desktop-view & {
#main-outlet {
padding-top: 0;
}
}
@ -103,7 +108,8 @@ body.wizard {
&__step-counter {
text-align: center;
font-weight: 700;
color: var(--primary-medium);
color: var(--primary-high);
text-shadow: 1px 1px 12px var(--secondary);
}
&__step-description {