Upgrading to bootstrap 5.3-alpha in preparation to theaming #587

2024-11-28 08:58:49 +02:00 · 2023-03-10 23:45:29 +01:00 · 2023-03-10 23:45:29 +01:00 · 58c9219b77
commit 58c9219b77
parent 080455cdc1
7 changed files with 94 additions and 85 deletions
--- a/package-lock.json
+++ b/package-lock.json
@ -80,7 +80,7 @@
        "@types/xml2js": "0.4.9",
        "@typescript-eslint/eslint-plugin": "5.11.0",
        "@typescript-eslint/parser": "5.11.0",
-        "bootstrap": "5.1.3",
+        "bootstrap": "5.3.0-alpha1",
        "chai": "4.3.6",
        "chai-http": "4.3.0",
        "codelyzer": "6.0.2",
@ -3559,9 +3559,9 @@
      "dev": true
    },
    "node_modules/@popperjs/core": {
-      "version": "2.11.4",
-      "resolved": "https://registry.npmjs.org/@popperjs/core/-/core-2.11.4.tgz",
-      "integrity": "sha512-q/ytXxO5NKvyT37pmisQAItCFqA7FD/vNb8dgaJy3/630Fsc+Mz9/9f2SziBoIZ30TJooXyTwZmhi1zjXmObYg==",
+      "version": "2.11.6",
+      "resolved": "https://registry.npmjs.org/@popperjs/core/-/core-2.11.6.tgz",
+      "integrity": "sha512-50/17A98tWUfQ176raKiOGXuYpLyyVMkxxG6oylzL3BPOlA6ADGdK7EYunSa4I064xerltq9TGXs8HmOk5E+vw==",
      "dev": true,
      "peer": true,
      "funding": {
@ -6097,16 +6097,22 @@
      "dev": true
    },
    "node_modules/bootstrap": {
-      "version": "5.1.3",
-      "resolved": "https://registry.npmjs.org/bootstrap/-/bootstrap-5.1.3.tgz",
-      "integrity": "sha512-fcQztozJ8jToQWXxVuEyXWW+dSo8AiXWKwiSSrKWsRB/Qt+Ewwza+JWoLKiTuQLaEPhdNAJ7+Dosc9DOIqNy7Q==",
+      "version": "5.3.0-alpha1",
+      "resolved": "https://registry.npmjs.org/bootstrap/-/bootstrap-5.3.0-alpha1.tgz",
+      "integrity": "sha512-ABZpKK4ObS3kKlIqH+ZVDqoy5t/bhFG0oHTAzByUdon7YIom0lpCeTqRniDzJmbtcWkNe800VVPBiJgxSYTYew==",
      "dev": true,
-      "funding": {
-        "type": "opencollective",
-        "url": "https://opencollective.com/bootstrap"
-      },
+      "funding": [
+        {
+          "type": "github",
+          "url": "https://github.com/sponsors/twbs"
+        },
+        {
+          "type": "opencollective",
+          "url": "https://opencollective.com/bootstrap"
+        }
+      ],
      "peerDependencies": {
-        "@popperjs/core": "^2.10.2"
+        "@popperjs/core": "^2.11.6"
      }
    },
    "node_modules/brace-expansion": {
@ -24827,9 +24833,9 @@
      "dev": true
    },
    "@popperjs/core": {
-      "version": "2.11.4",
-      "resolved": "https://registry.npmjs.org/@popperjs/core/-/core-2.11.4.tgz",
-      "integrity": "sha512-q/ytXxO5NKvyT37pmisQAItCFqA7FD/vNb8dgaJy3/630Fsc+Mz9/9f2SziBoIZ30TJooXyTwZmhi1zjXmObYg==",
+      "version": "2.11.6",
+      "resolved": "https://registry.npmjs.org/@popperjs/core/-/core-2.11.6.tgz",
+      "integrity": "sha512-50/17A98tWUfQ176raKiOGXuYpLyyVMkxxG6oylzL3BPOlA6ADGdK7EYunSa4I064xerltq9TGXs8HmOk5E+vw==",
      "dev": true,
      "peer": true
    },
@ -26815,9 +26821,9 @@
      "dev": true
    },
    "bootstrap": {
-      "version": "5.1.3",
-      "resolved": "https://registry.npmjs.org/bootstrap/-/bootstrap-5.1.3.tgz",
-      "integrity": "sha512-fcQztozJ8jToQWXxVuEyXWW+dSo8AiXWKwiSSrKWsRB/Qt+Ewwza+JWoLKiTuQLaEPhdNAJ7+Dosc9DOIqNy7Q==",
+      "version": "5.3.0-alpha1",
+      "resolved": "https://registry.npmjs.org/bootstrap/-/bootstrap-5.3.0-alpha1.tgz",
+      "integrity": "sha512-ABZpKK4ObS3kKlIqH+ZVDqoy5t/bhFG0oHTAzByUdon7YIom0lpCeTqRniDzJmbtcWkNe800VVPBiJgxSYTYew==",
      "dev": true,
      "requires": {}
    },
