Merge pull request #2401 from crazyserver/MOBILE-3401

MOBILE-3401 site: Keep aspect ratio on site icons

Author: jleyva

src/core/login/pages/site/site.html

@@ -37,7 +37,7 @@ <h2 text-wrap>{{ 'core.login.yourenteredsite' | translate }}</h2>
                     <div *ngIf="loadingSites" class="core-login-site-list-loading"><ion-spinner></ion-spinner></div>
                     <button ion-item *ngFor="let site of sites" (click)="connect($event, site.url, site)" [attr.aria-label]="site.name" detail-push>
                         <ion-thumbnail item-start>
-                            <img [src]="site.imageurl" *ngIf="site.imageurl">
+                            <img [src]="site.imageurl" *ngIf="site.imageurl" onError="this.src='assets/icon/icon.png'">
                             <img src="assets/icon/icon.png" *ngIf="!site.imageurl" class="core-login-default-icon">
                         </ion-thumbnail>
                         <h2 text-wrap>{{site.name}}<ng-container *ngIf="site.alias"> ({{site.alias}})</ng-container></h2>

src/core/login/pages/site/site.scss

@@ -27,13 +27,23 @@ ion-app.app-root page-core-login-site {
     .item ion-thumbnail {
         min-width: 50px;
         min-height: 50px;
+        width: 50px;
+        height: 50px;
         border-radius: 20%;
         box-shadow: 0 0 4px #eee;
         text-align: center;
+        overflow: hidden;
 
         img {
-            width: 50px;
-            height: 50px;
+            max-height: 50px;
+            max-width: fit-content;
+            width: auto;
+            height: auto;
+            margin: 0 auto;
+            margin-left: 50%;
+            transform: translateX(-50%);
+            object-fit: cover;
+            object-position: 50% 50%;
         }
         ion-icon {
             margin: 0 auto;