death.au/Neighbourhood.omg.lol
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

Fixes, adjustments and tidy up

Browse source
This commit is contained in:
Gordon Pedersen 2024-06-14 10:45:31 +10:00
parent 8c8634f3c3
commit 2c38dc2733
12 changed files with 190 additions and 215 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

78
Components/Layout/AvatarMenu.razor Normal file
View file

@ -0,0 +1,78 @@
@inject CustomAuthenticationStateProvider AuthStateProvider;
@inject State State;
<AuthorizeView>
<Authorized>
<NavLink>
<button class="transparent circle small large">
<img class="responsive avatar" src="https://profiles.cache.lol/@State.SelectedAddressName/picture" alt="@State.SelectedAddressName">
<menu class="no-wrap">
@foreach (AddressResponseData address in State.AddressList ?? new List<AddressResponseData>()) {
<a class="m s row">
<i class="emoji medium" data-emoji="👋">👋</i>
<span>Hey, @State.Name.</span>
</a>
<a class="row @(address == State.SelectedAddress ? "active" : "")" @onclick="() => changeAddress(address)">
<img class="tiny circle avatar" src="https://profiles.cache.lol/@address.Address/picture" alt="@address.Address" />
<span class="address"><i class="fa-solid fa-fw fa-at tiny"></i>@address.Address</span>
</a>
if (address.Address == State.SelectedAddressName) {
<a class="indent row" href="/person/@State.SelectedAddressName#profile">
<i class="fa-solid fa-id-card"></i>
<span>Profile</span>
</a>
<a class="indent row" href="/person/@State.SelectedAddressName#statuses">
<i class="fa-solid fa-message-smile"></i>
<span>Statuslog</span>
</a>
<a class="indent row" href="/person/@State.SelectedAddressName#pics">
<i class="fa-solid fa-images"></i>
<span>Pics</span>
</a>
<a class="indent row" href="/person/@State.SelectedAddressName#now">
<i class="fa-duotone fa-seedling"></i>
<span>/Now</span>
</a>
}
}
<a class="row" @onclick='() => AuthStateProvider.Logout()'>
<i class="fa-solid fa-door-open"></i>
<span>Logout</span>
</a>
</menu>
</button>
<small class="s m address"><i class="fa-solid fa-fw fa-at tiny"></i>@State.SelectedAddressName</small>
</NavLink>
<div class="l">
Hey, @State.Name. <br />
<a class="address" href="/person/@State.SelectedAddressName"><i class="fa-solid fa-fw fa-at tiny"></i>@State.SelectedAddressName</a>
</div>
</Authorized>
<NotAuthorized>
<NavLink>
<button class="transparent square large">
<img class="responsive" src="/img/prami-neighbourhood.svg">
<menu class="no-wrap">
<a class="m s row">
<i class="emoji medium" data-emoji="👋">👋</i>
<span>Hey there.</span>
</a>
<a class="row" href="/login">
<i class="fa-solid fa-door-closed"></i>
<span>Login</span>
</a>
</menu>
</button>
<small class="s m address">Omg.lol</small>
</NavLink>
<div class="l">
Hey there. <br />
<a href="/login">Login?</a>
</div>
</NotAuthorized>
</AuthorizeView>
@code {
public void changeAddress(AddressResponseData address) {
State.SelectedAddress = address;
}
}

16
Components/Layout/NavLinks.razor Normal file
View file

@ -0,0 +1,16 @@
<NavLink class="nav-link" href="/statuslog/latest">
<i class="square fa-solid fa-message-smile"></i>
<div class="label">Status.lol</div>
</NavLink>
<NavLink class="nav-link" href="/pics">
<i class="square fa-solid fa-images"></i>
<div class="label">Some.pics</div>
</NavLink>
<NavLink class="nav-link" href="/ephemeral">
<i class="square fa-light fa-comment-dots"></i>
<div class="label">Eph.emer.al</div>
</NavLink>
<NavLink class="nav-link" href="/now">
<i class="square fa-duotone fa-seedling"></i>
<div class="label">Now.garden</div>
</NavLink>

