fix: Minor UI improvements

whyvra · Apr 7, 2021 · 8b5db97 · 8b5db97
1 parent fc15a32
commit 8b5db97
Show file tree

Hide file tree

Showing 14 changed files with 1,292 additions and 43 deletions.
diff --git a/Whyvra.Tunnel.Presentation/Components/ServerDropdown.razor b/Whyvra.Tunnel.Presentation/Components/ServerDropdown.razor
@@ -1,18 +1,40 @@
 @inject NavigationManager NavigationManager
 @inject ServerService ServerService
 
-<div class="select">
-    <select @onchange="GoToServer">
-        <option disabled selected>Pick a server</option>
-        @foreach(var server in servers)
-        {
-        <option value="@server.Id">@server.Name</option>
-        }
-    </select>
+<div class="dropdown is-fullwidth @(_isActive ? "is-active" : "")">
+    <div class="dropdown-trigger">
+        <button class="button is-white" aria-haspopup="true" aria-controls="dropdown-menu" @onclick="@(() => _isActive = !_isActive)">
+            <span class="icon is-medium">
+                <img src="img/user.svg">
+            </span>
+            <span>Manage users</span>
+            <span class="icon is-small">
+                <i class="fas fa-angle-down" aria-hidden="true"></i>
+            </span>
+        </button>
+    </div>
+    <div class="dropdown-menu" id="dropdown-menu" role="menu">
+        <div class="dropdown-content">
+            @foreach (var server in servers)
+            {
+                <a href="/servers/@server.Id" class="dropdown-item">
+                    @server.Name
+                </a>
+            }
+            @if (servers == null || !servers.Any())
+            {
+                <div class="dropdown-item">
+                    <p class="title is-size-6">No servers yet.</p>
+                    <p class="subtitle is-size-6">Click 'Manage servers' to get started.</p>
+                </div>
+            }
+        </div>
+    </div>
 </div>
 
 @code
 {
+    private bool _isActive;
     private IEnumerable<ServerDto> servers = Enumerable.Empty<ServerDto>();
 
     protected override async Task OnInitializedAsync()

diff --git a/Whyvra.Tunnel.Presentation/Components/ServerDropdown.razor.css b/Whyvra.Tunnel.Presentation/Components/ServerDropdown.razor.css
@@ -0,0 +1,13 @@
+.dropdown.is-fullwidth {
+    width: 100%;
+}
+
+.dropdown.is-fullwidth .dropdown-trigger {
+    width: 100%
+}
+
+.dropdown.is-fullwidth .button {
+    display: flex;
+    width: 100%;
+    justify-content: center
+}
diff --git a/Whyvra.Tunnel.Presentation/Forms/ClientForm.razor b/Whyvra.Tunnel.Presentation/Forms/ClientForm.razor
@@ -168,11 +168,11 @@ else if (_formModel != null)
         _copy = JsonSerializer.Serialize(client);
 
         _formModel = new FormBuilder<UpdateClientViewModel>()
-            .Input(x => x.Client.Name).WithIcon("user")
+            .Input(x => x.Client.Name).WithIcon("fas fa-user")
             .TextArea(x => x.Client.Description)
-            .Input(x => x.Client.AssignedIp).WithIcon("network-wired").WithText("Assigned IP")
+            .Input(x => x.Client.AssignedIp).WithIcon("fas fa-network-wired").WithText("Assigned IP")
             .TagsInput(x => x.AllowedIps).WithText("Allowed IPs").WithEmptyValue("No IPs allowed")
-            .Input(x => x.Client.PublicKey).WithIcon("key")
+            .Input(x => x.Client.PublicKey).WithIcon("fas fa-key")
             .WithModel(viewModel)
             .Build();
     }

diff --git a/Whyvra.Tunnel.Presentation/Forms/NewClientForm.razor b/Whyvra.Tunnel.Presentation/Forms/NewClientForm.razor
@@ -82,9 +82,9 @@
         };
 
         _formModel = new FormBuilder<ClientViewModel>()
-            .Input(x => x.Client.Name).WithIcon("user")
+            .Input(x => x.Client.Name).WithIcon("fas fa-user")
             .TextArea(x => x.Client.Description)
-            .Input(x => x.Client.AssignedIp).WithIcon("network-wired").WithText("Assigned IP")
+            .Input(x => x.Client.AssignedIp).WithIcon("fas fa-network-wired").WithText("Assigned IP")
             .Checkbox(x => x.Client.IsIpAutoGenerated).HideOnCheck(x => x.Name.Equals("AssignedIp")).WithText("Use next available IP address")
             .TagsInput(x => x.AllowedIps).WithEmptyValue("No IPs allowed").WithText("Allowed IPs")
             .WithModel(viewModel)
