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:
parent
39b14e058e
commit
663cea79ad
2 changed files with 28 additions and 12 deletions
|
@ -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;
|
||||||
|
|
|
@ -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 style="float: right" ><a href="https://git.alemi.dev/upub.git" >src</a></small>
|
<small class="mr-1" 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
|
||||||
|
|
Loading…
Reference in a new issue