Skip to content

Commit 4fbed7a

Browse files
MartinKavikDavid-OConnor
MartinKavik
authored and
David-OConnor
committed
127-css-units
1 parent 78fe61f commit 4fbed7a

File tree

10 files changed

+200
-71
lines changed

10 files changed

+200
-71
lines changed

‎README.md

+3-3
Original file line numberDiff line numberDiff line change
@@ -161,16 +161,16 @@ fn view(model: &Model) -> El<Msg> {
161161
style!{
162162
// Example of conditional logic in a style.
163163
"color" => if model.count > 4 {"purple"} else {"gray"};
164-
// When passing numerical values to style!, "px" is implied.
165-
"border" => "2px solid #004422"; "padding" => 20
164+
"border" => "2px solid #004422";
165+
"padding" => unit!(20, px);
166166
},
167167
// We can use normal Rust code and comments in the view.
168168
h3![ format!("{} {}{} so far", model.count, model.what_we_count, plural) ],
169169
button![ simple_ev(Ev::Click, Msg::Increment), "+" ],
170170
button![ simple_ev(Ev::Click, Msg::Decrement), "-" ],
171171

172172
// Optionally-displaying an element
173-
if model.count >= 10 { h2![ style!{"padding" => 50}, "Nice!" ] } else { empty![] }
173+
if model.count >= 10 { h2![ style!{"padding" => px(50)}, "Nice!" ] } else { empty![] }
174174
],
175175
success_level(model.count), // Incorporating a separate component
176176

‎examples/animation_frame/src/lib.rs

+32-39
Original file line numberDiff line numberDiff line change
@@ -1,9 +1,8 @@
11
#[macro_use]
22
extern crate seed;
3-
#[macro_use]
4-
extern crate serde_derive;
53
use rand::prelude::*;
64
use seed::prelude::*;
5+
use serde::{Deserialize, Serialize};
76

87
// Model
98

