Skip to content

Commit

Permalink
Refactoring CSS and cosmetic changes.
Browse files Browse the repository at this point in the history 
Grouping css styles into classes.

Replace section headers with simply H3.

Limit lengths for personal info fields.
  • Loading branch information
ejoepes committed Dec 3, 2024
1 parent 7290083 commit bfa3602
Show file tree
Hide file tree
Showing 4 changed files with 42 additions and 56 deletions.
31 changes: 7 additions & 24 deletions src/app.rs
View file
Original file line number Diff line number Diff line change
Expand Up @@ -12,7 +12,6 @@ use wasm_bindgen_futures::spawn_local;
use web_sys::{Element, HtmlAnchorElement, HtmlElement, HtmlInputElement};

use crate::{
css::SECTION_HEADER,
data::{Aeat720Information, PersonalInformation},
personal_info::PersonalInfoViewer,
table::Table,
Expand Down Expand Up @@ -42,9 +41,9 @@ impl App {

fn is_needed_to_generate_report(this: &Arc<Self>) -> impl Signal<Item = bool> {
map_ref! {
let personal_info_changed = this.personal_info.signal_ref(|_| true),
let _personal_info_changed = this.personal_info.signal_ref(|_| true),
let records_changed = this.table.table_rows_not_empty() =>
*personal_info_changed || *records_changed
*records_changed // || *personal_info_changed
}
}

Expand Down Expand Up @@ -147,7 +146,6 @@ impl App {
Some(
html!("button" => HtmlElement, {
.attr("type", "button")
.attr("download", "fichero-720.txt")
.text("Descargar informe AEAT 720")
.with_node!(_element => {
.event(clone!(this => move |_: events::Click| {
Expand All @@ -160,7 +158,7 @@ impl App {
let _ = link.set_attribute("download", "fichero-720.txt");
link.click();
/* let file_path = this.aeat720_form_path.lock_ref().clone().unwrap();
let _ = web_sys::window().unwrap_throw().open_with_url_and_target(&file_path, "fichero-720.txt"); */
let _ = web_sys::window().unwrap_throw().open_with_url_and_target(&file_path, "_self"); */
}
}))
})
Expand All @@ -180,12 +178,10 @@ impl App {

pub fn render(this: Arc<Self>) -> Dom {
html!("div", {
.child(
html!("h3", {
.class(&*SECTION_HEADER)
.text(" Información brokers ")
})
)
.child(html!("h3", {
.text("Datos personales")
}))
.child(PersonalInfoViewer::render(&this.personal_info_viewer))
.child(
Table::render(&this.table)
)
Expand All @@ -195,19 +191,6 @@ impl App {
.child(
App::render_clear_button(&this)
)
.child(
html!("h3", {
.class(&*SECTION_HEADER)
.text(" Información personal ")
})
)
.child(PersonalInfoViewer::render(&this.personal_info_viewer))
.child(
html!("h3", {
.class(&*SECTION_HEADER)
.text(" Descarga de formulario 720 ")
})
)
.child(App::render_download_button(&this))
})
}
Expand Down
26 changes: 23 additions & 3 deletions src/css.rs
View file
Original file line number Diff line number Diff line change
Expand Up @@ -20,22 +20,23 @@ pub static FLEX_CONTAINER_CLASS: Lazy<String> = Lazy::new(|| {
class! {
.style("display", "flex")
.style("flex-flow", "wrap")
.style("gap", "5px")
}
});

pub static FLEX_CONTAINER_ITEM_20_CLASS: Lazy<String> = Lazy::new(|| {
class! {
.style("flex", "20%")
.style("flex", "auto")
.style("margin", "5px")
.style("max-width", "20%")
.style("margin-bottom", "5px")
}
});

pub static FLEX_CONTAINER_ITEM_40_CLASS: Lazy<String> = Lazy::new(|| {

Check warning on line 35 in src/css.rs

View workflow job for this annotation

GitHub Actions / Unit Tests on 1.80.1 

static `FLEX_CONTAINER_ITEM_40_CLASS` is never used

Check warning on line 35 in src/css.rs

View workflow job for this annotation

GitHub Actions / Unit Tests on 1.80.1 

static `FLEX_CONTAINER_ITEM_40_CLASS` is never used

Check warning on line 35 in src/css.rs

View workflow job for this annotation

GitHub Actions / Format & Clippy (1.80.1) 

static `FLEX_CONTAINER_ITEM_40_CLASS` is never used
class! {
.style("flex", "40%")
.style("max-width", "40%")
.style("margin-bottom", "5px")
.style("margin", "5px")
}
});

Expand All @@ -61,6 +62,25 @@ pub static SECTION_HEADER: Lazy<String> = Lazy::new(|| {
}
});

pub static TABLE_STYLE: Lazy<String> = Lazy::new(|| {
class! {
.style("overflow", "auto")
.style("width", "100%")
.style("height", "400px")
.style("border-collapse", "collapse")
.style("border", "1px solid #8c8c8c")
.style("margin-bottom" ,"1em")
}
});

pub static TABLE_CAPTION: Lazy<String> = Lazy::new(|| {
class! {
.style("font-size", "large")
.style("font-weight", "bold")
.style("margin", "20px")
}
});

pub static TABLE_ROW: Lazy<String> = Lazy::new(|| {
class! {
.pseudo!(":nth-child(even)", {
Expand Down
27 changes: 7 additions & 20 deletions src/personal_info.rs
View file
Original file line number Diff line number Diff line change
Expand Up @@ -24,15 +24,12 @@ impl PersonalInfoViewer {
.child(html!("span", {
.class(&*FLEX_CONTAINER_ITEM_20_CLASS)
.children(&mut [
html!("label", {
.attr("for", "name")
.text("Nombre: ")
}),
html!("input" => HtmlInputElement, {
.attr("id", "name")
.attr("alt", "Nombre")
.attr("type", "text")
.attr("autocomplete", "given-name")
.attr("placeholder", "Nombre")
.with_node!(element => {
.event(clone!(this => move |_: events::Input| {
this.personal_info.lock_mut().name = element.value().to_uppercase();
Expand All @@ -44,15 +41,12 @@ impl PersonalInfoViewer {
.child(html!("span", {
.class(&*FLEX_CONTAINER_ITEM_20_CLASS)
.children(&mut [
html!("label", {
.attr("for", "surname")
.text("Apellidos: ")
}),
html!("input" => HtmlInputElement, {
.attr("id", "surname")
.attr("alt", "Apellidos")
.attr("type", "text")
.attr("autocomplete", "family-name")
.attr("placeholder", "Apellidos")
.with_node!(element => {
.event(clone!(this => move |_: events::Input| {
this.personal_info.lock_mut().surname = element.value().to_uppercase();
Expand All @@ -64,14 +58,12 @@ impl PersonalInfoViewer {
.child(html!("span", {
.class(&*FLEX_CONTAINER_ITEM_20_CLASS)
.children(&mut [
html!("label", {
.attr("for", "nif")
.text("NIF: ")
}),
html!("input" => HtmlInputElement, {
.attr("id", "nif")
.attr("alt", "NIF")
.attr("type", "text")
.attr("max-length", "9")
.attr("placeholder", "DNI con letra")
.with_node!(element => {
.event(clone!(this => move |_: events::Input| {
this.personal_info.lock_mut().nif = element.value().to_uppercase();
Expand All @@ -83,14 +75,11 @@ impl PersonalInfoViewer {
.child(html!("span", {
.class(&*FLEX_CONTAINER_ITEM_20_CLASS)
.children(&mut [
html!("label", {
.attr("for", "year")
.text("Año: ")
}),
html!("input" => HtmlInputElement, {
.attr("id", "year")
.attr("alt", "Año")
.attr("type", "text")
.attr("maxlength", "4")
.attr("value", &DEFAULT_YEAR.to_string())
.with_node!(element => {
.event(clone!(this => move |_: events::Input| {
Expand All @@ -103,15 +92,13 @@ impl PersonalInfoViewer {
.child(html!("span", {
.class(&*FLEX_CONTAINER_ITEM_20_CLASS)
.children(&mut [
html!("label", {
.attr("for", "phone")
.text("Teléfono: ")
}),
html!("input" => HtmlInputElement, {
.attr("id", "phone")
.attr("alt", "Teléfono")
.attr("type", "text")
.attr("autocomplete", "tel")
.attr("maxlength", "9")
.attr("placeholder", "Teléfono")
.with_node!(element => {
.event(clone!(this => move |_: events::Input| {
this.personal_info.lock_mut().phone = element.value().to_uppercase();
Expand Down
14 changes: 5 additions & 9 deletions src/table.rs
View file
Original file line number Diff line number Diff line change
Expand Up @@ -10,7 +10,7 @@ use futures_signals::{
use web_sys::{HtmlElement, HtmlInputElement};

use crate::{
css::TABLE_ROW,
css::{TABLE_CAPTION, TABLE_ROW, TABLE_STYLE},
data::{Aeat720Record, BrokerInformation},
utils::{icons::render_svg_trash_icon, usize_to_date},
};
Expand Down Expand Up @@ -350,15 +350,11 @@ impl Table {

pub fn render(this: &Arc<Self>) -> Dom {
html!("table", {
.style("overflow", "auto")
.style("width", "100%")
.style("height", "400px")
.style("border-collapse", "collapse")
.style("border", "1px solid #8c8c8c")
.style("margin-bottom" ,"1em")
.child(
.class(&*TABLE_STYLE)
.child(
html!("caption", {
.text("Movimientos importados.")
.class(&*TABLE_CAPTION)
.text("Movimientos importados/creados.")
})

)
Expand Down

1 comment on commit bfa3602

@github-actions
Copy link

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

🎉 Published on https://upbeat-minsky-6ecee4.netlify.app as production
🚀 Deployed on https://674eee7941c0eb1c917f080f--upbeat-minsky-6ecee4.netlify.app

Please sign in to comment.