Initial commit

Author: jfversluis

.github/workflows/build-validation.yml

@@ -0,0 +1,61 @@
+name: build
+
+on:
+  push:
+    branches: [ main ]
+    paths:
+    - '**.cs'
+    - '**.csproj'
+    - '**.xaml'
+    - '**.razor'
+  pull_request:
+    branches: [ main ]
+    paths:
+    - '**.cs'
+    - '**.csproj'
+    - '**.xaml'
+    - '**.razor'
+
+env:
+  DOTNET_VERSION: '8.0.x' # The .NET SDK version to use
+
+jobs:
+  build:
+
+    name: Build All Projects
+    runs-on: windows-latest
+
+    strategy:
+      fail-fast: false
+      matrix:
+        project:
+        - Finish
+        - Part 1 - Displaying Data
+        - Part 2 - Add Monkey Dialog
+        - Part 3 - Navigation
+        - Part 4 - Platform Features
+        - Part 5 - Theming the app
+        - Part 6 - Advanced Topics
+        
+    steps:
+    - uses: actions/checkout@v4
+    - name: Setup .NET
+      uses: actions/setup-dotnet@v4
+      with:
+        dotnet-version: ${{ env.DOTNET_VERSION }}
+        
+    - name: Setup MSBuild.exe
+      uses: microsoft/setup-msbuild@v2
+      with:
+        vs-prerelease: true
+    
+    - name: Install .NET workloads
+      shell: pwsh
+      run: |
+        dotnet workload install android
+        dotnet workload install ios
+        dotnet workload install maccatalyst
+        dotnet workload install maui
+      
+    - name: Build ${{ matrix.project }}
+      run: dotnet build "${{ matrix.project }}/MonkeyFinderHybrid/MonkeyFinderHybrid.csproj"

.gitignore

@@ -396,3 +396,4 @@ FodyWeavers.xsd
 
 # JetBrains Rider
 *.sln.iml
+.DS_Store

Art/AddNewPage-dark.png

@@ -0,0 +1,26 @@
+
+Microsoft Visual Studio Solution File, Format Version 12.00
+# Visual Studio Version 17
+VisualStudioVersion = 17.5.002.0
+MinimumVisualStudioVersion = 10.0.40219.1
+Project("{9A19103F-16F7-4668-BE54-9A1E7A4F7556}") = "MonkeyFinderHybrid", "MonkeyFinderHybrid\MonkeyFinderHybrid.csproj", "{0D09B878-27F8-473C-8F48-B0B82CF2E6CD}"
+EndProject
+Global
+	GlobalSection(SolutionConfigurationPlatforms) = preSolution
+		Debug|Any CPU = Debug|Any CPU
+		Release|Any CPU = Release|Any CPU
+	EndGlobalSection
+	GlobalSection(ProjectConfigurationPlatforms) = postSolution
+		{0D09B878-27F8-473C-8F48-B0B82CF2E6CD}.Debug|Any CPU.ActiveCfg = Debug|Any CPU
+		{0D09B878-27F8-473C-8F48-B0B82CF2E6CD}.Debug|Any CPU.Build.0 = Debug|Any CPU
+		{0D09B878-27F8-473C-8F48-B0B82CF2E6CD}.Debug|Any CPU.Deploy.0 = Debug|Any CPU
+		{0D09B878-27F8-473C-8F48-B0B82CF2E6CD}.Release|Any CPU.ActiveCfg = Release|Any CPU
+		{0D09B878-27F8-473C-8F48-B0B82CF2E6CD}.Release|Any CPU.Build.0 = Release|Any CPU
+	EndGlobalSection
+	GlobalSection(SolutionProperties) = preSolution
+		HideSolutionNode = FALSE
+	EndGlobalSection
+	GlobalSection(ExtensibilityGlobals) = postSolution
+		SolutionGuid = {25132CDC-EDF8-4441-83A1-A6267274B021}
+	EndGlobalSection
+EndGlobal

Art/AddNewPage-light.png

@@ -0,0 +1,9 @@
+<?xml version="1.0" encoding="UTF-8" ?>
+<Application xmlns="http://schemas.microsoft.com/dotnet/2021/maui"
+             xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
+             xmlns:local="clr-namespace:MonkeyFinderHybrid"
+             x:Class="MonkeyFinderHybrid.App">
+        <Application.Resources>
+
+        </Application.Resources>
+</Application>

Art/CodedMonkeys-dark.png

@@ -0,0 +1,18 @@
+namespace MonkeyFinderHybrid;
+
+public partial class App : Application
+{
+	public App()
+	{
+		InitializeComponent();
+	}
+
+	protected override Window CreateWindow(IActivationState? activationState)
+	{
+		return new Window(new NavigationPage(new MainPage())
+		{
+			BarBackgroundColor = Color.FromArgb("#ffc107"),
+			BarTextColor = Colors.White
+		});
+	}
+}

Art/CodedMonkeys-light.png

@@ -0,0 +1,10 @@
+<button class="button-yellow" @onclick="Callback">@Caption</button>
+
+@code {
+    [Parameter]
+    [EditorRequired]
+    public string Caption { get; set; } = string.Empty;
+
+    [Parameter]
+    public EventCallback Callback { get; set; }
+}

