Merge pull request #30 from OpenTabletDriver/improve-home-layout

Improve home page visuals

Author: InfinityGhost

OpenTabletDriver.Web/Controllers/HomeController.cs

@@ -24,15 +24,14 @@ public HomeController(ILogger<HomeController> logger, IReleaseService releaseSer
             this.releaseService = releaseService;
         }
 
-        private IEnumerable<IRelease> releases;
-
         public const string REPOSITORY_URL = "https://www.github.com/OpenTabletDriver/OpenTabletDriver";
         public const string DISCORD_INVITE_URL = "https://discord.gg/9bcMaPkVAR";
 
         [ResponseCache(Duration = 300)]
         public async Task<IActionResult> Index()
         {
-            return View(releases ??= await releaseService.GetAllReleases());
+            var release = await releaseService.GetLatestRelease();
+            return View(release);
         }
 
         [ResponseCache(Duration = 0, Location = ResponseCacheLocation.None, NoStore = true)]

OpenTabletDriver.Web/Views/Home/Index.cshtml

@@ -1,12 +1,6 @@
 @using OpenTabletDriver.Web.Core.Contracts
-@using OpenTabletDriver.Web.Controllers
-@using OpenTabletDriver.Web.Utilities
 
-@{
-    int index = 0;
-}
-
-@model IEnumerable<IRelease>
+@model IRelease
 
 <div class="container">
     <section class="py-5 text-center">
@@ -15,13 +9,10 @@
             OpenTabletDriver is an open source, cross-platform, low latency, user-mode tablet driver.
         </p>
     </section>
-    <div class="row row-cols-sm-1 row-cols-md-2 row-cols-lg-3">
-        @foreach (IRelease release in Model.Take(3))
-        {
-            <div class="col p-2 @(index >= 2 ? "d-md-none d-lg-block" : string.Empty)">
-                <partial name="Release/_ReleaseCard" model="@release" view-data="@ViewData.With(d => d.Add("Primary", index == 0))"/>
-            </div>
-            index++;
-        }
+    <div class="row row-cols-sm-1 row-cols-lg-3">
+        <div class="col d-none d-sm-block"></div>
+        <div class="col">
+            <partial name="Release/_ReleaseCard" model="@Model"/>
+        </div>
     </div>
 </div>

OpenTabletDriver.Web/Views/Shared/Release/_ReleaseCard.cshtml

@@ -3,30 +3,49 @@
 @model IRelease
 
 @{
-    bool isPrimary = ViewData["Primary"] as bool? ?? false;
-    string border = isPrimary ? "border-primary" : string.Empty;
-    string background = isPrimary ? "bg-primary" : "bg-secondary";
-    string buttonColor = isPrimary ? "btn-primary" : "btn-secondary";
-    string textColor = isPrimary ? "text-white" : "text-muted";
+    var color = ViewBag.Color ?? "primary";
+    var background = $"bg-{color}";
+    var border = $"border-{color}";
+    var buttonColor = $"btn-{color}";
+    var textColor = "text-white";
+    var imageSize = "70px";
 }
 
-<ul class="list-group rounded-3 shadow @border">
-    <li class="list-group-item py-3 text-center @background @border">
+<div class="card shadow rounded-3 @border">
+    <div class="card-header @background text-center py-3">
         <h4 class="my-0 fw-normal">@Model.Tag</h4>
-    </li>
-    <li class="list-group-item text-center @border">
-        <img class="p-1" width="250" style="@(isPrimary ? string.Empty : "opacity:0.4")" src="otd.png"/>
-        <div class="mt-1 mb-1">
+    </div>
+    <div class="card-body">
+        <div class="text-center">
+            <img width="250" src="otd.png"/>
+        </div>
+        <ol style="list-style: none; display: flex; justify-content:space-between"
+            class="text-center px-5 pb-3">
+            <li>
+                <a class="link-light d-flex flex-column" href="Wiki/Install/Windows">
+                    <img height="@imageSize" src="/images/platform/Windows_logo_-_2012_derivative.svg">
+                    Windows
+                </a>
+            </li>
+            <li>
+                <a class="link-light d-flex flex-column" href="Wiki/Install/Linux">
+                    <img height="@imageSize" src="/images/platform/TuxFlat.svg">
+                    Linux
+                </a>
+            </li>
+            <li>
+                <a class="link-light d-flex flex-column" href="Wiki/Install/MacOS">
+                    <img height="@imageSize" src="/images/platform/Apple_Computer_Logo_rainbow.svg">
+                    macOS
+                </a>
+            </li>
+        </ol>
+        <div class="text-center">
             <a role="button" class="btn @buttonColor" href="@Model.Url">View On GitHub</a>
         </div>
-    </li>
-    @foreach (IReleaseAsset asset in await Model.GetReleaseAssets())
-    {
-        <li class="list-group-item text-center d-none d-lg-block @border">
-            <a class="stretched-link text-muted" href="@asset.Url">@asset.FileName</a>
-        </li>
-    }
-    <li class="list-group-item @background @border">
+    </div>
+    <div class="card-footer @background">
         <small class="@textColor">Released @Model.Date.ToLocalTime().ToString("MM/dd/yyyy")</small>
-    </li>
-</ul>
+
+    </div>
+</div>

OpenTabletDriver.Web/Views/Wiki/Install/Linux.cshtml

@@ -1,13 +1,20 @@
+@using OpenTabletDriver.Web.Core.Services
+
+@inject IReleaseService releaseService
+
 @{
     ViewBag.Title = "Linux Installation Guide";
+    var release = await releaseService.GetLatestRelease();
+    var assets = await release.GetReleaseAssets();
+    var deb = assets.FirstOrDefault(a => a.FileName == "OpenTabletDriver.deb")!;
 }
 
 <h3 class="wiki-nav-item" id="debian">
     Ubuntu / Debian
 </h3>
 <ol>
     <li>
-        Download the <a href="https://github.com/OpenTabletDriver/OpenTabletDriver/releases/latest">latest release</a>
+        Download the <a href="@deb.Url">latest release</a>
         <small class="text-muted">(OpenTabletDriver.deb)</small>
     </li>
     <li>