sarsoo/Selector
1
0
Fork 0
Code Issues 21 Pull Requests Actions Packages Projects Releases Wiki Activity

bottom menu bar, fixing links, fixing header colour

Browse Source
This commit is contained in:
Andy Pack 2023-01-26 21:54:09 +00:00
parent 84a32a5cb2
commit 66209b7ec3
Signed by: sarsoo
GPG Key ID: A55BA3536A5E0ED7
7 changed files with 71 additions and 42 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
Selector.MAUI/App.xaml
View File

@ -6,7 +6,7 @@
<Application.Resources>
<ResourceDictionary>
<Color x:Key="PageBackgroundColor">#512bdf</Color>
<Color x:Key="PageBackgroundColor">#2b2b2b</Color>
<Color x:Key="PrimaryTextColor">White</Color>
<Style TargetType="Label">

1
Selector.MAUI/Pages/Now.razor
View File

@ -12,6 +12,7 @@
<NowPlayingCard Track="@nowCache.LastPlaying?.Track" Episode="@nowCache.LastPlaying?.Episode" />
<PlayCountCard Track="@nowCache.LastPlaying?.Track" Count="@nowCache.LastPlayCount" Username="@nowCache.LastPlayCount?.Username" />
<div class="v-space"></div>
@code {
[Inject]

12
Selector.MAUI/Shared/MainLayout.razor
View File

@ -4,12 +4,6 @@
@inject SessionManager session
<div class="page">
@if (session.IsLoggedIn)
{
<div class="sidebar">
<NavMenu />
</div>
}
<main>
<div class="top-row px-4">
<a href="https://sarsoo.xyz/posts/selector/" class="dash-underline-lg link-dark" target="_blank">About</a>
@ -19,6 +13,12 @@
@Body
</article>
</main>
@if (session.IsLoggedIn)
{
<div class="sidebar">
<NavMenu />
</div>
}
</div>
@*<footer class="footer text-muted">

51
Selector.MAUI/Shared/NavMenu.razor
View File

@ -1,30 +1,33 @@
<div class="top-row ps-3 navbar navbar-dark">
<div class="container-fluid">
<a class="navbar-brand" href="">Selector</a>
<button title="Navigation menu" class="navbar-toggler" @onclick="ToggleNavMenu">
<span class="navbar-toggler-icon"></span>
</button>

<div class="bottom-bar">
<div class="@NavMenuCssClass" @onclick="ToggleNavMenu">
<nav class="flex-column menu-items">
<div class="nav-item px-3">
<NavLink class="nav-link" href="" Match="NavLinkMatch.All">
<span class="oi oi-home" aria-hidden="true"></span> Home
</NavLink>
</div>
<div class="nav-item px-3">
<NavLink class="nav-link" href="now">
<span class="oi oi-dashboard" aria-hidden="true"></span> Now
</NavLink>
</div>
<div class="nav-item px-3">
<NavLink class="nav-link" href="settings">
<span class="oi oi-cog" aria-hidden="true"></span> Settings
</NavLink>
</div>
</nav>
</div>
</div>
<div class="@NavMenuCssClass" @onclick="ToggleNavMenu">
<nav class="flex-column">
<div class="nav-item px-3">
<NavLink class="nav-link" href="" Match="NavLinkMatch.All">
<span class="oi oi-home" aria-hidden="true"></span> Home
</NavLink>
<div class="top-row ps-3 navbar navbar-dark">
<div class="container-fluid">
<a class="navbar-brand" href="">Selector</a>
<button title="Navigation menu" class="navbar-toggler" @onclick="ToggleNavMenu">
<span class="navbar-toggler-icon"></span>
</button>
</div>
<div class="nav-item px-3">
<NavLink class="nav-link" href="now">
<span class="oi oi-dashboard" aria-hidden="true"></span> Now
</NavLink>
</div>
<div class="nav-item px-3">
<NavLink class="nav-link" href="settings">
<span class="oi oi-cog" aria-hidden="true"></span> Settings
</NavLink>
</div>
</nav>
</div>
</div>
@code {

38
Selector.MAUI/Shared/NavMenu.razor.css
View File

@ -4,13 +4,17 @@
.top-row {
height: 3.5rem;
background-color: rgba(0,0,0,0.4);
background-color: rgba(0,0,0,1);
}
.navbar-brand {
font-size: 1.1rem;
}
.menu-items {
background-color: #3c3c3c;
}
.oi {
width: 2rem;
font-size: 1.1rem;
@ -18,6 +22,12 @@
top: -2px;
}
.bottom-bar {
position: fixed;
bottom: 0px;
width: 100%;
}
.nav-item {
font-size: 0.9rem;
padding-bottom: 0.5rem;
@ -40,21 +50,31 @@
line-height: 3rem;
}
.nav-item ::deep a.active {
background-color: rgba(255,255,255,0.25);
color: white;
}
.nav-item ::deep a.active {
background-color: rgba(255,255,255,0.25);
color: white;
}
.nav-item ::deep a:hover {
background-color: rgba(255,255,255,0.1);
color: white;
}
.nav-item ::deep a:hover {
background-color: rgba(255,255,255,0.1);
color: white;
}
@media (min-width: 641px) {
.navbar-toggler {
display: none;
}
.menu-items {
background-color: rgb(0, 0, 0, 0);
}
.bottom-bar {
position: static;
bottom: 0px;
width: 100%;
}
.collapse {
/* Never collapse the sidebar for wide screens */
display: block;

4
Selector.MAUI/Shared/PlayCountCard.razor
View File

@ -58,8 +58,8 @@
[Parameter]
public string Username { get; set; }
private string trackLink => $"https://www.last.fm/user/{Username}/library/music/{Track.Artists.First().Name}/_/${Track.Name}";
private string albumLink => $"https://www.last.fm/user/{Username}/library/music/{Track.Album.Artists.First().Name}/${Track.Album.Name}";
private string trackLink => $"https://www.last.fm/user/{Username}/library/music/{Track.Artists.First().Name}/_/{Track.Name}";
private string albumLink => $"https://www.last.fm/user/{Username}/library/music/{Track.Album.Artists.First().Name}/{Track.Album.Name}";
private string artistLink => $"https://www.last.fm/user/{Username}/library/music/{Track.Artists.First().Name}";
private string userLink => $"https://www.last.fm/user/{Username}";

5
Selector.MAUI/wwwroot/css/app.css
View File

@ -13,6 +13,11 @@ h1:focus {
outline: none;
}
.v-space {
height: 3.5rem;
display: block;
}
/*a, .btn-link {
color: #0071c1;
}*/