Style leaderboard page (#2)

* Upgrade Bootstrap to 5.3.x

* Add header pic, Rubik font, drop email ...

* Add notice re: "winner will be announced"

* Format duration as mm:ss, re-order columns, rename duration as "time"

* Add footer

* Better responsive header

Sentaur.Leaderboard.Web/Layout/MainLayout.razor

@@ -1,12 +1,20 @@
 @inherits LayoutComponentBase
-<div class="page">
- <main>
- <div class="top-row px-4">
- <a href="https://learn.microsoft.com/aspnet/core/" target="_blank">About</a>
- </div>
-
- <article class="content px-4">
- @Body
- </article>
- </main>
-</div>
+<div class="layout">
+ <header>
+ <img class="header" src="/img/header-wide.webp" />
+ <img class="handheld" src="/img/handheld.webp" />
+ </header>
+ <div class="page">
+ <main>
+ <article class="content px-4">
+ @Body
+ </article>
+ </main>
+ </div>
+ <footer>
+ <p>Play Sentaur Survivors at the Sentry booth at GDC 2024 to be entered into a raffle for a Steam Deck. The
+ winner will be randomly drawn and announced at the Sentry booth on Friday, March 22nd, 2024. The winner must
+ be present in-person at the conference in order to pick up their prize.</p>
+ <img src="/img/sentry-glyph-light.png" />
+ </footer>
+</div>

Sentaur.Leaderboard.Web/Layout/MainLayout.razor.css

@@ -72,6 +72,6 @@ main {
 
  .top-row, article {
  padding-left: 2rem !important;
- padding-right: 1.5rem !important;
+ padding-right: 2rem !important;
  }
 }

Sentaur.Leaderboard.Web/Pages/Score.razor

@@ -1,40 +1,51 @@
 @page "/"
 @inject HttpClient Http
 
+@functions {
+ public string FormatTime(TimeSpan duration)
+ {
+ // Implement the logic to format the duration as desired
+ return duration.ToString(@"mm\:ss");
+ }
+}
+
 <PageTitle>Leaderboard</PageTitle>
 
-<h1>Scores</h1>
+<h1><span>Sentaur Survivors • Scores</span></h1>
+
+<p class="notice"><span>Win a Steam Deck!</span> Winner will be
+ announced at the Sentry
+ Booth at 1PM PT on <span>Friday,
+ March 22,
+ 2024</span>.</p>
 
 @if (scores == null)
 {
  <p>
-  <em>Loading...</em>
- </p>
+ <em>Loading...</em>
+</p>
 }
 else
 {
  <table class="table">
-  <thead>
+ <thead>
  <tr>
  <th>Name</th>
- <th>Email</th>
- <th>Duration</th>
  <th>Score</th>
- <th>Timestamp</th>
+ <th>Time</th>
+ <th>Recorded</th>
  </tr>
-  </thead>
-  <tbody>
+ </thead>
+ <tbody>
  @foreach (var score in scores)
- {
- <tr>
- <td>@score.Name</td>
- @* TODO: mask email? *@
- <td>@score.Email</td>
- <td>@score.Duration</td>
- <td>@score.Score</td>
- <td>@score.Timestamp</td>
- </tr>
- }
+ {
+ <tr>
+ <td>@score.Name</td>
+ <td>@score.Score</td>
+ <td>@FormatTime(score.Duration)</td>
+ <td>@score.Timestamp.ToString("dddd, h:mm tt")</td>
+ </tr>
+ }
  </tbody>
  </table>
 }

Sentaur.Leaderboard.Web/wwwroot/css/app.css

@@ -101,3 +101,108 @@ a, .btn-link {
 code {
  color: #c02d76;
 }
+/* 
+body {
+ background: #362D59;
+ color: white;
+} */
+
+body {
+ --bs-body-bg: #362D59;
+ font-family: "Rubik", sans-serif;
+}
+
+header {
+ position: relative;
+}
+
+header img.header {
+ width: 100%;
+ z-index: -1;
+}
+
+header img.handheld {
+ position: absolute;
+ bottom: -60px;
+ right: 40px;
+ width: 211px;
+ height: 112px;
+}
+
+
+@media (max-width: 768px) {
+ header img.handheld {
+ bottom: -40px;
+ right: 20px;
+ width: 150px;
+ height: 80px;
+ }
+}
+
+@media (min-width: 1024px) {
+ header img.header {
+ margin-top: -100px;
+ }
+
+ header img.handheld {
+ width: 316px;
+ height: 168px;
+ right: 80px;
+ }
+}
+
+h1 {
+ color: white;
+ margin-bottom: 2rem;
+}
+
+h1 span {
+ background-color: #362D59;
+}
+
+p.notice {
+ margin-bottom: 2rem;
+ font-size: 120%;
+}
+
+p.notice span {
+ display: inline;
+ position: relative;
+ overflow: hidden;
+ color: black;
+}
+
+p.notice span::before {
+ content: "";
+ position: absolute;
+ width: 100%;
+ height: 130%;
+ top: -15%;
+ z-index: -1;
+ background-color: #EFB51C;
+ transform: rotate(-2deg);
+}
+
+footer {
+ margin-top: 2rem;
+ display: grid;
+ grid-template-columns: 1fr auto;
+ padding: 0 1rem 1rem 2rem;
+}
+footer img {
+ width: 125px;
+ justify-self: end;
+ align-self: center;
+}
+
+footer p {
+ /* vertical align bottom */
+ align-self: center;
+ font-size: 0.8rem;
+}
+
+@media (max-width: 768px) {
+ footer img {
+ width: 80px;
+ }
+}

Sentaur.Leaderboard.Web/wwwroot/index.html

@@ -1,7 +1,6 @@
 <!DOCTYPE html>
-<html lang="en">
-
-<head>
+<html lang="en" data-bs-theme="dark">
+ <head>
  <meta charset="utf-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <title>Sentaur.Leaderboard.Web</title>
@@ -10,23 +9,29 @@
  <link rel="stylesheet" href="css/app.css" />
  <link rel="icon" type="image/png" href="favicon.png" />
  <link href="Sentaur.Leaderboard.Web.styles.css" rel="stylesheet" />
-</head>
 
-<body>
+ <link rel="preconnect" href="https://fonts.googleapis.com" />
+ <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
+ <link
+ href="https://fonts.googleapis.com/css2?family=Rubik:ital,wght@0,300..900;1,300..900&display=swap"
+ rel="stylesheet"
+ />
+ </head>
+
+ <body>
  <div id="app">
-  <svg class="loading-progress">
-  <circle r="40%" cx="50%" cy="50%" />
-  <circle r="40%" cx="50%" cy="50%" />
-  </svg>
-  <div class="loading-progress-text"></div>
+ <svg class="loading-progress">
+ <circle r="40%" cx="50%" cy="50%" />
+ <circle r="40%" cx="50%" cy="50%" />
+ </svg>
+ <div class="loading-progress-text"></div>
  </div>
 
  <div id="blazor-error-ui">
-  An unhandled error has occurred.
-  <a href="" class="reload">Reload</a>
-  <a class="dismiss">🗙</a>
+ An unhandled error has occurred.
+ <a href="" class="reload">Reload</a>
+ <a class="dismiss">🗙</a>
  </div>
  <script src="_framework/blazor.webassembly.js"></script>
-</body>
-
+ </body>
 </html>