From 4682468d4d07e0864155dd2b403d93754786ea13 Mon Sep 17 00:00:00 2001 From: Kim <1877318+kimsible@users.noreply.github.com> Date: Mon, 27 Apr 2020 14:57:50 +0200 Subject: Fix broken views on mobile and small screens (#2671) * Fix mobile CSS for my-account-settings * Fix mobile CSS for my-account-videos * Fix mobile CSS my-account-video-channels * Fix mobile CSS for my-account-playlists * Fix CSS mobile for user-subscriptions header * Fix CSS mobile my-account-video-channel-edit * Fix CSS mobile / small view for textarea * Fix margin-right my-delete-button on inside span * Fix CSS mobile on accounts page * Fix indent * Fix CSS mobile for my-account-notifications * Fix CSS mobile / small view my-account-videos * Fix search small-view channels * Use miniature width for title of video on mobile * Add dots to ellipsis multilines * Fix controls and title video width small views * Fix my-account-playlist small and mobile views * Fix channels header + account header mobile * Fix CSS mobile/small view for my-account/subscriptions * Fix align followers channel item * Center header elements user account page on mobile * Fix margins on a element and img * Fix margin img channel or video Co-Authored-By: Rigel Kent Co-authored-by: kimsible Co-authored-by: Rigel Kent --- .../my-account-notifications.component.scss | 10 +++++ .../my-account-settings.component.scss | 6 +++ .../my-account-subscriptions.component.scss | 23 +++++++++++ .../my-account-video-channel-edit.component.scss | 14 ++++++- .../my-account-video-channels.component.scss | 14 +++++-- ...-account-video-playlist-elements.component.scss | 11 ++++++ .../my-account-video-playlists.component.scss | 19 ++++++++++ .../my-account-videos.component.scss | 44 ++++++++++++++++++++++ 8 files changed, 136 insertions(+), 5 deletions(-) (limited to 'client/src/app/+my-account') diff --git a/client/src/app/+my-account/my-account-notifications/my-account-notifications.component.scss b/client/src/app/+my-account/my-account-notifications/my-account-notifications.component.scss index 43d1f82ab..73f7c7b24 100644 --- a/client/src/app/+my-account/my-account-notifications/my-account-notifications.component.scss +++ b/client/src/app/+my-account/my-account-notifications/my-account-notifications.component.scss @@ -23,3 +23,13 @@ my-user-notifications { font-size: 15px; } + +@media screen and (max-width: $mobile-view) { + .header { + flex-direction: column; + + & >:first-child { + margin-bottom: 15px; + } + } +} diff --git a/client/src/app/+my-account/my-account-settings/my-account-settings.component.scss b/client/src/app/+my-account/my-account-settings/my-account-settings.component.scss index 2660c2b72..3e1792e3e 100644 --- a/client/src/app/+my-account/my-account-settings/my-account-settings.component.scss +++ b/client/src/app/+my-account/my-account-settings/my-account-settings.component.scss @@ -19,3 +19,9 @@ width: 500px; max-width: 100%; } + +@media screen and (max-width: $small-view) { + .progress { + width: 100%; + } +} diff --git a/client/src/app/+my-account/my-account-subscriptions/my-account-subscriptions.component.scss b/client/src/app/+my-account/my-account-subscriptions/my-account-subscriptions.component.scss index 7ac3c910f..ba8d56689 100644 --- a/client/src/app/+my-account/my-account-subscriptions/my-account-subscriptions.component.scss +++ b/client/src/app/+my-account/my-account-subscriptions/my-account-subscriptions.component.scss @@ -41,4 +41,27 @@ } } +@media screen and (max-width: $small-view) { + .video-channels-header { + text-align: center; + } + + .video-channel { + .video-channel-info { + padding-bottom: 10px; + text-align: center; + + .video-channel-names { + flex-direction: column; + align-items: center !important; + margin: auto; + } + } + + img { + margin-right: 0; + } + } +} + diff --git a/client/src/app/+my-account/my-account-video-channels/my-account-video-channel-edit.component.scss b/client/src/app/+my-account/my-account-video-channels/my-account-video-channel-edit.component.scss index c8c327398..43a49a01a 100644 --- a/client/src/app/+my-account/my-account-video-channels/my-account-video-channel-edit.component.scss +++ b/client/src/app/+my-account/my-account-video-channels/my-account-video-channel-edit.component.scss @@ -26,9 +26,9 @@ my-actor-avatar-info { input { &[type=text] { @include peertube-input-text(340px); - + display: block; - + &#name { width: auto; flex-grow: 1; @@ -63,3 +63,13 @@ my-markdown-textarea ::ng-deep { .breadcrumb { @include breadcrumb; } + +@media screen and (max-width: $small-view) { + input[type=text]#name { + width: auto !important; + } + + label[for=name] + div, textarea { + width: 100%; + } +} diff --git a/client/src/app/+my-account/my-account-video-channels/my-account-video-channels.component.scss b/client/src/app/+my-account/my-account-video-channels/my-account-video-channels.component.scss index c0dc41f12..e1acf6cd6 100644 --- a/client/src/app/+my-account/my-account-video-channels/my-account-video-channels.component.scss +++ b/client/src/app/+my-account/my-account-video-channels/my-account-video-channels.component.scss @@ -70,9 +70,17 @@ } .video-channel { - .video-channel-names { - flex-direction: column; - align-items: center !important; + padding-bottom: 10px; + + .video-channel-info { + padding-bottom: 10px; + text-align: center; + + .video-channel-names { + flex-direction: column; + align-items: center !important; + margin: auto; + } } img { diff --git a/client/src/app/+my-account/my-account-video-playlists/my-account-video-playlist-elements.component.scss b/client/src/app/+my-account/my-account-video-playlists/my-account-video-playlist-elements.component.scss index 9657ac11d..a4ca0f45d 100644 --- a/client/src/app/+my-account/my-account-video-playlists/my-account-video-playlist-elements.component.scss +++ b/client/src/app/+my-account/my-account-video-playlists/my-account-video-playlist-elements.component.scss @@ -11,6 +11,11 @@ display: flex; justify-content: center; + + /* fix ellipsis dots background color */ + ::ng-deep .miniature-name::after { + background-color: var(--submenuColor) !important; + } } // Thanks Angular CDK <3 https://material.angular.io/cdk/drag-drop/examples @@ -37,3 +42,9 @@ .videos.cdk-drop-list-dragging .video:not(.cdk-drag-placeholder) { transition: transform 250ms cubic-bezier(0, 0, 0.2, 1); } + +@media screen and (max-width: $small-view) { + .playlist-info { + margin-top: -$sub-menu-margin-bottom-small-view; + } +} diff --git a/client/src/app/+my-account/my-account-video-playlists/my-account-video-playlists.component.scss b/client/src/app/+my-account/my-account-video-playlists/my-account-video-playlists.component.scss index aed3302ba..4381d74b0 100644 --- a/client/src/app/+my-account/my-account-video-playlists/my-account-video-playlists.component.scss +++ b/client/src/app/+my-account/my-account-video-playlists/my-account-video-playlists.component.scss @@ -67,3 +67,22 @@ } } } + +@media only screen and (min-width: $mobile-view) and (max-width: $small-view) { + .video-playlists-header { + input[type=text] { + width: 42% !important; + } + } +} + +@media screen and (max-width: $mobile-view) { + .video-playlists-header { + flex-direction: column; + + input[type=text] { + width: 100% !important; + margin-bottom: 12px; + } + } +} diff --git a/client/src/app/+my-account/my-account-videos/my-account-videos.component.scss b/client/src/app/+my-account/my-account-videos/my-account-videos.component.scss index 8248cc94f..40bae7668 100644 --- a/client/src/app/+my-account/my-account-videos/my-account-videos.component.scss +++ b/client/src/app/+my-account/my-account-videos/my-account-videos.component.scss @@ -54,3 +54,47 @@ my-delete-button, my-edit-button { margin-right: 10px; } + +@media screen and (max-width: $small-view) { + .videos-header { + flex-direction: column; + } + + ::ng-deep { + .video-miniature { + align-items: center; + + .video-bottom, + .video-bottom .video-miniature-information { + /* same width than a.video-thumbnail */ + max-width: 223px !important; + } + } + } + + my-delete-button, + my-edit-button { + margin-right: 0px; + + ::ng-deep { + span, a { + margin-right: 0px; + } + } + } + + my-delete-button, + my-edit-button, + my-button { + margin-top: 15px; + width: 100%; + text-align: center; + + ::ng-deep { + .action-button { + /* same width than a.video-thumbnail */ + width: 223px; + } + } + } +} -- cgit v1.2.3