@@ -146,11 +146,11 @@
         // Update form
         model.Client.AssignedIp = client.AssignedIp;
         _formModel = new FormBuilder<ClientViewModel>()
-            .Input(x => x.Client.Name).WithIcon("user")
+            .Input(x => x.Client.Name).WithIcon("fas fa-user")
             .TextArea(x => x.Client.Description, rows: 1)
-            .Input(x => x.Client.AssignedIp).WithText("Assigned IP").WithIcon("network-wired")
+            .Input(x => x.Client.AssignedIp).WithText("Assigned IP").WithIcon("fas fa-network-wired")
             .TagsInput(x => x.AllowedIps).WithText("Allowed IPs").WithEmptyValue("No IPs allowed")
-            .Input(x => x.Client.PublicKey).WithIcon("key")
+            .Input(x => x.Client.PublicKey).WithIcon("fas fa-key")
             .WithModel(model)
             .Build();
 

diff --git a/Whyvra.Tunnel.Presentation/Forms/ServerForm.razor b/Whyvra.Tunnel.Presentation/Forms/ServerForm.razor
@@ -115,14 +115,14 @@ else if (_formModel != null)
         var fb = new FormBuilder<ServerViewModel>();
 
         fb
-            .Input(x => x.Server.Name).WithIcon("server")
+            .Input(x => x.Server.Name).WithIcon("fas fa-server")
             .TextArea(x => x.Server.Description, rows: 3)
-            .Input(x => x.Server.AssignedRange).WithText("Assigned IP Range").WithIcon("network-wired").WithPlaceholder("e.g. 10.200.10.0/24")
+            .Input(x => x.Server.AssignedRange).WithText("Assigned IP Range").WithIcon("fas fa-network-wired").WithPlaceholder("e.g. 10.200.10.0/24")
             .TagsInput(x => x.DefaultAllowedRange).WithEmptyValue("No IP range has been assigned").WithPlaceholder("Comma-seperated list of address ranges e.g. 0.0.0.0/0, ::/0,")
