Fix responsive on videos search

[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 06e3c9542863779c42db5fb46456f7c520740f35..ef89c56661fc7a31c2acd7e205ef07977b000f37 100644 (file)
--- a/client/src/app/search/search.component.scss
+++ b/client/src/app/search/search.component.scss
@@ -2,7 +2,7 @@
 @import '_mixins';
 
 .no-result {
-  height: 70vh;
+  height: 40vh;
   display: flex;
   align-items: center;
   justify-content: center;
@@ -11,17 +11,49 @@
 }
 
 .search-result {
-  margin-left: 40px;
-  margin-top: 40px;
+  margin: 40px;
 
-  .results-counter {
-    font-size: 15px;
+  .results-header {
+    font-size: 16px;
     padding-bottom: 20px;
     margin-bottom: 30px;
     border-bottom: 1px solid #DADADA;
 
-    .search-value {
-      font-weight: $font-semibold;
+    .first-line {
+      display: flex;
+      flex-direction: row;
+
+      .results-counter {
+        flex-grow: 1;
+
+        .search-value {
+          font-weight: $font-semibold;
+        }
+      }
+
+      .results-filter-button {
+
+        .icon.icon-filter {
+          @include icon(20px);
+
+          position: relative;
+          top: -1px;
+          margin-right: 5px;
+          background-image: url('../../assets/images/search/filter.svg');
+        }
+      }
+    }
+
+    .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;
+      }
     }
   }
 
@@ -75,18 +107,37 @@
 }
 
 @media screen and (max-width: 800px) {
+  .search-result {
+    margin: 20px 10px;
+  }
+
+  .results-header {
+    font-size: 15px !important;
+  }
+
   .entry {
     flex-direction: column;
     height: auto;
     text-align: center;
 
     &.video {
-      .video-info-name {
+      .video-info-name,
+      .video-info-account {
         margin: auto;
       }
 
       my-video-thumbnail {
-        margin-right: 0;
+        margin-right: 0 !important;
+
+        /deep/ .video-thumbnail {
+          width: 100%;
+          height: auto;
+
+          img {
+            width: 100%;
+            height: auto;
+          }
+        }
       }
     }
   }