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

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",
+      "version": "2.11.6",
-      "resolved": "https://registry.npmjs.org/@popperjs/core/-/core-2.11.4.tgz",
+      "resolved": "https://registry.npmjs.org/@popperjs/core/-/core-2.11.6.tgz",
-      "integrity": "sha512-q/ytXxO5NKvyT37pmisQAItCFqA7FD/vNb8dgaJy3/630Fsc+Mz9/9f2SziBoIZ30TJooXyTwZmhi1zjXmObYg==",
+      "integrity": "sha512-50/17A98tWUfQ176raKiOGXuYpLyyVMkxxG6oylzL3BPOlA6ADGdK7EYunSa4I064xerltq9TGXs8HmOk5E+vw==",
       "dev": true,
       "peer": true,
       "funding": {
@@ -6097,16 +6097,22 @@
       "dev": true
     },
     "node_modules/bootstrap": {
-      "version": "5.1.3",
+      "version": "5.3.0-alpha1",
-      "resolved": "https://registry.npmjs.org/bootstrap/-/bootstrap-5.1.3.tgz",
+      "resolved": "https://registry.npmjs.org/bootstrap/-/bootstrap-5.3.0-alpha1.tgz",
-      "integrity": "sha512-fcQztozJ8jToQWXxVuEyXWW+dSo8AiXWKwiSSrKWsRB/Qt+Ewwza+JWoLKiTuQLaEPhdNAJ7+Dosc9DOIqNy7Q==",
+      "integrity": "sha512-ABZpKK4ObS3kKlIqH+ZVDqoy5t/bhFG0oHTAzByUdon7YIom0lpCeTqRniDzJmbtcWkNe800VVPBiJgxSYTYew==",
       "dev": true,
-      "funding": {
+      "funding": [
-        "type": "opencollective",
+        {
-        "url": "https://opencollective.com/bootstrap"
+          "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",
+      "version": "2.11.6",
-      "resolved": "https://registry.npmjs.org/@popperjs/core/-/core-2.11.4.tgz",
+      "resolved": "https://registry.npmjs.org/@popperjs/core/-/core-2.11.6.tgz",
-      "integrity": "sha512-q/ytXxO5NKvyT37pmisQAItCFqA7FD/vNb8dgaJy3/630Fsc+Mz9/9f2SziBoIZ30TJooXyTwZmhi1zjXmObYg==",
+      "integrity": "sha512-50/17A98tWUfQ176raKiOGXuYpLyyVMkxxG6oylzL3BPOlA6ADGdK7EYunSa4I064xerltq9TGXs8HmOk5E+vw==",
       "dev": true,
       "peer": true
     },
@@ -26815,9 +26821,9 @@
       "dev": true
     },
     "bootstrap": {
-      "version": "5.1.3",
+      "version": "5.3.0-alpha1",
-      "resolved": "https://registry.npmjs.org/bootstrap/-/bootstrap-5.1.3.tgz",
+      "resolved": "https://registry.npmjs.org/bootstrap/-/bootstrap-5.3.0-alpha1.tgz",
-      "integrity": "sha512-fcQztozJ8jToQWXxVuEyXWW+dSo8AiXWKwiSSrKWsRB/Qt+Ewwza+JWoLKiTuQLaEPhdNAJ7+Dosc9DOIqNy7Q==",
+      "integrity": "sha512-ABZpKK4ObS3kKlIqH+ZVDqoy5t/bhFG0oHTAzByUdon7YIom0lpCeTqRniDzJmbtcWkNe800VVPBiJgxSYTYew==",
       "dev": true,
       "requires": {}
     },

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",

src/frontend/app/ui/duplicates/photo/photo.duplicates.component.css

@@ -7,7 +7,7 @@
 }
 
 .photo-container {
-  width: inherit;
+  width: 100%;
   height: inherit;
   overflow: hidden;
 }

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>

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 *ngSwitchCase="SearchQueryTypes.distance" class="col-md-8 row">
-        <div class="input-group col-md-4">
+        <div class="col-md-4">
-          <input type="number" class="form-control" placeholder="1"
+          <div class="input-group">
-                 id="distance"
+            <input type="number" class="form-control" placeholder="1"
-                 min="0"
+                   id="distance"
-                 step="0.1"
+                   min="0"
-                 [(ngModel)]="AsDistanceQuery.distance"
+                   step="0.1"
-                 (ngModelChange)="onChange()"
+                   [(ngModel)]="AsDistanceQuery.distance"
-                 name="distance" required>
+                   (ngModelChange)="onChange()"
-          <div class="input-group-append">
+                   name="distance" required>
             <span class="input-group-text">km</span>
           </div>
         </div>
-        <div class="input-group col-md-8">
+        <div class="col-md-8">
-          <label class="col-md-4 control-label" for="maxResolution">From</label>
+          <div class="input-group">
-          <input id="from"
+            <label class="control-label me-2" for="maxResolution">From</label>
-                 name="from"
+            <input id="from"
-                 title="From"
+                   name="from"
-                 placeholder="New York"
+                   title="From"
-                 i18n-title
+                   placeholder="New York"
-                 class="form-control input-md"
+                   i18n-title
-                 [(ngModel)]="AsDistanceQuery.from.text"
+                   class="form-control input-md rounded-2"
-                 (ngModelChange)="onChange()"
+                   [(ngModel)]="AsDistanceQuery.from.text"
-                 type="text">
+                   (ngModelChange)="onChange()"
+                   type="text">
+          </div>
         </div>
       </div>
       <!-- Range Search Query -->
-      <div *ngSwitchCase="SearchQueryTypes.from_date" class="col-md-8 input-group ">
+      <div *ngSwitchCase="SearchQueryTypes.from_date" class="col-md-8 d-flex">
-        <label class="col-md-4 control-label" for="from_date">From:</label>
         <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">
+      <div *ngSwitchCase="SearchQueryTypes.to_date" class="col-md-8 d-flex">
-        <label class="col-md-4 control-label" for="to_date">To:</label>
         <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">
+      <div *ngSwitchCase="SearchQueryTypes.min_rating" class="col-md-8 d-flex">
-        <label class="col-md-4 control-label" for="maxResolution">Min:</label>
         <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">
+      <div *ngSwitchCase="SearchQueryTypes.max_rating" class="col-md-8 d-flex">
-        <label class="col-md-4 control-label" for="maxResolution">Max:</label>
         <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">
+      <div *ngSwitchCase="SearchQueryTypes.min_resolution" class="col-md-8">
-
+        <div class="input-group">
-        <label class="col-md-4 control-label" for="maxResolution">Min:</label>
+          <input id="minResolution"
-        <input id="minResolution"
+                 name="minResolution"
-               name="minResolution"
+                 title="Minimum Rating"
-               title="Minimum Rating"
+                 placeholder="0"
-               placeholder="0"
+                 i18n-title
-               i18n-title
+                 min="0"
-               min="0"
+                 class="form-control input-md"
-               class="form-control input-md"
+                 [(ngModel)]="AsRangeQuery.value"
-               [(ngModel)]="AsRangeQuery.value"
+                 (ngModelChange)="onChange()"
-               (ngModelChange)="onChange()"
+                 type="number">
-               type="number">
-        <div class="input-group-append">
           <span class="input-group-text">Mpx</span>
         </div>
       </div>
 
-      <div *ngSwitchCase="SearchQueryTypes.max_resolution" class="col-md-8 input-group">
+      <div *ngSwitchCase="SearchQueryTypes.max_resolution" class="col-md-8">
-        <label class="col-md-4 control-label" for="maxResolution">Max:</label>
+        <div class="input-group">
-        <input id="maxResolution"
+          <input id="maxResolution"
-               name="maxResolution"
+                 name="maxResolution"
-               title="Maximum Rating"
+                 title="Maximum Rating"
-               placeholder="5"
+                 placeholder="5"
-               i18n-title
+                 i18n-title
-               [min]="0"
+                 [min]="0"
-               class="form-control input-md"
+                 class="form-control input-md"
-               [(ngModel)]="AsRangeQuery.value"
+                 [(ngModel)]="AsRangeQuery.value"
-               (ngModelChange)="onChange()"
+                 (ngModelChange)="onChange()"
-               type="number">
+                 type="number">
-        <div class="input-group-append">
           <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"

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

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;