notfire/Iceshrimp.NET
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

[frontend] VirtualScroller: CSS and layout fixes

Browse source
This commit is contained in:
Lilian 2024-06-20 20:03:28 +02:00 • committed by Laura Hausmann
parent 54ff8efa1f
commit 7181f9301b
No known key found for this signature in database
GPG key ID: D044E84C5BE01605
2 changed files with 18 additions and 10 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

20
Iceshrimp.Frontend/Components/VirtualScroller.razor
View file

@ -29,7 +29,12 @@
Loading! Loading!
</div> </div>
} }
<div @ref="@_padBotRef" class="padding bottom" style="height: @(State.PadBottom + "px")"></div> else
{
<div class="target"><span>The end!<button @onclick="Down">Load more!</button></span></div>
}
<div @ref="@_padBotRef" class="padding bottom" style="height: @(State.PadBottom + "px")">
</div>
</div> </div>
@code { @code {
@ -77,7 +82,7 @@
loadingBottom = false; loadingBottom = false;
StateHasChanged(); StateHasChanged();
} }
private async Task LoadNewer() private async Task LoadNewer()
{ {
_loadingTop = true; _loadingTop = true;
@ -99,7 +104,7 @@
for (int i = 0; i < amount; i++) for (int i = 0; i < amount; i++)
{ {
var height = await Module.InvokeAsync<int>("GetHeight", _refs[i]); var height = await Module.InvokeAsync<int>("GetHeight", _refs[i]);
State.PadTop += height; State.PadTop += height;
State.Height[State.RenderedList[i].Id] = height; State.Height[State.RenderedList[i].Id] = height;
} }
@ -147,7 +152,7 @@
for (int i = 0; i < UpdateCount; i++) for (int i = 0; i < UpdateCount; i++)
{ {
var height = await Module.InvokeAsync<int>("GetHeight", _refs[i]); var height = await Module.InvokeAsync<int>("GetHeight", _refs[i]);
State.PadBottom += height; State.PadBottom += height;
State.Height[State.RenderedList[i].Id] = height; State.Height[State.RenderedList[i].Id] = height;
} }
@ -170,10 +175,7 @@
private async Task SetupObservers() private async Task SetupObservers()
{ {
// Enabling root margin causes erratic virtual scroller behavior, i've not figured out why // Enabling root margin causes erratic virtual scroller behavior, i've not figured out why
var options = new IntersectionObserverOptions var options = new IntersectionObserverOptions { RootMargin = "100%" };
{
RootMargin = "100%"
};
OvrscrlObsvTop = await ObserverService.Create(OverscrollCallbackTop); OvrscrlObsvTop = await ObserverService.Create(OverscrollCallbackTop);
OvrscrlObsvBottom = await ObserverService.Create(OverscrollCallbackBottom); OvrscrlObsvBottom = await ObserverService.Create(OverscrollCallbackBottom);
@ -236,7 +238,7 @@
protected override void OnInitialized() protected override void OnInitialized()
{ {
try try
{ {
var virtualScrollerState = StateService.VirtualScroller.GetState("home"); var virtualScrollerState = StateService.VirtualScroller.GetState("home");
State = virtualScrollerState; State = virtualScrollerState;

8
Iceshrimp.Frontend/Components/VirtualScroller.razor.css
View file

@ -1,10 +1,16 @@
.padding { .padding {
width: 1px; width: 1px;
min-height: 1px;
}
.bottom {
min-height: 1rem;
@media (max-width: 1000px){
min-height: 5rem;
}
} }
.scroller { .scroller {
display: flex; display: flex;
flex-direction: column; flex-direction: column;
overflow-y: scroll;
overflow-x: clip; overflow-x: clip;
width: 100%; width: 100%;
align-items: center; align-items: center;