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

2
Cargo.toml
View File

@@ -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"

33
README.md
View File

@@ -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)

23
src/app.rs
View File

@@ -11,15 +11,11 @@ pub fn App() -> impl IntoView {
view! {
<Stylesheet href="/pkg/rust_leptos.css"/>
<Title text="Welcome to Leptos"/>
<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>
}
}

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())}

14
src/routes/value.rs
View File

@@ -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>

22
tailwind.config.js
View File

@@ -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: [],
};