Style the authentication page for mobile

file-service/src/html.rs

@@ -236,92 +236,3 @@ impl Html for Button {
         )
     }
 }
-
-#[derive(Clone, Debug)]
-pub struct Image {
-    path: String,
-    attributes: Attributes,
-}
-
-impl Image {
-    pub fn new(path: &str) -> Self {
-        Self {
-            path: path.to_owned(),
-            attributes: Attributes::default(),
-        }
-    }
-
-    pub fn with_attributes<'a>(
-        mut self,
-        values: impl IntoIterator<Item = (&'a str, &'a str)>,
-    ) -> Self {
-        self.attributes = Attributes(
-            values
-                .into_iter()
-                .map(|(a, b)| (a.to_owned(), b.to_owned()))
-                .collect::<Vec<(String, String)>>(),
-        );
-        self
-    }
-}
-
-impl Html for Image {
-    fn to_html_string(&self) -> String {
-        format!(
-            "<img src={path} {attrs} />",
-            path = self.path,
-            attrs = self.attributes.to_string()
-        )
-    }
-}
-
-#[derive(Debug)]
-pub struct UnorderedList {
-    children: Vec<String>,
-    attributes: Attributes,
-}
-
-impl UnorderedList {
-    pub fn new() -> Self {
-        Self {
-            children: vec![],
-            attributes: Attributes::default(),
-        }
-    }
-
-    pub fn with_attributes<'a>(
-        mut self,
-        values: impl IntoIterator<Item = (&'a str, &'a str)>,
-    ) -> Self {
-        self.attributes = Attributes(
-            values
-                .into_iter()
-                .map(|(a, b)| (a.to_owned(), b.to_owned()))
-                .collect::<Vec<(String, String)>>(),
-        );
-        self
-    }
-}
-
-impl Html for UnorderedList {
-    fn to_html_string(&self) -> String {
-        let children = self
-            .children
-            .iter()
-            .map(|item| format!("<li>{}</li>", item.to_html_string()))
-            .collect::<Vec<String>>();
-        format!(
-            "<ul {attrs}>
-    {children}
-            </ul>",
-            attrs = self.attributes.to_string(),
-            children = children.join("\n")
-        )
-    }
-}
-
-impl HtmlContainer for UnorderedList {
-    fn add_html<H: Html>(&mut self, html: H) {
-        self.children.push(html.to_html_string())
-    }
-}

file-service/src/pages.rs

@@ -4,13 +4,17 @@ use file_service::{FileHandle, FileInfo, ReadFileError};
 
 pub fn auth(_message: Option<String>) -> build_html::HtmlPage {
     build_html::HtmlPage::new()
-        .with_title("Authentication")
+        .with_title("Sign In")
         .with_stylesheet("/css")
         .with_container(
             Container::new(ContainerType::Div)
                 .with_attributes([("class", "authentication-page")])
-                .with_container(
+                .with_container(auth_form()),
-                    Container::new(ContainerType::Div)
+        )
+}
+
+fn auth_form() -> Container {
+    Container::default()
         .with_attributes([("class", "card authentication-form")])
         .with_html(
             Form::new()
@@ -18,18 +22,17 @@ pub fn auth(_message: Option<String>) -> build_html::HtmlPage {
                 .with_method("post")
                 .with_container(
                     Container::new(ContainerType::Div)
-                                        .with_attributes([("class", "authentication-form__label")])
-                                        .with_html(Label::new("for-token-input", "Authentication")),
-                                )
-                                .with_container(
-                                    Container::new(ContainerType::Div)
-                                        .with_attributes([("class", "authentication-form__input")])
                         .with_html(
                             Input::new("password", "password")
                                 .with_id("for-token-input")
-                                                .with_attributes([("size", "50")]),
+                                .with_attributes([
-                                        ),
+                                    ("size", "50"),
-                                ),
+                                    ("class", "authentication-form__input"),
+                                ]),
+                        )
+                        .with_html(
+                            Button::new("Sign In")
+                                .with_attributes([("class", "authentication-form__button")]),
                         ),
                 ),
         )
@@ -87,15 +90,16 @@ pub fn thumbnail(info: &FileInfo) -> Container {
         .with_html(
             Container::new(ContainerType::Div).with_link(
                 format!("/{}", *info.id),
-                Image::new(&format!("{}/tn", *info.id))
+                Container::default()
-                    .with_attributes([("class", "thumbnail__image")])
+                    .with_attributes([("class", "thumbnail")])
+                    .with_image(&format!("{}/tn", *info.id), "test data")
                     .to_html_string(),
             ),
         )
         .with_html(
             Container::new(ContainerType::Div)
                 .with_html(
-                    UnorderedList::new()
+                    Container::new(ContainerType::UnorderedList)
                         .with_attributes(vec![("class", "thumbnail__metadata")])
                         .with_html(info.name.clone())
                         .with_html(format!("{}", info.created.format("%Y-%m-%d"))),

file-service/templates/style.css

@@ -29,6 +29,7 @@ body {
     justify-content: center;
     align-items: center;
     height: 200px;
+    margin: 8px;
 }
 
 .authentication-form {
@@ -133,6 +134,16 @@ body {
 
     .authentication-form {
         width: 100%;
+        display: flex;
+        flex-direction: column;
+    }
+
+    .authentication-form__input {
+        font-size: x-large;
+    }
+
+    .authentication-form__button {
+        font-size: x-large;
     }
 
     .upload-form__selector {