From 897ec54d766902878d78abe04aa5b749f6b627f3 Mon Sep 17 00:00:00 2001 From: Chocobozzz Date: Fri, 21 Apr 2017 18:26:09 +0200 Subject: [PATCH] Client: beautiful watch page --- .../friend-add/friend-add.component.html | 53 ++-- .../friend-list/friend-list.component.html | 20 +- .../request-stats.component.html | 59 +++-- .../users/user-add/user-add.component.html | 75 +++--- .../users/user-list/user-list.component.html | 23 +- .../video-abuse-list.component.html | 14 +- client/src/app/account/account.component.html | 34 +-- client/src/app/app.component.html | 7 +- client/src/app/app.component.scss | 13 +- client/src/app/login/login.component.html | 55 +++-- client/src/app/signup/signup.component.html | 70 +++--- .../video-edit/video-add.component.html | 231 +++++++++--------- .../video-edit/video-update.component.html | 143 +++++------ .../video-list/video-list.component.html | 21 +- .../video-list/video-list.component.scss | 7 +- .../video-list/video-miniature.component.html | 5 +- .../video-list/video-miniature.component.scss | 8 +- .../video-watch/video-watch.component.html | 14 +- .../video-watch/video-watch.component.scss | 11 +- client/src/sass/_variables.scss | 4 +- client/src/sass/application.scss | 3 +- 21 files changed, 463 insertions(+), 407 deletions(-) diff --git a/client/src/app/+admin/friends/friend-add/friend-add.component.html b/client/src/app/+admin/friends/friend-add/friend-add.component.html index eebe033f9..29c045414 100644 --- a/client/src/app/+admin/friends/friend-add/friend-add.component.html +++ b/client/src/app/+admin/friends/friend-add/friend-add.component.html @@ -1,30 +1,35 @@ -

Make friends

+
+
-
{{ error }}
+

Make friends

-
-
- +
{{ error }}
-
- - - - - -
+ +
+ -
- It should be a valid host. -
-
+
+ + + + + +
-
- It seems that you are not on a HTTPS pod. Your webserver need to have TLS activated in order to make friends. -
+
+ It should be a valid host. +
+
- -
+
+ It seems that you are not on a HTTPS pod. Your webserver need to have TLS activated in order to make friends. +
+ + + +
+
diff --git a/client/src/app/+admin/friends/friend-list/friend-list.component.html b/client/src/app/+admin/friends/friend-list/friend-list.component.html index e15ecde14..45695f7c8 100644 --- a/client/src/app/+admin/friends/friend-list/friend-list.component.html +++ b/client/src/app/+admin/friends/friend-list/friend-list.component.html @@ -1,11 +1,15 @@ -

Friends list

+
+
+

Friends list

- + - - Quit friends - + + Quit friends + - - Make friends - + + Make friends + +
+
diff --git a/client/src/app/+admin/requests/request-stats/request-stats.component.html b/client/src/app/+admin/requests/request-stats/request-stats.component.html index f35da6535..29e7f7052 100644 --- a/client/src/app/+admin/requests/request-stats/request-stats.component.html +++ b/client/src/app/+admin/requests/request-stats/request-stats.component.html @@ -1,36 +1,41 @@ -

Requests stats

+
+
-
-
-
{{ statsTitles[requestSchedulerName] }}
+

Requests stats

