Fix broken views on mobile and small screens (#2671)

[github/Chocobozzz/PeerTube.git] / client / src / app / search / search.component.scss

diff --git a/client/src/app/search/search.component.scss b/client/src/app/search/search.component.scss
index 4e3ce1c964dda45e2ca9335858e8dd730d615a0c..641647e2eb17edabdc7803c7e423a73535f0e89e 100644 (file)
--- a/client/src/app/search/search.component.scss
+++ b/client/src/app/search/search.component.scss
@@ -35,18 +35,6 @@
         }
       }
     }
-
-    .results-filter {
-      // Animation when we show/hide the filters
-      transition: max-height 0.3s;
-      display: block !important;
-      overflow: hidden !important;
-      max-height: 0;
-
-      &.show {
-        max-height: 1500px;
-      }
-    }
   }
 
   .entry {
@@ -94,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-info .video-channel-names {
+        align-items: center;
+        flex-direction: column !important;
 
-    .video-channel-name {
-      margin-left: 0 !important;
+        .video-channel-name {
+          margin-left: 0 !important;
+        }
+      }
+
+      my-subscribe-button {
+        margin-top: 5px;
+      }
     }
   }
 }
@@ -112,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 {
@@ -127,7 +133,7 @@
         my-video-thumbnail {
           margin-right: 0 !important;
 
-          /deep/ .video-thumbnail {
+          ::ng-deep .video-thumbnail {
             width: 100%;
             height: auto;
 
@@ -138,16 +144,6 @@
           }
         }
       }
-
-      &.video-channel {
-        .video-channel-info .video-channel-names {
-          align-items: center;
-        }
-
-        my-subscribe-button {
-          margin-top: 5px;
-        }
-      }
     }
   }
 }