--- a/package.json
+++ b/package.json
@ -100,7 +100,7 @@
    "@types/xml2js": "0.4.9",
    "@typescript-eslint/eslint-plugin": "5.11.0",
    "@typescript-eslint/parser": "5.11.0",
-    "bootstrap": "5.1.3",
+    "bootstrap": "5.3.0-alpha1",
    "chai": "4.3.6",
    "chai-http": "4.3.0",
    "codelyzer": "6.0.2",
--- a/src/frontend/app/ui/duplicates/photo/photo.duplicates.component.css
+++ b/src/frontend/app/ui/duplicates/photo/photo.duplicates.component.css
@ -7,7 +7,7 @@
 }

 .photo-container {
-  width: inherit;
+  width: 100%;
  height: inherit;
  overflow: hidden;
 }
--- a/src/frontend/app/ui/duplicates/photo/photo.duplicates.component.html
+++ b/src/frontend/app/ui/duplicates/photo/photo.duplicates.component.html
@ -9,7 +9,9 @@
  <img alt="{{media.name}}"
       class="icon"
       [popover]="popTemplate"
+       container="body"
       triggers="mouseenter:mouseleave"
       [src]="thumbnail.Src"
       *ngIf="thumbnail.Available">
+
 </div>
--- a/src/frontend/app/ui/gallery/search/query-enrty/query-entry.search.gallery.component.html
+++ b/src/frontend/app/ui/gallery/search/query-enrty/query-entry.search.gallery.component.html
@ -16,7 +16,8 @@
        <ng-container i18n>At least this many</ng-container>
        (1-{{AsListQuery.list.length}}):</label>
      <input
-        type="number" min="1" [max]="AsListQuery.list.length" class="form-control col-md-2" placeholder="1"
+        type="number" min="1" [max]="AsListQuery.list.length"
+        class="form-control col-md-2" placeholder="1"
        title="At least this many"
        i18n-title
        [(ngModel)]="AsSomeOfQuery.min"
@ -72,7 +73,7 @@
          name="searchField"
          placeholder="Search text"
          i18n-placeholder
-          class="form-control"
+          class="form-control rounded-2"
          [(ngModel)]="AsTextQuery.text"
          (change)="onChange()"
          (ngModelChange)="onChange()"
@ -85,35 +86,36 @@
      </div>
    </div>
    <ng-container [ngSwitch]="queryEntry.type">