186
Components/Layout/NavMenu.razor
View file

@ -1,188 +1,14 @@
@inject CustomAuthenticationStateProvider AuthStateProvider; <nav class="left drawer l">
@inject State State;
<nav class="left drawer l">
<header> <header>
<nav> <nav>
<AuthorizeView> <AvatarMenu></AvatarMenu>
<Authorized>
<button class="transparent circle large">
<img class="responsive avatar" src="https://profiles.cache.lol/@State.SelectedAddressName/picture" alt="@State.SelectedAddressName">
<menu class="no-wrap">
@foreach (AddressResponseData address in State.AddressList ?? new List<AddressResponseData>()) {
<a class="row @(address == State.SelectedAddress ? "active" : "")" @onclick="() => changeAddress(address)">
<img class="tiny circle avatar" src="https://profiles.cache.lol/@address.Address/picture" alt="@address.Address" />
<span class="address"><i class="fa-solid fa-fw fa-at tiny"></i>@address.Address</span>
</a>
}
<a class="row" @onclick='() => AuthStateProvider.Logout()'>
<i class="fa-solid fa-door-open"></i>
<span>Logout</span>
</a>
</menu>
</button>
<div>
Hey, @State.Name. <br />
<a class="address" href="/person/@State.SelectedAddressName"><i class="fa-solid fa-fw fa-at tiny"></i>@State.SelectedAddressName</a>
</div>
</Authorized>
<NotAuthorized>
<button class="transparent square large">
<img class="responsive" src="/img/prami-neighbourhood.svg">
<menu class="no-wrap">
<a class="row" href="/login">
<i class="fa-solid fa-door-closed"></i>
<span>Login</span>
</a>
</menu>
</button>
<div>
Hey there. <br />
<a href="/login">Login?</a>
</div>
</NotAuthorized>
</AuthorizeView>
</nav> </nav>
</header> </header>
<NavLink class="row nav-link" href="/statuslog/latest"> <NavLinks></NavLinks>
<i class="fa-solid fa-message-smile"></i>
<div>Status.lol</div>
</NavLink>
<NavLink class="row nav-link" href="/pics">
<i class="fa-solid fa-images"></i>
<div>Some.pics</div>
</NavLink>
<NavLink class="row nav-link" href="/ephemeral">
<i class="fa-light fa-comment-dots"></i>
<div>Eph.emer.al</div>
</NavLink>
<NavLink class="row nav-link" href="/now">
<i class="fa-duotone fa-seedling"></i>
<div>Now.garden</div>
</NavLink>
</nav> </nav>
<nav class="left m"> <nav class="bottom m s scroll">
<header> <NavLinks></NavLinks>
<AuthorizeView> <AvatarMenu></AvatarMenu>
<Authorized>
<button class="transparent circle">
<img class="responsive" src="https://profiles.cache.lol/@State.SelectedAddressName/picture" alt="@State.SelectedAddressName">
<menu class="no-wrap">
<a class="row">
<img class="tiny" data-emoji="👋">
<span>Hey, @State.Name.</span>
</a>
@foreach (AddressResponseData address in State.AddressList ?? new List<AddressResponseData>()) {
<a class="row @(address == State.SelectedAddress ? "active" : "")" @onclick="() => changeAddress(address)">
<img class="tiny circle" src="https://profiles.cache.lol/@address.Address/picture" alt="@address.Address">
<span class="address"><i class="fa-solid fa-fw fa-at tiny"></i>@address.Address</span>
</a>
}
<a class="row" @onclick='() => AuthStateProvider.Logout()'>
<i class="fa-solid fa-door-open"></i>
<span>Logout</span>
</a>
</menu>
</button>
</Authorized>
<NotAuthorized>
<button class="transparent square">
<img class="responsive" src="/img/prami-neighbourhood.svg">
<menu class="no-wrap">
<a class="row">
<i class="medium" data-emoji="👋"></i>
<span>Hey there.</span>
</a>
<a class="row" href="/login">
<i class="fa-solid fa-door-closed"></i>
<span>Login</span>
</a>
</menu>
</button>
</NotAuthorized>
</AuthorizeView>
</header>
<NavLink class="nav-link" href="/statuslog/latest">
<i class="fa-solid fa-message-smile"></i>
<small>Status.lol</small>
</NavLink>
<NavLink class="nav-link" href="/pics">
<i class="fa-solid fa-image"></i>
<small>Some.pics</small>
</NavLink>
<NavLink class="nav-link" href="/ephemeral">
<i class="fa-light fa-comment-dots"></i>
<small>Eph.emer.al</small>
</NavLink>
<NavLink class="nav-link" href="/now">
<i class="fa-duotone fa-seedling"></i>
<small>Now.garden</small>
</NavLink>
</nav> </nav>
<nav class="bottom s">
<NavLink class="nav-link" href="/statuslog/latest">
<i class="fa-solid fa-message-smile"></i>
<small>Status.lol</small>
</NavLink>
<NavLink class="nav-link" href="/pics">
<i class="fa-solid fa-image"></i>
<small>Some.pics</small>
</NavLink>
<NavLink class="nav-link" href="/ephemeral">
<i class="fa-light fa-comment-dots"></i>
<small>Eph.emer.al</small>
</NavLink>
<NavLink class="nav-link" href="/now">
<i class="fa-duotone fa-seedling"></i>
<small>Now.garden</small>
</NavLink>
<AuthorizeView>
<Authorized>
<NavLink>
<button class="transparent circle small">
<img class="responsive" src="https://profiles.cache.lol/@State.SelectedAddressName/picture" alt="@State.SelectedAddressName">
<menu>
<a class="row">
<img class="tiny" data-emoji="👋">
<span>Hey, @State.Name.</span>
</a>
@foreach (AddressResponseData address in State.AddressList ?? new List<AddressResponseData>()) {
<a class="row @(address == State.SelectedAddress ? "active" : "")" @onclick="() => changeAddress(address)">
<img class="tiny circle" src="https://profiles.cache.lol/@address.Address/picture" alt="@address.Address">
<span class="address"><i class="fa-solid fa-fw fa-at tiny"></i>@address.Address</span>
</a>
}
<a class="row" @onclick='() => AuthStateProvider.Logout()'>
<i class="fa-solid fa-door-open"></i>
<span>Logout</span>
</a>
</menu>
</button>
<small class="address"><i class="fa-solid fa-fw fa-at tiny"></i>@State.SelectedAddressName</small>
</NavLink>
</Authorized>
<NotAuthorized>
<button class="transparent square">
<img class="responsive" src="/img/prami-neighbourhood.svg">
<menu>
<a class="row">
<i class="medium" data-emoji="👋"></i>
<span>Hey there.</span>
</a>
<a class="row" href="/login">
<i class="fa-solid fa-door-closed"></i>
<span>Login</span>
</a>
</menu>
</button>
</NotAuthorized>
</AuthorizeView>
</nav>
@code {
public void changeAddress(AddressResponseData address) {
State.SelectedAddress = address;
}
}

