refactor: use a grid for the PR view

src/routes/pr.js

@@ -9,6 +9,8 @@ const router = new Router();
 
 Handlebars.registerHelper('formattedDate', (date) => new Date(date).toUTCString());
 
+Handlebars.registerHelper('sha', (commitSha) => commitSha.substr(0, 7));
+
 async function getPRReleaseStatus(prNumber) {
   const releases = [...(await getReleasesOrUpdate())].reverse();
   const [prInfo, comments] = await Promise.all([getPR(prNumber), getPRComments(prNumber)]);

src/static/css/pr.css

@@ -1,105 +1,25 @@
-.tree {
-  position: relative;
-  width: 100%;
+.grid-container {
+  display: grid;
+  grid-gap: 20px;
+  max-width: 900px;
 }
 
-.tree canvas {
-  position: absolute;
-  top: 0;
-  left: 0;
-  width: 100%;
-  height: 100%;
+.grid-header {
+  background-color: #9feaf9;
+  margin: 0;
+  padding: 15px;
 }
 
-.primary {
-  text-align: center;
-  margin-bottom: 140px;
-  position: relative;
-  z-index: 2;
+.grid-contents {
+  padding: 0 15px 0px 15px;
 }
 
-.primary-cell {
-  text-align: center;
-  display: inline-flex;
-  flex-direction: column;
-  padding: 16px;
-  border-radius: 4px;
-  border: 1px solid #00c7e6;
-  background: white;
-  min-width: 300px;
-  box-shadow:
-    0 2px 6px rgb(9 30 66 / 25%),
-    0 0 1px 0 rgb(9 30 66 / 31%);
-  cursor: pointer;
-  user-select: none;
-  transition: box-shadow 0.1s ease-in-out;
+.grid-item {
+  background-color: whitesmoke;
 }
 
-.primary-cell:hover {
-  box-shadow:
-    0 8px 16px -4px rgb(9 30 66 / 25%),
-    0 0 1px rgb(9 30 66 / 31%);
-}
-
-.primary-cell h4 {
-  margin: 4px;
-}
-
-.backports {
+.grid-sub-item h3,
+.grid-sub-item p {
   display: flex;
-  flex-direction: row;
-  position: relative;
-  z-index: 2;
-  padding-bottom: 32px;
-}
-
-.backport {
-  flex: 1;
-  display: flex;
-  align-items: flex-start;
   justify-content: center;
 }
-
-.backport-cell {
-  text-align: center;
-  display: inline-flex;
-  flex-direction: column;
-  padding: 16px 64px;
-  border: 1px solid;
-  border-radius: 4px;
-  min-width: 220px;
-  background: white;
-  box-shadow:
-    0 2px 6px rgb(9 30 66 / 25%),
-    0 0 1px 0 rgb(9 30 66 / 31%);
-  cursor: pointer;
-  user-select: none;
-  transition: box-shadow 0.1s ease-in-out;
-}
-
-.backport-cell:hover {
-  box-shadow:
-    0 8px 16px -4px rgb(9 30 66 / 25%),
-    0 0 1px rgb(9 30 66 / 31%);
-}
-
-.backport-pending .backport-cell,
-.backport-in-flight .backport-cell {
-  border-color: #00b8d9;
-}
-
-.backport-needs-manual .backport-cell {
-  border-color: #ffab00;
-}
-
-.backport-merged .backport-cell {
-  border-color: #6554c0;
-}
-
-.backport-released .backport-cell {
-  border-color: #36b37e;
-}
-
-.backport-cell h4 {
-  margin: 4px;
-}

src/views/pr.handlebars

@@ -1,32 +1,43 @@
-<div class="tree">
-  <canvas id="connectors"></canvas>
-  <div class="primary">
-    <div class="primary-cell">
-      <span>Title: {{ primary.pr.title }}</span>
-      <span>Original PR: <a href="{{ primary.pr.html_url }}">#{{ primary.pr.number }}</a></span>
-      <span>Author: <a href="https://github.com/{{ primary.pr.user.login }}">{{ primary.pr.user.login }}</a></span>
-      <span>Merged On: {{ formattedDate primary.pr.merged_at }}</span>
-
-      {{#if primary.availableIn}}
-      <span>Released: <a href="/release/{{primary.availableIn.version}}">{{primary.availableIn.version}}</a></span>
+<div class="grid-container">
+  <div class="grid-item">
+    <h2 class="grid-header">PR Title</h2>
+    <p class="grid-contents">{{ primary.pr.title }}</p>
+  </div>
+  <div class="grid-item">
+    <h2 class="grid-header">Details</h2>
+    <p class="grid-contents"><b>Author:</b> <a target="_blank" href="https://github.com/{{ primary.pr.user.login }}">@{{ primary.pr.user.login
+        }}</a> <b>Time:</b> {{ formattedDate primary.pr.merged_at }} <b>Commit: </b> <a target="_blank" href="https://github.com/electron/electron/{{sha primary.pr.base.sha}}">{{sha primary.pr.base.sha}}</a></p>
+  </div>
+  <div class="grid-item">
+    <h2 class="grid-header">PR Information</h2>
+    <p class="grid-contents">{{primary.pr.body}}</p>
+  </div>
+  <div class="grid-item">
+    <h2 class="grid-header">Release</h2>
+    <p class="grid-contents">
+      {{#if availableIn}}
+        <a href="/release/{{primary.availableIn.version}}">{{primary.availableIn.version}}</a>
+      {{else}}
+        This PR has not been released.
       {{/if}}
-    </div>
+    </p>
   </div>
-  <div class="backports">
-    {{#each backports}}
-      <div class="backport backport-{{ state }}">
-        <div class="backport-cell">
-          <h4>{{ targetBranch }}</h4>
-
-          {{#if pr}}
-          <span>Backport PR: <a href="{{ pr.html_url }}">#{{ pr.number }}</a></span>
-          {{/if}}
-
+  <div class="grid-item">
+    <h2 class="grid-header">Backports</h2>
+    <div style="display: grid; grid-template-columns: repeat({{backports.length}}, 1fr); grid-gap: 20px;">
+      {{#each backports}}
+      <div class="grid-sub-item">
+        <h3>{{ targetBranch }}</h3>
+        <p class="grid-contents"><a href="{{ pr.html_url }}">#{{ pr.number }}</a></p>
+        <p class="grid-contents">
           {{#if availableIn}}
-          <span>Released: <a href="/release/{{availableIn.version}}" >{{availableIn.version}}</a></span>
+            <a href="/release/{{availableIn.version}}">v{{availableIn.version}}</a>
+          {{else}}
+            Not Yet Released
           {{/if}}
-        </div>
+        </p>
       </div>
-    {{/each}}
+      {{/each}}
+    </div>
   </div>
 </div>