-
-
-
- Remaining requests: - {{ stats[requestSchedulerName].totalRequests }} -
+
+
+
{{ statsTitles[requestSchedulerName] }}
-
- Interval seconds between requests: - {{ stats[requestSchedulerName].secondsInterval }} -
+
+
+
+ Remaining requests: + {{ stats[requestSchedulerName].totalRequests }} +
-
- Remaining time before the scheduled request: - {{ stats[requestSchedulerName].remainingSeconds }} -
-
+
+ Interval seconds between requests: + {{ stats[requestSchedulerName].secondsInterval }} +
-
-
- Maximum number of different pods for a scheduled request: - {{ stats[requestSchedulerName].requestsLimitPods }} -
+
+ Remaining time before the scheduled request: + {{ stats[requestSchedulerName].remainingSeconds }} +
+
+ +
+
+ Maximum number of different pods for a scheduled request: + {{ stats[requestSchedulerName].requestsLimitPods }} +
-
- Maximum number of requests per pod for a scheduled request: - {{ stats[requestSchedulerName].requestsLimitPerPod }} +
+ Maximum number of requests per pod for a scheduled request: + {{ stats[requestSchedulerName].requestsLimitPerPod }} +
+
diff --git a/client/src/app/+admin/users/user-add/user-add.component.html b/client/src/app/+admin/users/user-add/user-add.component.html index 105760f48..9b487aa75 100644 --- a/client/src/app/+admin/users/user-add/user-add.component.html +++ b/client/src/app/+admin/users/user-add/user-add.component.html @@ -1,40 +1,45 @@ -

Add user

+
+
-
{{ error }}
+

Add user

-
-
- - -
- {{ formErrors.username }} -
-
+
{{ error }}
-
- - -
- {{ formErrors.email }} -
-
+ +
+ + +
+ {{ formErrors.username }} +
+
-
- - -
- {{ formErrors.password }} -
-
+
+ + +
+ {{ formErrors.email }} +
+
- -
+
+ + +
+ {{ formErrors.password }} +
+
+ + + +
+
diff --git a/client/src/app/+admin/users/user-list/user-list.component.html b/client/src/app/+admin/users/user-list/user-list.component.html index 3d3d7e054..bb4c99a3f 100644 --- a/client/src/app/+admin/users/user-list/user-list.component.html +++ b/client/src/app/+admin/users/user-list/user-list.component.html @@ -1,11 +1,16 @@ -

Users list

+
+
- +

Users list

- - - Add user - + + + + + Add user + +
+
diff --git a/client/src/app/+admin/video-abuses/video-abuse-list/video-abuse-list.component.html b/client/src/app/+admin/video-abuses/video-abuse-list/video-abuse-list.component.html index b2fd17bf0..c6723a734 100644 --- a/client/src/app/+admin/video-abuses/video-abuse-list/video-abuse-list.component.html +++ b/client/src/app/+admin/video-abuses/video-abuse-list/video-abuse-list.component.html @@ -1,5 +1,11 @@ -

Video abuses list

+
+
- +

Video abuses list

+ + + +
+
diff --git a/client/src/app/account/account.component.html b/client/src/app/account/account.component.html index c0995dad0..177e54999 100644 --- a/client/src/app/account/account.component.html +++ b/client/src/app/account/account.component.html @@ -1,21 +1,25 @@ -

Account

+
+
+

Account

