From 928f29f505c9fa04695d9275df5ce3f115e4f7b0 Mon Sep 17 00:00:00 2001
From: Daniel Balk <67603460+Daniel-Balk@users.noreply.github.com>
Date: Fri, 5 May 2023 17:33:05 +0200
Subject: [PATCH] fixed server settings design

---
 .../Shared/Components/Forms/SmartForm.razor   |  5 +-
 .../Settings/FabricVersionSetting.razor       | 93 ++++++++++++-------
 .../Settings/ForgeVersionSetting.razor        | 48 ++++++----
 .../Settings/JavascriptFileSetting.razor      | 14 ++-
 .../Settings/JavascriptVersionSetting.razor   | 56 ++++++-----
 .../Settings/Join2StartSetting.razor          | 32 ++++---
 .../Settings/PaperVersionSetting.razor        | 91 +++++++++++-------
 .../Settings/PythonFileSetting.razor          | 16 +++-
 .../Settings/PythonVersionSetting.razor       | 56 ++++++-----
 .../Settings/ServerRenameSetting.razor        |  4 +-
 10 files changed, 261 insertions(+), 154 deletions(-)

diff --git a/Moonlight/Shared/Components/Forms/SmartForm.razor b/Moonlight/Shared/Components/Forms/SmartForm.razor
index 9b3acd60..fcb89268 100644
--- a/Moonlight/Shared/Components/Forms/SmartForm.razor
+++ b/Moonlight/Shared/Components/Forms/SmartForm.razor
@@ -1,6 +1,6 @@
 @using Moonlight.App.Helpers
 
-<div class="form">
+<div class="form @CssClass">
     <EditForm @ref="EditForm" Model="Model" OnValidSubmit="ValidSubmit" OnInvalidSubmit="InvalidSubmit">
         <DataAnnotationsValidator></DataAnnotationsValidator>
         @if (Working)
@@ -44,6 +44,9 @@
     [Parameter]
     public RenderFragment ChildContent { get; set; }
 
+    [Parameter]
+    public string CssClass { get; set; }
+
     private EditForm EditForm;
 
     private List<string> ErrorMessages = new();
diff --git a/Moonlight/Shared/Components/ServerControl/Settings/FabricVersionSetting.razor b/Moonlight/Shared/Components/ServerControl/Settings/FabricVersionSetting.razor
index ca337729..3a6ff231 100644
--- a/Moonlight/Shared/Components/ServerControl/Settings/FabricVersionSetting.razor
+++ b/Moonlight/Shared/Components/ServerControl/Settings/FabricVersionSetting.razor
@@ -13,38 +13,69 @@
 @inject SmartTranslateService TranslationService
 
 <div class="col">
-    <div class="card card-body">
+    <div class="card card-body p-0">
         <LazyLoader Load="Load">
-            <label class="mb-2 form-label">
-                <TL>Fabric version</TL>
-            </label>
-            <input class="mb-2 form-control" disabled="" value="@(FabricVersion)"/>
-            <label class="mb-2 form-label">
-                <TL>Fabric loader version</TL>
-            </label>
-            <input class="mb-2 form-control" disabled="" value="@(LoaderVersion)"/>
-            <label class="mb-2 form-label">
-                <TL>Minecraft version</TL>
-            </label>
-            <select class="mb-2 form-select" @bind="CurrentVersion">
-                @foreach (var version in Versions)
-                {
-                    if (version == CurrentVersion)
-                    {
-                        <option value="@(version)" selected="">@(version)</option>
-                    }
-                    else
-                    {
-                        <option value="@(version)">@(version)</option>
-                    }
-                }
-            </select>
-            <WButton
-                OnClick="Save"
-                Text="@(TranslationService.Translate("Change"))"
-                WorkingText="@(TranslationService.Translate("Changing"))"
-                CssClasses="btn-primary">
-            </WButton>
+            <table class="w-100">
+                <tr>
+                    <td colspan="2">
+                        <label class="form-label mb-0">
+                            <TL>Fabric version</TL>
+                        </label>
+                    </td>
+                </tr>
+                <tr>
+                    <td class="w-100" colspan="2">
+                        <input class="mb-2 form-control" disabled="" value="@(FabricVersion)"/>
+                    </td>
+                </tr>
+                <tr>
+                    <td colspan="2">
+                        <label class="form-label mb-0">
+                            <TL>Fabric loader version</TL>
+                        </label>
+                    </td>
+                </tr>
+                <tr>
+                    <td class="w-100" colspan="2">
+                        <input class="mb-2 form-control" disabled="" value="@(LoaderVersion)"/>
+                    </td>
+                </tr>
+                <tr>
+                    <td colspan="2">
+                        <label class="form-label mb-0">
+                            <TL>Minecraft version</TL>
+                        </label>
+                    </td>
+                </tr>
+                <tr>
+                    <td class="w-100" colspan="2">
+                        <select class="mb-2 form-select" @bind="CurrentVersion">
+                            @foreach (var version in Versions)
+                            {
+                                if (version == CurrentVersion)
+                                {
+                                    <option value="@(version)" selected="">@(version)</option>
+                                }
+                                else
+                                {
+                                    <option value="@(version)">@(version)</option>
+                                }
+                            }
+                        </select>
+                    </td>
+                </tr>
+                <tr>
+                    <td class="w-100"></td>
+                    <td>
+                        <WButton
+                            OnClick="Save"
+                            Text="@(TranslationService.Translate("Change"))"
+                            WorkingText="@(TranslationService.Translate("Changing"))"
+                            CssClasses="btn-primary mt-2">
+                        </WButton>
+                    </td>
+                </tr>
+            </table>
         </LazyLoader>
     </div>
 </div>
