diff --git a/locales/en/main.ftl b/locales/en/main.ftl index fdf0516..ef3b336 100644 --- a/locales/en/main.ftl +++ b/locales/en/main.ftl @@ -1 +1,6 @@ not-found = We couldn't find that page. +title = Hypergeometric Distribution Calculator +population = Population Size +successes = Successes in Population +sample = Sample Size +sample_successes = Successes in Sample diff --git a/locales/es/main.ftl b/locales/es/main.ftl index 3eeeb18..ac1aaa8 100644 --- a/locales/es/main.ftl +++ b/locales/es/main.ftl @@ -1 +1,6 @@ not-found = No pudimos encontrar esta página. +title = Calculadora Distribución Hipergeométrica +population = Tamaño población +successes = Éxitos en la población +sample = Tamaño de la muestra +sample_successes = Éxitos en la muestra diff --git a/public/styles.scss b/public/styles.scss index 7fd0794..56b7814 100644 --- a/public/styles.scss +++ b/public/styles.scss @@ -32,6 +32,11 @@ h6 { padding: 2rem; } +h1.title { + width: 80vw; + max-inline-size: 80vw; +} + p { margin: var(--size-6); } @@ -59,7 +64,7 @@ form input { form > div.results { display: grid; - grid-template-columns: 1fr 6em 6em 1fr; + grid-template-columns: 1fr 8em 5em 1fr; min-width: 20em; max-width: 30em; width: 30vw; diff --git a/src/components/calculator.rs b/src/components/calculator.rs index cf62eab..209d77d 100644 --- a/src/components/calculator.rs +++ b/src/components/calculator.rs @@ -1,9 +1,10 @@ //! Hypergeometric Distribution Calculator use leptos::html::ElementChild; use leptos::prelude::{ - signal, ClassAttribute, Get, GlobalAttributes, OnTargetAttribute, PropAttribute, Set, + ClassAttribute, Get, GlobalAttributes, OnTargetAttribute, PropAttribute, Set, signal, }; -use leptos::{component, view, IntoView}; +use leptos::{IntoView, component, view}; +use leptos_fluent::move_tr; use crate::calc::hyper_geometric; @@ -26,7 +27,7 @@ pub fn Calculator() -> impl IntoView { view! {

- + impl IntoView { />

- + impl IntoView { />

- + impl IntoView { />

- + impl IntoView { + leptos_fluent! { + children: children(), + translations: [TRANSLATIONS], + locales: "./locales", + check_translations: "./src/**/*.rs", + } +} +#[component] +pub fn LanguageSelector() -> impl IntoView { + // Use `expect_i18n()` to get the current i18n context: + let i18n = expect_i18n(); + + view! { + + + } +} + +fn render_language(lang: &'static Language) -> impl IntoView { + // Passed as atrribute, `Language` is converted to their code, + // so ` + {lang.name} + + } +} diff --git a/src/components/mod.rs b/src/components/mod.rs index 09bb58d..eb8d043 100644 --- a/src/components/mod.rs +++ b/src/components/mod.rs @@ -1 +1,2 @@ pub mod calculator; +pub mod localization; diff --git a/src/lib.rs b/src/lib.rs index 88c4bd7..214db8d 100644 --- a/src/lib.rs +++ b/src/lib.rs @@ -1,6 +1,5 @@ -use fluent_templates::static_loader; use leptos::prelude::{AddAnyAttr, IntoAttribute}; -use leptos::{component, view, IntoView}; +use leptos::{IntoView, component, view}; use leptos_meta::*; use leptos_router::{components::*, path}; @@ -12,14 +11,6 @@ mod pages; // Top-Level pages use crate::pages::home::Home; -// Localization -static_loader! { - pub static TRANSLATIONS = { - locales: "./locales", - fallback_language: "en", - }; -} - /// An app router which renders the homepage and handles 404's #[component] pub fn App() -> impl IntoView { @@ -30,7 +21,7 @@ pub fn App() -> impl IntoView { // sets the document title - + <Title text="Hypergeometric Calculator" /> // injects metadata in the <head> of the page <Meta charset="UTF-8" /> diff --git a/src/pages/home.rs b/src/pages/home.rs index cfdbb49..02297ab 100644 --- a/src/pages/home.rs +++ b/src/pages/home.rs @@ -2,9 +2,11 @@ use leptos::attr::global::ClassAttribute; use leptos::error::ErrorBoundary; use leptos::html::ElementChild; use leptos::prelude::{CollectView, Get}; -use leptos::{component, view, IntoView}; +use leptos::{IntoView, component, view}; +use leptos_fluent::move_tr; use crate::components::calculator::Calculator; +use crate::components::localization::{I18n, LanguageSelector}; /// Default Home Page #[component] @@ -28,13 +30,21 @@ pub fn Home() -> impl IntoView { </ul> } }> - <div class="container"> - <h1>"Hypergeometric Distribution Calculator"</h1> - - <div class="calculator"> + <I18n> + <header> + <LanguageSelector /> + </header> + <div class="container"> + <Title /> <Calculator /> </div> - </div> + </I18n> </ErrorBoundary> } } + +/// Title +#[component] +pub fn Title() -> impl IntoView { + view! {<h1 class="title">{move_tr!("title")}</h1>} +} diff --git a/src/pages/not_found.rs b/src/pages/not_found.rs index 16e6225..a9075d6 100644 --- a/src/pages/not_found.rs +++ b/src/pages/not_found.rs @@ -1,8 +1,15 @@ use leptos::html::ElementChild; -use leptos::{component, view, IntoView}; +use leptos::{IntoView, component, view}; +use leptos_fluent::move_tr; + +use crate::components::localization::I18n; /// 404 Not Found Page #[component] pub fn NotFound() -> impl IntoView { - view! { <h1>"We couldn't find that page."</h1> } + view! { + <I18n> + <h1>{move_tr!("not-found")}</h1> + </I18n> + } }