-
-
-
Change password
+
+
+
Change password
-
- -
-
-
+
+ +
+
+
-
-
-
Update my informations
+
+
+
Update my informations
-
- +
+ +
+
+
-
diff --git a/client/src/app/app.component.html b/client/src/app/app.component.html index 061ebe134..3f946d581 100644 --- a/client/src/app/app.component.html +++ b/client/src/app/app.component.html @@ -16,15 +16,16 @@
-
- +
+ +
-
+
PeerTube, CopyLeft 2015-2017
diff --git a/client/src/app/app.component.scss b/client/src/app/app.component.scss index dc4dcf28b..2d0487cd8 100644 --- a/client/src/app/app.component.scss +++ b/client/src/app/app.component.scss @@ -30,10 +30,15 @@ } } +my-search { + // Fix col-md-* padding + padding: 0; +} + footer { - border-top: 1px solid rgba(0, 0, 0, 0.2); - padding: 10px; + border-top: 1px solid $footer-border-color; + padding: 10px 0; text-align: center; - font-size: small; - margin: 30px 10px 0 10px; + font-size: 11px; + margin-top: 30px; } diff --git a/client/src/app/login/login.component.html b/client/src/app/login/login.component.html index 94a405405..bcea0a27a 100644 --- a/client/src/app/login/login.component.html +++ b/client/src/app/login/login.component.html @@ -1,29 +1,34 @@ -

Login

+
+
-
{{ error }}
+

Login

-
-
- - -
- {{ formErrors.username }} -
-
+
{{ error }}
-
- - -
- {{ formErrors.password }} -
-
+ +
+ + +
+ {{ formErrors.username }} +
+
- -
+
+ + +
+ {{ formErrors.password }} +
+
+ + + +
+
diff --git a/client/src/app/signup/signup.component.html b/client/src/app/signup/signup.component.html index 6c9c60e8b..b8b7826eb 100644 --- a/client/src/app/signup/signup.component.html +++ b/client/src/app/signup/signup.component.html @@ -1,40 +1,46 @@ -

Signup

+
+
-
{{ error }}
+

Signup

-
-
- - -
- {{ formErrors.username }} +
{{ error }}
+ + +
+ + +
+ {{ formErrors.username }} +
-
-
- - -
- {{ formErrors.email }} +
+ + +
+ {{ formErrors.email }} +
-
-
- - -
- {{ formErrors.password }} +
+ + +
+ {{ formErrors.password }} +
-
- - + + + +
+
diff --git a/client/src/app/videos/video-edit/video-add.component.html b/client/src/app/videos/video-edit/video-add.component.html index 04f4f85b0..7ad671ae7 100644 --- a/client/src/app/videos/video-edit/video-add.component.html +++ b/client/src/app/videos/video-edit/video-add.component.html @@ -1,114 +1,119 @@ -

Upload a video

- -
{{ error }}
- -
-
- - -
- {{ formErrors.name }} -
+
+
+ +

Upload a video

+ +
{{ error }}
+ + +
+ + +
+ {{ formErrors.name }} +
+
+ +
+ + +
+ +
+ + + +
+ {{ formErrors.category }} +
+
+ +
+ + + +
+ {{ formErrors.licence }} +
+
+ +
+ + + +
+ {{ formErrors.language }} +
+
+ +
+ (press enter to add the tag) + +
+ +
+ +
+ Select the video... + +
+
+ +
+
+ {{ filename }} + +
+
+ +
+ {{ fileError }} +
+ +
+ + +
+ {{ formErrors.description }} +
+
+ +
+ +
+ +
+ +
+
- -
- - -
- -
- - - -
- {{ formErrors.category }} -
-
- -
- - - -
- {{ formErrors.licence }} -
-
- -
- - - -
- {{ formErrors.language }} -
-
- -
- (press enter to add the tag) - -
- -
- -
- Select the video... - -
-
- -
-
- {{ filename }} - -
-
- -
- {{ fileError }} -
- -
- - -
- {{ formErrors.description }} -
-
- -
- -
- -
- -
- +
diff --git a/client/src/app/videos/video-edit/video-update.component.html b/client/src/app/videos/video-edit/video-update.component.html index bedbc91b8..7f4faf21b 100644 --- a/client/src/app/videos/video-edit/video-update.component.html +++ b/client/src/app/videos/video-edit/video-update.component.html @@ -1,87 +1,92 @@ -

Update {{ video?.name }}

+
+
-
{{ error }}
+

Update {{ video?.name }}

-
-
- - -
- {{ formErrors.name }} +
{{ error }}
+ + +
+ + +
+ {{ formErrors.name }} +
-
-
- - -
+
+ + +
-
- - +
+ + -
- {{ formErrors.category }} +
+ {{ formErrors.category }} +
-
-
- - +
+ + -
- {{ formErrors.licence }} +
+ {{ formErrors.licence }} +
-
-
- - +
+ + -
- {{ formErrors.language }} +
+ {{ formErrors.language }} +
-
-
- (press enter to add the tag) - -
+
+ (press enter to add the tag) + +
-
- - -
- {{ formErrors.description }} +
+ + +
+ {{ formErrors.description }} +
-
-
- +
+ +
+
- +
diff --git a/client/src/app/videos/video-list/video-list.component.html b/client/src/app/videos/video-list/video-list.component.html index 2a753adba..72d5512a6 100644 --- a/client/src/app/videos/video-list/video-list.component.html +++ b/client/src/app/videos/video-list/video-list.component.html @@ -1,16 +1,19 @@ -
-
- {{ pagination.totalItems }} videos - - -
+
+
+
+
+ {{ pagination.totalItems }} videos + +
- + +
+
-
-
There is no video.
+
+
There is no video.
{{ video.by }} - - {{ video.views }} views - {{ video.createdAt | date:'short' }} - + {{ video.createdAt | date:'short' }}
diff --git a/client/src/app/videos/video-list/video-miniature.component.scss b/client/src/app/videos/video-list/video-miniature.component.scss index 1a73648c4..778bffa29 100644 --- a/client/src/app/videos/video-list/video-miniature.component.scss +++ b/client/src/app/videos/video-list/video-miniature.component.scss @@ -64,7 +64,6 @@ font-weight: bold; transition: color 0.2s; font-size: 15px; - color: $video-miniature-title-color; &:hover { text-decoration: none; @@ -88,17 +87,12 @@ } } - .video-miniature-author, .video-miniature-views-created-at { + .video-miniature-author, .video-miniature-created-at { display: block; margin-left: 1px; font-size: 11px; color: $video-miniature-other-infos; opacity: 0.9; - - .video-miniature-created-at::before { - content: '\002022'; - margin: 0 2px 0 1px; - } } .video-miniature-author { diff --git a/client/src/app/videos/video-watch/video-watch.component.html b/client/src/app/videos/video-watch/video-watch.component.html index 989de0de4..059465d65 100644 --- a/client/src/app/videos/video-watch/video-watch.component.html +++ b/client/src/app/videos/video-watch/video-watch.component.html @@ -14,14 +14,12 @@
-
- -
- -
- -
Video not found :'(
+ +
+
+ +
Video not found :'(
@@ -32,7 +30,7 @@
-
+
{{ video.name }}
diff --git a/client/src/app/videos/video-watch/video-watch.component.scss b/client/src/app/videos/video-watch/video-watch.component.scss index abd2832df..a8c7fdbac 100644 --- a/client/src/app/videos/video-watch/video-watch.component.scss +++ b/client/src/app/videos/video-watch/video-watch.component.scss @@ -37,10 +37,15 @@ font-size: 18px; height: $video-watch-title-height; line-height: $video-watch-title-height; - padding: 0 30px; + + .video-name { + padding-left: $video-watch-info-padding-left; + } .video-views { text-align: right; + // Keep a symmetry with the video name + padding-right: $video-watch-info-padding-left } } @@ -94,6 +99,8 @@ .video-small-block-author { font-size: 15px; font-weight: bold; + text-align: left; + padding-left: $video-watch-info-padding-left; } .video-small-block-share, .video-small-block-more { @@ -144,7 +151,7 @@ margin-top: 30px; .video-details-date-description { - padding-left: 30px; + padding-left: $video-watch-info-padding-left; .video-details-date { font-weight: bold; diff --git a/client/src/sass/_variables.scss b/client/src/sass/_variables.scss index bb6799665..723b2bcc8 100644 --- a/client/src/sass/_variables.scss +++ b/client/src/sass/_variables.scss @@ -9,10 +9,12 @@ $menu-color-block: #686f77; $header-height: 65px; $header-border-color: #e9eff6; -$video-miniature-title-color: #16a2b7; +$footer-border-color: $header-border-color; + $video-miniature-other-infos: #686767; $video-watch-border-color: #eceef4; $video-watch-title-height: 90px; $video-watch-info-color: #8e909b; $video-watch-info-height: 120px; +$video-watch-info-padding-left: 40px; diff --git a/client/src/sass/application.scss b/client/src/sass/application.scss index 571372c2b..c0b40445e 100644 --- a/client/src/sass/application.scss +++ b/client/src/sass/application.scss @@ -41,9 +41,8 @@ input.readonly { } .main-col { - padding: 0; - .main-row { + .content-padding { padding: 15px 30px; @media screen and (min-width: 1400px) { -- 2.25.1