diff --git a/Moonlight/Shared/Components/ServerControl/Settings/ForgeVersionSetting.razor b/Moonlight/Shared/Components/ServerControl/Settings/ForgeVersionSetting.razor
index 115cd388..1bfdaae9 100644
--- a/Moonlight/Shared/Components/ServerControl/Settings/ForgeVersionSetting.razor
+++ b/Moonlight/Shared/Components/ServerControl/Settings/ForgeVersionSetting.razor
@@ -14,28 +14,36 @@
 @inject SmartTranslateService TranslationService
 
 <div class="col">
-    <div class="card card-body">
+    <div class="card card-body p-0">
         <LazyLoader Load="Load">
             <label class="mb-2 form-label"><TL>Forge version</TL></label>
-            <select class="mb-2 form-select" @bind="CurrentVersion">
-                @foreach (var version in Versions.Keys)
-                {
-                    if (DisplayToData(version) == CurrentVersion)
-                    {
-                        <option value="@(DisplayToData(version))" selected="">@(version)</option>
-                    }
-                    else
-                    {
-                        <option value="@(DisplayToData(version))">@(version)</option>
-                    }
-                }
-            </select>
-            <WButton
-                OnClick="Save"
-                Text="@(TranslationService.Translate("Change"))"
-                WorkingText="@(TranslationService.Translate("Changing"))"
-                CssClasses="btn-primary">
-            </WButton>
+            <table class="w-100">
+                <tr>
+                    <td class="w-100">
+                        <select class="form-select" @bind="CurrentVersion">
+                            @foreach (var version in Versions.Keys)
+                            {
+                                if (DisplayToData(version) == CurrentVersion)
+                                {
+                                    <option value="@(DisplayToData(version))" selected="">@(version)</option>
+                                }
+                                else
+                                {
+                                    <option value="@(DisplayToData(version))">@(version)</option>
+                                }
+                            }
+                        </select>
+                    </td>
+                    <td>
+                        <WButton
+                            OnClick="Save"
+                            Text="@(TranslationService.Translate("Change"))"
+                            WorkingText="@(TranslationService.Translate("Changing"))"
+                            CssClasses="btn-primary ms-2">
+                        </WButton>
+                    </td>
+                </tr>
+            </table>
         </LazyLoader>
     </div>
 </div>
diff --git a/Moonlight/Shared/Components/ServerControl/Settings/JavascriptFileSetting.razor b/Moonlight/Shared/Components/ServerControl/Settings/JavascriptFileSetting.razor
index 2787979c..4b1e6706 100644
--- a/Moonlight/Shared/Components/ServerControl/Settings/JavascriptFileSetting.razor
+++ b/Moonlight/Shared/Components/ServerControl/Settings/JavascriptFileSetting.razor
@@ -10,13 +10,21 @@
 @inject ServerService ServerService
 
 <div class="col">
-    <div class="card card-body">
+    <div class="card card-body p-0">
         <LazyLoader @ref="LazyLoader" Load="Load">
             <label class="mb-2 form-label">
                 <TL>Javascript file</TL>
             </label>
