diff --git a/file-service/src/html.rs b/file-service/src/html.rs
index 1d2199a..c545e6a 100644
--- a/file-service/src/html.rs
+++ b/file-service/src/html.rs
@@ -2,6 +2,7 @@ use build_html::{self, Html, HtmlContainer};
#[derive(Clone, Debug)]
pub struct Form {
+ classes: Option,
path: String,
method: String,
encoding: Option,
@@ -11,6 +12,7 @@ pub struct Form {
impl Form {
pub fn new() -> Self {
Self {
+ classes: None,
path: "/".to_owned(),
method: "get".to_owned(),
encoding: None,
@@ -36,16 +38,21 @@ impl Form {
impl Html for Form {
fn to_html_string(&self) -> String {
+ let classes = match self.classes {
+ Some(ref classes) => format!("class=\"{}\"", classes),
+ None => "".to_owned(),
+ };
let encoding = match self.encoding {
Some(ref encoding) => format!("enctype=\"{encoding}\"", encoding = encoding),
None => "".to_owned(),
};
format!(
- "\n",
+ "\n",
path = self.path,
method = self.method,
encoding = encoding,
- elements = self.elements.to_html_string()
+ elements = self.elements.to_html_string(),
+ classes = classes,
)
}
}
@@ -62,7 +69,7 @@ pub struct Input {
name: String,
id: Option,
value: Option,
- content: Option,
+ attributes: Vec<(String, String)>,
}
impl Html for Input {
@@ -75,14 +82,20 @@ impl Html for Input {
Some(ref value) => format!("value=\"{}\"", value),
None => "".to_owned(),
};
+ let attrs = self
+ .attributes
+ .iter()
+ .map(|(key, value)| format!("{}=\"{}\"", key, value))
+ .collect::>()
+ .join(" ");
format!(
- "{content}\n",
+ "\n",
ty = self.ty,
name = self.name,
id = id,
value = value,
- content = self.content.clone().unwrap_or("".to_owned()),
+ attrs = attrs,
)
}
}
@@ -94,7 +107,7 @@ impl Input {
name: name.to_owned(),
id: None,
value: None,
- content: None,
+ attributes: vec![],
}
}
@@ -108,12 +121,16 @@ impl Input {
self
}
- /*
- pub fn with_content(mut self, val: &str) -> Self {
- self.content = Some(val.to_owned());
+ pub fn with_attributes<'a>(
+ mut self,
+ values: impl IntoIterator- ,
+ ) -> Self {
+ self.attributes = values
+ .into_iter()
+ .map(|(a, b)| (a.to_owned(), b.to_owned()))
+ .collect::>();
self
}
- */
}
#[derive(Clone, Debug)]
diff --git a/file-service/src/pages.rs b/file-service/src/pages.rs
index ba1b586..a5cceb5 100644
--- a/file-service/src/pages.rs
+++ b/file-service/src/pages.rs
@@ -5,14 +5,32 @@ use file_service::{FileHandle, FileId, ReadFileError};
pub fn auth(_message: Option) -> build_html::HtmlPage {
build_html::HtmlPage::new()
.with_title("Authentication")
- .with_html(
- Form::new()
- .with_path("/auth")
- .with_method("post")
+ .with_stylesheet("/css")
+ .with_container(
+ Container::new(ContainerType::Div)
+ .with_attributes([("class", "authentication-page")])
.with_container(
Container::new(ContainerType::Div)
- .with_html(Input::new("token", "token").with_id("for-token-input"))
- .with_html(Label::new("for-token-input", "Authentication Token")),
+ .with_attributes([("class", "authentication-form")])
+ .with_html(
+ Form::new()
+ .with_path("/auth")
+ .with_method("post")
+ .with_container(
+ 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(
+ Input::new("token", "token")
+ .with_id("for-token-input")
+ .with_attributes([("size", "50")]),
+ ),
+ ),
+ ),
),
)
}
@@ -20,6 +38,7 @@ pub fn auth(_message: Option) -> build_html::HtmlPage {
pub fn gallery(handles: Vec>) -> build_html::HtmlPage {
let mut page = build_html::HtmlPage::new()
.with_title("Admin list of files")
+ .with_stylesheet("/css")
.with_header(1, "Admin list of files")
.with_html(
Form::new()
diff --git a/file-service/templates/style.css b/file-service/templates/style.css
index eeb6f8b..5e7265b 100644
--- a/file-service/templates/style.css
+++ b/file-service/templates/style.css
@@ -1,5 +1,39 @@
+:root {
+ --main-bg-color: #e5f0fc;
+ --fg-color: #449dfc;
+
+ --px-4: 4px;
+ --px-8: 8px;
+ --px-12: 12px;
+
+ --hover-low: 4px 4px 4px gray;
+}
+
body {
font-family: 'Ariel', sans-serif;
+ background-color: var(--main-bg-color);
+}
+
+.authentication-page {
+ display: flex;
+ justify-content: center;
+ align-items: center;
+ height: 200px;
+}
+
+.authentication-form {
+ border: 1px solid black;
+ border-radius: 5px;
+ border-shadow: var(--hover-low);
+ padding: var(--px-12);
+}
+
+.authentication-form__label {
+ margin: var(--px-4);
+}
+
+.authentication-form__input {
+ margin: var(--px-4);
}
.files {
@@ -33,9 +67,6 @@ img {
.uploadform {
display: flex;
margin: 1em;
- background-color: #e5f0fc;
- border: 1px solid #449dfc;
- border-radius: 5px;
padding: 1em;
}
@@ -72,7 +103,8 @@ img {
outline: -webkit-focus-ring-color auto 5px;
}
-@media screen and (max-width: 980px) { /* This is the screen width of a OnePlus 5t */
+/*
+@media screen and (max-width: 980px) { /* This is the screen width of a OnePlus 5t
body {
font-size: xx-large;
}
@@ -101,3 +133,4 @@ img {
width: 100%;
}
}
+*/