From: Rigel Kent Date: Thu, 30 Aug 2018 09:15:22 +0000 (+0200) Subject: watch view visual tweaks and search/comment placeholder dismiss on focus (#983) X-Git-Tag: v1.0.0-beta.12~76 X-Git-Url: https://git.immae.eu/?a=commitdiff_plain;h=2d9fea161fd4fc73994fc77951bafdccdc2071fd;p=github%2FChocobozzz%2FPeerTube.git 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 --- diff --git a/client/package.json b/client/package.json index 4b24d5e31..26583faba 100644 --- a/client/package.json +++ b/client/package.json @@ -92,6 +92,7 @@ "ngx-clipboard": "11.1.3", "ngx-pipes": "^2.1.7", "ngx-qrcode2": "^0.0.9", + "ngx-textarea-autosize": "^2.0.0", "node-sass": "^4.9.3", "npm-font-source-sans-pro": "^1.0.2", "path-browserify": "^1.0.0", 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: [ diff --git a/client/src/sass/application.scss b/client/src/sass/application.scss index 9c4811fec..21df23c18 100644 --- a/client/src/sass/application.scss +++ b/client/src/sass/application.scss @@ -61,6 +61,13 @@ label { border-color: $red !important; } +.fullWidth { + width: 100%; + margin-left: auto; + margin-right: auto; + max-width: initial; +} + .glyphicon-black { color: black; } diff --git a/client/yarn.lock b/client/yarn.lock index c79ec3c27..4766def1c 100644 --- a/client/yarn.lock +++ b/client/yarn.lock @@ -5127,6 +5127,12 @@ ngx-qrcode2@^0.0.9: dependencies: qrcode "^0.8.2" +ngx-textarea-autosize@^2.0.0: + version "2.0.0" + resolved "https://registry.yarnpkg.com/ngx-textarea-autosize/-/ngx-textarea-autosize-2.0.0.tgz#70d0bf770ebd62b5609c6552233d29c304f92ab8" + dependencies: + tslib "^1.7.1" + ngx-window-token@^1.0.0: version "1.0.0" resolved "https://registry.yarnpkg.com/ngx-window-token/-/ngx-window-token-1.0.0.tgz#12acb174fbbcffa5c60b3fea5a6ea78cc3304793"