feat(web): sticky navbar and post box

because of this the whole page now scrolls properly and remembers your
scroll position if you use back/forward!
This commit is contained in:
əlemi 2024-04-17 04:33:34 +02:00
parent 39b14e058e
commit 663cea79ad
Signed by: alemi
GPG key ID: A4895B84D311642C
2 changed files with 28 additions and 12 deletions

View file

@ -17,6 +17,26 @@
:root { :root {
--main-col-percentage: 70%; --main-col-percentage: 70%;
} }
body {
margin: 0;
}
nav {
top: 0;
position: sticky;
background-color: var(--background);
padding-top: .05em;
}
hr.nav {
margin-top: 0;
padding-top: 0;
border: 1px solid #bf616a70;
top: 1.65rem;
position: sticky;
}
div.sticky {
top: 4em;
position: sticky;
}
.hidden { display: none; } .hidden { display: none; }
a.upub-title { a.upub-title {
color: var(--primary); color: var(--primary);
@ -34,8 +54,6 @@
border-radius: 50%; border-radius: 50%;
} }
div.boxscroll { div.boxscroll {
max-height: calc(100vh - 7rem);
overflow-y: scroll;
} }
div.tl-header { div.tl-header {
background-color: #bf616a55; background-color: #bf616a55;

View file

@ -33,16 +33,14 @@ fn main() {
mount_to_body( mount_to_body(
move || view! { move || view! {
<nav class="w-100"> <nav class="w-100 mt-1 mb-1 pb-s">
<p> <code class="color ml-3" ><a class="upub-title" href=move || if cookie.get().present() { "/web/home" } else { "/web/server" } >μpub</a></code>
<code><a class="upub-title" href=move || if cookie.get().present() { "/web/home" } else { "/web/server" } >μpub</a></code> <small class="ml-1 mr-1" ><a class="clean" href="/web/server" >micro social network, federated</a></small>
<small class="ml-1 mr-1" ><a class="clean" href="/web/server" >micro social network, federated</a></small> /* TODO kinda jank with the float but whatever, will do for now */
/* TODO kinda jank with the float but whatever, will do for now */ <small class="mr-1" style="float: right" ><a href="https://git.alemi.dev/upub.git" >src</a></small>
<small style="float: right" ><a href="https://git.alemi.dev/upub.git" >src</a></small>
</p>
</nav> </nav>
<hr /> <hr class="nav" />
<div class="container" > <div class="container mt-2 pt-2" >
<Router // TODO maybe set base="/web" ? <Router // TODO maybe set base="/web" ?
trailing_slash=TrailingSlash::Redirect trailing_slash=TrailingSlash::Redirect
fallback=move || view! { fallback=move || view! {
@ -60,7 +58,7 @@ fn main() {
view! { view! {
<main> <main>
<div class="two-col" > <div class="two-col" >
<div class="col-side" > <div class="col-side sticky" >
<LoginBox <LoginBox
token_tx=set_cookie token_tx=set_cookie
token=cookie token=cookie