kageru/aro
1
0
Fork 0
Code Issues Pull Requests Releases Wiki Activity

use flex layout

Browse Source
This commit is contained in:
kageru 2023-01-31 17:08:37 +01:00
parent 81cc2a68ec
commit 1d3a79857c
4 changed files with 129 additions and 141 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

3
src/data.rs
View File

@ -55,8 +55,7 @@ impl Display for Card {
(None, None) => write!(f, "? ATK / ? DEF")?, (None, None) => write!(f, "? ATK / ? DEF")?,
} }
} }
f.write_str("</em><br/>")?; write!(f, "</em><p>{}</p>", &self.text)?;
f.write_str(&self.text)?;
Ok(()) Ok(())
} }
} }

18
src/main.rs
View File

@ -21,6 +21,8 @@ static CARDS_BY_ID: LazyLock<HashMap<usize, Card>> =
LazyLock::new(|| CARDS.iter().map(|c| (c.id, Card { text: c.text.replace('\r', "").replace('\n', "<br/>"), ..c.clone() })).collect()); LazyLock::new(|| CARDS.iter().map(|c| (c.id, Card { text: c.text.replace('\r', "").replace('\n', "<br/>"), ..c.clone() })).collect());
static SEARCH_CARDS: LazyLock<Vec<SearchCard>> = LazyLock::new(|| CARDS.iter().map(SearchCard::from).collect()); static SEARCH_CARDS: LazyLock<Vec<SearchCard>> = LazyLock::new(|| CARDS.iter().map(SearchCard::from).collect());
static IMG_HOST: LazyLock<String> = LazyLock::new(|| std::env::var("IMG_HOST").unwrap_or_else(|_| String::new()));
#[actix_web::main] #[actix_web::main]
async fn main() -> std::io::Result<()> { async fn main() -> std::io::Result<()> {
let now = Instant::now(); let now = Instant::now();
@ -78,10 +80,11 @@ async fn card_info(card_id: web::Path<usize>) -> Result<HttpResponse, Box<dyn st
write!( write!(
res, res,
r#" r#"
<div class="row"> <div>
<div class="column left">{card}</div> <img class="fullimage" src="{}/static/full/{}.jpg"/>
<div class="column right"><img style="width: 100%;" src="/static/full/{}.jpg"/></div> {card}
</div>"#, </div>"#,
IMG_HOST.as_str(),
card.id, card.id,
)?; )?;
} }
@ -140,14 +143,17 @@ fn render_results(res: &mut String, query: &str) -> Result<(), Box<dyn std::erro
if matches.is_empty() { if matches.is_empty() {
return Ok(()); return Ok(());
} }
res.push_str("<table>"); res.push_str("<div style=\"display: flex; flex-wrap: wrap;\">");
for card in matches { for card in matches {
write!( write!(
res, res,
r#"<tr><td>{card}</td><td><a href="/card/{}"><img src="/static/thumb/{}.jpg" class="thumb"/></a></td></tr>"#, r#"<div class="cardresult"><a href="/card/{}"><img src="{}/static/thumb/{}.jpg" class="thumb"/></a>{card}</div>"#,
card.id, card.id card.id,
IMG_HOST.as_str(),
card.id
)?; )?;
} }
res.push_str("</div>");
Ok(()) Ok(())
} }

134
static/header.html
View File

@ -1,138 +1,6 @@
<html> <html>
<head> <head>
<style>
:root {
--hl: #59e9fd;
--bg: black;
--bg2: #101012;
--fg: #ececef;
--fg-dim: #ddddde;
}
html {
padding: 2em 0;
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;
}
code {
font-family: "Hack", "Fira Code", "Courier New", monospace;
background-color: #2a2a2a;
}
.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%;
}
a {
color: var(--hl);
}
hr {
border-color: var(--hl);
}
table {
width: 100%;
}
td {
border-bottom: 2px solid var(--hl);
padding: 0.5em 0;
text-align: justify;
}
td:first-child {
width: 80%;
padding-right: 1em;
}
td:nth-child(2) {
width: 20%;
}
h2 {
margin-block-end: 0;
font-weight: normal;
}
h2 {
font-size: 120%;
}
.thumb {
max-height: 250px;
}
.column {
float: left;
margin-bottom: 2em;
}
.left {
width: 60%;
padding-right: 1em;
}
.right {
width: 35%;
}
@media screen and (max-width: 680px) {
.column {
width: 100%;
}
body {
width: 95%;
padding: 3%;
}
#bottom {
bottom: 1em;
}
}
.row:after {
content: "";
display: table;
clear: both;
}
/* little floaty thing at the bottom with links to home and help */
#bottom {
position: fixed;
bottom: 2em;
right: 10%;
background-color: var(--bg2);
z-index: 2;
padding: 1em;
border-radius: 1em;
}
</style>
<meta name="viewport" content="width=device-width, initial-scale=1"> <meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="/static/style.css" />
</head> </head>
<body> <body>

115
static/style.css Normal file
View File

@ -0,0 +1,115 @@
:root {
--hl: #59e9fd;
--bg: black;
--bg2: #101012;
--fg: #ececef;
--fg-dim: #ddddde;
}
html {
padding: 2em 0;
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;
}
code {
font-family: "Hack", "Fira Code", "Courier New", monospace;
background-color: #2a2a2a;
}
.meta {
font-size: 75%;
color: var(--fg-dim);
}
p {
text-align: justify;
}
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%;
}
a {
color: var(--hl);
}
hr {
border-color: var(--hl);
}
h2 {
margin-block-end: 0;
margin-block-start: 0;
font-weight: normal;
font-size: 120%;
}
img {
box-shadow: 10px 10px var(--bg);
}
.thumb {
max-height: 250px;
max-width: 30%;
float: right;
margin: 0 0 0.8em 1.2em;
}
.fullimage {
width: 30%;
float: right;
margin: 0 0 1em 1.5em;
}
.cardresult {
margin: 1em;
flex-grow: 1;
flex-basis: 25em;
}
@media screen and (max-width: 680px) {
body {
width: 95%;
padding: 3%;
}
#bottom {
bottom: 1em;
}
}
/* little floaty thing at the bottom with links to home and help */
#bottom {
position: fixed;
bottom: 2em;
right: 10%;
background-color: var(--bg);
z-index: 2;
padding: 1em;
border-radius: 1em;
}