add some css

This commit is contained in:
kageru 2023-01-30 11:39:42 +01:00
parent bc276ddd5d
commit e72c760f7b
3 changed files with 72 additions and 29 deletions

@ -32,7 +32,12 @@ impl Display for Card {
fn fmt(&self, f: &mut fmt::Formatter<'_>) -> fmt::Result { fn fmt(&self, f: &mut fmt::Formatter<'_>) -> fmt::Result {
write!(f, "{} (", &self.name)?; write!(f, "{} (", &self.name)?;
if let Some(level) = self.level { if let Some(level) = self.level {
write!(f, "Level {level} ")?; if self.card_type.contains("XYZ") {
f.write_str("Rank ")?;
} else {
f.write_str("Level ")?;
}
write!(f, "{level} ")?;
} else if let Some(lr) = self.link_rating { } else if let Some(lr) = self.link_rating {
write!(f, "Link {lr} ")?; write!(f, "Link {lr} ")?;
} }

@ -36,6 +36,8 @@ struct Query {
q: String, q: String,
} }
const HEADER: &str = include_str!("../static/header.html");
#[get("/")] #[get("/")]
async fn search(q: Option<Either<web::Query<Query>, web::Form<Query>>>) -> Result<HttpResponse, Box<dyn std::error::Error>> { async fn search(q: Option<Either<web::Query<Query>, web::Form<Query>>>) -> Result<HttpResponse, Box<dyn std::error::Error>> {
let q = match q { let q = match q {
@ -44,36 +46,12 @@ async fn search(q: Option<Either<web::Query<Query>, web::Form<Query>>>) -> Resul
None => None, None => None,
}; };
let mut res = String::with_capacity(10_000); let mut res = String::with_capacity(10_000);
res.write_str(HEADER)?;
write!( write!(
res, res,
r#" r#"
<html>
<head>
<style>
html {{
padding-top: 2em;
background-color: #060404;
color: #ececef;
font-family: 'Lato', 'Segoe UI', sans-serif;
font-size: 14pt;
line-height: 130%;
}}
body {{
background-color: #241e1e;
border-radius:2em;
padding: 5%;
width: 80%;
margin: auto;
}}
em {{
font-size: 75%;
}}
</style>
</head>
<body>
<form action="/"> <form action="/">
<input style="width: 80%" type="text" name="q" id="searchbox" placeholder="Enter search query" value="{}"> <input type="text" name="q" id="searchbox" placeholder="Enter query (e.g. l:5 c:synchro atk>2000)" value="{}"><input type="submit" id="submit" value="🔍">
<input style="width: 15%; right: 0" type="submit" value="Submit">
</form>"#, </form>"#,
match &q { match &q {
Some(q) => q, Some(q) => q,
@ -91,14 +69,14 @@ em {{
.collect(); .collect();
write!( write!(
res, res,
"<em>Showing {} results where {} (took {:?})</em><br/><hr/><br/>", "<span class=\"meta\">Showing {} results where {} (took {:?})</span><hr/>",
matches.len(), matches.len(),
query.iter().map(|(f, _)| f.to_string()).join(" and "), query.iter().map(|(f, _)| f.to_string()).join(" and "),
now.elapsed() now.elapsed()
)?; )?;
for card in matches { for card in matches {
res.push_str(&card.to_string()); res.push_str(&card.to_string());
res.push_str("<br/><hr/><br/>"); res.push_str("<hr/>");
} }
write!(res, "</body></html>")?; write!(res, "</body></html>")?;
} else { } else {

60
static/header.html Normal file

@ -0,0 +1,60 @@
<html>
<head>
<style>
:root {
--hl: #59e9fd;
--bg: black;
--bg2: #101012;
--fg: #ececef;
--fg-dim: #ddddde;
}
html {
padding-top: 2em;
background-color: var(--bg);
color: var(--fg);
font-family: 'Lato', 'Segoe UI', sans-serif;
font-size: 13pt;
line-height: 140%;
}
body {
background-color: var(--bg2);
border-radius: 2em;
padding: 5%;
width: 80%;
margin: auto;
text-align: justify;
}
.meta {
font-size: 75%;
color: var(--fg-dim);
}
form > * {
height: 2em;
border-color: var(--hl);
background-color: var(--bg2);
color: var(--fg);
border-width: 0 0 2px 0;
}
form > *:focus {
outline: none;
}
#searchbox {
width: 90%;
}
#submit {
width: 10%;
}
hr {
border-color: var(--hl);
}
</style>
</head>
<body>