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:
parent
9be6abf776
commit
aaec884d8f
2 changed files with 33 additions and 35 deletions
|
@ -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_">
|
||||
|
|
|
@ -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>
|
||||
<input
|
||||
type="radio"
|
||||
name="listing-type"
|
||||
class="radio checked:bg-primary"
|
||||
checked="checked"
|
||||
/>
|
||||
</label>
|
||||
</fieldset>
|
||||
<ul class="list-disc">
|
||||
<div class="divide-x">
|
||||
<input
|
||||
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);
|
||||
}
|
||||
/>
|
||||
<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>
|
||||
|
|
Loading…
Reference in a new issue