X-Git-Url: https://git.immae.eu/?a=blobdiff_plain;f=client%2Fsrc%2Fapp%2Fsearch%2Fsearch.component.scss;h=d4d8bbcf7bbc606bced63f5d9fe1d0ed5871e904;hb=bc6f886347f676220847461600122cde86edc272;hp=06e3c9542863779c42db5fb46456f7c520740f35;hpb=57c36b277e68b764dd34cb2e449f6e2ca3d1e9b6;p=github%2FChocobozzz%2FPeerTube.git

diff --git a/client/src/app/search/search.component.scss b/client/src/app/search/search.component.scss
index 06e3c9542..d4d8bbcf7 100644
--- a/client/src/app/search/search.component.scss
+++ b/client/src/app/search/search.component.scss
@@ -1,27 +1,39 @@
 @import '_variables';
 @import '_mixins';
 
-.no-result {
-  height: 70vh;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  font-size: 16px;
-  font-weight: $font-semibold;
-}
-
 .search-result {
-  margin-left: 40px;
-  margin-top: 40px;
+  padding: 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 {
+        cursor: pointer;
+
+        .icon.icon-filter {
+          @include icon(20px);
+
+          position: relative;
+          top: -1px;
+          margin-right: 5px;
+          background-image: url('../../assets/images/search/filter.svg');
+        }
+      }
     }
   }
 
@@ -31,42 +43,37 @@
     padding-bottom: 20px;
     margin-bottom: 20px;
 
-    &.video {
+    &.video-channel {
+      img {
+        $image-size: 130px;
+        $margin-size: ($video-thumbnail-width - $image-size) / 2; // So we have the same width than the video miniature
+
+        @include avatar($image-size);
 
-      my-video-thumbnail {
-        margin-right: 10px;
+        margin: 0 ($margin-size + 10) 0 $margin-size;
       }
 
-      .video-info {
+      .video-channel-info {
         flex-grow: 1;
+        width: fit-content;
 
-        .video-info-name {
+        .video-channel-names {
           @include disable-default-a-behaviour;
 
-          color: #000;
-          display: block;
+          display: flex;
+          align-items: baseline;
+          color: var(--mainForegroundColor);
           width: fit-content;
-          font-size: 18px;
-          font-weight: $font-semibold;
-        }
 
-        .video-info-date-views {
-          font-size: 14px;
-        }
-
-        .video-info-account {
-          @include disable-default-a-behaviour;
+          .video-channel-display-name {
+            font-weight: $font-semibold;
+            font-size: 18px;
+          }
 
-          display: block;
-          width: fit-content;
-          overflow: hidden;
-          text-overflow: ellipsis;
-          white-space: nowrap;
-          font-size: 14px;
-          color: #585858;
-
-          &:hover {
-            color: #303030;
+          .video-channel-name {
+            font-size: 14px;
+            color: $grey-actor-name;
+            margin-left: 5px;
           }
         }
       }
@@ -74,19 +81,60 @@
   }
 }
 
-@media screen and (max-width: 800px) {
-  .entry {
-    flex-direction: column;
-    height: auto;
-    text-align: center;
+@media screen and (max-width: $small-view) {
+  .video-channel-names {
+    flex-direction: column !important;
+
+    .video-channel-name {
+      margin-left: 0 !important;
+    }
+  }
+}
+
+@media screen and (max-width: $mobile-view) {
+  .search-result {
+    padding: 20px 10px;
+
+    .results-header {
+      font-size: 15px !important;
+    }
+
+    .entry {
+      flex-direction: column;
+      height: auto;
+      justify-content: center;
+      align-items: center;
+      text-align: center;
 
-    &.video {
-      .video-info-name {
-        margin: auto;
+      &.video {
+        .video-info-name,
+        .video-info-account {
+          margin: auto;
+        }
+
+        my-video-thumbnail {
+          margin-right: 0 !important;
+
+          ::ng-deep .video-thumbnail {
+            width: 100%;
+            height: auto;
+
+            img {
+              width: 100%;
+              height: auto;
+            }
+          }
+        }
       }
 
-      my-video-thumbnail {
-        margin-right: 0;
+      &.video-channel {
+        .video-channel-info .video-channel-names {
+          align-items: center;
+        }
+
+        my-subscribe-button {
+          margin-top: 5px;
+        }
       }
     }
   }