MOBILE-3814 site: Add cards to site list

main
Pau Ferrer Ocaña 2022-02-10 17:14:06 +01:00
parent abfc4ffb38
commit b4f67f7d6e
5 changed files with 24 additions and 12 deletions

View File

@ -20,9 +20,9 @@
</ion-header> </ion-header>
<ion-content> <ion-content>
<core-loading [hideUntil]="loaded"> <core-loading [hideUntil]="loaded">
<ion-list> <ion-list class="core-sitelist">
<ng-container *ngIf="accountsList.currentSite"> <ion-card *ngIf="accountsList.currentSite">
<ion-item-divider sticky="true"> <ion-item-divider sticky="true" class="core-sitelist-sitename">
<ion-label> <ion-label>
<h2> <h2>
<core-format-text [text]="accountsList.currentSite.siteName" clean="true" <core-format-text [text]="accountsList.currentSite.siteName" clean="true"
@ -34,7 +34,7 @@
</ion-label> </ion-label>
</ion-item-divider> </ion-item-divider>
<ion-item detail="false" class="item-current"> <ion-item detail="false">
<ion-avatar slot="start"> <ion-avatar slot="start">
<img [src]="accountsList.currentSite.avatar" core-external-content [siteId]="accountsList.currentSite.id" <img [src]="accountsList.currentSite.avatar" core-external-content [siteId]="accountsList.currentSite.id"
alt="{{ 'core.pictureof' | translate:{$a: accountsList.currentSite.fullName} }}" alt="{{ 'core.pictureof' | translate:{$a: accountsList.currentSite.fullName} }}"
@ -47,10 +47,10 @@
</ion-item> </ion-item>
<ng-container *ngTemplateOutlet="siteList; context: {sites: accountsList.sameSite}"></ng-container> <ng-container *ngTemplateOutlet="siteList; context: {sites: accountsList.sameSite}"></ng-container>
</ng-container> </ion-card>
<ng-container *ngFor="let sites of accountsList.otherSites"> <ion-card *ngFor="let sites of accountsList.otherSites">
<ion-item-divider sticky="true" *ngIf="sites[0]"> <ion-item-divider sticky="true" *ngIf="sites[0]" class="core-sitelist-sitename">
<ion-label> <ion-label>
<h2> <h2>
<core-format-text [text]="sites[0].siteName" clean="true" [siteId]="sites[0].id"></core-format-text> <core-format-text [text]="sites[0].siteName" clean="true" [siteId]="sites[0].id"></core-format-text>
@ -60,7 +60,7 @@
</ion-item-divider> </ion-item-divider>
<ng-container *ngTemplateOutlet="siteList; context: {sites: sites}"></ng-container> <ng-container *ngTemplateOutlet="siteList; context: {sites: sites}"></ng-container>
</ng-container> </ion-card>
</ion-list> </ion-list>
</core-loading> </core-loading>

View File

@ -28,6 +28,7 @@ import { ModalController } from '@singletons';
@Component({ @Component({
selector: 'core-login-sites', selector: 'core-login-sites',
templateUrl: 'sites.html', templateUrl: 'sites.html',
styleUrls: ['../../sitelist.scss'],
animations: [CoreAnimations.SLIDE_IN_OUT, CoreAnimations.SHOW_HIDE], animations: [CoreAnimations.SLIDE_IN_OUT, CoreAnimations.SHOW_HIDE],
}) })
export class CoreLoginSitesComponent implements OnInit { export class CoreLoginSitesComponent implements OnInit {

View File

@ -21,9 +21,9 @@
</ion-header> </ion-header>
<ion-content> <ion-content>
<core-loading [hideUntil]="loaded"> <core-loading [hideUntil]="loaded">
<ion-list> <ion-list class="core-sitelist">
<ng-container *ngFor="let sites of accountsList.otherSites"> <ion-card *ngFor="let sites of accountsList.otherSites">
<ion-item-divider sticky="true" *ngIf="sites[0]"> <ion-item-divider sticky="true" *ngIf="sites[0]" class="core-sitelist-sitename">
<ion-label> <ion-label>
<h2> <h2>
<core-format-text [text]="sites[0].siteName" clean="true" [siteId]="sites[0].id"></core-format-text> <core-format-text [text]="sites[0].siteName" clean="true" [siteId]="sites[0].id"></core-format-text>
@ -50,7 +50,7 @@
<ion-icon name="fas-trash" slot="icon-only" aria-hidden="true"></ion-icon> <ion-icon name="fas-trash" slot="icon-only" aria-hidden="true"></ion-icon>
</ion-button> </ion-button>
</ion-item> </ion-item>
</ng-container> </ion-card>
</ion-list> </ion-list>
</core-loading> </core-loading>
<ion-fab slot="fixed" core-fab vertical="bottom" horizontal="end"> <ion-fab slot="fixed" core-fab vertical="bottom" horizontal="end">

View File

@ -27,6 +27,7 @@ import { CoreAnimations } from '@components/animations';
@Component({ @Component({
selector: 'page-core-login-sites', selector: 'page-core-login-sites',
templateUrl: 'sites.html', templateUrl: 'sites.html',
styleUrls: ['../../sitelist.scss'],
animations: [CoreAnimations.SLIDE_IN_OUT, CoreAnimations.SHOW_HIDE], animations: [CoreAnimations.SLIDE_IN_OUT, CoreAnimations.SHOW_HIDE],
}) })
export class CoreLoginSitesPage implements OnInit { export class CoreLoginSitesPage implements OnInit {

View File

@ -0,0 +1,10 @@
ion-list.core-sitelist {
.core-sitelist-sitename {
ion-label {
margin-top: 8px;
margin-bottom: 8px;
}
border-bottom: 1px solid var(--stroke);
}
}