Skip to content

Commit b0a3893

Browse files
trungvosetrungvose
committed
Github star and fork button, twitter share
1 parent 52852f6 commit b0a3893

File tree

5 files changed

+152
-1
lines changed

5 files changed

+152
-1
lines changed

‎src/app/app.module.ts‎

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -19,6 +19,7 @@ import { AkitaNgDevtools } from '@datorama/akita-ngdevtools';
1919
import { environment } from '../environments/environment';
2020
import { TileComponent } from './components/tile/tile.component';
2121
import { LogoComponent } from './components/logo/logo.component';
22+
import { GithubComponent } from './components/github/github.component';
2223

2324
@NgModule({
2425
declarations: [
@@ -38,6 +39,7 @@ import { LogoComponent } from './components/logo/logo.component';
3839
StartLineComponent,
3940
TileComponent,
4041
LogoComponent,
42+
GithubComponent,
4143
],
4244
imports: [BrowserModule, environment.production ? [] : AkitaNgDevtools.forRoot()],
4345
providers: [],

‎src/app/components/github/github.component.html‎

Lines changed: 45 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,45 @@
1+
<div class="d-flex">
2+
<div class="qr">
3+
<div class="hint">
4+
Scan QR code to play with a mobile phone
5+
</div>
6+
<img atl="QR Code to play on mobile"
7+
src="https://res.cloudinary.com/dvujyxh7e/image/upload/c_scale,w_300/v1595337312/tetris-qr-code_ifpjm7.png" />
8+
</div>
9+
<div class="twitter">
10+
<a class="twitter-button"
11+
href="https://twitter.com/intent/tweet?url=https%3A%2F%2Fgithub.com%2Ftrungk18%2Fangular-tetris&text=Awesome%20Tetris%20game%20built%20with%20Angular%2010%20and%20Akita%2C%20can%20you%20get%20999999%20points%3F&hashtags=angular,angulartetris,akita,typescript"
12+
rel="noopener noreferrer"
13+
target="_blank">
14+
<svg class="icon"
15+
style="enable-background:new 0 0 512 512;"
16+
version="1.1"
17+
viewBox="0 0 512 512"
18+
xml:space="preserve"
19+
xmlns="http://www.w3.org/2000/svg"
20+
xmlns:xlink="http://www.w3.org/1999/xlink">
21+
<path d="M196.9,462C317.2,462,383,362.3,383,275.9c0-2.8,0-5.6-0.2-8.5c12.8-9.3,23.8-20.7,32.6-33.9 c-11.9,5.3-24.6,8.8-37.6,10.3c13.7-8.2,23.9-21,28.8-36.2c-12.8,7.6-26.9,13-41.5,15.9c-24.8-26.3-66.2-27.6-92.5-2.8 c-17,16-24.2,39.8-18.9,62.5c-52.6-2.6-101.6-27.5-134.8-68.3c-17.4,29.9-8.5,68.1,20.2,87.3c-10.4-0.3-20.6-3.1-29.7-8.2 c0,0.3,0,0.5,0,0.8c0,31.1,22,57.9,52.5,64.1c-9.6,2.6-19.7,3-29.5,1.1c8.6,26.6,33.1,44.9,61.1,45.4 c-23.2,18.2-51.8,28.1-81.2,28.1c-5.2,0-10.4-0.3-15.6-0.9C126.5,451.8,161.3,462,196.9,462"
22+
id="XMLID_22_" /></svg>
23+
Twitter</a>
24+
</div>
25+
<iframe src="https://ghbtns.com/github-btn.html?user=trungk18&repo=angular-tetris&type=star&count=true&size=large"
26+
frameborder="0"
27+
scrolling="0"
28+
width="170"
29+
height="30"
30+
title="Angular Tetris Star">
31+
</iframe>
32+
<iframe src="https://ghbtns.com/github-btn.html?user=trungk18&repo=angular-tetris&type=fork&count=true&size=large"
33+
frameborder="0"
34+
scrolling="0"
35+
width="170"
36+
height="30"
37+
title="Angular Tetris Fork">
38+
</iframe>
39+
<iframe src="https://ghbtns.com/github-btn.html?user=trungk18&repo=angular-tetris&type=follow&count=true&size=large"
40+
frameborder="0"
41+
scrolling="0"
42+
width="230"
43+
height="30"
44+
title="GitHub"></iframe>
45+
</div>

‎src/app/components/github/github.component.scss‎

Lines changed: 88 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,88 @@
1+
.d-flex {
2+
position: fixed;
3+
top: 50%;
4+
transform: translateY(-50%);
5+
left: -300px;
6+
7+
iframe {
8+
margin-top: 5px;
9+
margin-bottom: 5px;
10+
}
11+
12+
.qr {
13+
left: auto;
14+
top: 5%;
15+
text-align: left;
16+
cursor: pointer;
17+
.hint {
18+
margin-bottom: 10px;
19+
font-size: 14px;
20+
max-width: 300px;
21+
color: #cfd2d6;
22+
opacity: 0;
23+
}
24+
&:hover {
25+
img {
26+
transform: scale(4);
27+
}
28+
.hint {
29+
opacity: 1;
30+
}
31+
}
32+
img {
33+
width: 60px;
34+
height: 60px;
35+
transition: transform 0.2s;
36+
transform-origin: 0 0;
37+
}
38+
}
39+
40+
display: flex;
41+
flex-direction: column;
42+
}
43+
.twitter {
44+
cursor: pointer;
45+
margin-top: 15px;
46+
margin-bottom: 5px;
47+
48+
.twitter-button {
49+
background-color: #eee;
50+
background-image: -webkit-gradient(
51+
linear,
52+
left top,
53+
left bottom,
54+
color-stop(0, #fcfcfc),
55+
to(#eee)
56+
);
57+
background-image: linear-gradient(to bottom, #fcfcfc 0, #eee 100%);
58+
background-repeat: no-repeat;
59+
border: 1px solid #d5d5d5;
60+
padding: 3px 10px 3px 8px;
61+
font-size: 16px;
62+
line-height: 22px;
63+
border-radius: 4px;
64+
font-weight: 700;
65+
color: #333;
66+
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial,
67+
'Noto Sans', sans-serif;
68+
text-decoration: none;
69+
70+
&:hover {
71+
text-decoration: none;
72+
background-color: #ddd;
73+
background-image: -webkit-gradient(
74+
linear,
75+
left top,
76+
left bottom,
77+
color-stop(0, #eee),
78+
to(#ddd)
79+
);
80+
background-image: linear-gradient(to bottom, #eee 0, #ddd 100%);
81+
border-color: #ccc;
82+
}
83+
.icon {
84+
width: 20px;
85+
height: 20px;
86+
}
87+
}
88+
}

‎src/app/components/github/github.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: 't-github',
5+
templateUrl: './github.component.html',
6+
styleUrls: ['./github.component.scss']
7+
})
8+
export class GithubComponent implements OnInit {
9+
10+
constructor() { }
11+
12+
ngOnInit(): void {
13+
}
14+
15+
}

‎src/app/containers/angular-tetris/angular-tetris.component.html‎

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -21,4 +21,5 @@
2121
</div>
2222
<t-keyboard (onMouseDown)="keyboardMouseDown($event)"
2323
(onMouseUp)="keyboardMouseUp($event)">
24-
</t-keyboard>
24+
</t-keyboard>
25+
<t-github></t-github>

0 commit comments

Comments
 (0)