aboutsummaryrefslogtreecommitdiffhomepage
diff options
context:
space:
mode:
-rw-r--r--client/src/app/+admin/config/edit-custom-config/edit-custom-config.component.html69
-rw-r--r--client/src/app/shared/video/abstract-video-list.scss11
-rw-r--r--client/src/sass/include/_bootstrap-variables.scss8
3 files changed, 52 insertions, 36 deletions
diff --git a/client/src/app/+admin/config/edit-custom-config/edit-custom-config.component.html b/client/src/app/+admin/config/edit-custom-config/edit-custom-config.component.html
index b8682ffe0..981b6685f 100644
--- a/client/src/app/+admin/config/edit-custom-config/edit-custom-config.component.html
+++ b/client/src/app/+admin/config/edit-custom-config/edit-custom-config.component.html
@@ -342,7 +342,7 @@
342 <div class="form-group"> 342 <div class="form-group">
343 <my-peertube-checkbox 343 <my-peertube-checkbox
344 inputName="signupEnabled" formControlName="enabled" 344 inputName="signupEnabled" formControlName="enabled"
345 i18n-labelText labelText="Signup enabled" 345 i18n-labelText labelText="Enable Signup"
346 > 346 >
347 <ng-container ngProjectAs="description"> 347 <ng-container ngProjectAs="description">
348 <span i18n>⚠️ This functionality requires a lot of attention and extra moderation.</span> 348 <span i18n>⚠️ This functionality requires a lot of attention and extra moderation.</span>
@@ -461,7 +461,7 @@
461 i18n-labelText labelText="Allow users to do remote URI/handle search" 461 i18n-labelText labelText="Allow users to do remote URI/handle search"
462 > 462 >
463 <ng-container ngProjectAs="description"> 463 <ng-container ngProjectAs="description">
464 <span i18n>Add ability for <strong>your users</strong> to fetch remote videos/actors by their URI, that may not be federated with your instance</span> 464 <span i18n>Allow <strong>your users</strong> to look up remote videos/actors by their URI, that may not be federated with your instance</span>
465 </ng-container> 465 </ng-container>
466 </my-peertube-checkbox> 466 </my-peertube-checkbox>
467 </div> 467 </div>
@@ -472,7 +472,7 @@
472 i18n-labelText labelText="Allow anonymous to do remote URI/handle search" 472 i18n-labelText labelText="Allow anonymous to do remote URI/handle search"
473 > 473 >
474 <ng-container ngProjectAs="description"> 474 <ng-container ngProjectAs="description">
475 <span i18n>Add ability for <strong>anonymous</strong> to fetch remote videos/actors by their URI, that may not be federated with your instance</span> 475 <span i18n>Allow <strong>anonymous users</strong> to look up remote videos/actors by their URI, that may not be federated with your instance</span>
476 </ng-container> 476 </ng-container>
477 </my-peertube-checkbox> 477 </my-peertube-checkbox>
478 </div> 478 </div>
@@ -483,39 +483,46 @@
483 <div class="form-group"> 483 <div class="form-group">
484 <my-peertube-checkbox 484 <my-peertube-checkbox
485 inputName="searchIndexEnabled" formControlName="enabled" 485 inputName="searchIndexEnabled" formControlName="enabled"
486 i18n-labelText labelText="Enable search index" 486 i18n-labelText labelText="Enable global search"
487 > 487 >
488 <ng-container ngProjectAs="description">
489 <p i18n>⚠️ This functionality depends heavily on the moderation of instances followed by the search index you select.</p>
488 490
489 <ng-container ngProjectAs="extra"> 491 <span i18n>
490 <div [ngClass]="{ 'disabled-checkbox-extra': !isSearchIndexEnabled() }"> 492 You should only use search indexes you trust, or <a href="https://framagit.org/framasoft/peertube/search-index">host your own</a>.
491 <label i18n for="searchIndexUrl">Search index URL</label> 493 </span>
492 <input 494 </ng-container>
493 type="text" id="searchIndexUrl" class="form-control"
494 formControlName="url" [ngClass]="{ 'input-error': formErrors['search.searchIndex.url'] }"
495 >
496 <div *ngIf="formErrors.search.searchIndex.url" class="form-error">{{ formErrors.search.searchIndex.url }}</div>
497 </div>
498 495
499 <div class="mt-3"> 496 <ng-container ngProjectAs="extra">
500 <my-peertube-checkbox [ngClass]="{ 'disabled-checkbox-extra': !isSearchIndexEnabled() }" 497 <div [ngClass]="{ 'disabled-checkbox-extra': !isSearchIndexEnabled() }">
501 inputName="searchIndexDisableLocalSearch" formControlName="disableLocalSearch" 498 <label i18n for="searchIndexUrl">Search index URL</label>
502 i18n-labelText labelText="Disable local search" 499 <input
503 ></my-peertube-checkbox> 500 type="text" id="searchIndexUrl" class="form-control"
504 </div> 501 formControlName="url" [ngClass]="{ 'input-error': formErrors['search.searchIndex.url'] }"
502 >
503 <div *ngIf="formErrors.search.searchIndex.url" class="form-error">{{ formErrors.search.searchIndex.url }}</div>
504 </div>
505 505
506 <div class="mt-3"> 506 <div class="mt-3">
507 <my-peertube-checkbox [ngClass]="{ 'disabled-checkbox-extra': !isSearchIndexEnabled() }" 507 <my-peertube-checkbox [ngClass]="{ 'disabled-checkbox-extra': !isSearchIndexEnabled() }"
508 inputName="searchIndexIsDefaultSearch" formControlName="isDefaultSearch" 508 inputName="searchIndexDisableLocalSearch" formControlName="disableLocalSearch"
509 i18n-labelText labelText="Set search index as default" 509 i18n-labelText labelText="Disable local search in search bar"
510 > 510 ></my-peertube-checkbox>
511 <ng-container ngProjectAs="description"> 511 </div>
512 <span i18n>The local search is used by default</span>
513 </ng-container>
514 </my-peertube-checkbox>
515 </div>
516 512
517 </ng-container> 513 <div class="mt-3">
518 </my-peertube-checkbox> 514 <my-peertube-checkbox [ngClass]="{ 'disabled-checkbox-extra': !isSearchIndexEnabled() }"
515 inputName="searchIndexIsDefaultSearch" formControlName="isDefaultSearch"
516 i18n-labelText labelText="Search bar uses the global search index by default"
517 >
518 <ng-container ngProjectAs="description">
519 <span i18n>Otherwise the local search stays used by default</span>
520 </ng-container>
521 </my-peertube-checkbox>
522 </div>
523
524 </ng-container>
525 </my-peertube-checkbox>
519 </div> 526 </div>
520 527
521 </ng-container> 528 </ng-container>
diff --git a/client/src/app/shared/video/abstract-video-list.scss b/client/src/app/shared/video/abstract-video-list.scss
index 2aab40ea8..982204e21 100644
--- a/client/src/app/shared/video/abstract-video-list.scss
+++ b/client/src/app/shared/video/abstract-video-list.scss
@@ -4,18 +4,20 @@
4@import '_miniature'; 4@import '_miniature';
5 5
6.videos { 6.videos {
7 $column-width: #{$video-thumbnail-width - 25px};
8
7 display: grid; 9 display: grid;
8 column-gap: calc(10px + .2%); 10 column-gap: calc(10px + .2%);
9 grid-template-columns: repeat( 11 grid-template-columns: repeat(
10 auto-fill, 12 auto-fill,
11 minmax( 13 minmax(
12 var(--miniature-min-width, #{$video-thumbnail-width}), 14 var(--miniature-min-width, #{$column-width}),
13 1fr 15 1fr
14 ) 16 )
15 ); 17 );
16 18
17 @media screen and (min-width: #{breakpoint(xxl)}) { 19 @media screen and (min-width: #{breakpoint(fhd)}) {
18 --miniature-min-width: 300px; 20 --miniature-min-width: #{$column-width + 100px};
19 } 21 }
20} 22}
21 23
@@ -61,12 +63,13 @@
61 font-weight: $font-semibold; 63 font-weight: $font-semibold;
62 margin-bottom: 20px; 64 margin-bottom: 20px;
63 margin-top: -10px; 65 margin-top: -10px;
64 padding-top: 20px;
65 66
66 // make the element span a full grid row within .videos grid 67 // make the element span a full grid row within .videos grid
67 grid-column: 1 / -1; 68 grid-column: 1 / -1;
68 69
69 &:not(:first-child) { 70 &:not(:first-child) {
71 margin-top: .5rem;
72 padding-top: 20px;
70 border-top: 1px solid $separator-border-color; 73 border-top: 1px solid $separator-border-color;
71 } 74 }
72} 75}
diff --git a/client/src/sass/include/_bootstrap-variables.scss b/client/src/sass/include/_bootstrap-variables.scss
index 6aa5c2474..09c58a697 100644
--- a/client/src/sass/include/_bootstrap-variables.scss
+++ b/client/src/sass/include/_bootstrap-variables.scss
@@ -4,6 +4,7 @@ $modal-footer-border-width: 0;
4$modal-md: 600px; 4$modal-md: 600px;
5 5
6$grid-breakpoints: ( 6$grid-breakpoints: (
7 // CLASSIC BREAKPOINTS GROUP
7 // Extra small screen / phone 8 // Extra small screen / phone
8 xs: 0, 9 xs: 0,
9 // Small screen / phone 10 // Small screen / phone
@@ -14,7 +15,12 @@ $grid-breakpoints: (
14 lg: 900px, 15 lg: 900px,
15 // Extra large screens / wide desktops 16 // Extra large screens / wide desktops
16 xl: 1200px, 17 xl: 1200px,
17 xxl: 1600px 18 xxl: 1600px,
19
20 // SCREEN GROUP
21 fhd: 1920px,
22 qhd: 2560px,
23 uhd: 3840px
18); 24);
19 25
20@function breakpoint($label) { 26@function breakpoint($label) {