tenseleyflow/shithub / 04b0fef

Browse files

Reshape pull checks page

Authored by espadonne
SHA
04b0fefcc5e703acf84bda60ecd0ef3f48dc705b
Parents
e243e55
Tree
c2da178

2 changed files

StatusFile+-
M internal/web/static/css/shithub.css 125 0
M internal/web/templates/repo/pull_view.html 97 33
internal/web/static/css/shithub.cssmodified
@@ -3255,6 +3255,131 @@ button.shithub-repo-action {
32553255
 }
32563256
32573257
 /* ========== PR Checks tab (S24) ========== */
3258
+.shithub-checks-page {
3259
+  display: grid;
3260
+  grid-template-columns: 15rem minmax(0, 1fr);
3261
+  gap: 1.5rem;
3262
+  margin-top: 1rem;
3263
+}
3264
+.shithub-checks-sidebar {
3265
+  position: sticky;
3266
+  top: 1rem;
3267
+  align-self: start;
3268
+  display: flex;
3269
+  flex-direction: column;
3270
+  gap: 0.35rem;
3271
+}
3272
+.shithub-checks-sidebar-group {
3273
+  padding-top: 0.75rem;
3274
+  margin-top: 0.5rem;
3275
+  border-top: 1px solid var(--border-default);
3276
+}
3277
+.shithub-checks-sidebar-heading {
3278
+  padding: 0.35rem 0.55rem;
3279
+  color: var(--fg-muted);
3280
+  font-size: 0.8rem;
3281
+  font-weight: 600;
3282
+}
3283
+.shithub-checks-sidebar-item {
3284
+  display: flex;
3285
+  align-items: center;
3286
+  gap: 0.45rem;
3287
+  padding: 0.45rem 0.55rem;
3288
+  border-radius: 6px;
3289
+  color: var(--fg-default);
3290
+  text-decoration: none;
3291
+  font-size: 0.86rem;
3292
+}
3293
+.shithub-checks-sidebar-item.is-active,
3294
+.shithub-checks-sidebar-item:hover {
3295
+  background: var(--canvas-subtle);
3296
+}
3297
+.shithub-checks-main {
3298
+  display: flex;
3299
+  flex-direction: column;
3300
+  gap: 1rem;
3301
+  min-width: 0;
3302
+}
3303
+.shithub-checks-summary-card {
3304
+  display: grid;
3305
+  grid-template-columns: minmax(0, 2fr) repeat(3, minmax(7rem, 1fr));
3306
+  gap: 1rem;
3307
+  padding: 1rem;
3308
+  border: 1px solid var(--border-default);
3309
+  border-radius: 6px;
3310
+  background: var(--canvas-default);
3311
+}
3312
+.shithub-checks-summary-card > div {
3313
+  display: flex;
3314
+  flex-direction: column;
3315
+  gap: 0.25rem;
3316
+}
3317
+.shithub-checks-success { color: #1a7f37; }
3318
+.shithub-checks-failure { color: #cf222e; }
3319
+.shithub-checks-pending { color: #9a6700; }
3320
+.shithub-checks-workflow,
3321
+.shithub-checks-annotations {
3322
+  border: 1px solid var(--border-default);
3323
+  border-radius: 6px;
3324
+  background: var(--canvas-default);
3325
+}
3326
+.shithub-checks-workflow > header {
3327
+  display: flex;
3328
+  justify-content: space-between;
3329
+  align-items: flex-start;
3330
+  gap: 1rem;
3331
+  padding: 1rem;
3332
+  border-bottom: 1px solid var(--border-default);
3333
+}
3334
+.shithub-checks-workflow h2,
3335
+.shithub-checks-annotations h2 {
3336
+  margin: 0;
3337
+  font-size: 1rem;
3338
+}
3339
+.shithub-checks-workflow p { margin: 0.2rem 0 0; }
3340
+.shithub-checks-workflow-map {
3341
+  padding: 1rem;
3342
+  min-height: 8rem;
3343
+  background: var(--canvas-inset);
3344
+}
3345
+.shithub-checks-run-card {
3346
+  max-width: 18rem;
3347
+  display: grid;
3348
+  grid-template-columns: 1.5rem minmax(0, 1fr) auto;
3349
+  gap: 0.55rem;
3350
+  align-items: center;
3351
+  padding: 0.75rem;
3352
+  border: 1px solid var(--border-default);
3353
+  border-radius: 6px;
3354
+  background: var(--canvas-default);
3355
+}
3356
+.shithub-checks-run-card + .shithub-checks-run-card { margin-top: 0.75rem; }
3357
+.shithub-checks-run-card p { margin: 0.15rem 0 0; }
3358
+.shithub-checks-run-icon {
3359
+  display: inline-flex;
3360
+  align-items: center;
3361
+  justify-content: center;
3362
+  color: #1a7f37;
3363
+}
3364
+.shithub-checks-annotations { padding: 1rem; }
3365
+.shithub-checks-annotation {
3366
+  margin-top: 0.75rem;
3367
+  padding: 0.75rem;
3368
+  border: 1px solid var(--border-default);
3369
+  border-radius: 6px;
3370
+  background: var(--canvas-subtle);
3371
+}
3372
+.shithub-checks-annotation summary {
3373
+  cursor: pointer;
3374
+  display: flex;
3375
+  justify-content: space-between;
3376
+  gap: 1rem;
3377
+}
3378
+@media (max-width: 900px) {
3379
+  .shithub-checks-page { grid-template-columns: 1fr; }
3380
+  .shithub-checks-sidebar { position: static; }
3381
+  .shithub-checks-summary-card { grid-template-columns: 1fr; }
3382
+}
32583383
 .shithub-pull-checks { display: flex; flex-direction: column; gap: 0.75rem; padding: 0.5rem 0; }
32593384
 .shithub-pull-check-suite {
32603385
   border: 1px solid var(--border-default);
internal/web/templates/repo/pull_view.htmlmodified
@@ -603,45 +603,109 @@
603603
       </section>
604604
     {{ else if eq .Tab "checks" }}
605605
       {{ if .CheckGroups }}
606
-      <section class="shithub-pull-checks">
607
-        {{ range .CheckGroups }}
608
-        <div class="shithub-pull-check-suite">
609
-          <h3>
610
-            <span class="shithub-pull-check-app">{{ .Suite.AppSlug }}</span>
611
-            <span class="shithub-pull-check-suite-status shithub-pull-check-status-{{ printf "%s" .Suite.Status }}">
612
-              {{ printf "%s" .Suite.Status }}
613
-            </span>
614
-            {{ if .Suite.Conclusion.Valid }}
615
-              <span class="shithub-pull-check-conclusion shithub-pull-check-conclusion-{{ printf "%s" .Suite.Conclusion.CheckConclusion }}">
616
-                {{ printf "%s" .Suite.Conclusion.CheckConclusion }}
617
-              </span>
606
+      <section class="shithub-checks-page">
607
+        <aside class="shithub-checks-sidebar" aria-label="Check runs">
608
+          <a href="#checks-summary" class="shithub-checks-sidebar-item is-active">{{ octicon "home" }} Summary</a>
609
+          <div class="shithub-checks-sidebar-group">
610
+            <div class="shithub-checks-sidebar-heading">All jobs</div>
611
+            {{ range .CheckGroups }}
612
+              {{ range .Runs }}
613
+              <a href="#check-run-{{ .R.ID }}" class="shithub-checks-sidebar-item">
614
+                {{ if .R.Conclusion.Valid }}
615
+                  {{ if eq (printf "%s" .R.Conclusion.CheckConclusion) "success" }}<span class="shithub-pull-check-status-completed">●</span>{{ else }}<span class="shithub-pull-check-conclusion-failure">●</span>{{ end }}
616
+                {{ else }}
617
+                  <span class="shithub-pull-check-status-{{ printf "%s" .R.Status }}">●</span>
618
+                {{ end }}
619
+                <span>{{ .R.Name }}</span>
620
+              </a>
621
+              {{ end }}
618622
             {{ end }}
619
-          </h3>
620
-          <ul class="shithub-pull-check-runs">
621
-            {{ range .Runs }}
622
-            <li class="shithub-pull-check-run">
623
-              <span class="shithub-pull-check-status shithub-pull-check-status-{{ printf "%s" .R.Status }}">●</span>
624
-              <strong>{{ .R.Name }}</strong>
625
-              {{ if .R.Conclusion.Valid }}
626
-                <span class="shithub-pull-check-conclusion shithub-pull-check-conclusion-{{ printf "%s" .R.Conclusion.CheckConclusion }}">
627
-                  {{ printf "%s" .R.Conclusion.CheckConclusion }}
623
+          </div>
624
+          <div class="shithub-checks-sidebar-group">
625
+            <div class="shithub-checks-sidebar-heading">Run details</div>
626
+            <span class="shithub-checks-sidebar-item">{{ octicon "pulse" }} Usage</span>
627
+            <span class="shithub-checks-sidebar-item">{{ octicon "file" }} Workflow file</span>
628
+          </div>
629
+        </aside>
630
+
631
+        <div class="shithub-checks-main">
632
+          <section id="checks-summary" class="shithub-checks-summary-card">
633
+            <div>
634
+              <span class="shithub-muted">Triggered via pull request</span>
635
+              <strong>
636
+                {{ if .AuthorName }}<a href="/{{ .AuthorName }}">{{ .AuthorName }}</a>{{ end }}
637
+                opened #{{ .PR.INumber }}
638
+              </strong>
639
+              <a class="shithub-branch-name" href="/{{ .Owner }}/{{ .Repo.Name }}/tree/{{ .PR.HeadRef }}">{{ .PR.HeadRef }}</a>
640
+            </div>
641
+            <div>
642
+              <span class="shithub-muted">Status</span>
643
+              {{ if eq .PullStats.CheckState "success" }}<strong class="shithub-checks-success">Success</strong>
644
+              {{ else if eq .PullStats.CheckState "failure" }}<strong class="shithub-checks-failure">Failure</strong>
645
+              {{ else }}<strong class="shithub-checks-pending">In progress</strong>{{ end }}
646
+            </div>
647
+            <div>
648
+              <span class="shithub-muted">Total checks</span>
649
+              <strong>{{ .PullStats.Checks }}</strong>
650
+            </div>
651
+            <div>
652
+              <span class="shithub-muted">Artifacts</span>
653
+              <strong>—</strong>
654
+            </div>
655
+          </section>
656
+
657
+          {{ range .CheckGroups }}
658
+          <section class="shithub-checks-workflow">
659
+            <header>
660
+              <div>
661
+                <h2>{{ .Suite.AppSlug }}</h2>
662
+                <p class="shithub-muted">on: pull_request</p>
663
+              </div>
664
+              <span class="shithub-pull-check-suite-status shithub-pull-check-status-{{ printf "%s" .Suite.Status }}">
665
+                {{ printf "%s" .Suite.Status }}
666
+              </span>
667
+            </header>
668
+            <div class="shithub-checks-workflow-map">
669
+              {{ range .Runs }}
670
+              <article id="check-run-{{ .R.ID }}" class="shithub-checks-run-card">
671
+                <span class="shithub-checks-run-icon">
672
+                  {{ if .R.Conclusion.Valid }}
673
+                    {{ if eq (printf "%s" .R.Conclusion.CheckConclusion) "success" }}{{ octicon "check-circle" }}{{ else }}{{ octicon "x-circle" }}{{ end }}
674
+                  {{ else }}
675
+                    {{ octicon "dot-fill" }}
676
+                  {{ end }}
628677
                 </span>
629
-              {{ else }}
630
-                <span class="shithub-muted">{{ printf "%s" .R.Status }}</span>
678
+                <div>
679
+                  <strong>{{ .R.Name }}</strong>
680
+                  <p class="shithub-muted">
681
+                    {{ if .R.Conclusion.Valid }}{{ printf "%s" .R.Conclusion.CheckConclusion }}{{ else }}{{ printf "%s" .R.Status }}{{ end }}
682
+                    {{ if .R.CompletedAt.Valid }} · {{ relativeTime .R.CompletedAt.Time }}{{ end }}
683
+                  </p>
684
+                </div>
685
+                {{ if .R.DetailsUrl }}<a href="{{ .R.DetailsUrl }}" rel="noopener noreferrer">details</a>{{ end }}
686
+              </article>
631687
               {{ end }}
632
-              {{ if .R.CompletedAt.Valid }}<small><time datetime="{{ .R.CompletedAt.Time.Format "2006-01-02T15:04:05Z" }}">{{ relativeTime .R.CompletedAt.Time }}</time></small>{{ end }}
633
-              {{ if .R.DetailsUrl }}<a href="{{ .R.DetailsUrl }}" rel="noopener noreferrer">details</a>{{ end }}
634
-              {{ if .SummaryHTML }}
635
-              <details>
636
-                <summary class="shithub-muted">summary</summary>
637
-                <div class="markdown-body">{{ .SummaryHTML }}</div>
638
-              </details>
688
+            </div>
689
+          </section>
690
+          {{ end }}
691
+
692
+          <section class="shithub-checks-annotations">
693
+            <h2>Annotations</h2>
694
+            {{ range .CheckGroups }}
695
+              {{ range .Runs }}
696
+                {{ if .SummaryHTML }}
697
+                <details class="shithub-checks-annotation" open>
698
+                  <summary>
699
+                    <strong>{{ .R.Name }}</strong>
700
+                    {{ if .R.Conclusion.Valid }}<span>{{ printf "%s" .R.Conclusion.CheckConclusion }}</span>{{ else }}<span>{{ printf "%s" .R.Status }}</span>{{ end }}
701
+                  </summary>
702
+                  <div class="markdown-body">{{ .SummaryHTML }}</div>
703
+                </details>
704
+                {{ end }}
639705
               {{ end }}
640
-            </li>
641706
             {{ end }}
642
-          </ul>
707
+          </section>
643708
         </div>
644
-        {{ end }}
645709
       </section>
646710
       {{ else }}
647711
       <p class="shithub-muted">No checks have reported on <code>{{ slice .PR.HeadOid 0 7 }}</code>. Post via <code>POST /api/v1/repos/{{ .Owner }}/{{ .Repo.Name }}/check-runs</code>.</p>