Romain/rust_leptos
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

add new style

Browse Source
This commit is contained in:
Romulus21
2024-11-21 08:19:23 +01:00
parent cf8804ab69
commit 5d72a60f25
6 changed files with 77 additions and 40 deletions
Download Patch File Download Diff File Expand all files Collapse all files

23
src/routes/link.rs
View File

@@ -41,15 +41,15 @@ pub fn Links() -> impl IntoView {
let form = move || {
show.get().then(|| {
view! { <div class="my-0 mx-auto w-72 text-center">
<h2 class="p-6 text-4xl">"Ajout d'un lien"</h2>
<ActionForm action=link_action attr:class="border border-lime-500">
view! { <div class="my-0 mx-auto w-72 p-6 bg-prim-light rounded-lg">
<h2 class="pb-6 text-2xl text-center">"Ajout d'un lien"</h2>
<ActionForm action=link_action attr:class="">
<div>
<label class="block mt-3 mb-1">"Nom"</label>
<input type="text"
name="name"
prop:value=move || reset_form.get()
class="text-center dark:bg-slate-800 focus:border-lime-500 dark:text-white px-2 py-2 w-60" />
class="text-center bg-prim border border-transparent rounded-lg focus:border-third px-2 py-2 w-60" />
</div>
<div>
@@ -57,10 +57,10 @@ pub fn Links() -> impl IntoView {
<input type="url"
name="link"
prop:value=move || reset_form.get()
class="text-center dark:bg-slate-800 focus:border-lime-500 dark:text-white px-2 py-2 w-60" />
class="text-center bg-prim border border-transparent rounded-lg focus:border-third px-2 py-2 w-60" />
</div>
<div>
<button type="submit" class="bg-lime-500 hover:bg-lime-400 text-black px-2 py-1 w-60 my-5">"Valider"</button>
<button type="submit" class="bg-third hover:bg-third-light rounded-lg transition-colors px-2 py-1 w-60 my-5">"Valider"</button>
</div>
</ActionForm>
</div> }
@@ -68,7 +68,7 @@ pub fn Links() -> impl IntoView {
};
view! {
<ul class="flex gap-5 mt-5 justify-center">
<ul class="flex flex-wrap gap-5 mt-5 justify-center">
<Suspense fallback=move || view! {<p>"Loading Comments from the article"</p> }>
<ErrorBoundary fallback=|_| {
view! { <p class="error-messages text-xs-center">"Something went wrong."</p>}
@@ -87,8 +87,11 @@ pub fn Links() -> impl IntoView {
</Suspense>
</ul>
<div>
<button on:click=move |_| {set_show.set(true)}>"Add"</button>
<div class="flex justify-end m-5">
<button on:click=move |_| {set_show.set(true)} class="bg-prim-light hover:bg-prim-lightest rounded-full px-5 py-3 text-second-dark hover:text-third transition-colors">"Ajouter un lien +"</button>
</div>
<div class="flex justify-center m-5">
{form}
</div>
}
@@ -98,7 +101,7 @@ pub fn Links() -> impl IntoView {
fn Link(link: RwSignal<crate::models::Link>) -> impl IntoView {
view! {
<li>
<a class="border border-lime-500 bg-lime-500 hover:bg-lime-400 text-black px-3 py-2 inline-block"
<a class="bg-prim-light hover:bg-prim-lightest text-xl rounded-lg text-center hover:text-third transition-colors px-5 py-4 min-w-60 inline-block"
target="_blank"
href={move || link.with(|x| x.link.to_string())}>
{move || link.with(|x| x.name.to_string())}