From cfdceff0551793f77a46232b8674439a091fe08b Mon Sep 17 00:00:00 2001
From: Savanni D'Gerinel <savanni@luminescent-dreams.com>
Date: Fri, 6 Oct 2023 21:04:27 -0400
Subject: [PATCH] Refactor out the common card styling

---
 file-service/src/pages.rs        | 51 +++++++++++++++++---------------
 file-service/templates/style.css | 37 +++++++++++------------
 2 files changed, 44 insertions(+), 44 deletions(-)

diff --git a/file-service/src/pages.rs b/file-service/src/pages.rs
index 45a6fc5..0c6fcf8 100644
--- a/file-service/src/pages.rs
+++ b/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(
-                    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")),
-                ),
+                .with_html(upload_form()),
         );
 
     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 thumbnail(id: &FileId) -> Container {
-    let mut container =
-        Container::new(ContainerType::Div).with_attributes(vec![("class", "thumbnail")]);
-    let tn = 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
+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 {
+    Container::new(ContainerType::Div)
+        .with_attributes(vec![("class", "card thumbnail")])
+        .with_html(
+            Container::new(ContainerType::Div).with_link(
+                format!("/{}", **id),
+                Image::new(&format!("{}/tn", **id))
+                    .with_attributes([("class", "thumbnail__image")])
+                    .to_html_string(),
+            ),
+        )
 }
diff --git a/file-service/templates/style.css b/file-service/templates/style.css
index a7345c5..58447f5 100644
--- a/file-service/templates/style.css
+++ b/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;