-      <div *ngSwitchCase="SearchQueryTypes.distance" class="col-md-8 d-flex">
-        <div class="input-group col-md-4">
-          <input type="number" class="form-control" placeholder="1"
-                 id="distance"
-                 min="0"
-                 step="0.1"
-                 [(ngModel)]="AsDistanceQuery.distance"
-                 (ngModelChange)="onChange()"
-                 name="distance" required>
-          <div class="input-group-append">
+      <div *ngSwitchCase="SearchQueryTypes.distance" class="col-md-8 row">
+        <div class="col-md-4">
+          <div class="input-group">
+            <input type="number" class="form-control" placeholder="1"
+                   id="distance"
+                   min="0"
+                   step="0.1"
+                   [(ngModel)]="AsDistanceQuery.distance"
+                   (ngModelChange)="onChange()"
+                   name="distance" required>
            <span class="input-group-text">km</span>
          </div>
        </div>
-        <div class="input-group col-md-8">
-          <label class="col-md-4 control-label" for="maxResolution">From</label>
-          <input id="from"
-                 name="from"
-                 title="From"
-                 placeholder="New York"
-                 i18n-title
-                 class="form-control input-md"
-                 [(ngModel)]="AsDistanceQuery.from.text"
-                 (ngModelChange)="onChange()"
-                 type="text">
+        <div class="col-md-8">
+          <div class="input-group">
+            <label class="control-label me-2" for="maxResolution">From</label>
+            <input id="from"
+                   name="from"
+                   title="From"
+                   placeholder="New York"
+                   i18n-title
+                   class="form-control input-md rounded-2"
+                   [(ngModel)]="AsDistanceQuery.from.text"
+                   (ngModelChange)="onChange()"
+                   type="text">
+          </div>
        </div>
      </div>
      <!-- Range Search Query -->
-      <div *ngSwitchCase="SearchQueryTypes.from_date" class="col-md-8 input-group ">
-        <label class="col-md-4 control-label" for="from_date">From:</label>
+      <div *ngSwitchCase="SearchQueryTypes.from_date" class="col-md-8 d-flex">
        <input id="from_date"
               name="from_date"
               title="From date"
@ -121,11 +123,10 @@
               [ngModel]="AsRangeQuery.value | date:'yyyy-MM-dd'"
               (ngModelChange)="AsRangeQuery.value = $event; onChange() "
               [value]="AsRangeQuery.value | date:'yyyy-MM-dd'" #from_date="ngModel"
-               class="form-control input-md"
+               class="form-control input-md rounded-2"
               type="date">
      </div>
-      <div *ngSwitchCase="SearchQueryTypes.to_date" class="col-md-8 input-group">
-        <label class="col-md-4 control-label" for="to_date">To:</label>
+      <div *ngSwitchCase="SearchQueryTypes.to_date" class="col-md-8 d-flex">
        <input id="to_date"
               name="to_date"
               title="To date"
@ -133,11 +134,10 @@
               [ngModel]="AsRangeQuery.value | date:'yyyy-MM-dd'"
               (ngModelChange)="AsRangeQuery.value = $event; onChange() "
               [value]="AsRangeQuery.value | date:'yyyy-MM-dd'" #to_date="ngModel"
-               class="form-control input-md"
+               class="form-control input-md rounded-2"
               type="date">
      </div>
-      <div *ngSwitchCase="SearchQueryTypes.min_rating" class="col-md-8 input-group">
-        <label class="col-md-4 control-label" for="maxResolution">Min:</label>
+      <div *ngSwitchCase="SearchQueryTypes.min_rating" class="col-md-8 d-flex">
        <input id="minRating"
               name="minRating"
               title="Minimum Rating"
@ -145,13 +145,12 @@
               i18n-title
               min="0"
               max="5"
-               class="form-control input-md"
+               class="form-control input-md rounded-2"
               [(ngModel)]="AsRangeQuery.value"
               (ngModelChange)="onChange()"
               type="number">
      </div>
-      <div *ngSwitchCase="SearchQueryTypes.max_rating" class="col-md-8 input-group">
-        <label class="col-md-4 control-label" for="maxResolution">Max:</label>
+      <div *ngSwitchCase="SearchQueryTypes.max_rating" class="col-md-8 d-flex">
        <input id="maxRating"
               name="maxRating"
               title="Maximum Rating"
