Refactor out the common card styling

This commit is contained in:
Savanni D'Gerinel 2023-10-06 21:04:27 -04:00
parent 07b4cb31ce
commit cfdceff055
2 changed files with 44 additions and 44 deletions

View File

@ -11,7 +11,7 @@ pub fn auth(_message: Option<String>) -> build_html::HtmlPage {
.with_attributes([("class", "authentication-page")]) .with_attributes([("class", "authentication-page")])
.with_container( .with_container(
Container::new(ContainerType::Div) Container::new(ContainerType::Div)
.with_attributes([("class", "authentication-form")]) .with_attributes([("class", "card authentication-form")])
.with_html( .with_html(
Form::new() Form::new()
.with_path("/auth") .with_path("/auth")
@ -43,18 +43,7 @@ pub fn gallery(handles: Vec<Result<FileHandle, ReadFileError>>) -> build_html::H
Container::new(ContainerType::Div) Container::new(ContainerType::Div)
.with_attributes([("class", "gallery-page")]) .with_attributes([("class", "gallery-page")])
.with_header(1, "Gallery") .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")]); 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 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 { 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), format!("/{}", **id),
Image::new(&format!("{}/tn", **id)) Image::new(&format!("{}/tn", **id))
.with_attributes([("class", "thumbnail__image")]) .with_attributes([("class", "thumbnail__image")])
.to_html_string(), .to_html_string(),
); ),
container.add_html(tn); )
container
} }

View File

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