diff --git a/index.scss b/index.scss
index a0e3afc..8933714 100644
--- a/index.scss
+++ b/index.scss
@@ -1,3 +1,5 @@
+// @import url("https://www.w3schools.com/w3css/4/w3.css");
+
html,
body {
margin: 0;
@@ -19,6 +21,15 @@ body {
padding: 2rem;
}
+.firstRow {
+ display: flex;
+ flex-direction: row;
+ justify-content: space-between;
+ width: 100% !important;
+ margin-bottom: 1rem;
+
+}
+
.contentBlock {
margin: 0.5rem;
background: #f2f7f8c5;
@@ -26,7 +37,7 @@ body {
box-shadow: 0 0 1rem rgba(0, 0, 0, 0.25);
padding: 2rem;
width: 100%;
- max-width: 50rem;
+ height: 100%;
}
.parameter {
@@ -40,18 +51,36 @@ body {
align-items: center;
display: flex;
flex-direction: column;
+ padding-left: 1rem;
}
.sliderLabel {
- font-size: 1rem;
+ font-size: 0.9rem;
}
.sliderValue {
- font-size: 0.8rem;
+ margin: 0.2rem 0rem 0.5rem;
+ font-size: 0.7rem;
align-items: center;
}
+
+.coefSlider{
+ width: 50%;
+}
+
.title {
font-size: 1.1rem;
margin-bottom: 1rem;
}
+.parameterHeader{
+ font-size: 1.1rem;
+ text-align: center;
+ font-weight: bold;
+}
+
+.parameterTextInput{
+ // @extend .w3-border;
+ // @extend .w3-round-large;
+ width: 5.4rem;
+}
diff --git a/src/header.rs b/src/header.rs
index 4cbd6f1..e59ad75 100644
--- a/src/header.rs
+++ b/src/header.rs
@@ -4,7 +4,7 @@ use yew::{html, function_component, Html};
pub fn Header() -> Html {
html! {
-
{"Salary Calculator"}
+ {"Ideal Wages Calculator"}
{"How much should you earn?"}
}
diff --git a/src/main.rs b/src/main.rs
index 5a6e5ec..b8fa829 100644
--- a/src/main.rs
+++ b/src/main.rs
@@ -4,19 +4,19 @@ use wasm_bindgen::JsCast;
use web_sys::{EventTarget, HtmlInputElement};
use yew::prelude::*;
-use crate::{slider::SliderMessage, header::Header};
+use crate::{header::Header, slider::SliderMessage};
+mod header;
mod salary_param;
mod slider;
-mod header;
const PARAMETERS_MEANING: i8 = 10;
const DATA: [SalaryParam; 7] = [
SalaryParam {
id: "like",
- label: "How much I like my job?",
- coefficient: -1.0,
+ label: "How much I hate what I'm doing?",
+ coefficient: 1.0,
value: 50,
},
SalaryParam {
@@ -94,21 +94,31 @@ fn App() -> Html {
html! {
-
- {"Base salary : "}
-
-
-
- { for (*app_state).clone().into_iter().map(|param: SalaryParam| {
- html! {
-
-
-
- }
- })}
+
+
+
+
+
+ {"Result : "}{result.to_string()}{"€"}
+
-
{"Result : "}{result.to_string()}
+
+ { for (*app_state).clone().into_iter().map(|param: SalaryParam| {
+ html! {
+
+
+
+ }
+ })}
}
diff --git a/src/slider.rs b/src/slider.rs
index 226446d..e3bd41a 100644
--- a/src/slider.rs
+++ b/src/slider.rs
@@ -59,14 +59,14 @@ pub fn Slider(props: &Props) -> Html {
};
html! {
-
-
{ salary_param.label }
-
+
+
{ salary_param.label }
+
-