From 9e16916a5d06f46b3f1190a147bcc407aec144e4 Mon Sep 17 00:00:00 2001
From: Dennis Reimann <mail@dennisreimann.de>
Date: Tue, 19 Apr 2022 15:12:49 +0200
Subject: [PATCH] Add episode participant images

---
 src/css/sections/podcast.css | 23 +++++++++++++++++++++++
 src/episode.pug              |  8 ++++++--
 src/includes/mixins.pug      |  2 +-
 3 files changed, 30 insertions(+), 3 deletions(-)

diff --git a/src/css/sections/podcast.css b/src/css/sections/podcast.css
index 0a2946e7c40..fecf2d40457 100644
--- a/src/css/sections/podcast.css
+++ b/src/css/sections/podcast.css
@@ -43,6 +43,29 @@
   & .player {
     margin-bottom: var(--space-xxl);
   }
+
+  & .partcipants {
+    margin: 0;
+    list-style: none;
+  }
+
+  & .partcipants li + li {
+    margin-top: var(--space-m);
+  }
+
+  & .partcipants li,
+  & .partcipants li a {
+    display: flex;
+    align-items: center;
+  }
+
+  & .avatar {
+    display: block;
+    height: 2rem;
+    width: 2rem;
+    border-radius: 50%;
+    margin-right: var(--space-m);
+  }
 }
 
 .episodes {
diff --git a/src/episode.pug b/src/episode.pug
index 3efacf99411..a31e406129b 100644
--- a/src/episode.pug
+++ b/src/episode.pug
@@ -31,8 +31,12 @@ block main
           h2 Teilnehmer
           ul.partcipants
             for participant in episode.participants
+              - const member = team[participant.toLowerCase()]
               li
-                if team[participant.toLowerCase()]
-                  a(href=`/team/#${participant}`)= participant
+                if member
+                  a(href=`/team/#${member.name}`)
+                    img.avatar(src=assetPath(member.image || "/img/avatar.svg") alt=member.name)
+                    = member.name
                 else
+                  img.avatar(src=assetPath("/img/avatar.svg") alt=participant)
                   = participant
diff --git a/src/includes/mixins.pug b/src/includes/mixins.pug
index 52bb5949223..5685f9a7350 100644
--- a/src/includes/mixins.pug
+++ b/src/includes/mixins.pug
@@ -35,7 +35,7 @@ mixin member(m)
 mixin spende(d, trunc = false)
   .spende(id=d.id)&attributes(attributes)
     .inner
-      img.avatar(src=(d.avatar || assetPath("/img/avatar.svg")) alt=d.name)
+      img.avatar(src=assetPath(d.avatar || "/img/avatar.svg") alt=d.name)
       h3.name= d.name
       .center
         if d.beschreibung