Skip to content

Commit c1338e4

Browse files
trungvosetrungvose
authored
Merge pull request trungvose#82 from trungk18/feature/snow-2020
Feature/snow 2020
2 parents 376e5c5 + cb089ca commit c1338e4

File tree

10 files changed

+301
-3
lines changed

10 files changed

+301
-3
lines changed

‎README.md‎

Lines changed: 8 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -15,6 +15,7 @@ This is not only a simplified Jira clone built with Angular 9, but also an examp
1515
<p>
1616

1717
- [A simplified Jira clone built with Angular 10, Akita and ng-zorro](#a-simplified-jira-clone-built-with-angular-10-akita-and-ng-zorro)
18+
- [Merry Christmas](#merry-christmas)
1819
- [Working application](#working-application)
1920
- [Storybook](#storybook)
2021
- [What is Storybook](#what-is-storybook)
@@ -45,6 +46,12 @@ This is not only a simplified Jira clone built with Angular 9, but also an examp
4546
</p>
4647
</details>
4748

49+
## Merry Christmas
50+
51+
Thank you for your support! -> https://jira.trungk18.com/project/issue/2020
52+
53+
![Jira clone built with Angular 9 and Akita][christmas2020]
54+
4855
## Working application
4956

5057
Check out the **live demo** -> https://jira.trungk18.com
@@ -325,6 +332,7 @@ Feel free to use my code on your project. It would be great if you put a referen
325332
[datlyfe]: https://github.com/Datlyfe/jira_clone
326333
[stack]: frontend/src/assets/img/jira-clone-tech-stack.png
327334
[demo]: frontend/src/assets/img/jira-clone-angular-demo-trungk18.gif
335+
[christmas2020]: frontend/src/assets/img/merry-christmas-2020.gif
328336
[demo-storybook]: frontend/src/assets/img/jira-storybook.gif
329337
[time]: frontend/src/assets/img/time-spending.png
330338
[issues]: https://github.com/trungk18/jira-clone-angular/issues/new

‎frontend/src/app/app.component.html‎

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -4,4 +4,5 @@
44
nzSize="large">
55
<router-outlet></router-outlet>
66
</nz-spin>
7-
</div>
7+
</div>
8+
<j-snow></j-snow>

‎frontend/src/app/app.component.scss‎

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -37,6 +37,10 @@ board-dnd {
3737
}
3838

3939
//ng-zorro override
40+
body {
41+
overflow: hidden;
42+
}
43+
4044
body,
4145
.ant-modal {
4246
@apply text-textDark;

‎frontend/src/app/app.module.ts‎

Lines changed: 3 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -12,6 +12,7 @@ import { AppComponent } from './app.component';
1212
import { NzIconModule } from 'ng-zorro-antd/icon';
1313
import { NzSpinModule } from 'ng-zorro-antd/spin';
1414
import { QuillModule } from 'ngx-quill';
15+
import { SnowModule } from './core/snow/snow.module';
1516

1617
@NgModule({
1718
declarations: [AppComponent],
@@ -25,7 +26,8 @@ import { QuillModule } from 'ngx-quill';
2526
NzIconModule.forRoot([]),
2627
environment.production ? [] : AkitaNgDevtools,
2728
AkitaNgRouterStoreModule,
28-
QuillModule.forRoot()
29+
QuillModule.forRoot(),
30+
SnowModule
2931
],
3032
providers: [
3133
{

‎frontend/src/app/core/snow/snow.component.html‎

Lines changed: 200 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,200 @@
1+
<div class="snow">❅</div>
2+
<div class="snow">❅</div>
3+
<div class="snow">❅</div>
4+
<div class="snow">❅</div>
5+
<div class="snow">❅</div>
6+
<div class="snow">❅</div>
7+
<div class="snow">❅</div>
8+
<div class="snow">❅</div>
9+
<div class="snow">❅</div>
10+
<div class="snow">❅</div>
11+
<div class="snow">❅</div>
12+
<div class="snow">❅</div>
13+
<div class="snow">❅</div>
14+
<div class="snow">❅</div>
15+
<div class="snow">❅</div>
16+
<div class="snow">❅</div>
17+
<div class="snow">❅</div>
18+
<div class="snow">❅</div>
19+
<div class="snow">❅</div>
20+
<div class="snow">❅</div>
21+
<div class="snow">❅</div>
22+
<div class="snow">❅</div>
23+
<div class="snow">❅</div>
24+
<div class="snow">❅</div>
25+
<div class="snow">❅</div>
26+
<div class="snow">❅</div>
27+
<div class="snow">❅</div>
28+
<div class="snow">❅</div>
29+
<div class="snow">❅</div>
30+
<div class="snow">❅</div>
31+
<div class="snow">❅</div>
32+
<div class="snow">❅</div>
33+
<div class="snow">❅</div>
34+
<div class="snow">❅</div>
35+
<div class="snow">❅</div>
36+
<div class="snow">❅</div>
37+
<div class="snow">❅</div>
38+
<div class="snow">❅</div>
39+
<div class="snow">❅</div>
40+
<div class="snow">❅</div>
41+
<div class="snow">❅</div>
42+
<div class="snow">❅</div>
43+
<div class="snow">❅</div>
44+
<div class="snow">❅</div>
45+
<div class="snow">❅</div>
46+
<div class="snow">❅</div>
47+
<div class="snow">❅</div>
48+
<div class="snow">❅</div>
49+
<div class="snow">❅</div>
50+
<div class="snow">❅</div>
51+
<div class="snow">❅</div>
52+
<div class="snow">❅</div>
53+
<div class="snow">❅</div>
54+
<div class="snow">❅</div>
55+
<div class="snow">❅</div>
56+
<div class="snow">❅</div>
57+
<div class="snow">❅</div>
58+
<div class="snow">❅</div>
59+
<div class="snow">❅</div>
60+
<div class="snow">❅</div>
61+
<div class="snow">❅</div>
62+
<div class="snow">❅</div>
63+
<div class="snow">❅</div>
64+
<div class="snow">❅</div>
65+
<div class="snow">❅</div>
66+
<div class="snow">❅</div>
67+
<div class="snow">❅</div>
68+
<div class="snow">❅</div>
69+
<div class="snow">❅</div>
70+
<div class="snow">❅</div>
71+
<div class="snow">❅</div>
72+
<div class="snow">❅</div>
73+
<div class="snow">❅</div>
74+
<div class="snow">❅</div>
75+
<div class="snow">❅</div>
76+
<div class="snow">❅</div>
77+
<div class="snow">❅</div>
78+
<div class="snow">❅</div>
79+
<div class="snow">❅</div>
80+
<div class="snow">❅</div>
81+
<div class="snow">❅</div>
82+
<div class="snow">❅</div>
83+
<div class="snow">❅</div>
84+
<div class="snow">❅</div>
85+
<div class="snow">❅</div>
86+
<div class="snow">❅</div>
87+
<div class="snow">❅</div>
88+
<div class="snow">❅</div>
89+
<div class="snow">❅</div>
90+
<div class="snow">❅</div>
91+
<div class="snow">❅</div>
92+
<div class="snow">❅</div>
93+
<div class="snow">❅</div>
94+
<div class="snow">❅</div>
95+
<div class="snow">❅</div>
96+
<div class="snow">❅</div>
97+
<div class="snow">❅</div>
98+
<div class="snow">❅</div>
99+
<div class="snow">❅</div>
100+
<div class="snow">❅</div>
101+
<div class="snow">❅</div>
102+
<div class="snow">❅</div>
103+
<div class="snow">❅</div>
104+
<div class="snow">❅</div>
105+
<div class="snow">❅</div>
106+
<div class="snow">❅</div>
107+
<div class="snow">❅</div>
108+
<div class="snow">❅</div>
109+
<div class="snow">❅</div>
110+
<div class="snow">❅</div>
111+
<div class="snow">❅</div>
112+
<div class="snow">❅</div>
113+
<div class="snow">❅</div>
114+
<div class="snow">❅</div>
115+
<div class="snow">❅</div>
116+
<div class="snow">❅</div>
117+
<div class="snow">❅</div>
118+
<div class="snow">❅</div>
119+
<div class="snow">❅</div>
120+
<div class="snow">❅</div>
121+
<div class="snow">❅</div>
122+
<div class="snow">❅</div>
123+
<div class="snow">❅</div>
124+
<div class="snow">❅</div>
125+
<div class="snow">❅</div>
126+
<div class="snow">❅</div>
127+
<div class="snow">❅</div>
128+
<div class="snow">❅</div>
129+
<div class="snow">❅</div>
130+
<div class="snow">❅</div>
131+
<div class="snow">❅</div>
132+
<div class="snow">❅</div>
133+
<div class="snow">❅</div>
134+
<div class="snow">❅</div>
135+
<div class="snow">❅</div>
136+
<div class="snow">❅</div>
137+
<div class="snow">❅</div>
138+
<div class="snow">❅</div>
139+
<div class="snow">❅</div>
140+
<div class="snow">❅</div>
141+
<div class="snow">❅</div>
142+
<div class="snow">❅</div>
143+
<div class="snow">❅</div>
144+
<div class="snow">❅</div>
145+
<div class="snow">❅</div>
146+
<div class="snow">❅</div>
147+
<div class="snow">❅</div>
148+
<div class="snow">❅</div>
149+
<div class="snow">❅</div>
150+
<div class="snow">❅</div>
151+
<div class="snow">❅</div>
152+
<div class="snow">❅</div>
153+
<div class="snow">❅</div>
154+
<div class="snow">❅</div>
155+
<div class="snow">❅</div>
156+
<div class="snow">❅</div>
157+
<div class="snow">❅</div>
158+
<div class="snow">❅</div>
159+
<div class="snow">❅</div>
160+
<div class="snow">❅</div>
161+
<div class="snow">❅</div>
162+
<div class="snow">❅</div>
163+
<div class="snow">❅</div>
164+
<div class="snow">❅</div>
165+
<div class="snow">❅</div>
166+
<div class="snow">❅</div>
167+
<div class="snow">❅</div>
168+
<div class="snow">❅</div>
169+
<div class="snow">❅</div>
170+
<div class="snow">❅</div>
171+
<div class="snow">❅</div>
172+
<div class="snow">❅</div>
173+
<div class="snow">❅</div>
174+
<div class="snow">❅</div>
175+
<div class="snow">❅</div>
176+
<div class="snow">❅</div>
177+
<div class="snow">❅</div>
178+
<div class="snow">❅</div>
179+
<div class="snow">❅</div>
180+
<div class="snow">❅</div>
181+
<div class="snow">❅</div>
182+
<div class="snow">❅</div>
183+
<div class="snow">❅</div>
184+
<div class="snow">❅</div>
185+
<div class="snow">❅</div>
186+
<div class="snow">❅</div>
187+
<div class="snow">❅</div>
188+
<div class="snow">❅</div>
189+
<div class="snow">❅</div>
190+
<div class="snow">❅</div>
191+
<div class="snow">❅</div>
192+
<div class="snow">❅</div>
193+
<div class="snow">❅</div>
194+
<div class="snow">❅</div>
195+
<div class="snow">❅</div>
196+
<div class="snow">❅</div>
197+
<div class="snow">❅</div>
198+
<div class="snow">❅</div>
199+
<div class="snow">❅</div>
200+
<div class="snow">❅</div>

‎frontend/src/app/core/snow/snow.component.scss‎

Lines changed: 46 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,46 @@
1+
//https://codepen.io/alphardex/pen/dyPorwJ
2+
3+
@function random_range($min, $max) {
4+
$rand: random();
5+
$random_range: $min + floor($rand * (($max - $min) + 1));
6+
@return $random_range;
7+
}
8+
9+
.snow {
10+
$total: 200;
11+
position: absolute;
12+
width: 20px;
13+
height: 20px;
14+
font-size: 20px;
15+
border-radius: 50%;
16+
pointer-events: none;
17+
color: #a3b1bc;
18+
19+
@for $i from 1 through $total {
20+
$random-x: random(1000000) * 0.0001vw;
21+
$random-offset: random_range(-100000, 100000) * 0.0001vw;
22+
$random-x-end: $random-x + $random-offset;
23+
$random-x-end-yoyo: $random-x + ($random-offset / 2);
24+
$random-yoyo-time: random_range(30000, 80000) / 100000;
25+
$random-yoyo-y: $random-yoyo-time * 100vh;
26+
$random-scale: random(10000) * 0.0001;
27+
$fall-duration: random_range(10, 30) * 1s;
28+
$fall-delay: random(30) * -1s;
29+
30+
&:nth-child(#{$i}) {
31+
opacity: random(8000) * 0.0001;
32+
transform: translate($random-x, -10px) scale($random-scale);
33+
animation: fall-#{$i} $fall-duration $fall-delay linear infinite;
34+
}
35+
36+
@keyframes fall-#{$i} {
37+
#{percentage($random-yoyo-time)} {
38+
transform: translate($random-x-end, $random-yoyo-y) scale($random-scale);
39+
}
40+
41+
to {
42+
transform: translate($random-x-end-yoyo, 100vh) scale($random-scale);
43+
}
44+
}
45+
}
46+
}

‎frontend/src/app/core/snow/snow.component.ts‎

Lines changed: 15 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,15 @@
1+
import { Component, OnInit } from '@angular/core';
2+
3+
@Component({
4+
selector: 'j-snow',
5+
templateUrl: './snow.component.html',
6+
styleUrls: ['./snow.component.scss']
7+
})
8+
export class SnowComponent implements OnInit {
9+
10+
constructor() { }
11+
12+
ngOnInit(): void {
13+
}
14+
15+
}

‎frontend/src/app/core/snow/snow.module.ts‎

Lines changed: 10 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,10 @@
1+
import { NgModule } from '@angular/core';
2+
import { CommonModule } from '@angular/common';
3+
import { SnowComponent } from './snow.component';
4+
5+
@NgModule({
6+
declarations: [SnowComponent],
7+
imports: [CommonModule],
8+
exports: [SnowComponent]
9+
})
10+
export class SnowModule {}

‎frontend/src/assets/data/project.json‎

Lines changed: 13 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -63,9 +63,21 @@
6363
"status": "Backlog",
6464
"createdAt": "2020-10-26T15:13:08.070Z",
6565
"updatedAt": "2020-10-26T15:13:10.418Z",
66+
"listPosition": 2
67+
},
68+
{
69+
"type": "Story",
70+
"priority": "Highest",
71+
"title": "Merry Christmas 🎄🎄🎄",
72+
"description": "<p><span style='background-color: transparent;'>2020 is about to an end, and the holiday session is coming. It was such a particular year for you and me. I have been staying in Singapore for more than eight months without traveling anywhere else. Probably, I will not be able to come back home for our upcoming Tet holiday. But tough times will make us </span><u style='background-color: transparent;'>stronger</u><span style='background-color: transparent;'>, I believe so :)</span></p><p><br></p><p><span style='background-color: transparent;'>I want to take this opportunity to say </span><u style='background-color: transparent;'>thank you for all of your support</u><span style='background-color: transparent;'> for my project, especially for Angular Jira Clone. Seeing my work got lots of positive comments and discussions made my 2020 genuinely unforgettable. I am working on some exciting Angular projects, and hopefully I can publish them very soon in 2021.</span></p><p><br></p><p><strong style='background-color: transparent;'>I hope your holiday season is full of peace, joy, and happiness. Stay safe!</strong></p><p><br></p><p><span style='color: rgb(0, 0, 0);'><img src='https://res.cloudinary.com/dvujyxh7e/image/upload/c_scale,w_250/v1608345048/christmas_totoro_2013-02_wphb7s.jpg'></span></p><p><br></p><p>P/s: This is Totoro, my most favorite character 😂</p>",
73+
"reporterId": "d65047e5-f4cf-4caa-9a38-6073dcbab7d1",
74+
"userIds": ["d65047e5-f4cf-4caa-9a38-6073dcbab7d1"],
75+
"id": "2020",
76+
"status": "Backlog",
77+
"createdAt": "2020-12-19T03:00:00.000Z",
78+
"updatedAt": "2020-12-19T03:00:00.000Z",
6679
"listPosition": 1
6780
},
68-
6981
{
7082
"type": "Story",
7183
"priority": "Highest",

‎frontend/src/assets/img/merry-christmas-2020.gif‎

2.28 MB
Loading

0 commit comments

Comments
 (0)