diff options
Diffstat (limited to 'client/src/app/+search/search.component.scss')
-rw-r--r-- | client/src/app/+search/search.component.scss | 234 |
1 files changed, 91 insertions, 143 deletions
diff --git a/client/src/app/+search/search.component.scss b/client/src/app/+search/search.component.scss index 64927fa4b..91c8272d7 100644 --- a/client/src/app/+search/search.component.scss +++ b/client/src/app/+search/search.component.scss | |||
@@ -1,159 +1,122 @@ | |||
1 | @import '_variables'; | 1 | @import '_variables'; |
2 | @import '_mixins'; | 2 | @import '_mixins'; |
3 | 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 | |||
4 | .search-result { | 13 | .search-result { |
5 | padding: 40px; | 14 | padding: 40px; |
15 | } | ||
6 | 16 | ||
7 | .results-header { | 17 | .results-header { |
8 | font-size: 16px; | 18 | font-size: 16px; |
9 | padding-bottom: 20px; | 19 | padding-bottom: 20px; |
10 | margin-bottom: 30px; | 20 | margin-bottom: 30px; |
11 | border-bottom: 1px solid #DADADA; | 21 | border-bottom: 1px solid #DADADA; |
12 | 22 | ||
13 | .first-line { | 23 | .first-line { |
14 | display: flex; | 24 | display: flex; |
15 | flex-direction: row; | 25 | flex-direction: row; |
16 | 26 | ||
17 | .results-counter { | 27 | .results-counter { |
18 | flex-grow: 1; | 28 | flex-grow: 1; |
19 | 29 | ||
20 | .search-value { | 30 | .search-value { |
21 | font-weight: $font-semibold; | 31 | font-weight: $font-semibold; |
22 | } | ||
23 | } | 32 | } |
33 | } | ||
24 | 34 | ||
25 | .results-filter-button { | 35 | .results-filter-button { |
26 | cursor: pointer; | 36 | cursor: pointer; |
27 | 37 | ||
28 | .icon.icon-filter { | 38 | .icon.icon-filter { |
29 | @include icon(20px); | 39 | @include icon(20px); |
30 | 40 | ||
31 | position: relative; | 41 | position: relative; |
32 | top: -1px; | 42 | top: -1px; |
33 | margin-right: 5px; | 43 | margin-right: 5px; |
34 | background-image: url('../../assets/images/feather/filter.svg'); | 44 | background-image: url('../../assets/images/feather/filter.svg'); |
35 | } | ||
36 | } | 45 | } |
37 | } | 46 | } |
38 | } | 47 | } |
48 | } | ||
39 | 49 | ||
40 | .entry { | 50 | .entry { |
41 | display: flex; | 51 | display: flex; |
42 | min-height: 130px; | 52 | margin-bottom: 40px; |
43 | padding-bottom: 20px; | 53 | max-width: 800px; |
44 | margin-bottom: 20px; | 54 | } |
45 | 55 | ||
46 | &.video-channel { | 56 | .video-channel { |
47 | img { | 57 | img { |
48 | $image-size: 130px; | 58 | @include build-channel-img-size($video-thumbnail-width); |
49 | $margin-size: ($video-thumbnail-width - $image-size) / 2; // So we have the same width than the video miniature | 59 | } |
60 | } | ||
50 | 61 | ||
51 | @include avatar($image-size); | 62 | .video-channel-info { |
63 | flex-grow: 1; | ||
64 | margin: 0 10px; | ||
65 | width: fit-content; | ||
66 | } | ||
52 | 67 | ||
53 | margin: 0 ($margin-size + 10) 0 $margin-size; | 68 | .video-channel-names { |
54 | } | 69 | @include disable-default-a-behaviour; |
55 | 70 | ||
56 | .video-channel-info { | 71 | display: flex; |
57 | flex-grow: 1; | 72 | align-items: baseline; |
58 | width: fit-content; | 73 | color: pvar(--mainForegroundColor); |
59 | 74 | width: fit-content; | |
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 | } | 75 | } |
83 | 76 | ||
84 | @media screen and (min-width: $small-view) and (max-width: breakpoint(xl)) { | 77 | .video-channel-display-name { |
85 | .video-channel-info .video-channel-names { | 78 | font-weight: $font-semibold; |
86 | flex-direction: column !important; | 79 | font-size: $video-miniature-row-name-font-size; |
80 | } | ||
87 | 81 | ||
88 | .video-channel-name { | 82 | .video-channel-name { |
89 | @include ellipsis; // Ellipsis and max-width on channel-name to not break screen | 83 | font-size: $video-miniature-row-info-font-size; |
84 | color: pvar(--greyForegroundColor); | ||
85 | margin-left: 5px; | ||
86 | } | ||
90 | 87 | ||
91 | max-width: 250px; | 88 | // Use the same breakpoints than in video-miniature |
92 | margin-left: 0 !important; | 89 | @include on-small-main-col { |
93 | } | 90 | .video-channel { |
94 | } | 91 | display: grid; |
92 | grid-template-columns: auto 1fr; | ||
93 | grid-template-rows: auto auto; | ||
95 | 94 | ||
96 | :host-context(.main-col:not(.expanded)) { | 95 | .link-avatar { |
97 | // Override the min-width: 500px to not break screen | 96 | grid-column: 1; |
98 | ::ng-deep .video-miniature-information { | 97 | grid-row: 1 / -1; |
99 | min-width: 300px !important; | ||
100 | } | 98 | } |
101 | } | ||
102 | } | ||
103 | 99 | ||
104 | @media screen and (min-width: $small-view) and (max-width: breakpoint(lg)) { | 100 | img { |
105 | :host-context(.main-col:not(.expanded)) { | 101 | @include build-channel-img-size($video-thumbnail-medium-width); |
106 | .video-channel-info .video-channel-names { | ||
107 | .video-channel-name { | ||
108 | max-width: 160px; | ||
109 | } | ||
110 | } | 102 | } |
103 | } | ||
111 | 104 | ||
112 | // Override the min-width: 500px to not break screen | 105 | .video-channel-info { |
113 | ::ng-deep .video-miniature-information { | 106 | grid-column: 2; |
114 | min-width: $video-thumbnail-width !important; | 107 | grid-row: 1; |
115 | } | ||
116 | } | 108 | } |
117 | 109 | ||
118 | :host-context(.expanded) { | 110 | my-subscribe-button { |
119 | // Override the min-width: 500px to not break screen | 111 | grid-column: 2; |
120 | ::ng-deep .video-miniature-information { | 112 | grid-row: 2; |
121 | min-width: 300px !important; | 113 | align-self: end; |
122 | } | ||
123 | } | 114 | } |
124 | } | 115 | } |
125 | 116 | ||
126 | @media screen and (max-width: $small-view) { | 117 | @include on-mobile-main-col { |
127 | .search-result { | 118 | .video-channel img { |
128 | .entry.video-channel, | 119 | @include build-channel-img-size($video-thumbnail-small-width); |
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 | } | 120 | } |
158 | } | 121 | } |
159 | 122 | ||
@@ -164,28 +127,13 @@ | |||
164 | .results-header { | 127 | .results-header { |
165 | font-size: 15px !important; | 128 | font-size: 15px !important; |
166 | } | 129 | } |
130 | } | ||
167 | 131 | ||
168 | .entry { | 132 | .video-channel-display-name { |
169 | &.video { | 133 | font-size: $video-miniature-row-mobile-name-font-size; |
170 | .video-info-name, | 134 | } |
171 | .video-info-account { | 135 | |
172 | margin: auto; | 136 | .video-channel-name { |
173 | } | 137 | font-size: $video-miniature-row-mobile-info-font-size; |
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 | } | 138 | } |
191 | } | 139 | } |