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
-
- -
- Official PeerTube website: https://joinpeertube.org
-
+
+
+ CLI
-
-
- Discover CLI PeerTube tools (to upload or import videos, parse logs, prune storage directories, reset user password...):
- https://docs.joinpeertube.org/#/maintain-tools
-
+
Upload or import videos, parse logs, prune storage directories, reset user password...
+
-
-
- Understand how to administer your instance (managing users, following other instances, dealing with spammers...):
- https://docs.joinpeertube.org/#/admin-following-instances
-
+
+ Administer
-
-
- Learn how to use PeerTube (setup your account, managing video playlists, discover third-party applications...):
- https://docs.joinpeertube.org/#/use-setup-account
-
-
+
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 @@
-
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;
+ }
+ }
}