savanni
/
monorepo
1
0
Fork 0
Code Issues 76 Pull Requests Projects 6 Releases Wiki Activity

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
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

41
file-service/src/pages.rs
View File

@ -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 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).with_attributes(vec![("class", "thumbnail")]);
let tn = Container::new(ContainerType::Div).with_link(
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(),
);
container.add_html(tn);
container
),
)
}

37
file-service/templates/style.css
View File

@ -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;