From 6be7f18ca0c6ac9b9dd9335d084726023a652995 Mon Sep 17 00:00:00 2001
From: Mylloon <kennel.anri@tutanota.com>
Date: Mon, 16 Oct 2023 12:08:26 +0200
Subject: [PATCH] better handling for clickable cards in portfolio

---
 static/css/portfolio.css       | 10 +++++++---
 templates/portfolio/card.html  | 16 ++++++----------
 templates/portfolio/index.html | 11 ++++++++++-
 3 files changed, 23 insertions(+), 14 deletions(-)

diff --git a/static/css/portfolio.css b/static/css/portfolio.css
index ea918e6..124abec 100644
--- a/static/css/portfolio.css
+++ b/static/css/portfolio.css
@@ -52,10 +52,13 @@ main li {
 
 main li:hover {
   background: color-mix(in srgb, var(--background) 40%, var(--extreme));
-  cursor: pointer;
   box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.3);
 }
 
+main li[role="button"]:hover {
+  cursor: pointer;
+}
+
 /* Element */
 div {
   display: flex;
@@ -68,13 +71,14 @@ div h3 {
   margin-block: 0;
 }
 
-div h3::after {
+/* Redirection arrow on clickable element */
+li[role="button"] div h3::after {
   content: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' height='20' width='20' viewBox='0 0 24 24' fill='none' stroke='currentColor' %3E%3Cpath d='M21 3h-6m6 0l-9 9m9-9v6' %3E%3C/path%3E%3Cpath d='M21 13v6a2 2 0 01-2 2H5a2 2 0 01-2-2V5a2 2 0 012-2h6' %3E%3C/path%3E%3C/svg%3E");
   float: right;
 }
 
 @media (prefers-color-scheme: dark) {
-  div h3::after {
+  li[role="button"] div h3::after {
     filter: invert(80%);
   }
 }
diff --git a/templates/portfolio/card.html b/templates/portfolio/card.html
index 3de26cf..65d0ac8 100644
--- a/templates/portfolio/card.html
+++ b/templates/portfolio/card.html
@@ -1,10 +1,6 @@
-{{#metadata}} {{#info}}
-<li role="button" onclick="window.open('{{link}}', '_blank', 'noreferrer');">
-  <div>
-    <h3>{{title}}</h3>
-    <span>{{&content}}</span> {{#language}}
-    <p data-lang="{{language}}"></p>
-    {{/language}}
-  </div>
-</li>
-{{/info}} {{/metadata}}
+<div>
+  <h3>{{title}}</h3>
+  <span>{{&content}}</span> {{#language}}
+  <p data-lang="{{language}}"></p>
+  {{/language}}
+</div>
diff --git a/templates/portfolio/index.html b/templates/portfolio/index.html
index fbf7469..37704c8 100644
--- a/templates/portfolio/index.html
+++ b/templates/portfolio/index.html
@@ -23,7 +23,16 @@
 
       <h2>Projets</h2>
       <ul>
-        {{#apps}} {{>portfolio/card.html}} {{/apps}}
+        {{#apps}} {{#metadata}} {{#info}} {{#link}}
+        <li
+          role="button"
+          onclick="window.open('{{link}}', '_blank', 'noreferrer');"
+        >
+          {{>portfolio/card.html}}
+        </li>
+        {{/link}} {{^link}}
+        <li>{{>portfolio/card.html}}</li>
+        {{/link}} {{/info}} {{/metadata}} {{/apps}}
       </ul>
 
       {{#archived_apps_exists}}