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>
2020-04-27 14:57:50 +02:00 · 2020-04-27 14:57:50 +02:00 · 4682468d4d
parent 9181bc0c80
commit 4682468d4d
16 changed files with 257 additions and 28 deletions
--- 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;
+    }
+  }
+}
--- 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;
+        }
+      }
+    }
+  }
+}
--- 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;
+    }
+  }
+}
--- 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%;
+  }
+}
--- 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;
+    }
+  }
+}
+

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

-    .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;
-        }
-      }
    }
  }
 }
--- 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;
+    }
+  }
+}
--- 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;
      }
    }
--- 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...) {
--- 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;