alemi/fedicharter
1
0
Fork 0
mirror of https://git.alemi.dev/fedicharter.git synced 2024-11-22 00:24:47 +01:00
Code Issues Projects Releases Packages Wiki Activity

feat: anchor navbar, initial layout, parse hash

Browse source
This commit is contained in:
əlemi 2023-10-20 20:10:08 +02:00
parent ee8a3888e9
commit 7145e4aa26
2 changed files with 56 additions and 21 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

25
index.html
View file

@ -28,13 +28,32 @@ input[type="submit"] {
padding-bottom: 3px;
cursor: pointer;
}
.topnav {
background-color: #333;
overflow: hidden;
width: 100%;
position: sticky;
top: 0px;
left: 0px;
}
.topnav h1 {
display: inline;
}
.app-content {
width: 100%;
}
.full-width {
width: 100%;
}
</style>
<html>
<head>
</head>
<body>
<h1>fediverse navigator</h1>
<h3>heavily under construction</h3>
<div id="#app"></div>
<div class="topnav">
<h1>fediverse navigator</h1>
<a>heavily under construction</a>
</div>
<div id="#app" class="full-width"></div>
</body>
</html>

52
src/web/main.rs
View file

@ -31,8 +31,11 @@ async fn fetch_node_info(domain: String) -> Result<(Arc<NodeInfoOwned>, String)>
#[component]
fn App() -> impl IntoView {
// let (live, live_tx) = create_signal("://".to_string());
let (submitted, submitted_tx) = create_signal("social.alemi.dev".to_string());
let mut current_hash = window().location().hash().unwrap_or("social.alemi.dev".to_string());
if current_hash.starts_with('#') {
current_hash = current_hash[1..].to_string();
}
let (submitted, submitted_tx) = create_signal(current_hash.clone());
let nodeinfo = create_local_resource(move || submitted.get(), fetch_node_info);
@ -65,16 +68,28 @@ fn App() -> impl IntoView {
};
view ! {
<Searchbar submitted=submitted_tx placeholder="social.alemi.dev".to_string() />
<ErrorBoundary fallback>
<Transition fallback=move || {
view! { <div>"Loading (Suspense Fallback)..."</div> }
}>
<div>
{instance_view}
</div>
</Transition>
</ErrorBoundary>
<Searchbar submitted=submitted_tx placeholder=current_hash />
<div class="full-width">
<table class="full-width">
<tr>
<td style="width: 33%; vertical-align: top;">
<ErrorBoundary fallback>
<Transition fallback=move || {
view! { <div><i>"fetching data..."</i></div> }
}>
<div>
{instance_view}
</div>
</Transition>
</ErrorBoundary>
</td>
<td style="width: 66%; vertical-align: top;">
<canvas id="#chart">
</canvas>
</td>
</tr>
</table>
</div>
}
}
@ -91,17 +106,17 @@ fn Searchbar(
let on_submit = move |ev: web_sys::SubmitEvent| {
ev.prevent_default();
let value = input_element.get()
.expect("no input field")
.value();
window().location().set_hash(&value).expect("could not set window hash");
if let Some(tx) = submitted {
tx.set(
input_element.get()
.expect("no input field")
.value()
);
tx.set(value);
}
};
view! {
<div>
<div class="full-width">
<form on:submit=on_submit>
<input type="text"
on:input=move |ev| {
@ -111,6 +126,7 @@ fn Searchbar(
}
node_ref=input_element
prop:value=placeholder
style="width: 90%"
/>
<input type="submit" value="Go"/>
</form>