implement h + w

src/ui/components/appbar.rs

@@ -52,8 +52,8 @@ impl UIWidget for AppBarWidget {
                                         Div()
                                             .vanish()
                                             .push(Sized(
-                                                10,
+                                                ScreenValue::_10,
-                                                10,
+                                                ScreenValue::_10,
                                                 Rounded(Image("/favicon").alt("Logo"))
                                                     .size(Size::Medium),
                                             ))

src/ui/mod.rs

@@ -24,6 +24,7 @@ pub mod prelude {
     pub use super::primitives::div::Div;
     pub use super::primitives::flex::{Flex, Justify};
     pub use super::primitives::header::Header;
+    pub use super::primitives::height::Height;
     pub use super::primitives::image::Image;
     pub use super::primitives::link::Link;
     pub use super::primitives::margin::Margin;
@@ -34,7 +35,7 @@ pub mod prelude {
     pub use super::primitives::sized::Sized;
     pub use super::primitives::space::{ScreenValue, SpaceBetween};
     pub use super::primitives::text::{Paragraph, Span, Text};
-    pub use super::primitives::width::FitWidth;
+    pub use super::primitives::width::Width;
     pub use super::wrapper::Hover;
 }
 

src/ui/primitives/height.rs

@@ -0,0 +1,47 @@
+use crate::ui::UIWidget;
+use maud::{Markup, Render, html};
+
+use super::space::ScreenValue;
+
+#[allow(non_snake_case)]
+pub fn Width<T: UIWidget + 'static>(size: ScreenValue, inner: T) -> Height {
+    Height(Box::new(inner), size)
+}
+
+pub struct Height(Box<dyn UIWidget>, ScreenValue);
+
+impl Render for Height {
+    fn render(&self) -> Markup {
+        self.render_with_class("")
+    }
+}
+
+impl UIWidget for Height {
+    fn can_inherit(&self) -> bool {
+        true
+    }
+
+    fn base_class(&self) -> Vec<String> {
+        vec![format!("h-{}", self.1.to_value())]
+    }
+
+    fn extended_class(&self) -> Vec<String> {
+        let mut c = self.base_class();
+        c.extend_from_slice(&self.0.extended_class());
+        c
+    }
+
+    fn render_with_class(&self, class: &str) -> Markup {
+        if self.0.as_ref().can_inherit() {
+            self.0
+                .as_ref()
+                .render_with_class(&format!("{} {class}", self.base_class().join(" ")))
+        } else {
+            html! {
+                div class=(format!("{} {class}", self.base_class().join(" "))) {
+                    (self.0.as_ref())
+                }
+            }
+        }
+    }
+}

src/ui/primitives/mod.rs

@@ -6,6 +6,7 @@ pub mod container;
 pub mod div;
 pub mod flex;
 pub mod header;
+pub mod height;
 pub mod image;
 pub mod input;
 pub mod link;

src/ui/primitives/sized.rs

@@ -1,12 +1,18 @@
 use crate::ui::UIWidget;
 use maud::{Markup, Render, html};
 
+use super::space::ScreenValue;
+
 #[allow(non_snake_case)]
-pub fn Sized<T: UIWidget + 'static>(height: u32, width: u32, inner: T) -> SizedWidget {
+pub fn Sized<T: UIWidget + 'static>(
+    height: ScreenValue,
+    width: ScreenValue,
+    inner: T,
+) -> SizedWidget {
     SizedWidget(Box::new(inner), height, width)
 }
 
