1
0
Fork 0
mirror of https://github.com/Nutomic/ibis.git synced 2024-11-28 19:01:08 +00:00

Rework article list

This commit is contained in:
Felix Ableitner 2024-10-30 16:12:18 +01:00
parent 9be6abf776
commit aaec884d8f
2 changed files with 33 additions and 35 deletions

View file

@ -15,18 +15,16 @@ pub fn EditorView(
view! {
<div class="my-4">
<textarea
value=content
prop:value=content
placeholder="Article text..."
class="textarea textarea-primary min-w-full min-h-80 resize-none"
class="textarea textarea-primary min-w-full min-h-80 resize-none text-base"
on:input=move |evt| {
let val = event_target_value(&evt);
set_preview.set(render_markdown(&val));
set_content.set(val);
}
node_ref=textarea_ref
>
{content.get()}
</textarea>
></textarea>
<button
class="btn btn-secondary my-4"
on:click=move |_| { set_show_preview.update(|s| *s = !*s) }
@ -34,7 +32,7 @@ pub fn EditorView(
Preview
</button>
<Show when=move || { show_preview.get() }>
<div id="preview" inner_html=move || preview.get()></div>
<div class="prose prose-slate" inner_html=move || preview.get()></div>
</Show>
<div>
<a class="link link-secondary" href="https://commonmark.org/help/" target="blank_">

View file

@ -2,12 +2,14 @@ use crate::{
common::ListArticlesForm,
frontend::{app::GlobalState, article_link, article_title},
};
use html::Input;
use leptos::*;
use web_sys::wasm_bindgen::JsCast;
#[component]
pub fn ListArticles() -> impl IntoView {
let (only_local, set_only_local) = create_signal(false);
let button_only_local = create_node_ref::<Input>();
let button_all = create_node_ref::<Input>();
let articles = create_resource(
move || only_local.get(),
|only_local| async move {
@ -23,33 +25,31 @@ pub fn ListArticles() -> impl IntoView {
view! {
<h1 class="text-4xl font-bold font-serif my-4">Most recently edited Articles</h1>
<Suspense fallback=|| view! { "Loading..." }>
<fieldset
class="flex flex-row"
on:input=move |ev| {
let val = ev
.target()
.unwrap()
.unchecked_into::<web_sys::HtmlInputElement>()
.id();
let is_local_only = val == "only-local";
set_only_local.update(|p| *p = is_local_only);
}
>
<label class="label cursor-pointer max-w-32">
<span>Only Local</span>
<input type="radio" name="listing-type" class="radio checked:bg-primary" />
</label>
<label class="label cursor-pointer max-w-32">
<span>All</span>
<div class="divide-x">
<input
type="radio"
name="listing-type"
class="radio checked:bg-primary"
checked="checked"
type="button"
value="Only Local"
class="btn rounded-r-none"
node_ref=button_only_local
on:click=move |_| {
button_all.get().map(|c| c.class("btn-primary", false));
button_only_local.get().map(|c| c.class("btn-primary", true));
set_only_local.set(true);
}
/>
</label>
</fieldset>
<ul class="list-disc">
<input
type="button"
value="All"
class="btn btn-primary rounded-l-none"
node_ref=button_all
on:click=move |_| {
button_all.get().map(|c| c.class("btn-primary", true));
button_only_local.get().map(|c| c.class("btn-primary", false));
set_only_local.set(false);
}
/>
</div>
<ul class="list-none my-4">
{move || {
articles
.get()
@ -58,7 +58,7 @@ pub fn ListArticles() -> impl IntoView {
.map(|a| {
view! {
<li>
<a class="link link-secondary" href=article_link(&a)>
<a class="link text-lg" href=article_link(&a)>
{article_title(&a)}
</a>
</li>