-            <input type="text" class="mb-2 form-control disabled" disabled="" value="@(PathAndFile)"/>
-            <button @onclick="Show" class="btn btn-primary"><TL>Change</TL></button>
+            <table class="w-100">
+                <tr>
+                    <td class="w-100">
+                        <input type="text" class="form-control disabled" disabled="" value="@(PathAndFile)"/>
+                    </td>
+                    <td>
+                        <button @onclick="Show" class="ms-2 btn btn-primary"><TL>Change</TL></button>
+                    </td>
+                </tr>
+            </table>
         </LazyLoader>
     </div>
 </div>
diff --git a/Moonlight/Shared/Components/ServerControl/Settings/JavascriptVersionSetting.razor b/Moonlight/Shared/Components/ServerControl/Settings/JavascriptVersionSetting.razor
index 74936d32..c03b1369 100644
--- a/Moonlight/Shared/Components/ServerControl/Settings/JavascriptVersionSetting.razor
+++ b/Moonlight/Shared/Components/ServerControl/Settings/JavascriptVersionSetting.razor
@@ -10,32 +10,40 @@
 @inject SmartTranslateService TranslationService
 
 <div class="col">
-    <div class="card card-body">
+    <div class="card card-body p-0">
         <LazyLoader @ref="LazyLoader" Load="Load">
             <label class="mb-2 form-label"><TL>Javascript version</TL></label>
-            <select @bind="ImageIndex" class="form-select mb-2">
-                @foreach (var image in DockerImages)
-                {
-                    if (image.Id == SelectedImage.Id)
-                    {
-                        <option value="@(image.Id)" selected="selected">
-                            @(ParseHelper.FirstPartStartingWithNumber(image.Name))
-                        </option>
-                    }
-                    else
-                    {
-                        <option value="@(image.Id)">
-                            @(ParseHelper.FirstPartStartingWithNumber(image.Name))
-                        </option>
-                    }
-                }
-            </select>
-            <WButton
-                OnClick="Save"
-                Text="@(TranslationService.Translate("Change"))"
-                WorkingText="@(TranslationService.Translate("Changing"))"
-                CssClasses="btn-primary">
-            </WButton>
+            <table class="w-100">
+                <tr>
+                    <td class="w-100">
+                        <select @bind="ImageIndex" class="form-select ">
+                            @foreach (var image in DockerImages)
+                            {
+                                if (image.Id == SelectedImage.Id)
+                                {
+                                    <option value="@(image.Id)" selected="selected">
+                                        @(ParseHelper.FirstPartStartingWithNumber(image.Name))
+                                    </option>
+                                }
+                                else
+                                {
+                                    <option value="@(image.Id)">
+                                        @(ParseHelper.FirstPartStartingWithNumber(image.Name))
+                                    </option>
+                                }
+                            }
+                        </select>
+                    </td>
+                    <td>
+                        <WButton
+                            OnClick="Save"
+                            Text="@(TranslationService.Translate("Change"))"
+                            WorkingText="@(TranslationService.Translate("Changing"))"
+                            CssClasses="ms-2 btn-primary">
+                        </WButton>
+                    </td>
+                </tr>
+            </table>
         </LazyLoader>
     </div>
 </div>
diff --git a/Moonlight/Shared/Components/ServerControl/Settings/Join2StartSetting.razor b/Moonlight/Shared/Components/ServerControl/Settings/Join2StartSetting.razor
index bf023551..54254ed4 100644
--- a/Moonlight/Shared/Components/ServerControl/Settings/Join2StartSetting.razor
+++ b/Moonlight/Shared/Components/ServerControl/Settings/Join2StartSetting.razor
@@ -11,19 +11,27 @@
 @inject SmartTranslateService TranslationService
 
 <div class="col">
-    <div class="card card-body">
+    <div class="card card-body p-0">
         <LazyLoader @ref="Loader" Load="Load">
-            <div class="form-check form-check-custom form-check-solid mb-3">
-                <input @bind="Value" class="form-check-input" type="checkbox" value="1" id="j2sCheck"/>
-                <label class="form-check-label" for="j2sCheck">
-                    <TL>Join2Start</TL>
-                </label>
-            </div>
-            <WButton 
-                OnClick="Save" 
-                Text="@(TranslationService.Translate("Change"))" 
-                WorkingText="@(TranslationService.Translate("Changing"))" 
-                CssClasses="btn-primary"></WButton>
+            <table class="w-100">
+                <tr>
+                    <td class="w-100">
+                        <div class="form-check form-check-custom form-check-solid mb-3">
+                            <input @bind="Value" class="form-check-input" type="checkbox" value="1" id="j2sCheck"/>
+                            <label class="form-check-label" for="j2sCheck">
+                                <TL>Join2Start</TL>
+                            </label>
+                        </div>
+                    </td>
+                    <td>
+                        <WButton
+                            OnClick="Save"
+                            Text="@(TranslationService.Translate("Change"))"
+                            WorkingText="@(TranslationService.Translate("Changing"))"
+                            CssClasses="btn-primary"></WButton>
+                    </td>
+                </tr>
+            </table>
         </LazyLoader>
     </div>
 </div>
