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;