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 --- .../videos/+video-watch/video-watch.component.scss | 19 +++++++------------ 1 file changed, 7 insertions(+), 12 deletions(-) (limited to 'client/src/app/videos/+video-watch/video-watch.component.scss') 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; - } } } -- cgit v1.2.3