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

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