Replace grid layout with a list in team page

data/team/fuomag.toml

@@ -1,4 +1,4 @@
-name = "fuomag"
+nickname = "fuomag"
 
 email = "[email protected]"
 website = "https://fuo.fi"

layouts/partials/member.html

@@ -1,35 +1,29 @@
 <div>
-
-    <h3 style="font-weight: bold;">
-        {{if and .name .nickname}}
-        <em>{{.nickname}}</em> - {{ .name }}
-        {{else if .name}}
-        {{ .name }}
-        {{else if .nickname}}
-        <em>{{.nickname}}</em>
-        {{end}}
+    <h3>
+        {{- if and .name .nickname -}}
+        <code>{{- .nickname -}}</code> ({{- .name -}})
+        {{- else if .name -}}
+        {{- .name -}}
+        {{- else if .nickname -}}
+        <code>{{- .nickname -}}</code>
+        {{- end -}}
     </h3>
     <p>
-        {{ if not .active}}
-        <em>Former member</em>
-        {{ end }}
-        {{ if and .role .active}}
-        <em>{{ .role }}</em>
-        {{ end }}
-        {{ if .email}}
-        | <a href="mailto:{{ .email }}" title="{{ .nickname }}'s email address">📧</a>
+        {{ with .role}}
+        <strong>Role: </strong>
+        {{ . }}
         {{ end }}
-        {{ if .website}}
-        | <a href=" {{ .website }}" title="{{.nickname}}'s website">🌐</a>
-        {{ end }}
-    </p>
 
-    {{ if .skills }}
-    <h4>Skills</h4>
-    <ul>
-        {{ range .skills }}
-        <li>{{ . }}</li>
+        {{- if .email }} | <a href="mailto:{{ .email }}" title="{{ .nickname }}'s email address">📧</a> {{- end -}}
+
+        {{- if .website }} | <a href=" {{ .website }}" title="{{ .nickname }}'s website">🌐</a> {{- end }}
+
+        <br />
+
+        {{ with .skills }}
+        <strong>Skills: </strong>
+        <span> {{ delimit . ", " }} </span>
         {{ end }}
-    </ul>
-    {{ end }}
+
+    </p>
 </div>

layouts/shortcodes/team.html

@@ -1,23 +1,31 @@
+{{- $team := collections.Sort .Site.Data.team "nickname" -}}
+{{- $active := where $team "active" true -}}
+{{- $inactive := where $team "active" false -}}
+
 <div>
-    <h2>Membri attivi</h2>
+    <h2>
+        Active members
+    </h2>
 
-    <div style="display: grid; grid-template-columns: 1fr 1fr;">
-        {{ range $.Site.Data.team }}
-        {{ if .active }}
-        {{ partial "member.html" . }}
-        {{ end }}
+    <ul>
+        {{ range $active }}
+        <li> {{ partial "member.html" . }} </li>
         {{ end }}
-    </div>
+    </ul>
 </div>
 
 <div style="margin-top: 2rem">
-    <h2>Membri inattivi</h2>
+    <details>
+        <summary>
+            <h2 style="display: inline; cursor: pointer; text-decoration: underline;">
+                Former members
+            </h2>
+        </summary>
 
-    <div style="display: grid; grid-template-columns: 1fr 1fr;">
-        {{ range $.Site.Data.team }}
-        {{ if not .active  }}
-        {{ partial "member.html" . }}
-        {{ end }}
-        {{ end }}
-    </div>
+        <ul>
+            {{ range $inactive }}
+            <li> {{ partial "member.html" . }} </li>
+            {{ end }}
+        </ul>
+    </details>
 </div>