From 5d72a60f25f239d202e02cfcc315e22ae3d88179 Mon Sep 17 00:00:00 2001 From: Romulus21 Date: Thu, 21 Nov 2024 08:19:23 +0100 Subject: [PATCH] add new style --- Cargo.toml | 2 +- README.md | 33 ++++++++++++++++++++------------- src/app.rs | 23 +++++++++++++++-------- src/routes/link.rs | 23 +++++++++++++---------- src/routes/value.rs | 14 +++++++------- tailwind.config.js | 22 +++++++++++++++++++++- 6 files changed, 77 insertions(+), 40 deletions(-) diff --git a/Cargo.toml b/Cargo.toml index 26d107e..416d3ea 100644 --- a/Cargo.toml +++ b/Cargo.toml @@ -122,4 +122,4 @@ lib-default-features = false tailwind-input-file = "input.css" tailwind-config-file = "tailwind.config.js" -#in-target-triple = "aarch64-unknown-linux-gnu" +#bin-target-triple = "aarch64-unknown-linux-gnu" diff --git a/README.md b/README.md index b366e7a..b79a716 100644 --- a/README.md +++ b/README.md @@ -1,8 +1,15 @@ -source : https://github.com/Oishh/leptos-axum-tailwind-start - wasm-pack build --target=web --debug --no-default-features --features=hydrate cargo run --no-default-features --features=ssr +# dev +source .env +cargo sqlx migrate run +cargo leptos watch + +npx tailwindcss -i ./input.css -o ./style/output.css --watch + +# deploy + example of systemd config ``` [Unit] @@ -18,25 +25,25 @@ Type=simple WantedBy=multi-user.target ``` -# dev -source .env -cargo sqlx migrate run -cargo leptos watch - -npx tailwindcss -i ./input.css -o ./style/output.css --watch - ## features [x] ssr [x] MySQL [x] tailwindcss [x] router [ ] value gestion des erreurs -[ ] deploy +[x] deploy ## pages -[ ] liens -[ ] formulaire +[x] liens +[x] formulaire [ ] recap capteurs -// https://github.com/Bechma/realworld-leptos + + +## style +[Simple dark dashboard](https://dribbble.com/shots/10090105-Dashboard-UI/attachments/2097885?mode=media) + +## helps +[Leptos starter kit](https://github.com/Oishh/leptos-axum-tailwind-start) +[Leptos blog](https://github.com/Bechma/realworld-leptos) diff --git a/src/app.rs b/src/app.rs index 8f7d566..a291298 100644 --- a/src/app.rs +++ b/src/app.rs @@ -11,15 +11,11 @@ pub fn App() -> impl IntoView { view! { - + <Title text="Bienvenue à la maison"/> - <div class="dark:bg-black dark:text-lime-500 dark:hover:text-lime-400 h-screen flex flex-col"> + <div class="dark:bg-prim dark:text-second h-screen flex flex-col"> <Router> - <nav class="flex gap-5 px-2 py-1 "> - <a href="/">Home</a> - <A href="/liens">Liens</A> - <a href="/formulaire">Formulaire</a> - </nav> + <Navigation /> <main class="flex-1"> <Routes> <Route path="/" view=move || view! { <Home/> }/> @@ -34,10 +30,21 @@ pub fn App() -> impl IntoView { } } +#[component] +pub fn Navigation() -> impl IntoView { + view! { + <nav class="flex gap-5 px-2 py-1 text-lg"> + <A href="/" class="hover:text-third border-b border-transparent hover:border-third inline-block transition-colors">Home</A> + <A href="/liens" class="hover:text-third hover:border-b border-third inline-block transition-colors">Liens</A> + <A href="/formulaire" class="hover:text-third hover:border-b border-third inline-block transition-colors">Formulaire</A> + </nav> + } +} + #[component] pub fn Home() -> impl IntoView { view! { - <h1>Home</h1> + <h1 class="m-2">Home</h1> } } diff --git a/src/routes/link.rs b/src/routes/link.rs index 825451a..81a17d4 100644 --- a/src/routes/link.rs +++ b/src/routes/link.rs @@ -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())} diff --git a/src/routes/value.rs b/src/routes/value.rs index 5daded0..5d24e16 100644 --- a/src/routes/value.rs +++ b/src/routes/value.rs @@ -29,13 +29,13 @@ pub fn FormValues() -> impl IntoView { ); view! { - <div class="my-0 mx-auto w-72 text-center"> - <h2 class="p-6 text-4xl">"Formulaire"</h2> + <div class="my-0 mx-auto w-72 p-6 bg-prim-light rounded-lg"> + <h2 class="pb-6 text-2xl text-center">"Formulaire"</h2> - <ActionForm action=value_action attr:class="border border-lime-500"> + <ActionForm action=value_action attr:class=""> <div> - <label class="block mt-5 mb-1">Capteur</label> - <select name="device" class="w-60 dark:bg-slate-800 px-2 py-2"> + <label class="block mt-3 mb-1">Capteur</label> + <select name="device" class="text-center bg-prim border border-transparent rounded-lg focus:border-third px-2 py-2 w-60"> {OPTIONS.into_iter() .map(|option| view! { <option value={option.value} class="px-2 py-1">{option.name}</option>}) .collect::<Vec<_>>()} @@ -46,10 +46,10 @@ pub fn FormValues() -> impl IntoView { <input name="value" type="number" prop:value=move || reset_value.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> diff --git a/tailwind.config.js b/tailwind.config.js index 32bc80f..d19f568 100644 --- a/tailwind.config.js +++ b/tailwind.config.js @@ -4,7 +4,27 @@ module.exports = { files: ["*.html", "./src/**/*.rs"], }, theme: { - extend: {}, + extend: { + colors: { + prim: { + lightest: "#2E3235", + light: "#2B2F33", + DEFAULT: "#26292D", + }, + second: { + DEFAULT: "#FEFEFE", + dark: "#929496", + }, + third: { + light: "#FC443D", + DEFAULT: "#F74E49", + }, + fourth: { + light: "#FFD885", + DEFAULT: "#FEBB2E", + }, + }, + }, }, plugins: [], };