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 <par@rigelk.eu>
Co-authored-by: kimsible <kimsible@users.noreply.github.com>
Co-authored-by: Rigel Kent <par@rigelk.eu>

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 a258c7b869b7b64c5aa8733459cfd541963047d9..0422908092723979f685ca8dfc9c094555f6ff90 100644 (file)
--- 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 d0187fe309821f89c03c52035ebfd80965eb9494..12170e3712b9270972691db5910ada0f294d66c9 100644 (file)
--- 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 43d1f82ab1ef312a43690b38ce70c42305591f21..73f7c7b247967dd2141cfa9c5b5d89a70fa0a1be 100644 (file)
--- 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 2660c2b728b102fa26df02af600654b96b163d85..3e1792e3e4738bae6843d4dfbb6c6bf9fe8d106d 100644 (file)
--- 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 7ac3c910f9ce7c9aa0bb9b11ced515e2ea920872..ba8d56689bf2e58a4422c27faf69a94491d59885 100644 (file)
--- 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 c8c327398ffa7c35db026bc8e8d532a6da1718a7..43a49a01ab11d9c68e3710e441f7f87207ead3c1 100644 (file)
--- 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 c0dc41f127229eac35cd52582aaa9a0ae425c4a7..e1acf6cd6abfbf5ab9286aac22c6681c0c05e01d 100644 (file)
--- 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 9657ac11dced0afdc933c8b9c82358aa2fcfa81d..a4ca0f45daba6b9844231008cbce5680a8e07521 100644 (file)
--- 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 aed3302ba45b37d1489cfac0776f7dd726b0108d..4381d74b060665d9d6c84db99ba105af23db26d2 100644 (file)
--- 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 8248cc94faae3fa4a8031903632fc56b51902241..40bae7668595319c856b4de69203820521426b77 100644 (file)
--- 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 a8e823b40eb63288bdf170a2e146e96ff798f4b3..0a49f53cffacf1ef237491868404b9da1b8ba50a 100644 (file)
--- 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 d4d8bbcf7bbc606bced63f5d9fe1d0ed5871e904..641647e2eb17edabdc7803c7e423a73535f0e89e 100644 (file)
--- 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 9bc05015f79330176a0f7ef2be522d19c2bf00e1..44b629542f7e998a4108af87deff79d25853ee56 100644 (file)
--- 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 11e5c16c3fe45f8f9232e8e88e434c2a521d7d70..cc655270592bbd051ff0785821f67b2fd3950ff0 100644 (file)
--- 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 3c420f547ba9b40dd37ec9c73a02417898171e75..75046798ce7ecf00f288e52ef7e78baadf07455a 100644 (file)
--- 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 f60d8ce942da6bdbed4c3891ca67ba1c74b66d68..cf76575509e2c5de894b58810485647016c43529 100644 (file)
--- 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;