Refactor out the common card styling

file-service/src/pages.rs

@@ -11,7 +11,7 @@ pub fn auth(_message: Option<String>) -> build_html::HtmlPage {
                 .with_attributes([("class", "authentication-page")])
                 .with_container(
                     Container::new(ContainerType::Div)
-                        .with_attributes([("class", "authentication-form")])
+                        .with_attributes([("class", "card authentication-form")])
                         .with_html(
                             Form::new()
                                 .with_path("/auth")
@@ -43,18 +43,7 @@ pub fn gallery(handles: Vec<Result<FileHandle, ReadFileError>>) -> build_html::H
             Container::new(ContainerType::Div)
                 .with_attributes([("class", "gallery-page")])
                 .with_header(1, "Gallery")
-                .with_html(
+                .with_html(upload_form()),
-                    Form::new()
-                        .with_path("/upload")
-                        .with_method("post")
-                        .with_encoding("multipart/form-data")
-                        .with_container(
-                            Container::new(ContainerType::Div)
-                                .with_html(Input::new("file", "file").with_id("for-selector-input"))
-                                .with_html(Label::new("for-selector-input", "Select a file")),
-                        )
-                        .with_html(Button::new("Upload file").with_type("submit")),
-                ),
         );
 
     let mut gallery = Container::new(ContainerType::Div).with_attributes([("class", "gallery")]);
@@ -78,15 +67,29 @@ pub fn gallery(handles: Vec<Result<FileHandle, ReadFileError>>) -> build_html::H
     page
 }
 
+pub fn upload_form() -> Form {
+    Form::new()
+        .with_path("/upload")
+        .with_method("post")
+        .with_encoding("multipart/form-data")
+        .with_container(
+            Container::new(ContainerType::Div)
+                .with_attributes([("class", "card upload-form")])
+                .with_html(Input::new("file", "file").with_id("for-selector-input"))
+                .with_html(Label::new("for-selector-input", "Select a file"))
+                .with_html(Button::new("Upload file").with_type("submit")),
+        )
+}
+
 pub fn thumbnail(id: &FileId) -> Container {
-    let mut container =
+    Container::new(ContainerType::Div)
-        Container::new(ContainerType::Div).with_attributes(vec![("class", "thumbnail")]);
+        .with_attributes(vec![("class", "card thumbnail")])
-    let tn = Container::new(ContainerType::Div).with_link(
+        .with_html(
+            Container::new(ContainerType::Div).with_link(
                 format!("/{}", **id),
                 Image::new(&format!("{}/tn", **id))
                     .with_attributes([("class", "thumbnail__image")])
                     .to_html_string(),
-    );
+            ),
-    container.add_html(tn);
+        )
-    container
 }

file-service/templates/style.css

@@ -14,6 +14,16 @@ body {
     background-color: var(--main-bg-color);
 }
 
+.card {
+    border: 1px solid black;
+    border-radius: 5px;
+    border-shadow: var(--hover-low);
+    padding: var(--px-12);
+    margin: var(--space-large);
+    padding: var(--space-medium);
+
+}
+
 .authentication-page {
     display: flex;
     flex-direction: column;
@@ -23,10 +33,6 @@ body {
 }
 
 .authentication-form {
-    border: 1px solid black;
-    border-radius: 5px;
-    border-shadow: var(--hover-low);
-    padding: var(--px-12);
 }
 
 .authentication-form__label {
@@ -39,31 +45,26 @@ body {
 
 .gallery-page {
     display: flex;
-    flex-wrap: wrap;
+    flex-direction: column;
+}
+
+.upload-form {
+    display: flex;
+    flex-direction: column;
 }
 
 .gallery {
     display: flex;
+    flex-wrap: wrap;
 }
 
 .thumbnail {
-    border: 1px solid black;
-    box-shadow: var(--hover-low);
     max-width: 300px;
-    margin: var(--space-large);
-    padding: var(--space-medium);
     display: flex;
     flex-direction: column;
     justify-content: space-between;
 }
 
-/*
-.thumbnail {
-    max-width: 320px;
-    margin: 1em;
-}
-*/
-
 .thumbnail__image {
     max-width: 100%;
     border: none;
@@ -77,13 +78,9 @@ body {
 }
 
 .uploadform {
-    display: flex;
-    margin: 1em;
-    padding: 1em;
 }
 */
 
-/* https://benmarshall.me/styling-file-inputs/ */
     /*
 [type="file"] {
     border: 0;