Members: add toggle between table and grid

opensourcepledge · Dec 21, 2024 · 30d8d2d · 30d8d2d
1 parent 09b57fa
commit 30d8d2d
Show file tree

Hide file tree

Showing 8 changed files with 340 additions and 159 deletions.
diff --git a/src/components/GridMemberList.astro b/src/components/GridMemberList.astro
@@ -0,0 +1,105 @@
+---
+// © 2024 Vlad-Stefan Harbuz <[email protected]>
+// SPDX-License-Identifier: Apache-2.0
+
+import dayjs from 'dayjs';
+
+import {
+  getMembers, filterInactiveMembers, sortMembersByDevs, fmtCurrency, fmtDevs, getDollarsPerDev
+} from '../memberFormatting.ts';
+import type { Map } from '../util.ts';
+import memberRoles from "../memberRoles.json"
+
+const members = filterInactiveMembers(await getMembers());
+---
+
+<div class="grid-member-list">
+  <div class="members">
+    {sortMembersByDevs(members).map((member) =>
+      <a class="member sneaky" href={`/members/${member.id}`}>
+        <div class="main">
+          <img src=`/images/members/${member.id}/logo.webp` alt=`The ${member.data.name} logo`>
+          <div class="metadata">
+            <h2>{member.data.name}</h2>
+            <span
+              >{(memberRoles as Map)[member.id]}
+              since
+              {dayjs(member.data.joinDate).format('DD MMM YYYY')}</span
+            >
+            <div class="numbers">
+              <span>{fmtDevs(member.data.annualReports[0].averageNumberOfDevs)}</span>
+              <span>{fmtCurrency(getDollarsPerDev(member.data.annualReports[0]))} / dev</span>
+            </div>
+          </div>
+        </div>
+        <em>“{member.data.shortDescription}”</em>
+      </a>
+    )}
+  </div>
+  <small>
+    “Devs”: Average number of employed full-time equivalent developers (in latest report).<br>
+    “$ / dev”: USD paid / average number of employed full-time equivalent developers (in latest report).
+  </small>
+</div>
+
+<style>
+  .members {
+    display: grid;
+    grid-template-columns: repeat(auto-fill, minmax(17rem, 1fr));
+    gap: 1rem;
+    @media (max-width: 860px) {
+      grid-template-columns: 1fr;
+    }
+  }
+  small {
+    display: block;
+    margin-top: 1rem;
+  }
+  a.member {
+    display: flex;
+    flex-direction: column;
+    gap: 1rem;
+    margin: 0;
+    padding: 1rem;
+    background-color: var(--color-light-bg);
+    border: 3px solid transparent;
+    border-radius: 0.5rem;
+    font-size: smaller;
+    @media (max-width: 450px) {
+      padding: 0.5rem;
+    }
+    &:hover {
+      border: 3px solid var(--color-secondary);
+      text-decoration: none;
+      h2 {
+        text-decoration: underline;
+      }
+    }
+    .main {
+      display: flex;
+      gap: 1rem;
+      img {
+        align-self: center;
+        max-width: 4.5rem;
+        @media (max-width: 450px) {
+          max-width: 3.0rem;
+        }
+      }
+      .metadata {
+        display: flex;
+        flex-direction: column;
+        justify-content: center;
+        gap: 0.2rem;
+        .numbers {
+          display: flex;
+          justify-content: space-between;
+        }
+        h2 {
+          margin: 0;
+          font-size: 1.2rem;
+          line-height: 1.3;
+        }
+      }
+    }
+  }
+</style>
diff --git a/src/components/Leaderboard.astro b/src/components/Leaderboard.astro
diff --git a/src/components/LeaderboardMember.astro b/src/components/LeaderboardMember.astro
diff --git a/src/components/TabularMemberList.astro b/src/components/TabularMemberList.astro
@@ -0,0 +1,116 @@
+---
+// © 2024 Vlad-Stefan Harbuz <[email protected]>
+// SPDX-License-Identifier: Apache-2.0
+
+import {
+  getMembers, filterInactiveMembers, getDollarsPerDev, fmtCurrency, sortMembersByDevs
+} from '../memberFormatting.ts';
+
+const members = filterInactiveMembers(await getMembers());
+---
+
+<table class="tabular-member-list table--lrr table--40-30-30">
+  <thead>
+    <tr>
+      <th>Name</th>
+      <th class="ndevs">
+        <abbr title="Average number of employed full-time equivalent developers (in latest report)">Devs</abbr>
+      </th>
+      <th>
+        <abbr title="USD paid / average number of employed full-time equivalent developers (in latest report)"
+          >$/dev</abbr
+        >
+      </th>
+    </tr>
+  </thead>
+  <tbody>
+    {sortMembersByDevs(members).map((member) =>
+      <tr>
+        <td class="name">
+          <a class="sneaky" href={`/members/${member.id}`}>
+            <img src=`/images/members/${member.id}/logo.webp` alt=`The ${member.data.name} logo`>
+            {member.data.name}
+          </a>
+        </td>
+        <td class="ndevs">
+          <a class="sneaky" href={`/members/${member.id}`}>
+            {member.data.annualReports[0].averageNumberOfDevs}
+          </a>
+        </td>
+        <td class="dollars-per-dev">
+          <a class="sneaky" href={`/members/${member.id}`}>
+            {fmtCurrency(getDollarsPerDev(member.data.annualReports[0]))}
+          </a>
+        </td>
+      </tr>
+    )}
+  </tbody>
+</table>
+
+<style>
+  h2 {
+    margin-top: 2rem;
+    padding: 0.3rem 0.5rem;
+    background: var(--color-light-bg);
+    font-size: 1rem;
+    font-weight: normal;
+  }
+  table {
+    margin: 0;
+    td, th {
+      padding-left: 0;
+      padding-right: 0;
+    }
+    th.ndevs, td.ndevs {
+      @media (max-width: 400px) {
+        display: none;
+      }
+    }
+    th {
+      font-weight: normal;
+    }
+    tr:has(td a:hover) td a {
+      color: var(--color-secondary);
+      text-decoration: underline;
+    }
+    td {
+      &.name {
+        a {
+          font-weight: bold;
+        }
+      }
+      &.ndevs, &.dollars-per-dev {
+        a {
+          justify-content: flex-end;
+        }
+      }
+      a {
+        display: flex;
+        align-items: center;
+        min-height: 3.5rem;
+        padding: 0.25rem 0
+      }
+      img {
+        max-width: 3.5rem;
+        max-height: 100%;
+        margin-right: 1rem;
+      }
+      @media (max-width: 450px) {
+        a {
+          min-height: 2.5rem;
+        }
+        img {
+          max-width: 2.5rem;
+        }
+      }
+      @media (max-width: 400px) {
+        a {
+          min-height: 2.0rem;
+        }
+        img {
+          max-width: 2.0rem;
+        }
+      }
+    }
+  }
+</style>
diff --git a/src/layouts/Layout.astro b/src/layouts/Layout.astro
@@ -107,9 +107,3 @@ import '../styles/common.css';
     </footer>
   </body>
 </html>
-
-<style is:global>
-</style>
-
-<style is:global>
-</style>
diff --git a/src/memberFormatting.ts b/src/memberFormatting.ts
@@ -33,6 +33,10 @@ export function fmtCurrency(num: number) {
   });
 }
 
+export function fmtDevs(num: number) {
+  return `${num} dev${num != 1 ? 's' : ''}`;
+}
+
 export function filterInactiveMembers(members: MemberWithId[]): MemberWithId[] {
   return members.filter((m) => m.data.annualReports.length > 0);
 }