ui tweaks, added settings skeleton

This commit is contained in:
Andy Pack 2023-01-25 21:04:39 +00:00
parent 6ae7994610
commit bb764f3461
Signed by: sarsoo
GPG Key ID: A55BA3536A5E0ED7
6 changed files with 20 additions and 69 deletions

View File

@ -4,9 +4,7 @@
@inject NowHubCache nowCache
@inject ILogger<Index> logger
<h1>Hello, world!</h1>
Welcome to your new app.
<h1>run that</h1>
@code {

View File

@ -0,0 +1,11 @@
@page "/settings"
<h1>Settings</h1>
@code {
protected async override Task OnInitializedAsync()
{
}
}

View File

@ -15,7 +15,7 @@
<a href="https://sarsoo.xyz/posts/selector/" class="dash-underline-lg link-dark" target="_blank">About</a>
</div>
<article class="content px-4">
<article class="content px-4 text-center">
@Body
</article>
</main>

View File

@ -19,6 +19,11 @@
<span class="oi oi-plus" 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>

View File

@ -14,7 +14,7 @@
}
</h6>
<div style="width: 100%">
<SpotifyLogo Link="@Track.ExternalUrls.FirstOrDefault(x => x.Key == "Spotify").Value" />
<SpotifyLogo Link="@Track.ExternalUrls?.FirstOrDefault(x => x.Key == "Spotify").Value" />
<img src="/live.gif" style="height: 20px; float: right">
</div>
</div>
@ -30,7 +30,7 @@ else if (Episode is not null) {
@Episode.Show.Publisher
</h6>
<div style="width: 100%">
<SpotifyLogo Link="@Episode.ExternalUrls.FirstOrDefault(x => x.Key == "Spotify").Value" />
<SpotifyLogo Link="@Episode.ExternalUrls?.FirstOrDefault(x => x.Key == "Spotify").Value" />
<img src="/live.gif" style="height: 20px; float: right">
</div>
</div>

View File

@ -1,63 +0,0 @@
.navbar-toggler {
background-color: rgba(255, 255, 255, 0.1);
}
.top-row {
height: 3.5rem;
background-color: rgba(0,0,0,0.4);
}
.navbar-brand {
font-size: 1.1rem;
}
.oi {
width: 2rem;
font-size: 1.1rem;
vertical-align: text-top;
top: -2px;
}
.nav-item {
font-size: 0.9rem;
padding-bottom: 0.5rem;
}
.nav-item:first-of-type {
padding-top: 1rem;
}
.nav-item:last-of-type {
padding-bottom: 1rem;
}
.nav-item ::deep a {
color: #d7d7d7;
border-radius: 4px;
height: 3rem;
display: flex;
align-items: center;
line-height: 3rem;
}
.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;
}
@media (min-width: 641px) {
.navbar-toggler {
display: none;
}
.collapse {
/* Never collapse the sidebar for wide screens */
display: block;
}
}