Refactor the HTML and improve the styling #81
|
@ -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())
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
|
@ -4,13 +4,17 @@ use file_service::{FileHandle, FileInfo, ReadFileError};
|
||||||
|
|
||||||
pub fn auth(_message: Option<String>) -> build_html::HtmlPage {
|
pub fn auth(_message: Option<String>) -> build_html::HtmlPage {
|
||||||
build_html::HtmlPage::new()
|
build_html::HtmlPage::new()
|
||||||
.with_title("Authentication")
|
.with_title("Sign In")
|
||||||
.with_stylesheet("/css")
|
.with_stylesheet("/css")
|
||||||
.with_container(
|
.with_container(
|
||||||
Container::new(ContainerType::Div)
|
Container::new(ContainerType::Div)
|
||||||
.with_attributes([("class", "authentication-page")])
|
.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_attributes([("class", "card authentication-form")])
|
||||||
.with_html(
|
.with_html(
|
||||||
Form::new()
|
Form::new()
|
||||||
|
@ -18,18 +22,17 @@ pub fn auth(_message: Option<String>) -> build_html::HtmlPage {
|
||||||
.with_method("post")
|
.with_method("post")
|
||||||
.with_container(
|
.with_container(
|
||||||
Container::new(ContainerType::Div)
|
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(
|
.with_html(
|
||||||
Input::new("password", "password")
|
Input::new("password", "password")
|
||||||
.with_id("for-token-input")
|
.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(
|
.with_html(
|
||||||
Container::new(ContainerType::Div).with_link(
|
Container::new(ContainerType::Div).with_link(
|
||||||
format!("/{}", *info.id),
|
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(),
|
.to_html_string(),
|
||||||
),
|
),
|
||||||
)
|
)
|
||||||
.with_html(
|
.with_html(
|
||||||
Container::new(ContainerType::Div)
|
Container::new(ContainerType::Div)
|
||||||
.with_html(
|
.with_html(
|
||||||
UnorderedList::new()
|
Container::new(ContainerType::UnorderedList)
|
||||||
.with_attributes(vec![("class", "thumbnail__metadata")])
|
.with_attributes(vec![("class", "thumbnail__metadata")])
|
||||||
.with_html(info.name.clone())
|
.with_html(info.name.clone())
|
||||||
.with_html(format!("{}", info.created.format("%Y-%m-%d"))),
|
.with_html(format!("{}", info.created.format("%Y-%m-%d"))),
|
||||||
|
|
|
@ -29,6 +29,7 @@ body {
|
||||||
justify-content: center;
|
justify-content: center;
|
||||||
align-items: center;
|
align-items: center;
|
||||||
height: 200px;
|
height: 200px;
|
||||||
|
margin: 8px;
|
||||||
}
|
}
|
||||||
|
|
||||||
.authentication-form {
|
.authentication-form {
|
||||||
|
@ -133,6 +134,16 @@ body {
|
||||||
|
|
||||||
.authentication-form {
|
.authentication-form {
|
||||||
width: 100%;
|
width: 100%;
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
}
|
||||||
|
|
||||||
|
.authentication-form__input {
|
||||||
|
font-size: x-large;
|
||||||
|
}
|
||||||
|
|
||||||
|
.authentication-form__button {
|
||||||
|
font-size: x-large;
|
||||||
}
|
}
|
||||||
|
|
||||||
.upload-form__selector {
|
.upload-form__selector {
|
||||||
|
|
Loading…
Reference in New Issue