IOT-27 add styling

Author: ncjej

src/app/my-applications/iot-devices/iot-device-detail/iot-device-detail.component.html

@@ -147,31 +147,36 @@ <h4>{{ 'IOTDEVICE.LORA.SKIPFCNTCHECK' | translate }}</h4>
             </div>
         </ng-container>
         <div class="col-12 py-4">
-            <mat-expansion-panel>
-                <mat-expansion-panel-header>
-                    <mat-panel-title>
-                        <ng-container *ngIf="device.latestReceivedMessage?.sentTime; then sentTime; else noSentTime">    
-                        </ng-container>
-                        <ng-template #sentTime>
-                            <p>
-                                {{'IOTDEVICE.LATEST-DATAPACKAGE' | translate}} {{device.latestReceivedMessage?.sentTime | date:'medium'}}
-                            </p>
-                        </ng-template>
-                        <ng-template #noSentTime>
-                            <p>
-                                {{'IOTDEVICE.NO-DATAPACKAGE' | translate}}
-                            </p>
-                        </ng-template>
-                    </mat-panel-title>
-                </mat-expansion-panel-header>
-                    <ng-container *ngIf="device.latestReceivedMessage?.rawData">    
-                        <code>
-                            <pre>
-                                {{device.latestReceivedMessage.rawData | json }}
-                            </pre>
-                        </code>
-                    </ng-container>
-            </mat-expansion-panel>
+            <div class="col-12 col-sm-4">
+                <h4>{{ 'IOTDEVICE.DATAPACKAGE' | translate }}</h4>
+            </div>
+            <div class="col-12 pt-2 col-sm-8">
+                <ng-container *ngIf="device.latestReceivedMessage?.sentTime; then sentTime; else noSentTime">    
+                </ng-container>
+                <ng-template #sentTime>
+                    <mat-expansion-panel>
+                        <mat-expansion-panel-header>
+                            <mat-panel-title>
+                                <p>
+                                    {{'IOTDEVICE.LATEST-DATAPACKAGE' | translate}} {{device.latestReceivedMessage?.sentTime | date:'medium'}}
+                                </p>
+                            </mat-panel-title>
+                        </mat-expansion-panel-header>
+                            <ng-container *ngIf="device.latestReceivedMessage?.rawData">    
+                                <code>
+                                    <pre>
+                                        {{device.latestReceivedMessage.rawData | json }}
+                                    </pre>
+                                </code>
+                            </ng-container>
+                    </mat-expansion-panel>
+                </ng-template>
+                <ng-template #noSentTime>
+                    <p>
+                        {{'IOTDEVICE.NO-DATAPACKAGE' | translate}}
+                    </p>
+                </ng-template>
+            </div>
         </div>
     </div>
     <ng-container *ngIf="device.type">

src/assets/i18n/da.json

@@ -316,6 +316,7 @@
     "LORAWANSETUP": "LoRaWAN Specifik opsætning",
     "LATEST-DATAPACKAGE": "Seneste datapakke sendt fra enheden:",
     "NO-DATAPACKAGE": "Der er ikke modtaget nogle datapakker",
+    "DATAPACKAGE": "Datapakke",
     "LORA": {
       "DEVEUI": "Enheds EUI",
       "SERVICEPROFILE": "Service profil",