New landing page etc

KidsIdKit.Shared/Pages/About.razor

@@ -0,0 +1,22 @@
+@page "/About"
+
+<h3>About</h3>
+
+<section>
+    <i>
+        This is a digital kids id kit app that allows parents to maintain a digital record of their kids' information. It is a simple app that allows parents to add their kids' information and provides helpful links to resources
+        that parents can use to help keep their kids safe.
+    </i>
+</section>
+
+<br />
+
+<ul id="inline-links-in-a-list">
+    <li>
+        Click on the <a href="/">Kids</a> tab to enter, edit, and/or simply view information about your kids.
+    </li>
+
+    <li>
+        Click on the <a href="/information">Information</a> tab to see helpful links to resources that parents can use to help keep your kids safe.
+    </li>
+</ul>

KidsIdKit.Shared/Pages/Information/Information.razor

@@ -1,6 +1,14 @@
 @page "/Information"
 
-<h1>Information</h1>
+<section>
+    <h1>Information</h1>
+
+    <i>
+        Helpful links to resources that parents can use to help keep your kids safe.
+    </i>
+</section>
+
+<br />
 
 @code {
     private List<LinkItem> links = new List<LinkItem>

KidsIdKit.Shared/Pages/Kids.razor

@@ -9,13 +9,28 @@
 
 @if (data == null || DataStore.Family == null)
 {
-  <p>Loading data...</p>
+    <p>Loading data...</p>
+}
+else if (DataStore.Family.Children.Count == 0)
+{
+    <i>
+        On this page, you can add new kids.
+    </i>
+
+    <br />
 }
 else
 {
+    <i>
+        On this page, you can add new kids as well as view/edit existing kids.
+    </i>
+
+    <br />
+    <br />
+
     <QuickGrid Items="@data" Class="full-width-column">
         <TemplateColumn Class="full-width-column">
-            <div class="content-card" 
+            <div class="content-card"
                  title="Click to edit @context.ChildDetails.FullName"
                  style="cursor: pointer;"
                  @onclick="@(() => NavigateToEdit(context))"
@@ -46,44 +61,17 @@ else
             </div>
         </TemplateColumn>
     </QuickGrid>
-
-    <div>
-        <button type="button"
-            class="btn-icon"
-            title="Add new child"
-                @onclick="@(() => NavigationManager.NavigateTo("/Child/-1"))">
-            <i class="fas fa-plus" />
-        </button>
-    </div>
 }
 
-@code {
-    private IQueryable<Data.Child>? data;
-
-    protected override async Task OnInitializedAsync()
-    {
-        DataStore.Family = await dal.GetDataAsync();
-        if (DataStore.Family is not null)
-        {
-            data = DataStore.Family.Children.AsQueryable();
-        }
-    }
-
-    private void NavigateToEdit(Data.Child child)
-    {
-        if (DataStore.Family != null)
-        {
-            var index = DataStore.Family.Children.IndexOf(child);
-            NavigationManager.NavigateTo($"/Child/{index}");
-        }
-    }
+<section>
+    <br />
+    <i>Tap the [+] button below to add a child.</i>
+    <br />
 
-    private void NavigateToRemove(Data.Child child, MouseEventArgs e)
-    {
-        if (DataStore.Family != null)
-        {
-            var index = DataStore.Family.Children.IndexOf(child);
-            NavigationManager.NavigateTo($"/ChildRemove/{index}");
-        }
-    }
-}
+    <button type="button"
+            class="btn-icon"
+            title="Add new child"
+            @onclick="@(() => NavigationManager.NavigateTo("/Child/-1"))">
+        <i class="fas fa-plus" />
+    </button>
+</section>

KidsIdKit.Shared/Pages/Kids.razor.cs

@@ -0,0 +1,36 @@
+using Microsoft.AspNetCore.Components;
+using Microsoft.AspNetCore.Components.Web;
+
+namespace KidsIdKit.Shared.Pages;
+
+public partial class Kids
+{
+    private IQueryable<Data.Child>? data;
+
+    protected override async Task OnInitializedAsync()
+    {
+        DataStore.Family = await dal.GetDataAsync();
+        if (DataStore.Family is not null)
+        {
+            data = DataStore.Family.Children.AsQueryable();
+        }
+    }
+
+    private void NavigateToEdit(Data.Child child)
+    {
+        if (DataStore.Family != null)
+        {
+            var index = DataStore.Family.Children.IndexOf(child);
+            NavigationManager.NavigateTo($"/Child/{index}");
+        }
+    }
+
+    private void NavigateToRemove(Data.Child child, MouseEventArgs e)
+    {
+        if (DataStore.Family != null)
+        {
+            var index = DataStore.Family.Children.IndexOf(child);
+            NavigationManager.NavigateTo($"/ChildRemove/{index}");
+        }
+    }
+}

KidsIdKit.Shared/Shared/NavMenu.razor

@@ -11,9 +11,8 @@
     <nav class="flex-column">
         <div class="nav-item px-3">
             <NavLink class="nav-link" href="" Match="NavLinkMatch.All">
-                <span style="display: inline-flex; align-items: center;">
-                    <img src="Kid.ico" alt="Picture of 2 kids" width="64" height="64" class="ms-2 me-2" />
-                    @*                     <img src="Kids.png" alt="Picture of 2 kids" width="64" height="64" class="ms-2 me-2" /> *@
+                <span class="nav-icon-text kids-icon">
+                    <img src="Kid.ico" alt="Picture of 2 kids" />
                     Kids
                 </span>
 
@@ -22,12 +21,21 @@
 
         <div class="nav-item px-3">
             <NavLink class="nav-link" href="Information">
-                <span style="display: inline-flex; align-items: center;">
-                    <img src="Information-icon.png" alt="Information icon" width="64" height="64" class="ms-2 me-2" />
+                 <span class="nav-icon-text">
+                    <img src="Information-icon.png" alt="Information icon" />
                     Information
                 </span>
             </NavLink>
         </div>
+
+        <div class="nav-item px-3">
+            <NavLink class="nav-link" href="About">
+                <span class="nav-icon-text">
+                    <img src="About.png" alt="About icon" />
+                    About
+                </span>
+            </NavLink>
+        </div>
     </nav>
 </div>
 

KidsIdKit.Shared/Shared/NavMenu.razor.css

@@ -60,3 +60,45 @@
         display: block;
     }
 }
