mobile layout update

application/src/main/data/json/demo/dashboards/gateway_list.json

@@ -5268,19 +5268,23 @@
                 "sizeX": 45,
                 "sizeY": 10,
                 "row": 12,
-                "col": 0
+                "col": 0,
+                "mobileOrder": 1
               },
               "ce3065bf-d898-2c03-6236-ce1b6cdf1f3f": {
                 "sizeX": 45,
                 "sizeY": 9,
                 "row": 22,
-                "col": 0
+                "col": 0,
+                "mobileOrder": 2
               },
               "46b68eb5-7e2d-bca1-c2ef-061b64575218": {
                 "sizeX": 45,
                 "sizeY": 12,
                 "row": 0,
-                "col": 0
+                "col": 0,
+                "mobileOrder": 0,
+                "mobileHeight": 8
               }
             },
             "gridSettings": {
@@ -5307,19 +5311,24 @@
                 "sizeX": 48,
                 "sizeY": 13,
                 "row": 0,
-                "col": 0
+                "col": 0,
+                "mobileOrder": 0,
+                "mobileHeight": 8
               },
               "0fc7dcf3-32a2-0159-738e-96956bf0d450": {
                 "sizeX": 48,
                 "sizeY": 10,
                 "row": 13,
-                "col": 0
+                "col": 0,
+                "mobileOrder": 1,
+                "mobileHeight": null
               },
               "6e136fbc-545b-4926-c0a9-79348f35628a": {
                 "sizeX": 48,
                 "sizeY": 9,
                 "row": 23,
-                "col": 0
+                "col": 0,
+                "mobileOrder": 2
               }
             },
             "gridSettings": {

ui-ngx/src/app/shared/components/device/gateway-configuration.component.html

@@ -229,7 +229,7 @@
                 {{ logConfig.value }}
               </mat-button-toggle>
             </mat-button-toggle-group>
-            <div fxFlex="100" fxLayout="row wrap" [formGroup]="getLogFormGroup(logSelector.value)">
+            <div fxFlex="100" fxLayout="row wrap" fxLayout.lt-sm="column" [formGroup]="getLogFormGroup(logSelector.value)">
               <mat-form-field class="mat-block tb-value-type" fxFlex="calc(50%-15px)">
                 <mat-label translate>gateway.logs.level</mat-label>
                 <mat-select formControlName="logLevel">
@@ -244,26 +244,28 @@
                   {{'gateway.logs.file-path-required' | translate }}
                 </mat-error>
               </mat-form-field>
-              <mat-form-field class="mat-block tb-value-type" fxFlex="calc(35%-30px)">
-                <mat-label translate>gateway.logs.saving-period</mat-label>
-                <input matInput formControlName="savingTime" type="number" min="0" />
-                <mat-error
-                  *ngIf="gatewayConfigGroup.get('logs.local.' + logSelector.value + '.savingTime').hasError('required')">
-                  {{'gateway.logs.saving-period-required' | translate }}
-                </mat-error>
-                <mat-error
-                  *ngIf="gatewayConfigGroup.get('logs.local.' + logSelector.value + '.savingTime').hasError('min')">
-                  {{'gateway.logs.saving-period-min' | translate }}
-                </mat-error>
-              </mat-form-field>
-              <mat-form-field class="mat-block tb-value-type" fxFlex="calc(15%-30px)">
-                <mat-label translate></mat-label>
-                <mat-select formControlName="savingPeriod">
-                  <mat-option *ngFor="let period of logSavingPeriods | keyvalue" [value]="period.key">
-                    {{period.value | translate}}
-                  </mat-option>
-                </mat-select>
-              </mat-form-field>
+              <div fxLayout="row" fxFlex="50" fxLayoutGap="15px">
+                <mat-form-field class="mat-block tb-value-type" fxFlex>
+                  <mat-label translate>gateway.logs.saving-period</mat-label>
+                  <input matInput formControlName="savingTime" type="number" min="0" />
+                  <mat-error
+                    *ngIf="gatewayConfigGroup.get('logs.local.' + logSelector.value + '.savingTime').hasError('required')">
+                    {{'gateway.logs.saving-period-required' | translate }}
+                  </mat-error>
+                  <mat-error
+                    *ngIf="gatewayConfigGroup.get('logs.local.' + logSelector.value + '.savingTime').hasError('min')">
+                    {{'gateway.logs.saving-period-min' | translate }}
+                  </mat-error>
+                </mat-form-field>
+                <mat-form-field class="mat-block tb-value-type" style="min-width: 110px; width: 30%">
+                  <mat-label translate></mat-label>
+                  <mat-select formControlName="savingPeriod">
+                    <mat-option *ngFor="let period of logSavingPeriods | keyvalue" [value]="period.key">
+                      {{period.value | translate}}
+                    </mat-option>
+                  </mat-select>
+                </mat-form-field>
+              </div>
               <mat-form-field class="mat-block tb-value-type" fxFlex="calc(50%-30px)">
                 <mat-label translate>gateway.logs.backup-count</mat-label>
                 <input matInput formControlName="backupCount" type="number" min="0" />
@@ -294,8 +296,8 @@
                 <span class="tb-hint">{{'gateway.hints.storage' | translate}}</span>
               </mat-panel-title>
             </mat-expansion-panel-header>
-            <div fxLayout="row wrap">
-              <mat-button-toggle-group fxLayout="row wrap" class="security-toggle-group" formControlName="type"
+            <div fxLayout="row wrap" fxLayout.lt-sm="column">
+              <mat-button-toggle-group fxLayout="row wrap" fxLayout.lt-sm="column" class="security-toggle-group" formControlName="type"
                                        fxFlex="100">
                 <mat-button-toggle *ngFor="let storageType of storageTypes | keyvalue" [value]="storageType.key">
                   {{ storageType.value | translate }}
@@ -669,7 +671,7 @@
                 <span class="tb-hint" style="padding-left: 40px; margin-top: -15px;">{{'gateway.hints.check-device-activity' | translate}}</span>
               </mat-panel-title>
             </mat-expansion-panel-header>
-            <div fxLayout="row wrap">
+            <div fxLayout="row wrap" fxLayout.lt-sm="column">
               <mat-form-field
                 *ngIf="gatewayConfigGroup.get('thingsboard.checkingDeviceActivity.checkDeviceInactivity').value"
                 fxFlex="calc(50%-15px)" class="mat-block tb-value-type">
@@ -712,7 +714,7 @@
             <mat-expansion-panel-header>
               <mat-panel-title translate class="expansion-panel-header">gateway.advanced</mat-panel-title>
             </mat-expansion-panel-header>
-            <div fxLayout="row wrap">
+            <div fxLayout="row wrap" fxLayout.lt-sm="column">
               <mat-form-field fxFlex="calc(50%-15px)" class="mat-block tb-value-type">
                 <mat-label translate>gateway.min-pack-send-delay</mat-label>
                 <input matInput formControlName="minPackSendDelayMS" type="number" min="0" />

ui-ngx/src/app/shared/components/device/gateway-service-rpc.component.html

@@ -15,7 +15,7 @@
     limitations under the License.
 
 -->
-<mat-card fxLayout="row" class="command-form" fxLayoutGap="10px" [formGroup]="commandForm">
+<mat-card fxLayout="row" fxLayout.lt-sm="column" class="command-form" fxLayoutGap="10px" [formGroup]="commandForm">
   <mat-form-field class="mat-block tb-value-type">
     <mat-label>{{'gateway.statistics.command' | translate}}</mat-label>
     <mat-select formControlName="command" *ngIf="!isConnector">

ui-ngx/src/app/shared/components/device/gateway-service-rpc.component.scss

@@ -24,7 +24,7 @@
   .command-form {
     width: 100%;
     flex-wrap: nowrap;
-    padding: 0 15px;
+    padding: 0 15px 5px;
     margin-bottom: 5px;
 
     &>button {