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

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

@ -29,7 +29,12 @@
Loading!
</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>
@code {
@ -99,7 +104,7 @@
for (int i = 0; i < amount; i++)
{
var height = await Module.InvokeAsync<int>("GetHeight", _refs[i]);
State.PadTop += height;
State.PadTop += height;
State.Height[State.RenderedList[i].Id] = height;
}
@ -147,7 +152,7 @@
for (int i = 0; i < UpdateCount; i++)
{
var height = await Module.InvokeAsync<int>("GetHeight", _refs[i]);
State.PadBottom += height;
State.PadBottom += height;
State.Height[State.RenderedList[i].Id] = height;
}
@ -170,10 +175,7 @@
private async Task SetupObservers()
{
// Enabling root margin causes erratic virtual scroller behavior, i've not figured out why
var options = new IntersectionObserverOptions
{
RootMargin = "100%"
};
var options = new IntersectionObserverOptions { RootMargin = "100%" };
OvrscrlObsvTop = await ObserverService.Create(OverscrollCallbackTop);
OvrscrlObsvBottom = await ObserverService.Create(OverscrollCallbackBottom);

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

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