💄 UI

src/main.rs

@@ -91,6 +91,20 @@ pub async fn main_page(
     }
 }
 
+#[allow(non_snake_case)]
+pub fn DetailLink(text: &str, reference: &str) -> PreEscaped<String> {
+    Flex(
+        Div()
+            .vanish()
+            .push(text.render())
+            .push(Link(reference, Text(reference)))
+            .render(),
+    )
+    .gap_x(ScreenValue::_2)
+    .direction(Direction::Row)
+    .render()
+}
+
 pub fn info_tab(prj: &Project, root: &str) -> PreEscaped<String> {
     Flex(
         Div()
@@ -98,11 +112,12 @@ pub fn info_tab(prj: &Project, root: &str) -> PreEscaped<String> {
             .push(Rounded(
                 Background(Padding(Code(&prj.description)).all(ScreenValue::_4)).color(Gray::_900),
             ))
+            .push(Margin(Text("Information").xl().semibold()).top(ScreenValue::_2))
             .push(Optional(prj.website.as_deref(), |website| {
-                Link(website, Text(&format!("Website: {website}")))
+                DetailLink("Website:", website)
             }))
             .push(Optional(prj.documentation.as_deref(), |docs| {
-                Link(docs, Text(&format!("Documentation: {docs}")))
+                DetailLink("Documentation:", docs)
             }))
             .push(Optional(prj.since.as_deref(), |since| {
                 Text(&format!("Since: {since}"))
@@ -110,7 +125,7 @@ pub fn info_tab(prj: &Project, root: &str) -> PreEscaped<String> {
             .push(Optional(prj.contact.as_ref(), |contact| {
                 Div()
                     .vanish()
-                    .push(Text("Contact").large())
+                    .push(Text("Contact").xl().semibold())
                     .push(Text(&format!(
                         "eMail: {}",
                         contact
@@ -129,16 +144,22 @@ pub fn info_tab(prj: &Project, root: &str) -> PreEscaped<String> {
 
                 Div()
                     .vanish()
-                    .push(Text("Sub projects").large())
-                    .push_for_each(&prj_links, |link: &_| {
-                        Width(
-                            ScreenValue::fit,
-                            Button(Link(
-                                &format!("/prj/{root}{link}"),
-                                Text(&prj.sub.as_ref().unwrap().get(*link).unwrap().name),
-                            )),
-                        )
-                    })
+                    .push(Margin(Text("Sub projects").xl().semibold()).bottom(ScreenValue::_2))
+                    .push(Row(prj_links
+                        .into_iter()
+                        .map(|link| {
+                            Width(
+                                ScreenValue::fit,
+                                Button(Link(
+                                    &format!("/prj/{root}{link}"),
+                                    ProjectIcon(
+                                        &prj.sub.as_ref().unwrap().get(link).unwrap(),
+                                        false,
+                                    ),
+                                )),
+                            )
+                        })
+                        .collect()))
             })),
     )
     .gap(ScreenValue::_2)
@@ -152,10 +173,14 @@ fn up_to(keyword: &str, v: &[&str], separator: &str) -> String {
 }
 
 #[allow(non_snake_case)]
-pub fn ProjectIcon(prj: &Project) -> PreEscaped<String> {
+pub fn ProjectIcon(prj: &Project, big: bool) -> PreEscaped<String> {
     Row(vec![
         Optional(prj.icon.as_ref(), |icon| Image(icon).alt("Project Icon")),
-        Text(&prj.name)._2xl().render(),
+        if big {
+            Text(&prj.name)._2xl().render()
+        } else {
+            Text(&prj.name).render()
+        },
     ])
     .gap(ScreenValue::_4)
     .full_center()
@@ -183,14 +208,12 @@ pub async fn render_project(
             let prj_path = up_to(x, &root_paths, "/");
 
             (
-                ProjectIcon(&get_prj(c, &prj_path).unwrap()).0,
+                ProjectIcon(&get_prj(c, &prj_path).unwrap(), true).0,
                 format!("/prj/{}", prj_path),
             )
         })
         .collect();
 
-    println!("{bc:?}");
-
     page!(
         shell,
         ctx,