alemi/fedicharter
1
0
Fork 0
mirror of https://git.alemi.dev/fedicharter.git synced 2024-11-22 16:34:49 +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

23
index.html
View file

@ -28,13 +28,32 @@ input[type="submit"] {
padding-bottom: 3px; padding-bottom: 3px;
cursor: pointer; 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> </style>
<html> <html>
<head> <head>
</head> </head>
<body> <body>
<div class="topnav">
<h1>fediverse navigator</h1> <h1>fediverse navigator</h1>
<h3>heavily under construction</h3> <a>heavily under construction</a>
<div id="#app"></div> </div>
<div id="#app" class="full-width"></div>
</body> </body>
</html> </html>

36
src/web/main.rs
View file

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