aboutsummaryrefslogtreecommitdiffhomepage
diff options
context:
space:
mode:
authorChocobozzz <me@florianbigard.com>2019-10-30 11:00:08 +0100
committerChocobozzz <me@florianbigard.com>2019-10-30 11:00:08 +0100
commit006b83927b62b4471a1ce8fd2e59282e89dccd6c (patch)
tree23c1e72d2d084f6d5c76ed7dfd8f8aeac05160ed
parent767619f639180d28532ffb4f7919668f3e5b5772 (diff)
downloadPeerTube-006b83927b62b4471a1ce8fd2e59282e89dccd6c.tar.gz
PeerTube-006b83927b62b4471a1ce8fd2e59282e89dccd6c.tar.zst
PeerTube-006b83927b62b4471a1ce8fd2e59282e89dccd6c.zip
Add mascot in welcome modal
-rw-r--r--client/src/app/modal/welcome-modal.component.html72
-rw-r--r--client/src/app/modal/welcome-modal.component.scss40
-rw-r--r--client/src/app/modal/welcome-modal.component.ts4
3 files changed, 80 insertions, 36 deletions
diff --git a/client/src/app/modal/welcome-modal.component.html b/client/src/app/modal/welcome-modal.component.html
index d28bbf699..f99bbe2ef 100644
--- a/client/src/app/modal/welcome-modal.component.html
+++ b/client/src/app/modal/welcome-modal.component.html
@@ -7,61 +7,81 @@
7 <div class="modal-body"> 7 <div class="modal-body">
8 8
9 <div class="block-documentation"> 9 <div class="block-documentation">
10 <div i18n class="subtitle">Documentation</div>
11
12 <div class="columns"> 10 <div class="columns">
13 <a class="link-block" href="https://docs.joinpeertube.org/#/maintain-tools" target="_blank" rel="noopener noreferrer"> 11 <a class="link-block" href="https://docs.joinpeertube.org/#/maintain-tools" target="_blank" rel="noopener noreferrer">
14 <a class="link-title" href="https://docs.joinpeertube.org/#/maintain-tools" target="_blank" rel="noopener noreferrer">CLI</a> 12 <a class="link-title" href="https://docs.joinpeertube.org/#/maintain-tools" target="_blank" rel="noopener noreferrer">CLI
13 documentation</a>
15 14
16 <div>Upload or import videos, parse logs, prune storage directories, reset user password...</div> 15 <div>Upload or import videos, parse logs, prune storage directories, reset user password...</div>
17 </a> 16 </a>
18 17
19 <a class="link-block" href="https://docs.joinpeertube.org/#/admin-following-instances" target="_blank" rel="noopener noreferrer"> 18 <a class="link-block" href="https://docs.joinpeertube.org/#/admin-following-instances" target="_blank" rel="noopener noreferrer">
20 <a class="link-title" href="https://docs.joinpeertube.org/#/admin-following-instances" target="_blank" rel="noopener noreferrer">Administer</a> 19 <a class="link-title" href="https://docs.joinpeertube.org/#/admin-following-instances" target="_blank" rel="noopener noreferrer">Administer
20 documentation</a>
21 21
22 <div>Managing users, following other instances, dealing with spammers...</div> 22 <div>Managing users, following other instances, dealing with spammers...</div>
23 </a> 23 </a>
24 24
25 <a class="link-block" href="https://docs.joinpeertube.org/#/use-setup-account" target="_blank" rel="noopener noreferrer"> 25 <a class="link-block" href="https://docs.joinpeertube.org/#/use-setup-account" target="_blank" rel="noopener noreferrer">
26 <a class="link-title" href="https://docs.joinpeertube.org/#/use-setup-account" target="_blank" rel="noopener noreferrer">Use</a> 26 <a class="link-title" href="https://docs.joinpeertube.org/#/use-setup-account" target="_blank" rel="noopener noreferrer">Use
27 documentation</a>
27 28
28 <div>Setup your account, managing video playlists, discover third-party applications...</div> 29 <div>Setup your account, managing video playlists, discover third-party applications...</div>
29 </a> 30 </a>
30 </div> 31 </div>
31 </div> 32 </div>
32 33
33 <div class="block-configuration"> 34 <div class="two-columns">
34 <div i18n class="subtitle">It's time to configure your instance!</div> 35
36 <div class="mascot">
37 <img src="/client/assets/images/mascot/pointing.png" alt="mascot">
38 </div>
35 39
36 <p i18n> 40 <div class="block-links">
37 Choosing your <strong>instance name</strong>, <strong>setting up a description</strong>, specifying <strong>who you are</strong>, 41 <div i18n class="subtitle">Useful links</div>
38 why <strong>you created your instance</strong> and <strong>how long</strong> you plan to <strong>maintain your it</strong>
39 is very important for visitors to understand on what type of instance they are.
40 </p>
41 42
42 <p i18n> 43 <ul>
43 If you want to open registrations, please decide what are <strong>your moderation rules</strong>, fill your <strong>instance terms</strong> 44 <li>Official PeerTube website (news, support, contribute...): <a href="https://joinpeertube.org" target="_blank"
44 and specify the categories and languages you speak. This way, you will help users to register on <strong>the appropriate</strong> PeerTube instance. 45 rel="noopener noreferrer">https://joinpeertube.org</a></li>
45 </p>
46 46
47 <div class="configure-instance"> 47 <li>Put your instance on the public PeerTube index: <a href="https://instances.joinpeertube.org/instances">https://instances.joinpeertube.org/instances</a>
48 <a i18n href="/admin/config/edit-custom" target="_blank" rel="noopener noreferrer">Configure your instance</a> 48 </li>
49 </ul>
49 </div> 50 </div>
50 </div> 51 </div>
51 52
52 <div class="block-links"> 53 <div class="two-columns">
53 <div i18n class="subtitle">Useful links</div> 54 <div class="mascot">
54 55 <img src="/client/assets/images/mascot/happy.png" alt="mascot">
55 <ul> 56 </div>
56 <li>Official PeerTube website (news, support, contribute...): <a href="https://joinpeertube.org" target="_blank" rel="noopener noreferrer">https://joinpeertube.org</a></li>
57 57
58 <li>Put your instance on the public PeerTube index: <a href="https://instances.joinpeertube.org/instances">https://instances.joinpeertube.org/instances</a></li> 58 <div class="block-configuration">
59 </ul> 59 <div i18n class="subtitle">It's time to configure your instance!</div>
60
61 <p i18n>
62 Choosing your <strong>instance name</strong>, <strong>setting up a description</strong>, specifying <strong>who you are</strong>,
63 why <strong>you created your instance</strong> and <strong>how long</strong> you plan to <strong>maintain your it</strong>
64 is very important for visitors to understand on what type of instance they are.
65 </p>
66
67 <p i18n>
68 If you want to open registrations, please decide what are <strong>your moderation rules</strong>, fill your <strong>instance
69 terms</strong>
70 and specify the categories and languages you speak. This way, you will help users to register on <strong>the
71 appropriate</strong>
72 PeerTube instance.
73 </p>
74 </div>
60 </div> 75 </div>
61 </div> 76 </div>
62 77
63 <div class="modal-footer inputs"> 78 <div class="modal-footer inputs">
64 <span i18n class="action-button action-button-submit" (click)="hide()">Understood!</span> 79 <span i18n class="action-button action-button-understood" (click)="hide()">Remind me later</span>
80
81 <a i18n (click)="doNotOpenAgain(); hide()" class="configure-instance-button" href="/admin/config/edit-custom" target="_blank"
82 rel="noopener noreferrer">
83 Configure my instance
84 </a>
65 </div> 85 </div>
66 86
67</ng-template> 87</ng-template>
diff --git a/client/src/app/modal/welcome-modal.component.scss b/client/src/app/modal/welcome-modal.component.scss
index 8bb6973f4..b9200115e 100644
--- a/client/src/app/modal/welcome-modal.component.scss
+++ b/client/src/app/modal/welcome-modal.component.scss
@@ -5,19 +5,28 @@
5 font-size: 15px; 5 font-size: 15px;
6} 6}
7 7
8.two-columns {
9 display: flex;
10 align-items: center;
11 justify-content: center;
12 margin-top: 50px;
13}
14
15.mascot {
16 display: block;
17 min-width: 170px;
18}
19
8.subtitle { 20.subtitle {
9 font-weight: $font-semibold; 21 font-weight: $font-semibold;
10 margin-bottom: 10px; 22 margin-bottom: 10px;
11 font-size: 16px; 23 font-size: 16px;
12} 24}
13 25
14.block-documentation .subtitle { 26.block-documentation {
15 margin-bottom: 20px; 27 .subtitle {
16} 28 margin-bottom: 20px;
17 29 }
18.block-configuration,
19.block-instance {
20 margin-top: 30px;
21} 30}
22 31
23li { 32li {
@@ -52,5 +61,22 @@ li {
52 justify-content: center; 61 justify-content: center;
53 margin-bottom: 5px; 62 margin-bottom: 5px;
54 } 63 }
64
65 .link-title,
66 div {
67 text-align: center;
68 }
55 } 69 }
56} 70}
71
72.configure-instance-button {
73 @include peertube-button;
74 @include orange-button;
75
76 display: inline-block;
77}
78
79.action-button-understood {
80 @include peertube-button;
81 @include grey-button;
82}
diff --git a/client/src/app/modal/welcome-modal.component.ts b/client/src/app/modal/welcome-modal.component.ts
index 05412a4cd..9097de984 100644
--- a/client/src/app/modal/welcome-modal.component.ts
+++ b/client/src/app/modal/welcome-modal.component.ts
@@ -18,13 +18,11 @@ export class WelcomeModalComponent {
18 ) { } 18 ) { }
19 19
20 show () { 20 show () {
21 const ref = this.modalService.open(this.modal,{ 21 this.modalService.open(this.modal,{
22 backdrop: 'static', 22 backdrop: 'static',
23 keyboard: false, 23 keyboard: false,
24 size: 'lg' 24 size: 'lg'
25 }) 25 })
26
27 ref.result.finally(() => this.doNotOpenAgain())
28 } 26 }
29 27
30 private doNotOpenAgain () { 28 private doNotOpenAgain () {