client/src/app/+search/search.component.scss

   1 @use 'sass:math';
   2 @use '_variables' as *;
   3 @use '_mixins' as *;
   4
   5 @mixin build-channel-img-size ($video-img-width) {
   6   $image-size: min(130px, $video-img-width);
   7   $margin-size: math.div(($video-img-width - $image-size), 2); // So we have the same width than the video miniature
   8
   9   @include actor-avatar-size($image-size);
  10
  11   margin: 0 $margin-size 0 $margin-size;
  12 }
  13
  14 .search-result {
  15   padding: 40px;
  16 }
  17
  18 .alert-danger {
  19   margin-top: 10px;
  20 }
  21
  22 .results-header {
  23   font-size: 16px;
  24   padding-bottom: 20px;
  25   margin-bottom: 30px;
  26   border-bottom: 1px solid #DADADA;
  27
  28   .first-line {
  29     display: flex;
  30     flex-direction: row;
  31
  32     .results-counter {
  33       flex-grow: 1;
  34
  35       .search-value {
  36         font-weight: $font-semibold;
  37       }
  38     }
  39
  40     .results-filter-button {
  41       cursor: pointer;
  42
  43       .icon.icon-filter {
  44         @include icon(20px);
  45         @include margin-right(5px);
  46
  47         position: relative;
  48         top: -1px;
  49         background-image: url('../../assets/images/feather/filter.svg');
  50       }
  51     }
  52   }
  53 }
  54
  55 .entry {
  56   display: flex;
  57   margin-bottom: 40px;
  58   max-width: 800px;
  59 }
  60
  61 .video-channel my-actor-avatar {
  62   @include build-channel-img-size($video-thumbnail-width);
  63 }
  64
  65 .video-channel-info {
  66   flex-grow: 1;
  67   margin: 0 10px;
  68   width: fit-content;
  69 }
  70
  71 .video-channel-names {
  72   @include disable-default-a-behaviour;
  73
  74   display: flex;
  75   align-items: baseline;
  76   color: pvar(--mainForegroundColor);
  77   width: fit-content;
  78 }
  79
  80 .video-channel-display-name {
  81   font-weight: $font-semibold;
  82   font-size: $video-miniature-row-name-font-size;
  83 }
  84
  85 .video-channel-name {
  86   @include margin-left(5px);
  87
  88   font-size: $video-miniature-row-info-font-size;
  89   color: pvar(--greyForegroundColor);
  90 }
  91
  92 // Use the same breakpoints than in video-miniature
  93 @include on-small-main-col {
  94   .video-channel {
  95     display: grid;
  96     grid-template-columns: auto 1fr;
  97     grid-template-rows: auto auto;
  98
  99     my-actor-avatar {
 100       @include build-channel-img-size($video-thumbnail-medium-width);
 101
 102       grid-column: 1;
 103       grid-row: 1 / -1;
 104     }
 105   }
 106
 107   .video-channel-info {
 108     grid-column: 2;
 109     grid-row: 1;
 110   }
 111
 112   my-subscribe-button {
 113     grid-column: 2;
 114     grid-row: 2;
 115     align-self: end;
 116   }
 117 }
 118
 119 @include on-mobile-main-col {
 120   .video-channel my-actor-avatar {
 121     @include build-channel-img-size($video-thumbnail-small-width);
 122   }
 123 }
 124
 125 @media screen and (max-width: $mobile-view) {
 126   .search-result {
 127     padding: 20px 10px;
 128
 129     .results-header {
 130       font-size: 15px !important;
 131     }
 132   }
 133
 134   .video-channel-display-name {
 135     font-size: $video-miniature-row-mobile-name-font-size;
 136   }
 137
 138   .video-channel-name {
 139     font-size: $video-miniature-row-mobile-info-font-size;
 140   }
 141 }