From 592c735c19b25e9b38f82d90d15a81307902ed62 Mon Sep 17 00:00:00 2001 From: Chocobozzz Date: Tue, 3 Sep 2019 11:23:20 +0200 Subject: [PATCH] Better welcome modal --- ...stance-config-warning-modal.component.html | 7 ++- ...stance-config-warning-modal.component.scss | 2 + ...instance-config-warning-modal.component.ts | 5 ++ .../app/modal/welcome-modal.component.html | 59 +++++++++---------- .../app/modal/welcome-modal.component.scss | 29 +++++++++ 5 files changed, 70 insertions(+), 32 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 @@ -

Please consider to configure these fields to help people to choose the appropriate instance.

+

+ Please consider to configure these fields to help people to choose the appropriate instance. + Without them, your instance may not be referenced on JoinPeerTube website. +

Configure these fields 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 { text-align: center; font-weight: 600; font-size: 18px; + margin-top: 40px; + margin-bottom: 10px; } 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 { }) } + isDefaultShortDescription (description: string) { + return description === 'PeerTube, a federated (ActivityPub) video streaming platform using P2P (BitTorrent) directly ' + + 'in the web browser with WebTorrent and Angular.' + } + private doNotOpenAgain () { this.userService.updateMyProfile({ noInstanceConfigWarningModal: true }) .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 @@
-
-
Useful links
+
+
Documentation
- +
Managing users, following other instances, dealing with spammers...
+ + + + Use + +
Setup your account, managing video playlists, discover third-party applications...
+ +
-
Configure your instance
+
It's time to configure your instance!

- Now it's time to configure your instance! Choosing your instance name, setting up a description, - specifying who you are and how long you plan to maintain your instance + Choosing your instance name, setting up a description, specifying who you are, + why you created your instance and how long you plan to maintain your it is very important for visitors to understand on what type of instance they are.

If you want to open registrations, please decide what are your moderation rules, fill your instance terms - and specify the categories and languages you speak. This way, users that are looking for a PeerTube instance on which they can register - will be able to choose the right one. + and specify the categories and languages you speak. This way, you will help users to register on the appropriate PeerTube instance.

@@ -51,13 +49,14 @@
-
-
Index your instance
+
+
Useful links
- - If you want, you can index your PeerTube instance on the public PeerTube instances list: - https://instances.joinpeertube.org/instances - +
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 @@ font-size: 16px; } +.block-documentation .subtitle { + margin-bottom: 20px; +} + .block-configuration, .block-instance { margin-top: 30px; @@ -24,4 +28,29 @@ li { text-align: center; font-weight: 600; font-size: 18px; + margin: 20px 0 40px 0; +} + +.columns { + display: flex; + + .link-block { + @include disable-default-a-behaviour; + + color: var(--mainForegroundColor); + padding: 10px; + transition: background-color 0.2s ease-in; + + &:hover { + background-color: rgba(0, 0, 0, 0.05); + } + + .link-title { + font-size: 16px; + font-weight: $font-semibold; + display: flex; + justify-content: center; + margin-bottom: 5px; + } + } }