+
+.nav-icon-text {
+    display: grid;
+    grid-template-columns: 64px auto; /* Reserve space for the largest icon */
+    align-items: center;
+    gap: 0.5rem;
+}
+
+/*.nav-icon-text img {
+    width: 32px;
+    height: 32px;
+    object-fit: contain;
+}
+*/
+/*.nav-icon-text img {
+    width: 32px;
+    height: 32px;
+    margin-left: 8px;
+    align-self: center;
+    object-fit: contain;
+}
+*/
+/*.nav-icon-text.kids-icon img {
+    width: 64px;
+    height: 64px;
+    object-fit: contain;
+    margin-left: 4px; 
+}
+*/
+.nav-icon-text img {
+    width: 32px;
+    height: 32px;
+    margin: auto 0 auto 8px; /* top/bottom auto centers vertically */
+    object-fit: contain;
+}
+
+.nav-icon-text.kids-icon img {
+    width: 64px;
+    height: 64px;
+    margin: auto 0 auto 4px; /* vertically center + indent */
+    object-fit: contain;
+}

KidsIdKit.Shared/scss/custom.scss

@@ -172,3 +172,33 @@ a, .btn-link {
     border-radius: 8px; /* Rounded corners for touch comfort */
     text-decoration: none;
 }
+
+#inline-links-in-a-list li a {
+    /*    display: initial;
+    font-size: initial;
+    margin-bottom: initial;
+    border-radius: initial;
+    text-decoration: initial;
+*/
+    display: inline !important;
+    list-style-type: none;
+}
+
+/* LinksList.razor.css */
+/*#inline-links-in-a-list {
+    list-style-type: none;*/ /* Removes bullets */
+    /*padding: 0;*/ /* Reset default ul padding */
+    /*margin: 0;*/ /* Reset default margin */
+/*}
+
+#vertically-spaced-links-in-a-list li {
+    margin-bottom: 16px;*/ /* Adds vertical spacing between items */
+/*}
+
+#vertically-spaced-links-in-a-list li a {
+    display: block;*/ /* Ensure the entire row is clickable */
+    /*font-size: 18px;
+    border-radius: 8px;
+    text-decoration: none;
+    padding: 5px 10px;*/ /* Add some inner spacing */
+/*}*/