💄 use some w3 css classes

ad2ien · Oct 13, 2023 · ca5d0dd · ca5d0dd
1 parent 13d91bb
commit ca5d0dd
Show file tree

Hide file tree

Showing 5 changed files with 67 additions and 27 deletions.
diff --git a/index.html b/index.html
@@ -2,8 +2,9 @@
 <html>
   <head>
     <meta charset="utf-8" />
-    <title>The right wages</title>
+    <title>Ideal wages calculator</title>
     <link data-trunk rel="sass" href="index.scss" />
+    <link rel="stylesheet" href="https://www.w3schools.com/w3css/4/w3.css"> 
   </head>
   <body>
     <div class="title">

diff --git 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,14 +21,23 @@ 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;
   border-radius: 0.5rem;
   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
@@ -4,7 +4,7 @@ use yew::{html, function_component, Html};
 pub fn Header() -> Html {
     html! {
         <div class="title">
-            <h1>{"Salary Calculator"}</h1>
+            <h1>{"Ideal Wages Calculator"}</h1>
             <h2>{"How much should you earn?"}</h2>
         </div>
     }

diff --git 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! {
         <div class="container">
             <Header />
-            <div class="contentBlock">
-                <span>{"Base salary : "}</span>
-                <input type="text" value={input_base_salary.to_string()} oninput={on_base_change} />
-            </div>
-            <div class="contentBlock">
-            { for (*app_state).clone().into_iter().map(|param: SalaryParam| {
-                html! {
-                    <div>
-                        <Slider on_slide={on_slide.clone()} salary_param={param} />
-                    </div>
-                }
-            })}
+            <div class="w3-row firstRow">
+                <div class="w3-half contentBlock">
+                    <form class="w3-container">
+                        <label>{"Base salary : "}</label>
+                        <input class="w3-border w3-round-large parameterTextInput" type="number" value={input_base_salary.to_string()} oninput={on_base_change} />
+                        <label>{"€"}</label>
+                    </form>
+                </div>
+                <div class="w3-half contentBlock">
+                        <span>{"Result : "}{result.to_string()}{"€"}</span>
+                </div>
             </div>
             <div class="contentBlock">
-                <span>{"Result : "}{result.to_string()}</span>
+                <div class="w3-row parameterHeader">
+                    <div class="w3-half">{ "Criteria" }</div>
+                    <div class="w3-quarter">{ "my job" }</div>
+                    <div class="w3-quarter">{ "How it maters" }</div>
+                </div>
+                { for (*app_state).clone().into_iter().map(|param: SalaryParam| {
+                    html! {
+                        <div>
+                            <Slider on_slide={on_slide.clone()} salary_param={param} />
+                        </div>
+                    }
+                })}
             </div>
         </div>
     }

diff --git a/src/slider.rs b/src/slider.rs
@@ -59,14 +59,14 @@ pub fn Slider(props: &Props) -> Html {
     };
 
     html! {
-        <div class="parameter">
-            <div class="sliderLabel">{  salary_param.label }</div>
-            <div class="sliderDiv">
+        <div class="w3-row">
+            <div class="w3-half w3-container">{  salary_param.label }</div>
+            <div class="sliderDiv w3-quarter">
                 <input type="range" min="0" max="100" value={input_value.clone()} oninput={on_value_change} />
                 <div class="sliderValue">{ input_value }</div>
             </div>
-            <div class="sliderDiv">
-                <input type="range" min="-2" max="2" step="0.1" value={coef_value.clone()} oninput={on_coef_change} />
+            <div class="sliderDiv w3-quarter">
+                <input class="coefSlider" type="range" min="-2" max="2" step="0.1" value={coef_value.clone()} oninput={on_coef_change} />
                 <div class="sliderValue">{ coef_value }</div>
             </div>
         </div>