From 0ca249eb5f077852f795a87f5c2df150228fd60a Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Pau=20Ferrer=20Oca=C3=B1a?= <crazyserver@gmail.com>
Date: Thu, 11 Jun 2020 16:47:21 +0200
Subject: [PATCH] MOBILE-3401 site: Keep aspect ratio on site icons

---
 src/core/login/pages/site/site.html |  2 +-
 src/core/login/pages/site/site.scss | 14 ++++++++++++--
 2 files changed, 13 insertions(+), 3 deletions(-)

diff --git a/src/core/login/pages/site/site.html b/src/core/login/pages/site/site.html
index 6122c6fe1..282c5307c 100644
--- a/src/core/login/pages/site/site.html
+++ b/src/core/login/pages/site/site.html
@@ -37,7 +37,7 @@
                     <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>
diff --git a/src/core/login/pages/site/site.scss b/src/core/login/pages/site/site.scss
index 2cf512a3a..5649acc51 100644
--- a/src/core/login/pages/site/site.scss
+++ b/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;