2
Components/PageHeading.razor
View file

@ -9,7 +9,7 @@
<div class="row center-align"> <div class="row center-align">
<p>@Description</p> <p>@Description</p>
</div> </div>
<div class="space"></div> <div class="space margin"></div>
@code { @code {
[Parameter] [Parameter]

7
Components/Pages/Home.razor
View file

@ -1,7 +0,0 @@
@page "/"
@inject CustomAuthenticationStateProvider AuthStateProvider;
<h1><i data-emoji="👋"></i> Hello, lol!</h1>
<a @onclick='() => AuthStateProvider.Logout()'>Logout</a>
Welcome to your new app.

14
Components/Pages/Person.razor
View file

@ -12,7 +12,7 @@
</div> </div>
<div class="responsive"> <div class="responsive">
<div class="tabs"> <div class="tabs scroll">
<a data-ui="#profile" @onclick="ReloadProfile"> <a data-ui="#profile" @onclick="ReloadProfile">
<i class="fa-solid fa-id-card"></i> <i class="fa-solid fa-id-card"></i>
<span>@(Address).omg.lol</span> <span>@(Address).omg.lol</span>
@ -52,10 +52,22 @@
</article> </article>
</div> </div>
<StatusList @ref="StatusList" StatusFunc="@(async() => await State.GetStatuses(Address))" Editable="@Editable"></StatusList> <StatusList @ref="StatusList" StatusFunc="@(async() => await State.GetStatuses(Address))" Editable="@Editable"></StatusList>
@if(Address == State.SelectedAddressName) {
<button class="fab circle extra large-elevate" data-ui="#post-modal">
<i class="fa-solid fa-pen-to-square"></i>
</button>
<NewStatusDialog id="post-modal"></NewStatusDialog>
}
</div> </div>
<div id="pics" class="page padding"> <div id="pics" class="page padding">
<PicList @ref="PicList" PicsFunc="@(async() => await State.GetPics(Address))" Editable="@Editable"></PicList> <PicList @ref="PicList" PicsFunc="@(async() => await State.GetPics(Address))" Editable="@Editable"></PicList>
@if (Address == State.SelectedAddressName) {
<button class="fab circle extra large-elevate" data-ui="#post-modal">
<i class="fa-solid fa-camera-retro"></i>
</button>
<NewPicDialog id="post-modal"></NewPicDialog>
}
</div> </div>
@if(now != null){ @if(now != null){
<div id="now" class="page no-padding"> <div id="now" class="page no-padding">

3
Components/Pages/StatuslogLatest.razor
View file

@ -1,4 +1,5 @@
@page "/statuslog/latest" @page "/"
@page "/statuslog/latest"
@inject State State @inject State State
<PageHeading title="Status.lol" icon="fa-solid fa-message-smile"> <PageHeading title="Status.lol" icon="fa-solid fa-message-smile">

20
Components/StatusCard.razor
View file

@ -1,12 +1,23 @@
@inject IJSRuntime JS @inject IJSRuntime JS
<article class="status gray-9-fg" style="background-color:@Status.Background"> <article class="status gray-9-fg" style="background-color:@(Status.Background)">
<div class="row"> <div class="row">
<div class="emoji" data-emoji="@Status.EmojiOrDefault">@Status.EmojiOrDefault</div> <div class="emoji" data-emoji="@Status.EmojiOrDefault">@Status.EmojiOrDefault</div>
<div class="max"> <div class="max">
<div class="row">
<a class="author" href="/person/@Status.Address"> <a class="author" href="/person/@Status.Address">
<i class="fa-solid fa-fw fa-at"></i>@Status.Address <i class="fa-solid fa-fw fa-at"></i>@Status.Address
</a> </a>
<div class="max"></div>
<button class="transparent circle" @onclick="ShareClick">
<i class="fa-solid fa-share-nodes"></i>
</button>
@if (Editable) {
<button class="small circle small-elevate" @onclick="EditStatus">
<i class="fa-solid fa-pencil"></i>
</button>
}
</div>
@Status.HtmlContent @Status.HtmlContent
<nav class="no-margin"> <nav class="no-margin">
<a class="chip transparent-border"> <a class="chip transparent-border">
@ -15,13 +26,6 @@
<a class="chip transparent-border" href="@Status.ExternalUrl" target="_blank"> <a class="chip transparent-border" href="@Status.ExternalUrl" target="_blank">
<i class="fa fa-message-dots"></i> Respond <i class="fa fa-message-dots"></i> Respond
</a> </a>
<div class="max"></div>
@if (Editable) {
<button @onclick="EditStatus"><i class="fa-solid fa-pencil"></i> Edit</button>
}
<button class="transparent circle" @onclick="ShareClick">
<i class="fa-solid fa-share-nodes"></i>
</button>
</nav> </nav>
</div> </div>
</div> </div>

5
MainPage.xaml.cs
View file

@ -16,10 +16,5 @@ namespace Neighbourhood.omg.lol {
Shell.Current.GoToAsync(nameof(LoginWebViewPage)); Shell.Current.GoToAsync(nameof(LoginWebViewPage));
} }
} }
protected override void OnAppearing() {
base.OnAppearing();
Debug.WriteLine("And now you're back. From outer space.");
}
} }
} }

