Rubicon/tutu
1
0
Fork 0
Code Issues 19 Pull requests Projects Activity Actions

Profile: sticky filter bar

Browse source
This commit is contained in:
thislight 2024-10-31 00:00:07 +08:00
parent 3e3910bfe1
commit dbddaae05c
No known key found for this signature in database
GPG key ID: FCFE5192241CCD4E
1 changed files with 17 additions and 1 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

18
src/profiles/Profile.tsx
View file

@ -177,6 +177,22 @@ const Profile: Component = () => {
overflow: hidden; overflow: hidden;
text-overflow: ellipsis; text-overflow: ellipsis;
} }
.toot-list-toolbar {
position: sticky;
top: var(--scaffold-topbar-height);
z-index: calc(var(--tutu-zidx-nav, 1) - 1);
background: var(--tutu-color-surface);
border-bottom: 1px solid var(--tutu-color-surface-d);
contain: content;
/* TODO: box-shadow is needed here (same as app bar, e6).
There is no good way to detect if the sticky is "sticked" -
so let's leave it for future.
For now we use a trick to make it looks better.
*/
box-shadow: 0px -2px 4px 0px var(--tutu-color-shadow);
}
`; `;
return ( return (
@ -356,7 +372,7 @@ const Profile: Component = () => {
</table> </table>
</div> </div>
<div> <div class="toot-list-toolbar">
<TootFilterButton <TootFilterButton
options={{ options={{
boost: "Boosts", boost: "Boosts",