@ -159,48 +158,45 @@
               i18n-title
               min="0"
               max="5"
-               class="form-control input-md"
+               class="form-control input-md rounded-2"
               [(ngModel)]="AsRangeQuery.value"
               (ngModelChange)="onChange()"
               type="number">
      </div>
-      <div *ngSwitchCase="SearchQueryTypes.min_resolution" class="col-md-8 input-group">
-
-        <label class="col-md-4 control-label" for="maxResolution">Min:</label>
-        <input id="minResolution"
-               name="minResolution"
-               title="Minimum Rating"
-               placeholder="0"
-               i18n-title
-               min="0"
-               class="form-control input-md"
-               [(ngModel)]="AsRangeQuery.value"
-               (ngModelChange)="onChange()"
-               type="number">
-        <div class="input-group-append">
+      <div *ngSwitchCase="SearchQueryTypes.min_resolution" class="col-md-8">
+        <div class="input-group">
+          <input id="minResolution"
+                 name="minResolution"
+                 title="Minimum Rating"
+                 placeholder="0"
+                 i18n-title
+                 min="0"
+                 class="form-control input-md"
+                 [(ngModel)]="AsRangeQuery.value"
+                 (ngModelChange)="onChange()"
+                 type="number">
          <span class="input-group-text">Mpx</span>
        </div>
      </div>

-      <div *ngSwitchCase="SearchQueryTypes.max_resolution" class="col-md-8 input-group">
-        <label class="col-md-4 control-label" for="maxResolution">Max:</label>
-        <input id="maxResolution"
-               name="maxResolution"
-               title="Maximum Rating"
-               placeholder="5"
-               i18n-title
-               [min]="0"
-               class="form-control input-md"
-               [(ngModel)]="AsRangeQuery.value"
-               (ngModelChange)="onChange()"
-               type="number">
-        <div class="input-group-append">
+      <div *ngSwitchCase="SearchQueryTypes.max_resolution" class="col-md-8">
+        <div class="input-group">
+          <input id="maxResolution"
+                 name="maxResolution"
+                 title="Maximum Rating"
+                 placeholder="5"
+                 i18n-title
+                 [min]="0"
+                 class="form-control input-md"
+                 [(ngModel)]="AsRangeQuery.value"
+                 (ngModelChange)="onChange()"
+                 type="number">
          <span class="input-group-text">Mpx</span>
        </div>
      </div>
      <div *ngSwitchCase="SearchQueryTypes.orientation" class="col-md-8 d-flex">
        <div class="input-group col-md-6">
-          <select class="form-select"
+          <select class="form-select rounded-2"
                  [(ngModel)]="AsOrientationQuery.landscape"
                  (ngModelChange)="onChange()"
                  id="orientation-select"
--- a/src/frontend/app/ui/gallery/search/search-field-base/search-field-base.gallery.component.html
+++ b/src/frontend/app/ui/gallery/search/search-field-base/search-field-base.gallery.component.html
@ -1,6 +1,6 @@
 <div class="input-group">
  <input type="text"
-         class="form-control search-text rounded-0"
+         class="form-control search-text rounded-2"
         [placeholder]="placeholder"
         (keyup)="onSearchChange($event)"
         (blur)="onFocusLost()"
@ -18,7 +18,7 @@
         #SearchField
         autocomplete="off">
  <input type="text"
-         class="form-control search-hint rounded-0"
+         class="form-control search-hint rounded-2"
         [ngModel]="SearchHint"
         name="srch-term-hint"
         #SearchHintField
--- a/src/frontend/styles.css
+++ b/src/frontend/styles.css
@ -17,6 +17,11 @@ bs-dropdown-container {
  z-index: 1;
 }

+/* TODO: remove popover in ngx-bootstrap is fixed*/
+.bs-popover-top{
+  position: absolute;
+}
+
 .slim-loading-bar-progress {
  transition: opacity 1s ease-in;
  transition-delay: 1s;