@@ -24,7 +23,7 @@ impl Car {
2423
/// _Note_:
2524
/// Optional feature "wasm-bindgen" has to be enabled for crate `rand` (otherwise it panics).
2625
fn generate_speed() -> f64 {
27-
thread_rng().gen_range(400.0, 800.0)
26+
thread_rng().gen_range(400., 800.)
2827
}
2928

3029
fn generate_color() -> CarColor {
@@ -35,14 +34,14 @@ impl Car {
3534

3635
impl Default for Car {
3736
fn default() -> Self {
38-
let car_width = 120.0;
37+
let car_width = 120.;
3938
Self {
4039
x: -car_width,
41-
y: 100.0,
40+
y: 100.,
4241
speed: Self::generate_speed(),
4342
color: Self::generate_color(),
4443
width: car_width,
45-
height: 60.0,
44+
height: 60.,
4645
}
4746
}
4847
}
@@ -88,13 +87,13 @@ fn update(msg: Msg, model: &mut Model, orders: &mut Orders<Msg>) {
8887
Msg::OnAnimationFrame(time) => {
8988
let delta = match model.previous_time {
9089
Some(previous_time) => time - previous_time,
91-
None => 0.0,
90+
None => 0.,
9291
};
9392
model.previous_time = Some(time);
9493

95-
if delta > 0.0 {
94+
if delta > 0. {
9695
// move car at least 1px to the right
97-
model.car.x += f64::max(1.0, delta / 1000.0 * model.car.speed);
96+
model.car.x += f64::max(1., delta / 1000. * model.car.speed);
9897

9998
// we don't see car anymore => back to start + generate new color and speed
10099
if model.car.x > model.viewport_width {
@@ -108,27 +107,21 @@ fn update(msg: Msg, model: &mut Model, orders: &mut Orders<Msg>) {
108107

109108
// View
110109

111-
fn px(number: impl ToString + Copy) -> String {
112-
let mut value = number.to_string();
113-
value.push_str("px");
114-
value
115-
}
116-
117110
fn view(model: &Model) -> El<Msg> {
118111
// scene container + sky
119112
div![
120113
style! {
121114
"overflow" => "hidden";
122-
"width" => "100%";
115+
"width" => unit!(100, %);
123116
"position" => "relative";
124-
"height" => "170px";
117+
"height" => unit!(170, px);
125118
"background-color" => "deepskyblue";
126119
},
127120
// road
128121
div![style! {
129-
"width" => "100%";
130-
"height" => "20px";
131-
"bottom" => "0";
122+
"width" => unit!(100, %);
123+
"height" => unit!(20, px);
124+
"bottom" => 0;
132125
"background-color" => "darkgray";
133126
"position" => "absolute";
134127
}],
@@ -140,44 +133,44 @@ fn view_car(car: &Car) -> El<Msg> {
140133
div![
141134
// car container
142135
style! {
143-
"width" => px(car.width);
144-
"height" => px(car.height);
145-
"top" => px(car.y);
146-
"left" => px(car.x);
136+
"width" => unit!(car.width, px);
137+
"height" => unit!(car.height, px);
138+
"top" => unit!(car.y, px);
139+
"left" => unit!(car.x, px);
147140
"position" => "absolute";
148141
},
149142
// windows
150143
div![style! {
151144
"background-color" => "rgb(255,255,255,0.5)";
152-
"left" => px(car.width * 0.25);
153-
"width" => px(car.width * 0.50);
154-
"height" => px(car.height * 0.60);
155-
"border-radius" => "9999px";
145+
"left" => unit!(car.width * 0.25, px);
146+
"width" => unit!(car.width * 0.5, px);
147+
"height" => unit!(car.height * 0.6, px);
148+
"border-radius" => unit!(9999, px);
156149
"position" => "absolute";
157150
}],
158151
// body
159152
div![style! {
160-
"top" => px(car.height * 0.35);
153+
"top" => unit!(car.height * 0.35, px);
161154
"background-color" => car.color;
162-
"width" => px(car.width);
163-
"height" => px(car.height * 0.50);
164-
"border-radius" => "9999px";
155+
"width" => unit!(car.width, px);
156+
"height" => unit!(car.height * 0.5, px);
157+
"border-radius" => unit!(9999, px);
165158
"position" => "absolute";
166159
}],
167160
view_wheel(car.width * 0.15, car),
168-
view_wheel(car.width * 0.60, car)
161+
view_wheel(car.width * 0.6, car)
169162
]
170163
}
171164

172165
fn view_wheel(wheel_x: f64, car: &Car) -> El<Msg> {
173-
let wheel_radius = car.height * 0.40;
166+
let wheel_radius = car.height * 0.4;
174167
div![style! {
175-
"top" => px(car.height * 0.55);
176-
"left" => px(wheel_x);
168+
"top" => unit!(car.height * 0.55, px);
169+
"left" => unit!(wheel_x, px);
177170
"background-color" => "black";
178-
"width" => px(wheel_radius);
179-
"height" => px(wheel_radius);
180-
"border-radius" => "9999px";
171+
"width" => unit!(wheel_radius, px);
172+
"height" => unit!(wheel_radius, px);
173+
"border-radius" => unit!(9999, px);
181174
"position" => "absolute";
182175
}]
183176
}

‎examples/counter/src/lib.rs

+3-3
Original file line numberDiff line numberDiff line change
@@ -75,8 +75,8 @@ fn view(model: &Model) -> El<Msg> {
7575
style! {
7676
// Example of conditional logic in a style.
7777
"color" => if model.count > 4 {"purple"} else {"gray"};
78-
// When passing numerical values to style!, "px" is implied.
79-
"border" => "2px solid #004422"; "padding" => 20
78+
"border" => "2px solid #004422";
79+
"padding" => unit!(20, px);
8080
},
8181
// We can use normal Rust code and comments in the view.
8282
h3![text, did_update(|_| log!("This shows when we increment"))],
@@ -85,7 +85,7 @@ fn view(model: &Model) -> El<Msg> {
8585
// Optionally-displaying an element, and lifecycle hooks
8686
if model.count >= 10 {
8787
h2![
88-
style! {"padding" => 50},
88+
style! {"padding" => px(50)},
8989
"Nice!",
9090
did_mount(|_| log!("This shows when clicks reach 10")),
9191
will_unmount(|_| log!("This shows when clicks drop below 10")),

‎examples/orders/src/lib.rs

+5-5
Original file line numberDiff line numberDiff line change
@@ -69,20 +69,20 @@ fn view(model: &Model) -> impl ElContainer<Msg> {
6969
"display" => "flex";
7070
"justify-content" => "center";
7171
"align-items" => "center";
72-
"font-size" => "5vmin";
72+
"font-size" => vmin(5);
7373
"font-family" => "sans-serif";
74-
"height" => "50vmin";
74+
"height" => vmin(50);
7575
],
7676
if model.greet_clicked {
7777
h1![model.title]
7878
} else {
7979
div![
8080
style![
8181
"background-color" => "lightgreen";
82-
"padding" => "3vmin";
83-
"border-radius" => "3vmin";
82+
"padding" => vmin(3);
83+
"border-radius" => vmin(3);
8484
"cursor" => "pointer";
85-
"box-shadow" => "0 0.5vmin 0.5vmin green";
85+
"box-shadow" => [vmin(0), vmin(0.5), vmin(0.5), "green".into()].join(" ");
8686
],
8787
simple_ev(Ev::Click, Msg::Greet),
8888
"Greet!"

‎examples/server_integration/client/src/lib.rs

+2-2
Original file line numberDiff line numberDiff line change
@@ -83,7 +83,7 @@ fn view(model: &Model) -> impl ElContainer<Msg> {
8383
div![
8484
style! {
8585
"font-family" => "sans-serif";
86-
"max-width" => 460;
86+
"max-width" => px(460);
8787
"margin" => "auto";
8888
},
8989
examples
@@ -94,7 +94,7 @@ fn view_example_introduction(title: &str, description: &str) -> Vec<El<Msg>> {
9494
vec![
9595
hr![],
9696
h2![title],
97-
div![style! {"margin-bottom" => 15;}, description],
97+
div![style! {"margin-bottom" => px(15);}, description],
9898
]
9999
}
100100

‎examples/server_interaction_detailed/reports/src/lib.rs

+5-5
Original file line numberDiff line numberDiff line change
@@ -132,10 +132,10 @@ fn mx_effectivity(
132132
0 => num as f32 / lines_filtered.len() as f32,
133133
_ => 0.,
134134
};
135-
(val * 100.).to_string() + &"%"
135+
unit!(val * 100., %)
136136
};
137137

138-
let margin_style = style! {"margin-right" => 60};
138+
let margin_style = style! {"margin-right" => px(60)};
139139

140140
let display_block = |val: usize, title: &str| {
141141
div![
@@ -147,12 +147,12 @@ fn mx_effectivity(
147147
};
148148

149149
section![
150-
style! {"margin-bottom" => 100},
150+
style! {"margin-bottom" => px(100)},
151151
h2!["Maintenance line effectivity"],
152152
div![
153153
style! {"display" => "flex"; "flex-direction" => "column"},
154154
div![
155-
style! {"display" => "flex"; "margin-bottom" => 60},
155+
style! {"display" => "flex"; "margin-bottom" => px(60)},
156156
h3!["Start"],
157157
h3!["End"],
158158
],
@@ -273,7 +273,7 @@ fn sortie_types(lines: &Vec<Line>, people: &Vec<Person>, missions: &Vec<Mission>
273273
}
274274

275275
section![
276-
style! {"margin-bottom" => 100},
276+
style! {"margin-bottom" => px(100)},
277277
h2!["Sortie types (last 60 days)"],
278278
table![
279279
class![

‎examples/update_from_js/src/lib.rs

+2-2
Original file line numberDiff line numberDiff line change
@@ -41,8 +41,8 @@ fn view(model: &Model) -> El<Msg> {
4141
h1![
4242
style![
4343
"text-align" => "center";
44-
"margin-top" => "40vmin";
45-
"font-size" => "10vmin";
44+
"margin-top" => unit!(40, vmin);
45+
"font-size" => unit!(10, vmin);
4646
"font-family" => "monospace";
4747
],
4848
model.time_from_js.clone().unwrap_or_default()

0 commit comments

Comments
 (0)