tonytins/amtkstat
1
0
Fork 0
mirror of https://github.com/tonytins/amtkstat.git synced 2025-03-22 14:42:19 +00:00
Code Issues Projects Releases Packages Wiki Activity Actions

Initial start on UI redesign

Browse source
This commit is contained in:
Tony Bark 2024-09-19 07:50:36 -04:00
parent ebfe2d644c
commit 215dfbb45a
6 changed files with 72 additions and 91 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

18
src/Components/LaunchBrowser.razor
View file

@ -1,18 +0,0 @@
@inject IJSRuntime JsRuntime
<a @onclick="OpenBrowserAsync">@Text</a>
@code {
[Parameter]
[Required]
public string? Text { get; set; }
[Parameter]
[Required]
public string? Address { get; set; }
private async Task OpenBrowserAsync()
{
await JsRuntime.InvokeAsync<string>("__TAURI__.tauri.invoke", "open_browser", new { address = Address });
}
}

24
src/Components/OpenBrowser.razor Normal file
View file

@ -0,0 +1,24 @@
@inject IJSRuntime JsRuntime
@if (IsButton)
{
<button @onclick="OpenBrowserAsync">@Text</button>
}
else
{
<a @onclick="OpenBrowserAsync">@Text</a>
}
@code {
[Parameter] public string? Text { get; set; }
[Parameter] public string? Address { get; set; }
[Parameter] public bool IsButton { get; set; }
private async Task OpenBrowserAsync()
{
await JsRuntime.InvokeAsync<string>("__TAURI__.tauri.invoke", "open_browser", new { address = Address });
}
}

3
src/Components/StationInput.razor → src/Components/StationForm.razor
View file

@ -5,6 +5,9 @@
<input id="greet-input" placeholder="3-character Station Code" @bind="Code" /> <input id="greet-input" placeholder="3-character Station Code" @bind="Code" />
<button type="submit">Submit</button> <button type="submit">Submit</button>
</form> </form>
<p>Search
<OpenBrowser Text="Station Codes" Address="https://dixielandsoftware.net/Amtrak/solari/StationSearch.html" />
</p>
@code @code
{ {

75
src/Pages/Home.razor
View file

@ -1,43 +1,44 @@
@page "/" @page "/"
<FluentLayout>
<FluentHeader>
<img src="img/amtkstat.svg" class="logo" alt="Amtrak Status" />
</FluentHeader>
<div class="container">
<div class="container"> <StationForm />
<img src="img/amtkstat.svg" class="logo" alt="Amtrak Status" /> <div class="row">
<StationInput /> <div class="container">
<p>Search <StationBtn Code="NYP" Name="NY Penn Station" />
<LaunchBrowser Text="Station Codes" Address="https://dixielandsoftware.net/Amtrak/solari/StationSearch.html" /> </div>
</p> <div class="container">
<div class="row"> <StationBtn Code="WAS" Name="DC Union Station" />
<div class="container"> </div>
<StationBtn Code="NYP" Name="NY Penn Station" /> <div class="container">
<StationBtn Code="BOS" Name="Boston South Station" />
</div>
</div> </div>
<div class="container"> <div class="row">
<StationBtn Code="WAS" Name="DC Union Station" /> <div class="container">
</div> <StationBtn Code="ASD" Name="Ashland, VA" />
<div class="container"> <StationBtn Code="SNC" Name="San Juan Capistrano, CA" />
<StationBtn Code="BOS" Name="Boston South Station" /> <StationBtn Code="FMD" Name="Fort Madison, IA" />
</div>
<div class="container">
<StationBtn Code="LAP" Name="La Plata, MO" />
<StationBtn Code="QCY" Name="Quincy, IL" />
<StationBtn Code="SPB" Name="Spartanburg, SC" />
</div>
</div> </div>
</div> </div>
<div class="row">
<div class="container">
<StationBtn Code="ASD" Name="Ashland, VA" />
<StationBtn Code="SNC" Name="San Juan Capistrano, CA" />
<StationBtn Code="FMD" Name="Fort Madison, IA" />
</div>
<div class="container">
<StationBtn Code="LAP" Name="La Plata, MO" />
<StationBtn Code="QCY" Name="Quincy, IL" />
<StationBtn Code="SPB" Name="Spartanburg, SC" />
</div>
</div>
</div>
<footer> <footer>
<sub> <sub>
<i> <i>
<p> <p>
<GitVersion /><br>Status Boards by <GitVersion /><br>Status Boards by
<LaunchBrowser Text="Dixieland Software" Address="https://dixielandsoftware.net/" /> <OpenBrowser Text="Dixieland Software" Address="https://dixielandsoftware.net/" />
</p> </p>
</i> </i>
</sub> </sub>
</footer> </footer>
</FluentLayout>

40
src/wwwroot/css/app.css
View file

@ -1,3 +1,5 @@
@import '/_content/Microsoft.FluentUI.AspNetCore.Components/css/reboot.css';
.logo.blazor:hover { .logo.blazor:hover {
filter: drop-shadow(0 0 2em #5c2d91); filter: drop-shadow(0 0 2em #5c2d91);
} }
@ -33,40 +35,6 @@ footer {
bottom: 0; bottom: 0;
} }
/* The sidebar menu */
.sidenav {
height: 100%;
/* Full-height: remove this if you want "auto" height */
width: 160px;
/* Set the width of the sidebar */
position: fixed;
/* Fixed Sidebar (stay in place on scroll) */
z-index: 1;
/* Stay on top */
top: 0;
/* Stay at the top */
left: 0;
background-color: #111;
/* Black */
overflow-x: hidden;
/* Disable horizontal scroll */
padding-top: 20px;
}
/* The navigation menu links */
.sidenav a {
padding: 6px 8px 6px 16px;
text-decoration: none;
font-size: 25px;
color: #818181;
display: block;
}
/* When you mouse over the navigation links, change their color */
.sidenav a:hover {
color: #f1f1f1;
}
.logo { .logo {
height: 6em; height: 6em;
padding: 1.5em; padding: 1.5em;
@ -126,7 +94,7 @@ button {
outline: none; outline: none;
} }
@media (prefers-color-scheme: dark) { /* @media (prefers-color-scheme: dark) {
:root { :root {
color: #f6f6f6; color: #f6f6f6;
background-color: #2f2f2f; background-color: #2f2f2f;
@ -145,4 +113,4 @@ button {
button:active { button:active {
background-color: #0f0f0f69; background-color: #0f0f0f69;
} }
} } */

3
src/wwwroot/index.html
View file

@ -7,6 +7,9 @@
<title>Tauri + Blazor</title> <title>Tauri + Blazor</title>
<base href="/" /> <base href="/" />
<link rel="stylesheet" href="css/app.css" /> <link rel="stylesheet" href="css/app.css" />
<script src="_content/Microsoft.FluentUI.AspNetCore.Components/Microsoft.FluentUI.AspNetCore.Components.lib.module.js"
type="module" async></script>
<link href="_content/Microsoft.FluentUI.AspNetCore.Components/css/reboot.css" rel="stylesheet" />
</head> </head>
<body> <body>