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 --- .../account-video-channels.component.scss | 9 +++- client/src/app/+accounts/accounts.component.scss | 29 +++++++++++++ .../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 ++++++++++++++++++++ .../+video-channels/video-channels.component.scss | 13 ++++++ client/src/app/search/search.component.scss | 48 +++++++++++++--------- .../src/app/shared/video/abstract-video-list.scss | 12 ++++++ client/src/sass/application.scss | 7 +++- client/src/sass/include/_mixins.scss | 25 +++++++++++ client/src/sass/include/_variables.scss | 1 + 16 files changed, 257 insertions(+), 28 deletions(-) (limited to 'client/src') diff --git a/client/src/app/+accounts/account-video-channels/account-video-channels.component.scss b/client/src/app/+accounts/account-video-channels/account-video-channels.component.scss index a258c7b86..042290809 100644 --- a/client/src/app/+accounts/account-video-channels/account-video-channels.component.scss +++ b/client/src/app/+accounts/account-video-channels/account-video-channels.component.scss @@ -29,4 +29,11 @@ } } - +@media screen and (max-width: $mobile-view) { + .section { + .section-title { + flex-direction: column; + align-items: normal; + } + } +} diff --git a/client/src/app/+accounts/accounts.component.scss b/client/src/app/+accounts/accounts.component.scss index d0187fe30..12170e371 100644 --- a/client/src/app/+accounts/accounts.component.scss +++ b/client/src/app/+accounts/accounts.component.scss @@ -56,3 +56,32 @@ my-user-moderation-dropdown, padding: 5px; margin-top: -2px; } + +@media screen and (max-width: $mobile-view) { + .sub-menu { + .actor { + flex-direction: column; + align-items: center; + + img, + .actor-info .actor-names .actor-display-name { + margin-right: 0; + } + + .actor-info { + .actor-names { + flex-direction: column; + align-items: center; + } + + my-user-moderation-dropdown { + margin-left: 0; + } + + .actor-followers { + text-align: center; + } + } + } + } +} 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; + } + } + } +} diff --git a/client/src/app/+video-channels/video-channels.component.scss b/client/src/app/+video-channels/video-channels.component.scss index a8e823b40..0a49f53cf 100644 --- a/client/src/app/+video-channels/video-channels.component.scss +++ b/client/src/app/+video-channels/video-channels.component.scss @@ -67,3 +67,16 @@ height: min-content; } } + +@media screen and (max-width: $mobile-view) { + .sub-menu { + .actor { + flex-direction: column; + + .actor-info .actor-names { + flex-direction: column; + align-items: normal; + } + } + } +} diff --git a/client/src/app/search/search.component.scss b/client/src/app/search/search.component.scss index d4d8bbcf7..641647e2e 100644 --- a/client/src/app/search/search.component.scss +++ b/client/src/app/search/search.component.scss @@ -82,11 +82,35 @@ } @media screen and (max-width: $small-view) { - .video-channel-names { - flex-direction: column !important; + .search-result { + .entry.video-channel, + .entry.video { + flex-direction: column; + height: auto; + justify-content: center; + align-items: center; + text-align: center; + + img { + margin: 0; + } + + img { + margin: 0; + } - .video-channel-name { - margin-left: 0 !important; + .video-channel-info .video-channel-names { + align-items: center; + flex-direction: column !important; + + .video-channel-name { + margin-left: 0 !important; + } + } + + my-subscribe-button { + margin-top: 5px; + } } } } @@ -100,12 +124,6 @@ } .entry { - flex-direction: column; - height: auto; - justify-content: center; - align-items: center; - text-align: center; - &.video { .video-info-name, .video-info-account { @@ -126,16 +144,6 @@ } } } - - &.video-channel { - .video-channel-info .video-channel-names { - align-items: center; - } - - my-subscribe-button { - margin-top: 5px; - } - } } } } diff --git a/client/src/app/shared/video/abstract-video-list.scss b/client/src/app/shared/video/abstract-video-list.scss index 9bc05015f..44b629542 100644 --- a/client/src/app/shared/video/abstract-video-list.scss +++ b/client/src/app/shared/video/abstract-video-list.scss @@ -55,3 +55,15 @@ @include adapt-margin-content-width; } +@media screen and (max-width: $mobile-view) { + .videos-header { + flex-direction: column; + align-items: center; + height: auto; + + .title-page { + margin-bottom: 10px; + margin-right: 0px; + } + } +} diff --git a/client/src/sass/application.scss b/client/src/sass/application.scss index 11e5c16c3..cc6552705 100644 --- a/client/src/sass/application.scss +++ b/client/src/sass/application.scss @@ -301,10 +301,13 @@ table { overflow-x: auto; padding-left: 15px; padding-right: 15px; - margin-bottom: 10px; + margin-bottom: $sub-menu-margin-bottom-small-view; } - input[type=text], input[type=password] { + input[type=text], + input[type=password], + input[type=email], + textarea { width: 100% !important; } } diff --git a/client/src/sass/include/_mixins.scss b/client/src/sass/include/_mixins.scss index 3c420f547..75046798c 100644 --- a/client/src/sass/include/_mixins.scss +++ b/client/src/sass/include/_mixins.scss @@ -29,6 +29,31 @@ line-height: $font-size; overflow: hidden; text-overflow: ellipsis; + /* Let space at right for dots */ + position: relative; + margin-right: -1em; + padding-right: 1em; + + /* Display dots if the max number of lines is exceeded */ + &::before { + content: "..."; + /* set position to right bottom corner of block */ + position: absolute; + bottom: 0; + right: 0; + } + + /* Hide dots if the max number of lines is not exceeded */ + &:after { + content: ''; + background-color: var(--mainBackgroundColor); + /* set position to right bottom corner of text */ + position: absolute; + right: 0; + width: 1em; + height: 1em; + margin-top: 0.2em; + } } @mixin prefix($property, $parameters...) { diff --git a/client/src/sass/include/_variables.scss b/client/src/sass/include/_variables.scss index f60d8ce94..cf7657550 100644 --- a/client/src/sass/include/_variables.scss +++ b/client/src/sass/include/_variables.scss @@ -69,6 +69,7 @@ $input-background-color: $bg-color; $input-placeholder-color: #898989; $sub-menu-margin-bottom: 30px; +$sub-menu-margin-bottom-small-view: 10px; $activated-action-button-color: black; -- cgit v1.2.3