From 3bbe4d652aaabcb01fbb3197116c51a7edd8ba59 Mon Sep 17 00:00:00 2001
From: kageru <kageru@encode.moe>
Date: Thu, 2 Feb 2023 15:46:15 +0100
Subject: [PATCH] make the entire search tile a hyperlink

---
 src/data.rs      |  2 +-
 src/main.rs      |  2 +-
 static/style.css | 17 ++++++++++++++++-
 3 files changed, 18 insertions(+), 3 deletions(-)

diff --git a/src/data.rs b/src/data.rs
index c630053..9dbd9b5 100644
--- a/src/data.rs
+++ b/src/data.rs
@@ -63,7 +63,7 @@ impl Card {
 
 impl Display for Card {
     fn fmt(&self, f: &mut fmt::Formatter<'_>) -> fmt::Result {
-        write!(f, r#"<h2><a href="/card/{}">{}</a></h2><br/><em>"#, &self.id, &self.name)?;
+        write!(f, r#"<h2 class="cardname">{}</h2><br/><em>"#, &self.name)?;
         if let Some(level) = self.level {
             if self.card_type.contains("XYZ") {
                 f.write_str("Rank ")?;
diff --git a/src/main.rs b/src/main.rs
index 7fdea9e..8c79731 100644
--- a/src/main.rs
+++ b/src/main.rs
@@ -161,7 +161,7 @@ fn render_results(res: &mut String, query: &str) -> Result<(), Box<dyn std::erro
     for card in matches {
         write!(
             res,
-            r#"<div class="cardresult"><a href="/card/{}"><img src="{}/static/thumb/{}.jpg" class="thumb"/></a>{card}</div>"#,
+            r#"<a class="cardresult" href="/card/{}"><img src="{}/static/thumb/{}.jpg" class="thumb"/>{card}</a>"#,
             card.id,
             IMG_HOST.as_str(),
             card.id
diff --git a/static/style.css b/static/style.css
index 94ee566..ceaa3fd 100644
--- a/static/style.css
+++ b/static/style.css
@@ -87,10 +87,25 @@ img {
   float: right;
   margin: 0 0 1em 1.5em;
 }
+/* 
+ * This is a big <a> element that looks and behaves more like a div
+ * because we can’t put a div inside an a.
+ */
 .cardresult {
-  margin: 1em;
+  display: block;
+  padding: 1em;
   flex-grow: 1;
   flex-basis: 25em;
+  transition-duration: 200ms;
+  text-decoration: none;
+  color: var(--fg);
+}
+.cardresult:hover {
+  background-color: var(--bg);
+}
+.cardname {
+  color: var(--hl);
+  text-decoration: underline;
 }
 
 @media screen and (max-width: 680px) {