aboutsummaryrefslogtreecommitdiffhomepage
path: root/client
diff options
context:
space:
mode:
authorChocobozzz <me@florianbigard.com>2021-04-01 16:54:20 +0200
committerChocobozzz <me@florianbigard.com>2021-04-01 16:54:49 +0200
commit4429a4a6e730583809461922859d9275c3e59602 (patch)
tree759015ee277ae9d1a5f795e4229ab28c965ac513 /client
parent4d5e572f52e000034abb076e4bf7d7044d704f94 (diff)
downloadPeerTube-4429a4a6e730583809461922859d9275c3e59602.tar.gz
PeerTube-4429a4a6e730583809461922859d9275c3e59602.tar.zst
PeerTube-4429a4a6e730583809461922859d9275c3e59602.zip
Responsive search
Diffstat (limited to 'client')
-rw-r--r--client/src/app/+search/search.component.html4
-rw-r--r--client/src/app/+search/search.component.scss233
-rw-r--r--client/src/app/shared/shared-video-miniature/video-miniature.component.scss9
-rw-r--r--client/src/sass/include/_variables.scss7
4 files changed, 103 insertions, 150 deletions
diff --git a/client/src/app/+search/search.component.html b/client/src/app/+search/search.component.html
index 74c6839e1..65d4b6ecd 100644
--- a/client/src/app/+search/search.component.html
+++ b/client/src/app/+search/search.component.html
@@ -33,11 +33,11 @@
33 33
34 <ng-container *ngFor="let result of results"> 34 <ng-container *ngFor="let result of results">
35 <div *ngIf="isVideoChannel(result)" class="entry video-channel"> 35 <div *ngIf="isVideoChannel(result)" class="entry video-channel">
36 <a *ngIf="!isExternalChannelUrl()" [routerLink]="getChannelUrl(result)"> 36 <a class="link-avatar" *ngIf="!isExternalChannelUrl()" [routerLink]="getChannelUrl(result)">
37 <img [src]="result.avatarUrl" alt="Avatar" /> 37 <img [src]="result.avatarUrl" alt="Avatar" />
38 </a> 38 </a>
39 39
40 <a *ngIf="isExternalChannelUrl()" [href]="getChannelUrl(result)" target="_blank"> 40 <a class="link-avatar" *ngIf="isExternalChannelUrl()" [href]="getChannelUrl(result)" target="_blank">
41 <img [src]="result.avatarUrl" alt="Avatar" /> 41 <img [src]="result.avatarUrl" alt="Avatar" />
42 </a> 42 </a>
43 43
diff --git a/client/src/app/+search/search.component.scss b/client/src/app/+search/search.component.scss
index d25fdd31d..39eaadb35 100644
--- a/client/src/app/+search/search.component.scss
+++ b/client/src/app/+search/search.component.scss
@@ -1,159 +1,121 @@
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}
44 margin-bottom: 20px;
45 54
46 &.video-channel { 55.video-channel {
47 img { 56 img {
48 $image-size: 130px; 57 @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 58 }
59}
50 60
51 @include channel-avatar($image-size); 61.video-channel-info {
62 flex-grow: 1;
63 margin: 0 10px;
64 width: fit-content;
65}
52 66
53 margin: 0 ($margin-size + 10) 0 $margin-size; 67.video-channel-names {
54 } 68 @include disable-default-a-behaviour;
55 69
56 .video-channel-info { 70 display: flex;
57 flex-grow: 1; 71 align-items: baseline;
58 width: fit-content; 72 color: pvar(--mainForegroundColor);
59 73 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} 74}
83 75
84@media screen and (min-width: $small-view) and (max-width: breakpoint(xl)) { 76.video-channel-display-name {
85 .video-channel-info .video-channel-names { 77 font-weight: $font-semibold;
86 flex-direction: column !important; 78 font-size: $video-miniature-row-name-font-size;
79}
87 80
88 .video-channel-name { 81.video-channel-name {
89 @include ellipsis; // Ellipsis and max-width on channel-name to not break screen 82 font-size: $video-miniature-row-info-font-size;
83 color: pvar(--greyForegroundColor);
84 margin-left: 5px;
85}
90 86
91 max-width: 250px; 87// Use the same breakpoints than in video-miniature
92 margin-left: 0 !important; 88@include on-small-main-col {
93 } 89 .video-channel {
94 } 90 display: grid;
91 grid-template-columns: auto 1fr;
92 grid-template-rows: auto auto;
95 93
96 :host-context(.main-col:not(.expanded)) { 94 .link-avatar {
97 // Override the min-width: 500px to not break screen 95 grid-column: 1;
98 ::ng-deep .video-miniature-information { 96 grid-row: 1 / -1;
99 min-width: 300px !important;
100 } 97 }
101 }
102}
103 98
104@media screen and (min-width: $small-view) and (max-width: breakpoint(lg)) { 99 img {
105 :host-context(.main-col:not(.expanded)) { 100 @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 } 101 }
102 }
111 103
112 // Override the min-width: 500px to not break screen 104 .video-channel-info {
113 ::ng-deep .video-miniature-information { 105 grid-column: 2;
114 min-width: $video-thumbnail-width !important; 106 grid-row: 1;
115 }
116 } 107 }
117 108
118 :host-context(.expanded) { 109 my-subscribe-button {
119 // Override the min-width: 500px to not break screen 110 grid-column: 2;
120 ::ng-deep .video-miniature-information { 111 grid-row: 2;
121 min-width: 300px !important; 112 align-self: end;
122 }
123 } 113 }
124} 114}
125 115
126@media screen and (max-width: $small-view) { 116@include on-mobile-main-col {
127 .search-result { 117 .video-channel img {
128 .entry.video-channel, 118 @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 } 119 }
158} 120}
159 121
@@ -164,28 +126,13 @@
164 .results-header { 126 .results-header {
165 font-size: 15px !important; 127 font-size: 15px !important;
166 } 128 }
129 }
167 130
168 .entry { 131 .video-channel-display-name {
169 &.video { 132 font-size: $video-miniature-row-mobile-name-font-size;
170 .video-info-name, 133 }
171 .video-info-account { 134
172 margin: auto; 135 .video-channel-name {
173 } 136 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 } 137 }
191} 138}
diff --git a/client/src/app/shared/shared-video-miniature/video-miniature.component.scss b/client/src/app/shared/shared-video-miniature/video-miniature.component.scss
index 39d6e97c9..1b50f3290 100644
--- a/client/src/app/shared/shared-video-miniature/video-miniature.component.scss
+++ b/client/src/app/shared/shared-video-miniature/video-miniature.component.scss
@@ -105,7 +105,6 @@ $more-button-width: 40px;
105 width: 100%; 105 width: 100%;
106 } 106 }
107 107
108
109 .video-miniature-name { 108 .video-miniature-name {
110 margin-top: 10px; 109 margin-top: 10px;
111 margin-bottom: 5px; 110 margin-bottom: 5px;
@@ -169,13 +168,13 @@ $more-button-width: 40px;
169 } 168 }
170 169
171 .video-miniature-name { 170 .video-miniature-name {
172 @include ellipsis-multiline(1.3em, 2); 171 @include ellipsis-multiline($video-miniature-row-name-font-size, 2);
173 } 172 }
174 173
175 .video-miniature-created-at-views, 174 .video-miniature-created-at-views,
176 .video-miniature-account, 175 .video-miniature-account,
177 .video-miniature-channel { 176 .video-miniature-channel {
178 font-size: 14px; 177 font-size: $video-miniature-row-info-font-size;
179 } 178 }
180 179
181 .video-actions { 180 .video-actions {
@@ -196,13 +195,13 @@ $more-button-width: 40px;
196 --rowThumbnailHeight: #{$video-thumbnail-small-height}; 195 --rowThumbnailHeight: #{$video-thumbnail-small-height};
197 196
198 .video-miniature-name { 197 .video-miniature-name {
199 font-size: 14px; 198 font-size: $video-miniature-row-info-font-size;
200 } 199 }
201 200
202 .video-miniature-created-at-views, 201 .video-miniature-created-at-views,
203 .video-miniature-account, 202 .video-miniature-account,
204 .video-miniature-channel { 203 .video-miniature-channel {
205 font-size: 12px; 204 font-size: $video-miniature-row-mobile-info-font-size;
206 } 205 }
207 } 206 }
208} 207}
diff --git a/client/src/sass/include/_variables.scss b/client/src/sass/include/_variables.scss
index 4c9a79621..c451febdc 100644
--- a/client/src/sass/include/_variables.scss
+++ b/client/src/sass/include/_variables.scss
@@ -60,6 +60,13 @@ $footer-margin: 30px;
60$separator-border-color: rgba(0, 0, 0, 0.10); 60$separator-border-color: rgba(0, 0, 0, 0.10);
61 61
62$video-miniature-margin-bottom: 15px; 62$video-miniature-margin-bottom: 15px;
63
64$video-miniature-row-name-font-size: 1.3em;
65$video-miniature-row-mobile-name-font-size: 14px;
66
67$video-miniature-row-info-font-size: 14px;
68$video-miniature-row-mobile-info-font-size: 12px;
69
63$video-thumbnail-height: 153px; 70$video-thumbnail-height: 153px;
64$video-thumbnail-width: 280px; 71$video-thumbnail-width: 280px;
65$video-thumbnail-medium-height: 114px; 72$video-thumbnail-medium-height: 114px;