From d60eddf410b7cc1607a33d4b9d02ec60f07eb62c Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Pau=20Ferrer=20Oca=C3=B1a?= <crazyserver@gmail.com>
Date: Mon, 21 Jun 2021 12:57:25 +0200
Subject: [PATCH] MOBILE-3320 airnotifier: Improve devices screen

---
 .../messageoutput/airnotifier/pages/devices/devices.html | 9 ++++++---
 .../messageoutput/airnotifier/pages/devices/devices.ts   | 7 ++++++-
 2 files changed, 12 insertions(+), 4 deletions(-)

diff --git a/src/addons/messageoutput/airnotifier/pages/devices/devices.html b/src/addons/messageoutput/airnotifier/pages/devices/devices.html
index c58851492..02ea186de 100644
--- a/src/addons/messageoutput/airnotifier/pages/devices/devices.html
+++ b/src/addons/messageoutput/airnotifier/pages/devices/devices.html
@@ -12,10 +12,13 @@
     </ion-refresher>
     <core-loading [hideUntil]="devicesLoaded">
         <ion-list>
-            <ion-item class="ion-text-wrap" *ngFor="let device of devices">
+            <ion-item class="ion-text-wrap" *ngFor="let device of devices" [class.item-current]="device.current">
                 <ion-label [class.core-bold]="device.current">
-                    {{ device.name }} {{ device.model }} {{ device.platform }} {{ device.version }}
-                    <span *ngIf="device.current">({{ 'core.currentdevice' | translate }})</span>
+                    <p class="item-heading">
+                        {{ device.name }} {{ device.model }}
+                        <span *ngIf="device.current">({{ 'core.currentdevice' | translate }})</span>
+                    </p>
+                    <p>{{ device.platform }} {{ device.version }}</p>
                 </ion-label>
                 <core-button-with-spinner [loading]="device.updating" slot="end">
                     <ion-toggle
diff --git a/src/addons/messageoutput/airnotifier/pages/devices/devices.ts b/src/addons/messageoutput/airnotifier/pages/devices/devices.ts
index 513539169..6165791f2 100644
--- a/src/addons/messageoutput/airnotifier/pages/devices/devices.ts
+++ b/src/addons/messageoutput/airnotifier/pages/devices/devices.ts
@@ -74,7 +74,12 @@ export class AddonMessageOutputAirnotifierDevicesPage implements OnInit, OnDestr
             device.current = !!(pushId && pushId == device.pushid);
         });
 
-        return formattedDevices;
+        return formattedDevices.sort((a, b) => {
+            const compareA = a.name.toLowerCase();
+            const compareB = b.name.toLowerCase();
+
+            return compareA.localeCompare(compareB);
+        });
     }
 
     /**