Skip to content

Enhance layout and styling for Monkey application #6

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
wants to merge 2 commits into
base: main
Choose a base branch
from
Open

Enhance layout and styling for Monkey application #6

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
e0f9f16
Enhance layout and styling for Monkey application
mobiletonster May 20, 2025
912bbed
Refactor navigation and add offline handling
mobiletonster May 21, 2025
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
2 changes: 1 addition & 1 deletion 1-Overview/MyHybridApp/MyHybridApp.Shared/Layout/MainLayout.razor
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -6,7 +6,7 @@
</div>

<main>
<div class="top-row px-4">
<div class="top-row px-4 nav-header">
<a href="https://learn.microsoft.com/aspnet/core/" target="_blank">About</a>
</div>

Expand Down
19 changes: 18 additions & 1 deletion 1-Overview/MyHybridApp/MyHybridApp.Shared/wwwroot/app.css
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,9 +1,26 @@
html, body {
font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
background-image: linear-gradient(120deg, #d4fc79 0%, #96e6a1 100%);
color:#536b1c
}

.nav-header {
background-image: linear-gradient(120deg, #d4fc79 0%, #96e6a1 100%);
box-shadow:0px 5px 10px rgba(0,0,0,0.2)

}

.monkey {
background-color: #daefe6;
border-radius: 0.4em;
box-shadow: 4px 4px 10px rgba(0, 0, 0, 0.3);
margin:0.4em;
color:#607069
}


a, .btn-link {
color: #006bb7;
color: #536b1c;
}

.btn-primary {
Expand Down
2 changes: 1 addition & 1 deletion 2-Data/MyHybridApp/MyHybridApp.Shared/Layout/MainLayout.razor
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -6,7 +6,7 @@
</div>

<main>
<div class="top-row px-4">
<div class="top-row px-4 nav-header">
<a href="https://learn.microsoft.com/aspnet/core/" target="_blank">About</a>
</div>

Expand Down
19 changes: 18 additions & 1 deletion 2-Data/MyHybridApp/MyHybridApp.Shared/wwwroot/app.css
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,9 +1,26 @@
html, body {
font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
background-image: linear-gradient(120deg, #d4fc79 0%, #96e6a1 100%);
color:#536b1c
}

.nav-header {
background-image: linear-gradient(120deg, #d4fc79 0%, #96e6a1 100%);
box-shadow:0px 5px 10px rgba(0,0,0,0.2)

}

.monkey {
background-color: #daefe6;
border-radius: 0.4em;
box-shadow: 4px 4px 10px rgba(0, 0, 0, 0.3);
margin:0.4em;
color:#607069
}


a, .btn-link {
color: #006bb7;
color: #536b1c;
}

.btn-primary {
Expand Down
2 changes: 1 addition & 1 deletion 3-UI/MyHybridApp/MyHybridApp.Shared/Layout/MainLayout.razor
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -6,7 +6,7 @@
</div>

<main>
<div class="top-row px-4">
<div class="top-row px-4 nav-header">
<a href="https://learn.microsoft.com/aspnet/core/" target="_blank">About</a>
</div>

Expand Down
8 changes: 7 additions & 1 deletion 3-UI/MyHybridApp/MyHybridApp.Shared/Pages/MonkeyDetails.razor
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -3,12 +3,18 @@
@page "/details/{name}"
@inject IMonkeyService MonkeyService

<a href="/monkeys" style="text-decoration:none;">
<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-arrow-left-circle-fill" viewBox="0 0 16 16">
<path d="M8 0a8 8 0 1 0 0 16A8 8 0 0 0 8 0m3.5 7.5a.5.5 0 0 1 0 1H5.707l2.147 2.146a.5.5 0 0 1-.708.708l-3-3a.5.5 0 0 1 0-.708l3-3a.5.5 0 1 1 .708.708L5.707 7.5z" />
</svg> Back
</a>

<h1>@monkey?.Name</h1>

@if (monkey != null)
{
<div class="col-lg-6">
<div class="card">
<div class="card monkey">
<img src="@monkey.Image" class="card-img-top" alt="@monkey.Name" />
<div class="card-body">
<h5 class="card-title">@monkey.Name</h5>
Expand Down
3 changes: 2 additions & 1 deletion 3-UI/MyHybridApp/MyHybridApp.Shared/Pages/Monkeys.razor
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -19,7 +19,7 @@ else
@foreach (var monkey in monkeys)
{
<div class="col-md-4">
<div class="card">
<div class="card monkey">
<img src="@monkey.Image" class="card-img-top" alt="@monkey.Name" />
<div class="card-body">
<h5 class="card-title">@monkey.Name</h5>
Expand All @@ -38,4 +38,5 @@ else
{
monkeys = await MonkeyService.GetMonkeysAsync();
}

}
19 changes: 18 additions & 1 deletion 3-UI/MyHybridApp/MyHybridApp.Shared/wwwroot/app.css
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,9 +1,26 @@
html, body {
font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
background-image: linear-gradient(120deg, #d4fc79 0%, #96e6a1 100%);
color:#536b1c
}

.nav-header {
background-image: linear-gradient(120deg, #d4fc79 0%, #96e6a1 100%);
box-shadow:0px 5px 10px rgba(0,0,0,0.2)

}

.monkey {
background-color: #daefe6;
border-radius: 0.4em;
box-shadow: 4px 4px 10px rgba(0, 0, 0, 0.3);
margin:0.4em;
color:#607069
}


a, .btn-link {
color: #006bb7;
color: #536b1c;
}

.btn-primary {
Expand Down
10 changes: 8 additions & 2 deletions 3-UI/README.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -32,7 +32,7 @@ else
@foreach (var monkey in monkeys)
{
<div class="col-md-4">
<div class="card">
<div class="card monkey">
<img src="@monkey.Image" class="card-img-top" alt="@monkey.Name" />
<div class="card-body">
<h5 class="card-title">@monkey.Name</h5>
Expand Down Expand Up @@ -83,12 +83,18 @@ This page will display detailed information about a selected monkey. The route f
@page "/details/{name}"
@inject IMonkeyService MonkeyService

<a href="/monkeys" style="text-decoration:none;">
<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-arrow-left-circle-fill" viewBox="0 0 16 16">
<path d="M8 0a8 8 0 1 0 0 16A8 8 0 0 0 8 0m3.5 7.5a.5.5 0 0 1 0 1H5.707l2.147 2.146a.5.5 0 0 1-.708.708l-3-3a.5.5 0 0 1 0-.708l3-3a.5.5 0 1 1 .708.708L5.707 7.5z" />
</svg> Back
</a>

<h1>@monkey?.Name</h1>

@if (monkey != null)
{
<div class="col-lg-6">
<div class="card">
<div class="card monkey">
<img src="@monkey.Image" class="card-img-top" alt="@monkey.Name" />
<div class="card-body">
<h5 class="card-title">@monkey.Name</h5>
Expand Down
2 changes: 1 addition & 1 deletion 4-Platform/MyHybridApp/MyHybridApp.Shared/Layout/MainLayout.razor
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -6,7 +6,7 @@
</div>

<main>
<div class="top-row px-4">
<div class="top-row px-4 nav-header">
<a href="https://learn.microsoft.com/aspnet/core/" target="_blank">About</a>
</div>

Expand Down
8 changes: 7 additions & 1 deletion 4-Platform/MyHybridApp/MyHybridApp.Shared/Pages/MonkeyDetails.razor
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -3,12 +3,18 @@
@page "/details/{name}"
@inject IMonkeyService MonkeyService

<a href="/monkeys" style="text-decoration:none;">
<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-arrow-left-circle-fill" viewBox="0 0 16 16">
<path d="M8 0a8 8 0 1 0 0 16A8 8 0 0 0 8 0m3.5 7.5a.5.5 0 0 1 0 1H5.707l2.147 2.146a.5.5 0 0 1-.708.708l-3-3a.5.5 0 0 1 0-.708l3-3a.5.5 0 1 1 .708.708L5.707 7.5z" />
</svg> Back
</a>

<h1>@monkey?.Name</h1>

@if (monkey != null)
{
<div class="col-lg-6">
<div class="card">
<div class="card monkey">
<img src="@monkey.Image" class="card-img-top" alt="@monkey.Name" />
<div class="card-body">
<h5 class="card-title">@monkey.Name</h5>
Expand Down
4 changes: 2 additions & 2 deletions 4-Platform/MyHybridApp/MyHybridApp.Shared/Pages/Monkeys.razor
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,6 +1,5 @@
@using MyHybridApp.Shared.Services
@using MyHybridApp.Shared.Models
@using MyHybridApp.Shared.Components
@page "/monkeys"
@inject IMonkeyService MonkeyService
@inject NavigationManager NavigationManager
Expand All @@ -23,7 +22,7 @@ else
@foreach (var monkey in monkeys)
{
<div class="col-md-4">
<div class="card">
<div class="card monkey">
<img src="@monkey.Image" class="card-img-top" alt="@monkey.Name" />
<div class="card-body">
<h5 class="card-title">@monkey.Name</h5>
Expand All @@ -42,6 +41,7 @@ else
{
monkeys = await MonkeyService.GetMonkeysAsync();
}

async Task RefreshHandler()
{
monkeys = await MonkeyService.GetMonkeysAsync(); //try to get the monkeys again
Expand Down
19 changes: 18 additions & 1 deletion 4-Platform/MyHybridApp/MyHybridApp.Shared/wwwroot/app.css
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,9 +1,26 @@
html, body {
font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
background-image: linear-gradient(120deg, #d4fc79 0%, #96e6a1 100%);
color:#536b1c
}

.nav-header {
background-image: linear-gradient(120deg, #d4fc79 0%, #96e6a1 100%);
box-shadow:0px 5px 10px rgba(0,0,0,0.2)

}

.monkey {
background-color: #daefe6;
border-radius: 0.4em;
box-shadow: 4px 4px 10px rgba(0, 0, 0, 0.3);
margin:0.4em;
color:#607069
}


a, .btn-link {
color: #006bb7;
color: #536b1c;
}

.btn-primary {
Expand Down
2 changes: 1 addition & 1 deletion Finish/MyHybridApp/MyHybridApp.Shared/Layout/MainLayout.razor
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -6,7 +6,7 @@
</div>

<main>
<div class="top-row px-4">
<div class="top-row px-4 nav-header">
<a href="https://learn.microsoft.com/aspnet/core/" target="_blank">About</a>
</div>

Expand Down
8 changes: 7 additions & 1 deletion Finish/MyHybridApp/MyHybridApp.Shared/Pages/MonkeyDetails.razor
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -3,12 +3,18 @@
@page "/details/{name}"
@inject IMonkeyService MonkeyService

<a href="/monkeys" style="text-decoration:none;">
<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-arrow-left-circle-fill" viewBox="0 0 16 16">
<path d="M8 0a8 8 0 1 0 0 16A8 8 0 0 0 8 0m3.5 7.5a.5.5 0 0 1 0 1H5.707l2.147 2.146a.5.5 0 0 1-.708.708l-3-3a.5.5 0 0 1 0-.708l3-3a.5.5 0 1 1 .708.708L5.707 7.5z" />
</svg> Back
</a>

<h1>@monkey?.Name</h1>

@if (monkey != null)
{
<div class="col-lg-6">
<div class="card">
<div class="card monkey">
<img src="@monkey.Image" class="card-img-top" alt="@monkey.Name" />
<div class="card-body">
<h5 class="card-title">@monkey.Name</h5>
Expand Down
3 changes: 1 addition & 2 deletions Finish/MyHybridApp/MyHybridApp.Shared/Pages/Monkeys.razor
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,6 +1,5 @@
@using MyHybridApp.Shared.Services
@using MyHybridApp.Shared.Models
@using MyHybridApp.Shared.Components
@page "/monkeys"
@inject IMonkeyService MonkeyService
@inject NavigationManager NavigationManager
Expand All @@ -23,7 +22,7 @@ else
@foreach (var monkey in monkeys)
{
<div class="col-md-4">
<div class="card">
<div class="card monkey">
<img src="@monkey.Image" class="card-img-top" alt="@monkey.Name" />
<div class="card-body">
<h5 class="card-title">@monkey.Name</h5>
Expand Down
19 changes: 18 additions & 1 deletion Finish/MyHybridApp/MyHybridApp.Shared/wwwroot/app.css
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,9 +1,26 @@
html, body {
font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
background-image: linear-gradient(120deg, #d4fc79 0%, #96e6a1 100%);
color:#536b1c
}

.nav-header {
background-image: linear-gradient(120deg, #d4fc79 0%, #96e6a1 100%);
box-shadow:0px 5px 10px rgba(0,0,0,0.2)

}

.monkey {
background-color: #daefe6;
border-radius: 0.4em;
box-shadow: 4px 4px 10px rgba(0, 0, 0, 0.3);
margin:0.4em;
color:#607069
}


a, .btn-link {
color: #006bb7;
color: #536b1c;
}

.btn-primary {
Expand Down