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