mirror of
https://git.alemi.dev/fedicharter.git
synced 2024-11-14 04:49:20 +01:00
feat: anchor navbar, initial layout, parse hash
This commit is contained in:
parent
ee8a3888e9
commit
7145e4aa26
2 changed files with 56 additions and 21 deletions
25
index.html
25
index.html
|
@ -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>
|
||||
|
|
|
@ -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>
|
||||
|
|
Loading…
Reference in a new issue