diff --git a/Moonlight/Shared/Components/ServerControl/Settings/PaperVersionSetting.razor b/Moonlight/Shared/Components/ServerControl/Settings/PaperVersionSetting.razor
index 4d236d6d..f3951991 100644
--- a/Moonlight/Shared/Components/ServerControl/Settings/PaperVersionSetting.razor
+++ b/Moonlight/Shared/Components/ServerControl/Settings/PaperVersionSetting.razor
@@ -13,41 +13,64 @@
 @inject SmartTranslateService TranslationService
 
 <div class="col">
-    <div class="card card-body">
+    <div class="card card-body p-0">
         <LazyLoader Load="Load">
-            <label class="mb-2 form-label"><TL>Minecraft version</TL></label>
-            <select class="mb-2 form-select" @bind="InputVersion">
-                @foreach (var version in Versions)
-                {
-                    if (version == Version)
-                    {
-                        <option value="@(version)" selected="">@(version)</option>
-                    }
-                    else
-                    {
-                        <option value="@(version)">@(version)</option>
-                    }
-                }
-            </select>
-            <label class="mb-2 form-label"><TL>Build version</TL></label>
-            <select class="mb-2 form-select" @bind="InputBuild">
-                @foreach (var build in Builds)
-                {
-                    if (build == Build)
-                    {
-                        <option value="@(build)" selected="">@(build)</option>
-                    }
-                    else
-                    {
-                        <option value="@(build)">@(build)</option>
-                    }
-                }
-            </select>
-            <WButton 
-                OnClick="Save" 
-                Text="@(TranslationService.Translate("Change"))" 
-                WorkingText="@(TranslationService.Translate("Changing"))" 
-                CssClasses="btn-primary"></WButton>
+            <table class="w-100">
+                <tr>
+                    <td colspan="2">
+                        <label class="mb-0 form-label"><TL>Minecraft version</TL></label>
+                    </td>
+                </tr>
+                <tr>
+                    <td colspan="2">
+                        <select class="mb-2 form-select" @bind="InputVersion">
+                            @foreach (var version in Versions)
+                            {
+                                if (version == Version)
+                                {
+                                    <option value="@(version)" selected="">@(version)</option>
+                                }
+                                else
+                                {
+                                    <option value="@(version)">@(version)</option>
+                                }
+                            }
+                        </select>
+                    </td>
+                </tr>
+                <tr>
+                    <td colspan="2">
+                        <label class="mb-0 form-label"><TL>Build version</TL></label>
+                    </td>
+                </tr>
+                <tr>
+                    <td colspan="2">
+                        <select class="mb-2 form-select" @bind="InputBuild">
+                            @foreach (var build in Builds)
+                            {
+                                if (build == Build)
+                                {
+                                    <option value="@(build)" selected="">@(build)</option>
+                                }
+                                else
+                                {
+                                    <option value="@(build)">@(build)</option>
+                                }
+                            }
+                        </select>
+                    </td>
+                </tr>
+                <tr>
+                    <td class="w-100"></td>
+                    <td>
+                        <WButton
+                            OnClick="Save"
+                            Text="@(TranslationService.Translate("Change"))"
+                            WorkingText="@(TranslationService.Translate("Changing"))"
+                            CssClasses="btn-primary mt-2"></WButton>
+                    </td>
+                </tr>
+            </table>
         </LazyLoader>
     </div>
 </div>
diff --git a/Moonlight/Shared/Components/ServerControl/Settings/PythonFileSetting.razor b/Moonlight/Shared/Components/ServerControl/Settings/PythonFileSetting.razor
index 7cc041ff..4e3b740d 100644
--- a/Moonlight/Shared/Components/ServerControl/Settings/PythonFileSetting.razor
+++ b/Moonlight/Shared/Components/ServerControl/Settings/PythonFileSetting.razor
@@ -11,13 +11,23 @@
 @inject SmartTranslateService SmartTranslateService
 
 <div class="col">