Art/ConnectivityStatus-dark.png

@@ -0,0 +1,43 @@
+@implements IDialogContentComponent<Monkey>
+
+@* Header *@
+<FluentDialogHeader ShowDismiss="true">
+    <FluentStack VerticalAlignment="VerticalAlignment.Center">
+        <FluentLabel Typo="Typography.PaneHeader">
+            @Dialog.Instance.Parameters.Title
+        </FluentLabel>
+    </FluentStack>
+</FluentDialogHeader>
+
+@* Body *@
+<FluentDialogBody>
+    <FluentTextField @bind-Value="@Content.Name">Name:</FluentTextField>
+    <FluentTextField @bind-Value="@Content.Details">Description:</FluentTextField>
+    <FluentTextField @bind-Value="@Content.Location">Location:</FluentTextField>
+    <FluentTextField @bind-Value="@Content.Image">Image:</FluentTextField>
+    <FluentNumberField @bind-Value="@Content.Population">Population:</FluentNumberField>
+</FluentDialogBody>
+
+@* Footer *@
+<FluentDialogFooter>
+    <FluentButton Appearance="Appearance.Accent" OnClick="@SaveAsync">Save</FluentButton>
+    <FluentButton Appearance="Appearance.Neutral" OnClick="@CancelAsync">Cancel</FluentButton>
+</FluentDialogFooter>
+
+@code {
+    [Parameter]
+    public Monkey Content { get; set; } = default!;
+
+    [CascadingParameter]
+    public FluentDialog Dialog { get; set; } = default!;
+
+    private async Task SaveAsync()
+    {
+        await Dialog.CloseAsync(Content);
+    }
+
+    private async Task CancelAsync()
+    {
+        await Dialog.CancelAsync();
+    }
+}

Art/ConnectivityStatus-light.png

@@ -0,0 +1,16 @@
+@inherits LayoutComponentBase
+
+<div class="page">
+
+    <div class="sidebar">
+        <NavMenu />
+    </div>
+
+    <main>
+        <article class="content px-4">
+            @Body
+        </article>
+    </main>
+
+    <FluentDialogProvider />
+</div>

Art/Convert-dark.png

@@ -0,0 +1,81 @@
+.page {
+    position: relative;
+    display: flex;
+    flex-direction: column;
+}
+
+main {
+    flex: 1;
+}
+
+.sidebar {
+    background-image: linear-gradient(180deg, rgb(255, 193, 7) 0%, #ffc107 70%);
+}
+
+.top-row {
+    background-color: #f7f7f7;
+    border-bottom: 1px solid #d6d5d5;
+    justify-content: flex-end;
+    height: 3.5rem;
+    display: flex;
+    align-items: center;
+}
+
+.top-row ::deep a,
+.top-row ::deep .btn-link {
+    white-space: nowrap;
+    margin-left: 1.5rem;
+    text-decoration: none;
+}
+
+.top-row ::deep a:hover,
+.top-row ::deep .btn-link:hover {
+    text-decoration: underline;
+}
+
+.top-row ::deep a:first-child {
+    overflow: hidden;
+    text-overflow: ellipsis;
+}
+
+@media (max-width: 640.98px) {
+    .top-row {
+        justify-content: space-between;
+    }
+
+    .top-row ::deep a,
+    .top-row ::deep .btn-link {
+        margin-left: 0;
+    }
+}
+
+@media (min-width: 641px) {
+    .page {
+        flex-direction: row;
+    }
+
+    .sidebar {
+        width: 250px;
+        height: 100vh;
+        position: sticky;
+        top: 0;
+    }
+
+    .top-row {
+        position: sticky;
+        top: 0;
+        z-index: 1;
+    }
+
+    .top-row.auth ::deep a:first-child {
+        flex: 1;
+        text-align: right;
+        width: 0;
+    }
+
+    .top-row,
+    article {
+        padding-left: 2rem !important;
+        padding-right: 1.5rem !important;
+    }
+}

Art/Convert-light.png

@@ -0,0 +1,23 @@
+<div class="navbar navbar-light" style="background-color: #ffc107;">
+    <div class="container-fluid">
+        <a class="navbar-brand" href="">MonkeyFinderHybrid</a>
+    </div>
+</div>
+
+<input type="checkbox" title="Navigation menu" class="navbar-toggler" />
+
+<div class="nav-scrollable" onclick="document.querySelector('.navbar-toggler').click()">
+    <nav class="flex-column">
+        <div class="nav-item px-3">
+            <NavLink class="nav-link" href="" Match="NavLinkMatch.All">
+                <span class="bi bi-house-door-fill-nav-menu" aria-hidden="true"></span> Monkeys
+            </NavLink>
+        </div>
+        <div class="nav-item px-3">
+            <NavLink class="nav-link" href="options">
+                <span class="bi bi-plus-square-fill-nav-menu" aria-hidden="true"></span> Options
+            </NavLink>
+        </div>
+
+    </nav>
+</div>