smaller miniature average size in fluid grid, updated admin instructions for global search

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 @@
               <div class="form-group">
                 <my-peertube-checkbox
                   inputName="signupEnabled" formControlName="enabled"
-                  i18n-labelText labelText="Signup enabled"
+                  i18n-labelText labelText="Enable Signup"
                 >
                   <ng-container ngProjectAs="description">
                     <span i18n>⚠️ This functionality requires a lot of attention and extra moderation.</span>
@@ -461,7 +461,7 @@
                     i18n-labelText labelText="Allow users to do remote URI/handle search"
                   >
                     <ng-container ngProjectAs="description">
-                      <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>
+                      <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>
                     </ng-container>
                   </my-peertube-checkbox>
                 </div>
@@ -472,7 +472,7 @@
                     i18n-labelText labelText="Allow anonymous to do remote URI/handle search"
                   >
                     <ng-container ngProjectAs="description">
-                      <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>
+                      <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>
                     </ng-container>
                   </my-peertube-checkbox>
                 </div>
@@ -483,39 +483,46 @@
                 <div class="form-group">
                   <my-peertube-checkbox
                     inputName="searchIndexEnabled" formControlName="enabled"
-                    i18n-labelText labelText="Enable search index"
+                    i18n-labelText labelText="Enable global search"
                   >
+                    <ng-container ngProjectAs="description">
+                      <p i18n>⚠️ This functionality depends heavily on the moderation of instances followed by the search index you select.</p>
 
-                  <ng-container ngProjectAs="extra">
-                    <div [ngClass]="{ 'disabled-checkbox-extra': !isSearchIndexEnabled() }">
-                      <label i18n for="searchIndexUrl">Search index URL</label>
-                      <input
-                        type="text"  id="searchIndexUrl" class="form-control"
-                        formControlName="url" [ngClass]="{ 'input-error': formErrors['search.searchIndex.url'] }"
-                      >
-                      <div *ngIf="formErrors.search.searchIndex.url" class="form-error">{{ formErrors.search.searchIndex.url }}</div>
-                    </div>
+                      <span i18n>
+                        You should only use search indexes you trust, or <a href="https://framagit.org/framasoft/peertube/search-index">host your own</a>.
+                      </span>
+                    </ng-container>
 
-                    <div class="mt-3">
-                      <my-peertube-checkbox [ngClass]="{ 'disabled-checkbox-extra': !isSearchIndexEnabled() }"
-                        inputName="searchIndexDisableLocalSearch" formControlName="disableLocalSearch"
-                        i18n-labelText labelText="Disable local search"
-                      ></my-peertube-checkbox>
-                    </div>
+                    <ng-container ngProjectAs="extra">
+                      <div [ngClass]="{ 'disabled-checkbox-extra': !isSearchIndexEnabled() }">
+                        <label i18n for="searchIndexUrl">Search index URL</label>
+                        <input
+                          type="text"  id="searchIndexUrl" class="form-control"
+                          formControlName="url" [ngClass]="{ 'input-error': formErrors['search.searchIndex.url'] }"
+                        >
+                        <div *ngIf="formErrors.search.searchIndex.url" class="form-error">{{ formErrors.search.searchIndex.url }}</div>
+                      </div>
 
-                    <div class="mt-3">
-                      <my-peertube-checkbox [ngClass]="{ 'disabled-checkbox-extra': !isSearchIndexEnabled() }"
-                        inputName="searchIndexIsDefaultSearch" formControlName="isDefaultSearch"
-                        i18n-labelText labelText="Set search index as default"
-                      >
-                        <ng-container ngProjectAs="description">
-                          <span i18n>The local search is used by default</span>
-                        </ng-container>
-                      </my-peertube-checkbox>
-                    </div>
+                      <div class="mt-3">
+                        <my-peertube-checkbox [ngClass]="{ 'disabled-checkbox-extra': !isSearchIndexEnabled() }"
+                          inputName="searchIndexDisableLocalSearch" formControlName="disableLocalSearch"
+                          i18n-labelText labelText="Disable local search in search bar"
+                        ></my-peertube-checkbox>
+                      </div>
 
-                  </ng-container>
-                </my-peertube-checkbox>
+                      <div class="mt-3">
+                        <my-peertube-checkbox [ngClass]="{ 'disabled-checkbox-extra': !isSearchIndexEnabled() }"
+                          inputName="searchIndexIsDefaultSearch" formControlName="isDefaultSearch"
+                          i18n-labelText labelText="Search bar uses the global search index by default"
+                        >
+                          <ng-container ngProjectAs="description">
+                            <span i18n>Otherwise the local search stays used by default</span>
+                          </ng-container>
+                        </my-peertube-checkbox>
+                      </div>
+
+                    </ng-container>
+                  </my-peertube-checkbox>
                 </div>
 
               </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 @@
 @import '_miniature';
 
 .videos {
+  $column-width: #{$video-thumbnail-width - 25px};
+
   display: grid;
   column-gap: calc(10px + .2%);
   grid-template-columns: repeat(
     auto-fill,
     minmax(
-      var(--miniature-min-width, #{$video-thumbnail-width}),
+      var(--miniature-min-width, #{$column-width}),
       1fr
     )
   );
 
-  @media screen and (min-width: #{breakpoint(xxl)}) {
-    --miniature-min-width: 300px;
+  @media screen and (min-width: #{breakpoint(fhd)}) {
+    --miniature-min-width: #{$column-width + 100px};
   }
 }
 
@@ -61,12 +63,13 @@
   font-weight: $font-semibold;
   margin-bottom: 20px;
   margin-top: -10px;
-  padding-top: 20px;
 
   // make the element span a full grid row within .videos grid
   grid-column: 1 / -1;
 
   &:not(:first-child) {
+    margin-top: .5rem;
+    padding-top: 20px;
     border-top: 1px solid $separator-border-color;
   }
 }
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;
 $modal-md: 600px;
 
 $grid-breakpoints: (
+  // CLASSIC BREAKPOINTS GROUP
   // Extra small screen / phone
   xs: 0,
   // Small screen / phone
@@ -14,7 +15,12 @@ $grid-breakpoints: (
   lg: 900px,
   // Extra large screens / wide desktops
   xl: 1200px,
-  xxl: 1600px
+  xxl: 1600px,
+
+  // SCREEN GROUP
+  fhd: 1920px,
+  qhd: 2560px,
+  uhd: 3840px
 );
 
 @function breakpoint($label) {