EVOgeek
/
Vmeda.Online
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

MOBILE-3401 site: Keep aspect ratio on site icons

main
Pau Ferrer Ocaña 2020-06-11 16:47:21 +02:00
parent 774b859686
commit 0ca249eb5f
2 changed files with 13 additions and 3 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
src/core/login/pages/site/site.html
View File

@ -37,7 +37,7 @@
<div *ngIf="loadingSites" class="core-login-site-list-loading"><ion-spinner></ion-spinner></div> <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> <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> <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"> <img src="assets/icon/icon.png" *ngIf="!site.imageurl" class="core-login-default-icon">
</ion-thumbnail> </ion-thumbnail>
<h2 text-wrap>{{site.name}}<ng-container *ngIf="site.alias"> ({{site.alias}})</ng-container></h2> <h2 text-wrap>{{site.name}}<ng-container *ngIf="site.alias"> ({{site.alias}})</ng-container></h2>

14
src/core/login/pages/site/site.scss
View File

@ -27,13 +27,23 @@ ion-app.app-root page-core-login-site {
.item ion-thumbnail { .item ion-thumbnail {
min-width: 50px; min-width: 50px;
min-height: 50px; min-height: 50px;
width: 50px;
height: 50px;
border-radius: 20%; border-radius: 20%;
box-shadow: 0 0 4px #eee; box-shadow: 0 0 4px #eee;
text-align: center; text-align: center;
overflow: hidden;
img { img {
width: 50px; max-height: 50px;
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 { ion-icon {
margin: 0 auto; margin: 0 auto;