nutomic/ibis
1
0
Fork 0
mirror of https://github.com/Nutomic/ibis.git synced 2024-11-25 02:31:08 +00:00
Code Projects Releases Packages Activity

Rework article list

Browse source
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
Show stats Download patch file Download diff file Expand all files Collapse all files

10
src/frontend/components/editor.rs
View file

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

58
src/frontend/pages/article/list.rs
View file

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