use flex layout
This commit is contained in:
parent
81cc2a68ec
commit
1d3a79857c
@ -55,8 +55,7 @@ impl Display for Card {
|
||||
(None, None) => write!(f, "? ATK / ? DEF")?,
|
||||
}
|
||||
}
|
||||
f.write_str("</em><br/>")?;
|
||||
f.write_str(&self.text)?;
|
||||
write!(f, "</em><p>{}</p>", &self.text)?;
|
||||
Ok(())
|
||||
}
|
||||
}
|
||||
|
||||
18
src/main.rs
18
src/main.rs
@ -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());
|
||||
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]
|
||||
async fn main() -> std::io::Result<()> {
|
||||
let now = Instant::now();
|
||||
@ -78,10 +80,11 @@ async fn card_info(card_id: web::Path<usize>) -> Result<HttpResponse, Box<dyn st
|
||||
write!(
|
||||
res,
|
||||
r#"
|
||||
<div class="row">
|
||||
<div class="column left">{card}</div>
|
||||
<div class="column right"><img style="width: 100%;" src="/static/full/{}.jpg"/></div>
|
||||
<div>
|
||||
<img class="fullimage" src="{}/static/full/{}.jpg"/>
|
||||
{card}
|
||||
</div>"#,
|
||||
IMG_HOST.as_str(),
|
||||
card.id,
|
||||
)?;
|
||||
}
|
||||
@ -140,14 +143,17 @@ fn render_results(res: &mut String, query: &str) -> Result<(), Box<dyn std::erro
|
||||
if matches.is_empty() {
|
||||
return Ok(());
|
||||
}
|
||||
res.push_str("<table>");
|
||||
res.push_str("<div style=\"display: flex; flex-wrap: wrap;\">");
|
||||
for card in matches {
|
||||
write!(
|
||||
res,
|
||||
r#"<tr><td>{card}</td><td><a href="/card/{}"><img src="/static/thumb/{}.jpg" class="thumb"/></a></td></tr>"#,
|
||||
card.id, card.id
|
||||
r#"<div class="cardresult"><a href="/card/{}"><img src="{}/static/thumb/{}.jpg" class="thumb"/></a>{card}</div>"#,
|
||||
card.id,
|
||||
IMG_HOST.as_str(),
|
||||
card.id
|
||||
)?;
|
||||
}
|
||||
res.push_str("</div>");
|
||||
Ok(())
|
||||
}
|
||||
|
||||
|
||||
@ -1,138 +1,6 @@
|
||||
<html>
|
||||
<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">
|
||||
<link rel="stylesheet" href="/static/style.css" />
|
||||
</head>
|
||||
<body>
|
||||
|
||||
115
static/style.css
Normal file
115
static/style.css
Normal 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;
|
||||
}
|
||||
Loading…
Reference in New Issue
Block a user