-pub struct SizedWidget(Box<dyn UIWidget>, u32, u32);
+pub struct SizedWidget(Box<dyn UIWidget>, ScreenValue, ScreenValue);
 
 impl Render for SizedWidget {
     fn render(&self) -> Markup {
@@ -20,7 +26,10 @@ impl UIWidget for SizedWidget {
     }
 
     fn base_class(&self) -> Vec<String> {
-        vec![format!("h-{}", self.1), format!("w-{}", self.2)]
+        vec![
+            format!("h-{}", self.1.to_value()),
+            format!("w-{}", self.2.to_value()),
+        ]
     }
 
     fn extended_class(&self) -> Vec<String> {

src/ui/primitives/space.rs

@@ -107,6 +107,12 @@ pub enum ScreenValue {
     _90,
     px,
     reverse,
+    min,
+    max,
+    fit,
+    screen,
+    full,
+    auto,
 }
 
 impl ScreenValue {
@@ -149,6 +155,74 @@ impl ScreenValue {
             Self::_90 => "90",
             Self::px => "px",
             Self::reverse => "reverse",
+            Self::min => "min",
+            Self::max => "max",
+            Self::fit => "fit",
+            Self::screen => "screen",
+            Self::full => "full",
+            Self::auto => "auto",
+        }
+    }
+}
+
+pub enum Fraction {
+    _1on2,
+    _1on3,
+    _2on3,
+    _1on4,
+    _2on4,
+    _3on4,
+    _1on5,
+    _2on5,
+    _3on5,
+    _4on5,
+    _1on6,
+    _2on6,
+    _3on6,
+    _4on6,
+    _5on6,
+    _1on12,
+    _2on12,
+    _3on12,
+    _4on12,
+    _5on12,
+    _6on12,
+    _7on12,
+    _8on12,
+    _9on12,
+    _10on12,
+    _11on12,
+}
+
+impl Fraction {
+    pub const fn to_value(&self) -> &str {
+        match self {
+            Fraction::_1on2 => "1/2",
+            Fraction::_1on3 => "1/3",
+            Fraction::_2on3 => "2/3",
+            Fraction::_1on4 => "1/4",
+            Fraction::_2on4 => "2/4",
+            Fraction::_3on4 => "3/4",
+            Fraction::_1on5 => "1/5",
+            Fraction::_2on5 => "2/5",
+            Fraction::_3on5 => "3/5",
+            Fraction::_4on5 => "4/5",
+            Fraction::_1on6 => "1/6",
+            Fraction::_2on6 => "2/6",
+            Fraction::_3on6 => "3/6",
+            Fraction::_4on6 => "4/6",
+            Fraction::_5on6 => "5/6",
+            Fraction::_1on12 => "1/12",
+            Fraction::_2on12 => "2/12",
+            Fraction::_3on12 => "3/12",
+            Fraction::_4on12 => "4/12",
+            Fraction::_5on12 => "5/12",
+            Fraction::_6on12 => "6/12",
+            Fraction::_7on12 => "7/12",
+            Fraction::_8on12 => "8/12",
+            Fraction::_9on12 => "9/12",
+            Fraction::_10on12 => "10/12",
+            Fraction::_11on12 => "11/12",
         }
     }
 }

src/ui/primitives/width.rs

@@ -1,26 +1,28 @@
 use crate::ui::UIWidget;
 use maud::{Markup, Render, html};
 
+use super::space::ScreenValue;
+
 #[allow(non_snake_case)]
-pub fn FitWidth<T: UIWidget + 'static>(inner: T) -> FitWidthWidget {
+pub fn Width<T: UIWidget + 'static>(size: ScreenValue, inner: T) -> WidthWidget {
-    FitWidthWidget(Box::new(inner))
+    WidthWidget(Box::new(inner), size)
 }
 
-pub struct FitWidthWidget(Box<dyn UIWidget>);
+pub struct WidthWidget(Box<dyn UIWidget>, ScreenValue);
 
-impl Render for FitWidthWidget {
+impl Render for WidthWidget {
     fn render(&self) -> Markup {
         self.render_with_class("")
     }
 }
 
-impl UIWidget for FitWidthWidget {
+impl UIWidget for WidthWidget {
     fn can_inherit(&self) -> bool {
         true
     }
 
     fn base_class(&self) -> Vec<String> {
-        vec!["max-w-fit".to_string()]
+        vec![format!("w-{}", self.1.to_value())]
     }
 
     fn extended_class(&self) -> Vec<String> {