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>

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;
+    }
+  }
+}

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;
+        }
+      }
+    }
+  }
+}

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;
+    }
+  }
+}

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%;
+  }
+}

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;
+    }
+  }
+}
+
 

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%;
+  }
+}

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 {

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;
+  }
+}

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;
+    }
+  }
+}

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;
+      }
+    }
+  }
+}

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;
+      }
+    }
+  }
+}

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;
+      }
 
-    .video-channel-name {
-      margin-left: 0 !important;
+      img {
+        margin: 0;
+      }
+
+      .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;
-        }
-      }
     }
   }
 }

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;
+    }
+  }
+}

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;
       }
     }

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...) {

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;