From b4f67f7d6ee623fd10c415d757de44932d9265d5 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Pau=20Ferrer=20Oca=C3=B1a?= <crazyserver@gmail.com>
Date: Thu, 10 Feb 2022 17:14:06 +0100
Subject: [PATCH] MOBILE-3814 site: Add cards to site list

---
 .../features/login/components/sites/sites.html   | 16 ++++++++--------
 .../features/login/components/sites/sites.ts     |  1 +
 src/core/features/login/pages/sites/sites.html   |  8 ++++----
 src/core/features/login/pages/sites/sites.ts     |  1 +
 src/core/features/login/sitelist.scss            | 10 ++++++++++
 5 files changed, 24 insertions(+), 12 deletions(-)
 create mode 100644 src/core/features/login/sitelist.scss

diff --git a/src/core/features/login/components/sites/sites.html b/src/core/features/login/components/sites/sites.html
index 66eea2e81..8ddf94c02 100644
--- a/src/core/features/login/components/sites/sites.html
+++ b/src/core/features/login/components/sites/sites.html
@@ -20,9 +20,9 @@
 </ion-header>
 <ion-content>
     <core-loading [hideUntil]="loaded">
-        <ion-list>
-            <ng-container *ngIf="accountsList.currentSite">
-                <ion-item-divider sticky="true">
+        <ion-list class="core-sitelist">
+            <ion-card *ngIf="accountsList.currentSite">
+                <ion-item-divider sticky="true" class="core-sitelist-sitename">
                     <ion-label>
                         <h2>
                             <core-format-text [text]="accountsList.currentSite.siteName" clean="true"
@@ -34,7 +34,7 @@
                     </ion-label>
                 </ion-item-divider>
 
-                <ion-item detail="false" class="item-current">
+                <ion-item detail="false">
                     <ion-avatar slot="start">
                         <img [src]="accountsList.currentSite.avatar" core-external-content [siteId]="accountsList.currentSite.id"
                             alt="{{ 'core.pictureof' | translate:{$a: accountsList.currentSite.fullName} }}"
@@ -47,10 +47,10 @@
                 </ion-item>
 
                 <ng-container *ngTemplateOutlet="siteList; context: {sites: accountsList.sameSite}"></ng-container>
-            </ng-container>
+            </ion-card>
 
-            <ng-container *ngFor="let sites of accountsList.otherSites">
-                <ion-item-divider sticky="true" *ngIf="sites[0]">
+            <ion-card *ngFor="let sites of accountsList.otherSites">
+                <ion-item-divider sticky="true" *ngIf="sites[0]" class="core-sitelist-sitename">
                     <ion-label>
                         <h2>
                             <core-format-text [text]="sites[0].siteName" clean="true" [siteId]="sites[0].id"></core-format-text>
@@ -60,7 +60,7 @@
                 </ion-item-divider>
 
                 <ng-container *ngTemplateOutlet="siteList; context: {sites: sites}"></ng-container>
-            </ng-container>
+            </ion-card>
 
         </ion-list>
     </core-loading>
diff --git a/src/core/features/login/components/sites/sites.ts b/src/core/features/login/components/sites/sites.ts
index 1f14b51a7..899b49741 100644
--- a/src/core/features/login/components/sites/sites.ts
+++ b/src/core/features/login/components/sites/sites.ts
@@ -28,6 +28,7 @@ import { ModalController } from '@singletons';
 @Component({
     selector: 'core-login-sites',
     templateUrl: 'sites.html',
+    styleUrls: ['../../sitelist.scss'],
     animations: [CoreAnimations.SLIDE_IN_OUT, CoreAnimations.SHOW_HIDE],
 })
 export class CoreLoginSitesComponent implements OnInit {
diff --git a/src/core/features/login/pages/sites/sites.html b/src/core/features/login/pages/sites/sites.html
index 994b7e7df..d7a06fa24 100644
--- a/src/core/features/login/pages/sites/sites.html
+++ b/src/core/features/login/pages/sites/sites.html
@@ -21,9 +21,9 @@
 </ion-header>
 <ion-content>
     <core-loading [hideUntil]="loaded">
-        <ion-list>
-            <ng-container *ngFor="let sites of accountsList.otherSites">
-                <ion-item-divider sticky="true" *ngIf="sites[0]">
+        <ion-list class="core-sitelist">
+            <ion-card *ngFor="let sites of accountsList.otherSites">
+                <ion-item-divider sticky="true" *ngIf="sites[0]" class="core-sitelist-sitename">
                     <ion-label>
                         <h2>
                             <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-button>
                 </ion-item>
-            </ng-container>
+            </ion-card>
         </ion-list>
     </core-loading>
     <ion-fab slot="fixed" core-fab vertical="bottom" horizontal="end">
diff --git a/src/core/features/login/pages/sites/sites.ts b/src/core/features/login/pages/sites/sites.ts
index a6d3e1eeb..6184e717e 100644
--- a/src/core/features/login/pages/sites/sites.ts
+++ b/src/core/features/login/pages/sites/sites.ts
@@ -27,6 +27,7 @@ import { CoreAnimations } from '@components/animations';
 @Component({
     selector: 'page-core-login-sites',
     templateUrl: 'sites.html',
+    styleUrls: ['../../sitelist.scss'],
     animations: [CoreAnimations.SLIDE_IN_OUT, CoreAnimations.SHOW_HIDE],
 })
 export class CoreLoginSitesPage implements OnInit {
diff --git a/src/core/features/login/sitelist.scss b/src/core/features/login/sitelist.scss
new file mode 100644
index 000000000..22a83f842
--- /dev/null
+++ b/src/core/features/login/sitelist.scss
@@ -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);
+    }
+}