-    <div class="card card-body">
+    <div class="card card-body p-0">
         <LazyLoader @ref="LazyLoader" Load="Load">
             <label class="mb-2 form-label">
                 <TL>Python file</TL>
             </label>
-            <input type="text" class="mb-2 form-control disabled" disabled="" value="@(PathAndFile)"/>
-            <button @onclick="Show" class="btn btn-primary"><TL>Change</TL></button>
+            <table class="w-100">
+                <tr>
+                    <td class="w-100">
+                        <input type="text" class="form-control disabled" disabled="" value="@(PathAndFile)"/>
+
+                    </td>
+                    <td>
+                        <button @onclick="Show" class="ms-2 btn btn-primary"><TL>Change</TL></button>
+
+                    </td>
+                </tr>
+            </table>
         </LazyLoader>
     </div>
 </div>
diff --git a/Moonlight/Shared/Components/ServerControl/Settings/PythonVersionSetting.razor b/Moonlight/Shared/Components/ServerControl/Settings/PythonVersionSetting.razor
index 59697112..5c926df5 100644
--- a/Moonlight/Shared/Components/ServerControl/Settings/PythonVersionSetting.razor
+++ b/Moonlight/Shared/Components/ServerControl/Settings/PythonVersionSetting.razor
@@ -10,32 +10,40 @@
 @inject SmartTranslateService TranslationService
 
 <div class="col">
-    <div class="card card-body">
+    <div class="card card-body p-0">
         <LazyLoader @ref="LazyLoader" Load="Load">
             <label class="mb-2 form-label"><TL>Python version</TL></label>
-            <select @bind="ImageIndex" class="form-select mb-2">
-                @foreach (var image in DockerImages)
-                {
-                    if (image.Id == SelectedImage.Id)
-                    {
-                        <option value="@(image.Id)" selected="selected">
-                            @(ParseHelper.FirstPartStartingWithNumber(image.Name))
-                        </option>
-                    }
-                    else
-                    {
-                        <option value="@(image.Id)">
-                            @(ParseHelper.FirstPartStartingWithNumber(image.Name))
-                        </option>
-                    }
-                }
-            </select>
-            <WButton
-                OnClick="Save"
-                Text="@(TranslationService.Translate("Change"))"
-                WorkingText="@(TranslationService.Translate("Changing"))"
-                CssClasses="btn-primary">
-            </WButton>
+            <table class="w-100">
+                <tr>
+                    <td class="w-100">
+                        <select @bind="ImageIndex" class="form-select">
+                            @foreach (var image in DockerImages)
+                            {
+                                if (image.Id == SelectedImage.Id)
+                                {
+                                    <option value="@(image.Id)" selected="selected">
+                                        @(ParseHelper.FirstPartStartingWithNumber(image.Name))
+                                    </option>
+                                }
+                                else
+                                {
+                                    <option value="@(image.Id)">
+                                        @(ParseHelper.FirstPartStartingWithNumber(image.Name))
+                                    </option>
+                                }
+                            }
+                        </select>
+                    </td>
+                    <td>
+                        <WButton
+                            OnClick="Save"
+                            Text="@(TranslationService.Translate("Change"))"
+                            WorkingText="@(TranslationService.Translate("Changing"))"
+                            CssClasses="btn-primary ms-2">
+                        </WButton>
+                    </td>
+                </tr>
+            </table>
         </LazyLoader>
     </div>
 </div>
diff --git a/Moonlight/Shared/Components/ServerControl/Settings/ServerRenameSetting.razor b/Moonlight/Shared/Components/ServerControl/Settings/ServerRenameSetting.razor
index 2c8185d4..9d698906 100644
--- a/Moonlight/Shared/Components/ServerControl/Settings/ServerRenameSetting.razor
+++ b/Moonlight/Shared/Components/ServerControl/Settings/ServerRenameSetting.razor
@@ -6,8 +6,8 @@
 
 <div class="input-group mb-3">
     <LazyLoader @ref="LazyLoader" Load="Load">
-        <SmartForm Model="Model" OnValidSubmit="Rename">
-            <div class="input-group mb-3">
+        <SmartForm CssClass="w-100" Model="Model" OnValidSubmit="Rename">
+            <div class="input-group mb-3 w-100">
                 <InputText @bind-Value="Model.Name" type="text" class="form-control"></InputText>
                 <button class="btn btn-primary" type="submit"><TL>Rename</TL></button>
             </div>