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

   1 @import '_variables';
   2 @import '_mixins';
   3
   4 .search-result {
   5   padding: 40px;
   6
   7   .results-header {
   8     font-size: 16px;
   9     padding-bottom: 20px;
  10     margin-bottom: 30px;
  11     border-bottom: 1px solid #DADADA;
  12
  13     .first-line {
  14       display: flex;
  15       flex-direction: row;
  16
  17       .results-counter {
  18         flex-grow: 1;
  19
  20         .search-value {
  21           font-weight: $font-semibold;
  22         }
  23       }
  24
  25       .results-filter-button {
  26         cursor: pointer;
  27
  28         .icon.icon-filter {
  29           @include icon(20px);
  30
  31           position: relative;
  32           top: -1px;
  33           margin-right: 5px;
  34           background-image: url('../../assets/images/search/filter.svg');
  35         }
  36       }
  37     }
  38   }
  39
  40   .entry {
  41     display: flex;
  42     min-height: 130px;
  43     padding-bottom: 20px;
  44     margin-bottom: 20px;
  45
  46     &.video-channel {
  47       img {
  48         $image-size: 130px;
  49         $margin-size: ($video-thumbnail-width - $image-size) / 2; // So we have the same width than the video miniature
  50
  51         @include avatar($image-size);
  52
  53         margin: 0 ($margin-size + 10) 0 $margin-size;
  54       }
  55
  56       .video-channel-info {
  57         flex-grow: 1;
  58         width: fit-content;
  59
  60         .video-channel-names {
  61           @include disable-default-a-behaviour;
  62
  63           display: flex;
  64           align-items: baseline;
  65           color: pvar(--mainForegroundColor);
  66           width: fit-content;
  67
  68           .video-channel-display-name {
  69             font-weight: $font-semibold;
  70             font-size: 18px;
  71           }
  72
  73           .video-channel-name {
  74             font-size: 14px;
  75             color: $grey-actor-name;
  76             margin-left: 5px;
  77           }
  78         }
  79       }
  80     }
  81   }
  82 }
  83
  84 @media screen and (min-width: $small-view) and (max-width: breakpoint(xl)) {
  85   .video-channel-info .video-channel-names {
  86     flex-direction: column !important;
  87
  88     .video-channel-name {
  89       @include ellipsis; // Ellipsis and max-width on channel-name to not break screen
  90
  91       max-width: 250px;
  92       margin-left: 0 !important;
  93     }
  94   }
  95
  96   :host-context(.main-col:not(.expanded)) {
  97     // Override the min-width: 500px to not break screen
  98     ::ng-deep .video-miniature-information {
  99       min-width: 300px !important;
 100     }
 101   }
 102 }
 103
 104 @media screen and (min-width: $small-view) and (max-width: breakpoint(lg)) {
 105   :host-context(.main-col:not(.expanded)) {
 106     .video-channel-info .video-channel-names {
 107       .video-channel-name {
 108         max-width: 160px;
 109       }
 110     }
 111
 112     // Override the min-width: 500px to not break screen
 113     ::ng-deep .video-miniature-information {
 114       min-width: $video-thumbnail-width !important;
 115     }
 116   }
 117
 118   :host-context(.expanded) {
 119     // Override the min-width: 500px to not break screen
 120     ::ng-deep .video-miniature-information {
 121       min-width: 300px !important;
 122     }
 123   }
 124 }
 125
 126 @media screen and (max-width: $small-view) {
 127   .search-result {
 128     .entry.video-channel,
 129     .entry.video {
 130       flex-direction: column;
 131       height: auto;
 132       justify-content: center;
 133       align-items: center;
 134       text-align: center;
 135
 136       img {
 137         margin: 0;
 138       }
 139
 140       img {
 141         margin: 0;
 142       }
 143
 144       .video-channel-info .video-channel-names {
 145         align-items: center;
 146         flex-direction: column !important;
 147
 148         .video-channel-name {
 149           margin-left: 0 !important;
 150         }
 151       }
 152
 153       my-subscribe-button {
 154         margin-top: 5px;
 155       }
 156     }
 157   }
 158 }
 159
 160 @media screen and (max-width: $mobile-view) {
 161   .search-result {
 162     padding: 20px 10px;
 163
 164     .results-header {
 165       font-size: 15px !important;
 166     }
 167
 168     .entry {
 169       &.video {
 170         .video-info-name,
 171         .video-info-account {
 172           margin: auto;
 173         }
 174
 175         my-video-thumbnail {
 176           margin-right: 0 !important;
 177
 178           ::ng-deep .video-thumbnail {
 179             width: 100%;
 180             height: auto;
 181
 182             img {
 183               width: 100%;
 184               height: auto;
 185             }
 186           }
 187         }
 188       }
 189     }
 190   }
 191 }