Restructure

MichelMichels · Apr 28, 2024 · 4fc4b0b · 4fc4b0b
1 parent 38df705
commit 4fc4b0b
Showing 1 changed file with 13 additions and 36 deletions.
diff --git a/src/MichelMichels.ViesSharp.Demo/Components/Pages/Home.razor b/src/MichelMichels.ViesSharp.Demo/Components/Pages/Home.razor
@@ -31,8 +31,8 @@
 
 <div>
     <div class="container p-4 ">
-        <div class="row g-4">
-            <div class="col-12 d-flex align-items-center gap-3">
+        <div class="vstack gap-4">
+            <div class="d-flex align-items-center gap-3">
                 <h2 class="display-2">ViesSharp</h2>
 
                 <a href="https://github.com/MichelMichels/ViesSharp" class="btn btn-outline-primary" role="button">
@@ -43,11 +43,11 @@
                 </a>
             </div>
 
-            <div class="col-12 d-flex">
-                <form class="flex-fill align-self-center">
+            <div class="d-flex">
+                <form @onsubmit="Lookup" class="flex-fill align-self-center">
                     <h3 class="mb-3">Search</h3>
 
-                    <div class="input-group d-none d-md-flex">
+                    <div class="d-flex flex-column flex-md-row gap-2">
                         <select class="form-select" style="max-width: 7rem;" @bind="@SelectedCountryCode">
                             <option disabled value="" selected>Country</option>
                             @foreach (string countryCode in CountryCodes)
@@ -58,39 +58,18 @@
 
                         <input type="text" class="form-control" placeholder="VAT no." @bind="@VatNumber" />
 
-                        <button class="btn btn-outline-primary @(string.IsNullOrEmpty(SelectedCountryCode) ? "disabled" : "" )" type="button" @onclick="Lookup">
+                        <button class="btn btn-primary @(string.IsNullOrEmpty(SelectedCountryCode) ? "disabled" : "" )" type="submit">
                             <span class="@(IsLookingUp ? "d-none" : "")">Lookup</span>
                             <div class="spinner-border spinner-border-sm @(!IsLookingUp ? "d-none" : "")" role="status">
                                 <span class="visually-hidden">Looking up...</span>
                             </div>
                         </button>
-                    </div>
-
-                    <div class="vstack gap-3 d-md-none">
-                        <select class="form-select" style="max-width: 7rem;" @bind="@SelectedCountryCode">
-                            <option value="" selected>Country</option>
-                            @foreach (string countryCode in CountryCodes)
-                            {
-                                <option value="@countryCode">@countryCode</option>
-                            }
-                        </select>
-
-                        <input type="text" class="form-control" placeholder="VAT no." @bind="@VatNumber" />
-
-                        <div class="d-grid">
-                            <button class="btn btn-primary  @(string.IsNullOrEmpty(SelectedCountryCode) ? "disabled" : "")" type="button" @onclick="Lookup">                                
-                                <span class="@(IsLookingUp ? "d-none" : "")">Lookup</span>
-                                <div class="spinner-border spinner-border-sm @(!IsLookingUp ? "d-none" : "")" role="status">
-                                    <span class="visually-hidden">Looking up...</span>
-                                </div>
-                            </button>
-                        </div>
-                    </div>
+                    </div>                    
                 </form>
             </div>
 
             <!-- Result -->
-            <div class="col-12">
+            <div>
                 <h3>Result</h3>
 
                 @if(LastResponse is not null)
@@ -106,13 +85,11 @@
                                 <h3 class="text-center">This is not a valid VAT number.</h3>
                             }
 
-                            <a data-bs-toggle="collapse" href="#collapse-json" role="button" aria-expanded="false" aria-controls="collapse-json">
-                                See json
-                            </a>
+                            <a data-bs-toggle="collapse" href="#collapse-json" role="button" aria-expanded="false" aria-controls="collapse-json">See json</a>
+
                             <div class="collapse" id="collapse-json">
                                 <pre><code>@(JsonSerializer.Serialize(LastResponse, defaultSerializerOptions))</code></pre>
                             </div>
-
                         </div>
                     </div>
                 } else
@@ -126,7 +103,7 @@
             </div>
 
             <!-- History -->
-            <div class="col-12 @(History.Count == 0 ? "d-none" : "")">
+            <div class="@(History.Count == 0 ? "d-none" : "")">
                 <h3>History</h3>
 
                 <div class="accordion" id="accordion-history">                    
@@ -137,11 +114,11 @@
 
                         <div class="accordion-item">
                             <h2 class="accordion-header">
-                                <button class="accordion-button" type="button" data-bs-toggle="collapse" data-bs-target="#collapse-@(i)" aria-expanded="true" aria-controls="collapse-@(i)">
+                                <button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#collapse-@(i)">
                                     @(response.Name)
                                 </button>
                             </h2>
-                            <div id="collapse-@(i)" class="accordion-collapse collapse show" data-bs-parent="#accordion-history">
+                            <div id="collapse-@(i)" class="accordion-collapse collapse" data-bs-parent="#accordion-history">
                                 <div class="accordion-body">
                                     <pre><code>@(JsonSerializer.Serialize(response, defaultSerializerOptions))</code></pre>
                                 </div>