-            .Input(x => x.Server.Dns).WithText("DNS").WithIcon("address-book")
-            .Input(x => x.Server.Endpoint).WithIcon("globe").WithPlaceholder("<IP Address | domain>:<port number> e.g. domain.xyz:53")
-            .Number(x => x.Server.ListenPort).WithText("Port to listen").WithIcon("ethernet")
-            .Input(x => x.Server.PublicKey).WithIcon("key");
+            .Input(x => x.Server.Dns).WithText("DNS").WithIcon("fas fa-address-book")
+            .Input(x => x.Server.Endpoint).WithIcon("fas fa-globe").WithPlaceholder("<IP Address | domain>:<port number> e.g. domain.xyz:53")
+            .Number(x => x.Server.ListenPort).WithText("Port to listen").WithIcon("fas fa-ethernet")
+            .Input(x => x.Server.PublicKey).WithIcon("fas fa-key");
 
         if (ServerId.HasValue)
         {

diff --git a/Whyvra.Tunnel.Presentation/Pages/Index.razor b/Whyvra.Tunnel.Presentation/Pages/Index.razor
@@ -18,16 +18,20 @@
         </div>
     </div>
 
-    <div class="actions-panel">
+    <div class="buttons-bar columns is-variable is-1">
         <AuthView>
             <ChildContent>
-                <ServerDropdown></ServerDropdown>
-                <NavLink class="button is-primary" href="/servers">
-                    <span class="icon">
-                        <i class="fas fa-server"></i>
-                    </span>
-                    <span>Manage servers</span>
-                </NavLink>
+                <div class="column is-2">
+                    <NavLink class="button is-fullwidth is-primary" href="/servers">
+                        <span class="icon">
+                            <i class="fas fa-server"></i>
+                        </span>
+                        <span>Manage servers</span>
+                    </NavLink>
+                </div>
+                <div class="column is-2">
+                    <ServerDropdown></ServerDropdown>
+                </div>
             </ChildContent>
             <NotAuthorizedContent>
                 @if (_userNotInRole)
@@ -61,11 +65,13 @@
     @foreach (var tile in tiles)
     {
     <div class="column is-one-third info-tile">
-        <h2 class="is-size-4 has-text-centered">
-            <span class="icon">
-                <i class="fas fa-@(tile.Icon)"></i>
-            </span>
-            <span>@tile.Title</span>
+        <h2 class="is-size-4">
+            <div class="icon-text">
+                <span class="icon">
+                    <i class="fas fa-@(tile.Icon)"></i>
+                </span>
+                <span>@tile.Title</span>
+            </div>
         </h2>
         <p class="is-size-5">@((MarkupString) tile.Text)</p>
     </div>

diff --git a/Whyvra.Tunnel.Presentation/Pages/Index.razor.css b/Whyvra.Tunnel.Presentation/Pages/Index.razor.css
@@ -12,7 +12,7 @@
     overflow: hidden;
 }
 
-.jumbotron div.actions-panel {
+.jumbotron div.columns {
     padding-top: 2rem;
 }
 
@@ -24,6 +24,12 @@
     padding-bottom: 1rem;
 }
 
-.info-tile h2 > .icon {
-    padding-right: 10px;
+.info-tile h2 .icon {
+    margin-right: 10px;
 }
+
+@media screen and (max-width:768px) {
+    .buttons-bar .column {
+        padding: .25rem;
+    }
+}
diff --git a/Whyvra.Tunnel.Presentation/Whyvra.Tunnel.Presentation.csproj b/Whyvra.Tunnel.Presentation/Whyvra.Tunnel.Presentation.csproj
@@ -12,7 +12,7 @@
     <PackageReference Include="Microsoft.Extensions.Http" Version="5.0.0" />
     <PackageReference Include="QRCoder" Version="1.4.1" />
     <PackageReference Include="System.Net.Http.Json" Version="5.0.0" />
-    <PackageReference Include="Whyvra.Blazor.Forms" Version="0.1.0" />
+    <PackageReference Include="Whyvra.Blazor.Forms" Version="0.2.0" />
     <PackageReference Include="Whyvra.Crypto.X25519" Version="0.1.0" />
   </ItemGroup>
 

diff --git a/Whyvra.Tunnel.Presentation/wwwroot/css/bulmaswatch.min.css b/Whyvra.Tunnel.Presentation/wwwroot/css/bulmaswatch.min.css
diff --git a/Whyvra.Tunnel.Presentation/wwwroot/css/monokai-sublime.min.css b/Whyvra.Tunnel.Presentation/wwwroot/css/monokai-sublime.min.css
diff --git a/Whyvra.Tunnel.Presentation/wwwroot/img/user.svg b/Whyvra.Tunnel.Presentation/wwwroot/img/user.svg
diff --git a/Whyvra.Tunnel.Presentation/wwwroot/index.html b/Whyvra.Tunnel.Presentation/wwwroot/index.html
@@ -7,8 +7,8 @@
     <title>Tunnel</title>
     <base href="/" />
 
-    <link rel="stylesheet" type="text/css" href="https://unpkg.com/bulmaswatch/darkly/bulmaswatch.min.css" integrity="sha384-lP/YRCrL9YAAe68K7HzXH5qC1+B2J48VZ6BMhBRvb2OdOn8NuVjH1ebSuugP7pUE" crossorigin="anonymous">
-    <link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/10.4.1/styles/monokai-sublime.min.css" integrity="sha512-/l4iViNMhxR5MhSlak3Yw/L/7qUBifVy7MpLjeJTc8BPMRFbGplGN0xqufCDwhSdxSnVgy+e/OYsNnU75K3yyQ==" crossorigin="anonymous">
+    <link rel="stylesheet" type="text/css" href="css/bulmaswatch.min.css">
+    <link rel="stylesheet" type="text/css" href="css/monokai-sublime.min.css">
     <link rel="stylesheet" type="text/css" href="css/app.css">
     <link rel="stylesheet" type="text/css" href="Whyvra.Tunnel.Presentation.styles.css">
 </head>
@@ -20,10 +20,10 @@
         </div>
         <div class="app-text">Loading</div>
     </div>
-    <script defer src="https://use.fontawesome.com/releases/v5.14.0/js/all.js"></script>
+    <script defer src="js/fontawesome5.js"></script>
     <script src="_content/Microsoft.AspNetCore.Components.WebAssembly.Authentication/AuthenticationService.js"></script>
     <script src="_framework/blazor.webassembly.js"></script>
-    <script src="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/10.4.1/highlight.min.js" integrity="sha512-DrpaExP2d7RJqNhXB41Q/zzzQrtb6J0zfnXD5XeVEWE8d9Hj54irCLj6dRS3eNepPja7DvKcV+9PnHC7A/g83A==" crossorigin="anonymous"></script>
+    <script src="js/highlight.min.js"></script>
     <script src="js/ini.min.js"></script>
     <script src="js/services.js"></script>
 </body>

diff --git a/Whyvra.Tunnel.Presentation/wwwroot/js/fontawesome5.js b/Whyvra.Tunnel.Presentation/wwwroot/js/fontawesome5.js