added version to home page

jocon15 · Feb 16, 2025 · 23b1b71 · 23b1b71
1 parent ac0af01
commit 23b1b71
Show file tree

Hide file tree

Showing 4 changed files with 28 additions and 6 deletions.
diff --git a/TreeClimber/Components/App.razor b/TreeClimber/Components/App.razor
@@ -15,6 +15,7 @@
     @*Custom CSS Files*@
     <link href="@AppendVersion("Buttons.css")" rel="stylesheet" />
     <link href="@AppendVersion("Climb.css")" rel="stylesheet" />
+    <link href="@AppendVersion("Home.css")" rel="stylesheet" />
     <link href="@AppendVersion("Inputs.css")" rel="stylesheet" />
     <link href="@AppendVersion("Modal.css")" rel="stylesheet" />
     <link href="@AppendVersion("Page.css")" rel="stylesheet" />

diff --git a/TreeClimber/Components/Layout/NavMenu.razor b/TreeClimber/Components/Layout/NavMenu.razor
@@ -1,6 +1,6 @@
 <div class="top-row ps-3 navbar navbar-dark">
     <div class="container-fluid">
-        <a class="navbar-brand" href="">Tree Climber @_version</a>
+        <a class="navbar-brand" href="">Tree Climber</a>
     </div>
 </div>
 
@@ -16,7 +16,3 @@
     </nav>
 </div>
 
-@code{
-    private string _version = "0.1.0";
-}
-
diff --git a/TreeClimber/Components/Pages/Home.razor b/TreeClimber/Components/Pages/Home.razor
@@ -7,7 +7,10 @@
 
 <PageTitle>Home</PageTitle>
 
-<h3 class="climb-header">Welcome to Tree Climber!</h3>
+<div class="inline-header-container">
+    <h3 class="home-header">Welcome to Tree Climber!</h3>
+    <text class="hint inline-hint">v@_version</text>
+</div>
 
 <p>
     <text class="hint">10MB limit</text>
@@ -32,6 +35,8 @@
 }
 
 @code {
+    private string _version = "0.1.0";
+
     private List<IBrowserFile> loadedFiles = [];
     private IBrowserFile? _file;
     private long maxFileSize = 1024 * 10; // 1024 bytes in a kibibyte, * 238 ~= 250MB

diff --git a/TreeClimber/wwwroot/Home.css b/TreeClimber/wwwroot/Home.css
@@ -0,0 +1,20 @@
+.inline-header-container{
+   display: flex;
+}
+
+.inline-hint {
+    display: grid;
+    align-items: end;
+    padding-bottom: 8px;
+    margin-left: 10px;
+}
+
+.home-header {
+    display: inline-block;
+    color: #fff;
+    background-color: #404040;
+    width: fit-content;
+    font-family: var(--application-font-family);
+    padding: 15px;
+    border-radius: 20px;
+}