aboutsummaryrefslogtreecommitdiffhomepage
diff options
context:
space:
mode:
authorChocobozzz <me@florianbigard.com>2019-09-03 11:23:20 +0200
committerChocobozzz <chocobozzz@cpy.re>2019-09-05 10:17:02 +0200
commit592c735c19b25e9b38f82d90d15a81307902ed62 (patch)
treef7ce6b8b53ccfc51e6a7b56f1cd0602c73fdba5e
parent8ae03c37181822617418d1fc372982b245ac0a9a (diff)
downloadPeerTube-592c735c19b25e9b38f82d90d15a81307902ed62.tar.gz
PeerTube-592c735c19b25e9b38f82d90d15a81307902ed62.tar.zst
PeerTube-592c735c19b25e9b38f82d90d15a81307902ed62.zip
Better welcome modal
-rw-r--r--client/src/app/modal/instance-config-warning-modal.component.html7
-rw-r--r--client/src/app/modal/instance-config-warning-modal.component.scss2
-rw-r--r--client/src/app/modal/instance-config-warning-modal.component.ts5
-rw-r--r--client/src/app/modal/welcome-modal.component.html65
-rw-r--r--client/src/app/modal/welcome-modal.component.scss29
5 files changed, 73 insertions, 35 deletions
diff --git a/client/src/app/modal/instance-config-warning-modal.component.html b/client/src/app/modal/instance-config-warning-modal.component.html
index f9e07333a..64f14e69b 100644
--- a/client/src/app/modal/instance-config-warning-modal.component.html
+++ b/client/src/app/modal/instance-config-warning-modal.component.html
@@ -10,7 +10,7 @@
10 10
11 <ul> 11 <ul>
12 <li i18n *ngIf="about.instance.name.toLowerCase() === 'peertube'">Instance name</li> 12 <li i18n *ngIf="about.instance.name.toLowerCase() === 'peertube'">Instance name</li>
13 <li i18n *ngIf="about.instance.shortDescription">Instance short description</li> 13 <li i18n *ngIf="isDefaultShortDescription(about.instance.shortDescription)">Instance short description</li>
14 14
15 <li i18n *ngIf="!about.instance.administrator">Who you are</li> 15 <li i18n *ngIf="!about.instance.administrator">Who you are</li>
16 <li i18n *ngIf="!about.instance.maintenanceLifetime">How long you plan to maintain your instance</li> 16 <li i18n *ngIf="!about.instance.maintenanceLifetime">How long you plan to maintain your instance</li>
@@ -20,7 +20,10 @@
20 <li i18n *ngIf="!about.instance.terms">Instance terms</li> 20 <li i18n *ngIf="!about.instance.terms">Instance terms</li>
21 </ul> 21 </ul>
22 22
23 <p>Please consider to configure these fields to help people to choose <strong>the appropriate instance</strong>.</p> 23 <p>
24 Please consider to configure these fields to help people to choose <strong>the appropriate instance</strong>.
25 Without them, your instance may not be referenced on <a target="_blank" rel="noopener noreferrer" href="https://joinpeertube.org">JoinPeerTube website</a>.
26 </p>
24 27
25 <div class="configure-instance"> 28 <div class="configure-instance">
26 <a i18n href="/admin/config/edit-custom" target="_blank" rel="noopener noreferrer">Configure these fields</a> 29 <a i18n href="/admin/config/edit-custom" target="_blank" rel="noopener noreferrer">Configure these fields</a>
diff --git a/client/src/app/modal/instance-config-warning-modal.component.scss b/client/src/app/modal/instance-config-warning-modal.component.scss
index 5888736c1..ff62a1b9c 100644
--- a/client/src/app/modal/instance-config-warning-modal.component.scss
+++ b/client/src/app/modal/instance-config-warning-modal.component.scss
@@ -17,4 +17,6 @@ li {
17 text-align: center; 17 text-align: center;
18 font-weight: 600; 18 font-weight: 600;
19 font-size: 18px; 19 font-size: 18px;
20 margin-top: 40px;
21 margin-bottom: 10px;
20} 22}
diff --git a/client/src/app/modal/instance-config-warning-modal.component.ts b/client/src/app/modal/instance-config-warning-modal.component.ts
index 08d83f383..742a7dd41 100644
--- a/client/src/app/modal/instance-config-warning-modal.component.ts
+++ b/client/src/app/modal/instance-config-warning-modal.component.ts
@@ -31,6 +31,11 @@ export class InstanceConfigWarningModalComponent {
31 }) 31 })
32 } 32 }
33 33
34 isDefaultShortDescription (description: string) {
35 return description === 'PeerTube, a federated (ActivityPub) video streaming platform using P2P (BitTorrent) directly ' +
36 'in the web browser with WebTorrent and Angular.'
37 }
38
34 private doNotOpenAgain () { 39 private doNotOpenAgain () {
35 this.userService.updateMyProfile({ noInstanceConfigWarningModal: true }) 40 this.userService.updateMyProfile({ noInstanceConfigWarningModal: true })
36 .subscribe( 41 .subscribe(
diff --git a/client/src/app/modal/welcome-modal.component.html b/client/src/app/modal/welcome-modal.component.html
index 79e6d4667..09ff2163b 100644
--- a/client/src/app/modal/welcome-modal.component.html
+++ b/client/src/app/modal/welcome-modal.component.html
@@ -6,44 +6,42 @@
6 6
7 <div class="modal-body"> 7 <div class="modal-body">
8 8
9 <div class="block-links"> 9 <div class="block-documentation">
10 <div i18n class="subtitle">Useful links</div> 10 <div i18n class="subtitle">Documentation</div>
11 11
12 <ul> 12 <div class="columns">
13 <li i18n> 13 <a class="link-block" href="https://docs.joinpeertube.org/#/maintain-tools" target="_blank" rel="noopener noreferrer">
14 Official PeerTube website: <a href="https://joinpeertube.org" target="_blank" rel="noopener noreferrer">https://joinpeertube.org</a> 14 <a class="link-title" href="https://docs.joinpeertube.org/#/maintain-tools" target="_blank" rel="noopener noreferrer">CLI</a>
15 </li> 15
16 16 <div>Upload or import videos, parse logs, prune storage directories, reset user password...</div>
17 <li i18n> 17 </a>
18 Discover CLI PeerTube tools (to upload or import videos, parse logs, prune storage directories, reset user password...): 18
19 <a href="https://docs.joinpeertube.org/#/maintain-tools" target="_blank" rel="noopener noreferrer">https://docs.joinpeertube.org/#/maintain-tools</a> 19 <a class="link-block" href="https://docs.joinpeertube.org/#/admin-following-instances" target="_blank" rel="noopener noreferrer">
20 </li> 20 <a class="link-title" href="https://docs.joinpeertube.org/#/admin-following-instances" target="_blank" rel="noopener noreferrer">Administer</a>
21 21
22 <li i18n> 22 <div>Managing users, following other instances, dealing with spammers...</div>
23 Understand how to administer your instance (managing users, following other instances, dealing with spammers...): 23 </a>
24 <a href="https://docs.joinpeertube.org/#/admin-following-instances" target="_blank" rel="noopener noreferrer">https://docs.joinpeertube.org/#/admin-following-instances</a> 24
25 </li> 25 <a class="link-block" href="https://docs.joinpeertube.org/#/use-setup-account" target="_blank" rel="noopener noreferrer">
26 26 <a class="link-title" href="https://docs.joinpeertube.org/#/use-setup-account" target="_blank" rel="noopener noreferrer">Use</a>
27 <li i18n> 27
28 Learn how to use PeerTube (setup your account, managing video playlists, discover third-party applications...): 28 <div>Setup your account, managing video playlists, discover third-party applications...</div>
29 <a href="https://docs.joinpeertube.org/#/use-setup-account" target="_blank" rel="noopener noreferrer">https://docs.joinpeertube.org/#/use-setup-account</a> 29 </a>
30 </li> 30 </div>
31 </ul>
32 </div> 31 </div>
33 32
34 <div class="block-configuration"> 33 <div class="block-configuration">
35 <div i18n class="subtitle">Configure your instance</div> 34 <div i18n class="subtitle">It's time to configure your instance!</div>
36 35
37 <p i18n> 36 <p i18n>
38 Now it's time to configure your instance! Choosing your <strong>instance name</strong>, <strong>setting up a description</strong>, 37 Choosing your <strong>instance name</strong>, <strong>setting up a description</strong>, specifying <strong>who you are</strong>,
39 specifying <strong>who you are</strong> and <strong>how long</strong> you plan to <strong>maintain your instance</strong> 38 why <strong>you created your instance</strong> and <strong>how long</strong> you plan to <strong>maintain your it</strong>
40 is very important for visitors to understand on what type of instance they are. 39 is very important for visitors to understand on what type of instance they are.
41 </p> 40 </p>
42 41
43 <p i18n> 42 <p i18n>
44 If you want to open registrations, please decide what are <strong>your moderation rules</strong>, fill your <strong>instance terms</strong> 43 If you want to open registrations, please decide what are <strong>your moderation rules</strong>, fill your <strong>instance terms</strong>
45 and specify the categories and languages you speak. This way, users that are looking for a PeerTube instance on which they can register 44 and specify the categories and languages you speak. This way, you will help users to register on <strong>the appropriate</strong> PeerTube instance.
46 will be able to choose <strong>the right one</strong>.
47 </p> 45 </p>
48 46
49 <div class="configure-instance"> 47 <div class="configure-instance">
@@ -51,13 +49,14 @@
51 </div> 49 </div>
52 </div> 50 </div>
53 51
54 <div class="block-instance"> 52 <div class="block-links">
55 <div i18n class="subtitle">Index your instance</div> 53 <div i18n class="subtitle">Useful links</div>
56 54
57 <ng-container i18n> 55 <ul>
58 If you want, you can index your PeerTube instance on the public PeerTube instances list: 56 <li>Official PeerTube website (news, support, contribute...): <a href="https://joinpeertube.org" target="_blank" rel="noopener noreferrer">https://joinpeertube.org</a></li>
59 <a href="https://instances.joinpeertube.org/instances">https://instances.joinpeertube.org/instances</a> 57
60 </ng-container> 58 <li>Put your instance on the public PeerTube index: <a href="https://instances.joinpeertube.org/instances">https://instances.joinpeertube.org/instances</a></li>
59 </ul>
61 </div> 60 </div>
62 </div> 61 </div>
63 62
diff --git a/client/src/app/modal/welcome-modal.component.scss b/client/src/app/modal/welcome-modal.component.scss
index a59c5b7a9..8bb6973f4 100644
--- a/client/src/app/modal/welcome-modal.component.scss
+++ b/client/src/app/modal/welcome-modal.component.scss
@@ -11,6 +11,10 @@
11 font-size: 16px; 11 font-size: 16px;
12} 12}
13 13
14.block-documentation .subtitle {
15 margin-bottom: 20px;
16}
17
14.block-configuration, 18.block-configuration,
15.block-instance { 19.block-instance {
16 margin-top: 30px; 20 margin-top: 30px;
@@ -24,4 +28,29 @@ li {
24 text-align: center; 28 text-align: center;
25 font-weight: 600; 29 font-weight: 600;
26 font-size: 18px; 30 font-size: 18px;
31 margin: 20px 0 40px 0;
32}
33
34.columns {
35 display: flex;
36
37 .link-block {
38 @include disable-default-a-behaviour;
39
40 color: var(--mainForegroundColor);
41 padding: 10px;
42 transition: background-color 0.2s ease-in;
43
44 &:hover {
45 background-color: rgba(0, 0, 0, 0.05);
46 }
47
48 .link-title {
49 font-size: 16px;
50 font-weight: $font-semibold;
51 display: flex;
52 justify-content: center;
53 margin-bottom: 5px;
54 }
55 }
27} 56}