1
Models/Status.cs
View file

@ -9,6 +9,7 @@ namespace Neighbourhood.omg.lol.Models {
public string RelativeTime { get; set; } public string RelativeTime { get; set; }
public string Emoji { get; set; } public string Emoji { get; set; }
public string Background { get; set; } public string Background { get; set; }
public string BackgroundColor { get => Background; set => Background = "#" + value; }
public string Content { get; set; } public string Content { get; set; }
public string RenderedMarkdown { get; set; } public string RenderedMarkdown { get; set; }
public string ExternalUrl { get; set; } public string ExternalUrl { get; set; }

4
Platforms/Android/AndroidManifest.xml
View file

@ -1,6 +1,6 @@
<?xml version="1.0" encoding="utf-8"?> <?xml version="1.0" encoding="utf-8"?>
<manifest xmlns:android="http://schemas.android.com/apk/res/android"> <manifest xmlns:android="http://schemas.android.com/apk/res/android" package="au.death.lol.omg.neighbourhood" android:versionCode="1" android:versionName="1.0.0">
<application android:allowBackup="true" android:icon="@mipmap/appicon" android:roundIcon="@mipmap/appicon_round" android:supportsRtl="true"></application> <application android:allowBackup="true" android:icon="@mipmap/icon_background" android:supportsRtl="true" android:label="Neighbourhood.omg.lol"></application>
<uses-permission android:name="android.permission.ACCESS_NETWORK_STATE" /> <uses-permission android:name="android.permission.ACCESS_NETWORK_STATE" />
<uses-permission android:name="android.permission.INTERNET" /> <uses-permission android:name="android.permission.INTERNET" />
</manifest> </manifest>

55
wwwroot/css/style.css
View file

@ -91,7 +91,7 @@ img {
text-indent: -10px; text-indent: -10px;
} }
#status-emoji { .status .emoji, #status-emoji {
margin-bottom: auto; margin-bottom: auto;
inline-size: 3.5rem; inline-size: 3.5rem;
block-size: 3.5rem; block-size: 3.5rem;
@ -299,7 +299,7 @@ article.ephemeral {
flex-shrink: 1; flex-shrink: 1;
} }
.page-container > .page { .page-container > .page.active {
display:flex; display:flex;
flex-direction:column; flex-direction:column;
flex-grow: 1; flex-grow: 1;
@ -327,7 +327,9 @@ main, .page-container {
} }
main { main {
overflow: hidden; overflow-x: hidden;
overflow-y: auto;
} }
.hover { .hover {
@ -347,3 +349,50 @@ main {
.fa-images { color: var(--yellow-6) !important; } .fa-images { color: var(--yellow-6) !important; }
.fa-id-card { color: var(--pink-4) !important; } .fa-id-card { color: var(--pink-4) !important; }
.fa-comment-dots { color: var(--gray-6) !important; } .fa-comment-dots { color: var(--gray-6) !important; }
nav.bottom.s :is(small, .label) {
font-size: 0.75rem;
}
i.tiny {
---size: 1em;
}
.row p {
white-space: normal;
max-width: 100%;
}
a.row.indent {
margin-left: 1rem;
border-left: 1px solid var(--outline);
}
:is(.circle,.square).large.small:not(i,img,video,svg) {
block-size: 2rem;
inline-size: 2rem;
}
:is(button,.button,.chip).large.small > .responsive {
inline-size: 2rem;
}
/* s */
@media only screen and (max-width: 600px) {
}
/* m */
@media only screen and (min-width: 601px) and (max-width: 992px) {
}
/* l */
@media only screen and (min-width: 993px) {
:is(.circle,.square).large.small:not(i,img,video,svg) {
block-size: 3rem;
inline-size: 3rem;
}
:is(button,.button,.chip).large.small > .responsive {
inline-size: 3rem;
}
}