From 2d9fea161fd4fc73994fc77951bafdccdc2071fd Mon Sep 17 00:00:00 2001 From: Rigel Kent Date: Thu, 30 Aug 2018 11:15:22 +0200 Subject: watch view visual tweaks and search/comment placeholder dismiss on focus (#983) - make the placeholder disappear on focus in the search bar - make the placeholder disappear on focus in the comment textarea - make the texarea resize automagically - refactor the watch view to use bootstrap 4's flexgrid - move action buttons of the watch view to the right of the video info - responsive tweaks and margin adjustments in the watch view --- client/src/app/header/header.component.scss | 5 + .../comment/video-comment-add.component.html | 3 +- .../comment/video-comment-add.component.scss | 4 + .../videos/+video-watch/video-watch.component.html | 298 +++++++++++---------- .../videos/+video-watch/video-watch.component.scss | 19 +- .../app/videos/+video-watch/video-watch.module.ts | 4 +- 6 files changed, 179 insertions(+), 154 deletions(-) (limited to 'client/src/app') diff --git a/client/src/app/header/header.component.scss b/client/src/app/header/header.component.scss index 6ce92fc22..8251ec1b5 100644 --- a/client/src/app/header/header.component.scss +++ b/client/src/app/header/header.component.scss @@ -3,6 +3,7 @@ #search-video { @include peertube-input-text($search-input-width); + padding-left: 10px; margin-right: 15px; padding-right: 40px; // For the search icon @@ -10,6 +11,10 @@ color: #000; } + &:focus::placeholder { + opacity: 0 !important; + } + @media screen and (max-width: 800px) { width: calc(100% - 150px); } diff --git a/client/src/app/videos/+video-watch/comment/video-comment-add.component.html b/client/src/app/videos/+video-watch/comment/video-comment-add.component.html index 8ea7f04ed..f65a88d20 100644 --- a/client/src/app/videos/+video-watch/comment/video-comment-add.component.html +++ b/client/src/app/videos/+video-watch/comment/video-comment-add.component.html @@ -3,7 +3,8 @@ Avatar
- diff --git a/client/src/app/videos/+video-watch/comment/video-comment-add.component.scss b/client/src/app/videos/+video-watch/comment/video-comment-add.component.scss index dbce744bf..a55e743fb 100644 --- a/client/src/app/videos/+video-watch/comment/video-comment-add.component.scss +++ b/client/src/app/videos/+video-watch/comment/video-comment-add.component.scss @@ -22,6 +22,10 @@ form { textarea { @include peertube-textarea(100%, 60px); + + &:focus::placeholder { + opacity: 0; + } } } } 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 e9c79741e..333c9d11b 100644 --- a/client/src/app/videos/+video-watch/video-watch.component.html +++ b/client/src/app/videos/+video-watch/video-watch.component.html @@ -26,180 +26,198 @@
-
-
-
-
-
{{ video.name }}
- -
- {{ video.publishedAt | myFromNow }} - {{ video.views | myNumberFormatter }} views -
- -
- - {{ video.channel.displayName }} - - Video channel avatar - - - -
- -
- - By {{ video.byAccount }} - Account avatar - - - -
-
- -
-
-
- +
+
+
+
+
+
+
{{ video.name }}
+ +
+ Published {{ video.publishedAt | myFromNow }} - {{ video.views | myNumberFormatter }} views +
- -
- + +
+
+
{{ video.name }}
+ +
+ Published {{ video.publishedAt | myFromNow }} - {{ video.views | myNumberFormatter }} views +
+
+ +
+
+
+ +
+ +
+ +
+ +
+ + Support +
+ +
+ + Share +
+ +
+
+ +
+ + +
+
+ +
+ +
+
-
- - Support -
-
- - Share -
+
+ + {{ video.channel.displayName }} -
-
- -
+ Video channel avatar + - - - Report - +
+ + By {{ video.byAccount }} + Account avatar + - - Update - + +
+
- - Blacklist - +
- - Unblacklist - +
+
- - Delete - -
-
+
+ Show more + +
-
- +
+ Show less +
-
-
-
+
+
+ Privacy + {{ video.privacy.label }} +
-
- Show more - - -
+
+ Category + {{ video.category.label }} + {{ video.category.label }} +
-
- Show less - -
-
+
+ Licence + {{ video.licence.label }} + {{ video.licence.label }} +
-
-
- Privacy - {{ video.privacy.label }} -
+
+ Language + {{ video.language.label }} + {{ video.language.label }} +
-
- Category - {{ video.category.label }} - {{ video.category.label }} +
+ Tags + {{ tag }} +
-
- Licence - {{ video.licence.label }} - {{ video.licence.label }} -
+ +
-
- Language - {{ video.language.label }} - {{ video.language.label }} +
+
+ Other videos
-
- Tags - {{ tag }} +
+
- - -
- -
-
- Other videos -
- -
- -
- Friendly Reminder:
+ Friendly Reminder: - The sharing system used by this video implies that some technical information about your system (such as a public IP address) can be sent to other peers. + the sharing system used by this video implies that some technical information about your system (such as a public IP address) can be sent to other peers. More information
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 9bd510c9f..afd846af3 100644 --- a/client/src/app/videos/+video-watch/video-watch.component.scss +++ b/client/src/app/videos/+video-watch/video-watch.component.scss @@ -76,12 +76,9 @@ .video-bottom { margin-top: 40px; - display: flex; - flex-grow: 1; .video-info { flex-grow: 1; - margin-right: 40px; // Set min width for flex item min-width: 1px; @@ -284,10 +281,13 @@ } .video-info-likes-dislikes-bar { - height: 5px; + $likes-bar-height: 2px; + height: $likes-bar-height; + margin-top: -$likes-bar-height; width: 186px; background-color: #E5E5E5; - margin-top: 25px; + position: relative; + top: 10px; .likes-bar { height: 100%; @@ -439,19 +439,14 @@ @media screen and (max-width: 1600px) { .video-bottom { .video-info { - margin-right: 20px; - .video-info-first-row { flex-direction: column; - margin-bottom: 30px; + margin-bottom: 20px; .video-actions-rates { margin-top: 20px; + margin-bottom: 10px; align-items: start; - - .video-info-likes-dislikes-bar { - margin-top: 10px; - } } } diff --git a/client/src/app/videos/+video-watch/video-watch.module.ts b/client/src/app/videos/+video-watch/video-watch.module.ts index 57e3c9c78..7920147b2 100644 --- a/client/src/app/videos/+video-watch/video-watch.module.ts +++ b/client/src/app/videos/+video-watch/video-watch.module.ts @@ -16,6 +16,7 @@ import { VideoWatchComponent } from './video-watch.component' import { NgxQRCodeModule } from 'ngx-qrcode2' import { NgbTooltipModule } from '@ng-bootstrap/ng-bootstrap' import { VideoBlacklistComponent } from '@app/videos/+video-watch/modal/video-blacklist.component' +import { TextareaAutosizeModule } from 'ngx-textarea-autosize' @NgModule({ imports: [ @@ -23,7 +24,8 @@ import { VideoBlacklistComponent } from '@app/videos/+video-watch/modal/video-bl SharedModule, ClipboardModule, NgbTooltipModule, - NgxQRCodeModule + NgxQRCodeModule, + TextareaAutosizeModule ], declarations: [ -- cgit v1.2.3