Add space between buttons in DeviceDetailPage and DeviceModelDetailPa…

…ge (#119) * Add space between buttons in device details page * Add space between buttons in device model details page + Making it looks like the device details page
CGI-FR · Jan 27, 2022 · ae79607 · ae79607
1 parent 50811c5
commit ae79607
Show file tree

Hide file tree

Showing 3 changed files with 12 additions and 6 deletions.
diff --git a/src/AzureIoTHub.Portal/Client/Pages/DeviceModels/DeviceModelDetailPage.razor b/src/AzureIoTHub.Portal/Client/Pages/DeviceModels/DeviceModelDetailPage.razor
@@ -138,11 +138,12 @@
                     </MudGrid>
                 }
             </MudCardContent>
-            <MudCardActions>
-                <MudFab ButtonType="ButtonType.Submit" Color="Color.Secondary" Icon="@Icons.Material.Filled.Save" Label="Save" Class="ml-auto" />
-                <MudFab Color="Color.Dark" Icon="@Icons.Material.Filled.Delete" Label="Delete" OnClick="DeleteDeviceModel" />
-            </MudCardActions>
         </MudCard>
+        <MudCardActions>
+            <MudFab ButtonType="ButtonType.Submit" Color="Color.Secondary" Icon="@Icons.Material.Filled.Save" Label="Save" Class="btn-aln-right" />
+            <MudFab Color="Color.Dark" Icon="@Icons.Material.Filled.Delete" Label="Delete" OnClick="DeleteDeviceModel" />
+        </MudCardActions>
+
     </EditForm>
 
 </MudContainer>
@@ -199,7 +200,7 @@
 
             // Add the last command entered, in case it wasn't already in the list
             this.AddCommand();
-            
+
             // Unnecessary to send the list of commands to the controller
             // TODO : Do this more effectively
             DeviceModel.Commands.Clear();

diff --git a/src/AzureIoTHub.Portal/Client/Pages/Devices/DeviceDetailPage.razor b/src/AzureIoTHub.Portal/Client/Pages/Devices/DeviceDetailPage.razor
@@ -157,7 +157,7 @@
                     </MudCardContent>
                 </MudCard>
                 <MudCardActions>
-                    <MudFab ButtonType="ButtonType.Submit" Color="Color.Secondary" Icon="@Icons.Material.Filled.Save" Label="Save" Disabled="@(!success)" Class="ml-auto" />
+                    <MudFab ButtonType="ButtonType.Submit" Color="Color.Secondary" Icon="@Icons.Material.Filled.Save" Label="Save" Disabled="@(!success)" Class="btn-aln-right" />
                     <MudFab Color="Color.Dark" Icon="@Icons.Material.Filled.Delete" Label="Delete" OnClick="DeleteDevice" />
                 </MudCardActions>
             </EditForm>

diff --git a/src/AzureIoTHub.Portal/Client/wwwroot/scss/app.scss b/src/AzureIoTHub.Portal/Client/wwwroot/scss/app.scss
@@ -31,6 +31,11 @@
     margin-top: 1em;
 }
 
+.btn-aln-right {
+    margin-left: auto;
+    margin-right : 10px;
+}
+
 /*//////////////////// Search Panel ////////////////*/
 .search-panel {