0.1.2: visual improvements

package-lock.json

@@ -1,12 +1,12 @@
 {
   "name": "archery",
-  "version": "0.1.1",
+  "version": "0.1.2",
   "lockfileVersion": 3,
   "requires": true,
   "packages": {
     "": {
       "name": "archery",
-      "version": "0.1.1",
+      "version": "0.1.2",
       "license": "MIT",
       "dependencies": {
         "body-parser": "^1.20.3",

package.json

@@ -1,6 +1,6 @@
 {
   "name": "archery",
-  "version": "0.1.1",
+  "version": "0.1.2",
   "description": "Build Arch packages through a web interface",
   "keywords": [
     "docker",

src/DB.ts

@@ -269,4 +269,4 @@ class DB {
 
 export default DB;
 export { DB };
-export type { DBConfig, Status, Build };
+export type { DBConfig, Status, Build, LogChunk };

src/Web.ts

@@ -4,7 +4,7 @@ import type { Express } from "express";
 import express from 'express';
 import expressWs from "express-ws";
 import bodyParser from "body-parser";
-import type { DB } from "./DB.ts";
+import type { DB, LogChunk } from "./DB.ts";
 import type { BuildController, BuildEvent } from "./BuildController.ts";
 
 interface WebConfig {
@@ -29,6 +29,10 @@ function timeElapsed(date1: Date, date2: Date) {
     return `${hours}:${minutes}:${seconds}`;
 }
 
+function splitLines(lines: LogChunk[]) {
+    return lines.map(logChunk => logChunk.chunk.split('\n')).flat().map(line => line.substring(line.lastIndexOf('\r') + 1));
+}
+
 class Web {
     private _webserver: http.Server | null = null;
     private db: DB;
@@ -106,7 +110,7 @@ class Web {
                 res.sendStatus(404);
                 return;
             }
-            const log = (await this.db.getLog(build.id)).map(logChunk => logChunk.chunk.split('\n')).flat();
+            const log = splitLines(await this.db.getLog(build.id));
 
             res.render('build', {
                 page: {

styles/01-styles.scss

@@ -54,6 +54,7 @@ table {
     background-color: #2a2a2a;
     border-collapse: collapse;
     width: 100%;
+    min-width: 42em;
 }
 
 td,
@@ -200,6 +201,8 @@ input[type="submit"] {
     display: grid;
     grid-template-columns: auto 1fr;
     gap: .65em;
+    word-break: keep-all;
+    white-space: nowrap;
 
     .span-2 {
         grid-column: span 2;
@@ -208,6 +211,7 @@ input[type="submit"] {
 
 .logs {
     font-family: 'Courier New', monospace;
+    font-size: 0.9em;
     border-left: #d96a14 .2em solid;
     background: #2a2a2a;
     margin-top: 1em;
@@ -253,10 +257,10 @@ input[type="submit"] {
     right: 1.3em;
     bottom: 1.6em;
     padding: 1em;
-    background-color: rgba(15,15,15,.8);
+    background-color: rgba(15, 15, 15, .8);
     cursor: pointer;
 
     input {
         cursor: inherit;
     }
-}
+}

styles/02-responsive.scss

@@ -15,4 +15,32 @@
     .content {
         margin-left: 0;
     }
+
+    .logs {
+        font-size: 0.75em;
+    }
 }
+
+@media screen and (max-width:28rem) {
+
+    body {
+        font-size: 13pt;
+    }
+
+    .grid-2col {
+        grid-template-columns: 1fr;
+
+        .span-2 {
+            grid-column: initial;
+        }
+
+        &> :nth-last-child(n+2):nth-child(odd) {
+            font-weight: bold;
+            font-size: 1.1em;
+
+            &::after {
+                content: ":";
+            }
+        }
+    }
+}

views/build.ejs

@@ -10,13 +10,15 @@
     <div class="content">
         <h1>Build #<%= build.id %></h1>
         <h2 id="buildStatus"><%= build.status %></h2>
-        <div class="grid-2col">
-            <label>Repo</label> <span><%= build.repo %></span>
-            <label>Commit</label> <span><% if (build.commit) { %><%= build.commit %><% } else { %>latest<% } %></span>
-            <label>Patch</label> <span><% if (build.patch) { %><a href="/build/<%= build.id %>/patch">patch file</a><% } else { %>none<% } %></span>
-            <label>Distro</label> <span><%= build.distro %></span>
-            <label>Dependencies</label> <span><%= build.dependencies %></span>
-            <label>Start time</label> <span class="to-local-time"><%= build.startTime %></span>
+        <div class="overflow-x">
+            <div class="grid-2col">
+                <label>Repo</label> <span><%= build.repo %></span>
+                <label>Commit</label> <span><% if (build.commit) { %><%= build.commit %><% } else { %>latest<% } %></span>
+                <label>Patch</label> <span><% if (build.patch) { %><a href="/build/<%= build.id %>/patch">patch file</a><% } else { %>none<% } %></span>
+                <label>Distro</label> <span><%= build.distro %></span>
+                <label>Dependencies</label> <span><%= build.dependencies %></span>
+                <label>Start time</label> <span class="to-local-time"><%= build.startTime %></span>
+            </div>
         </div>
         <% if (!ended) { %>
         <div>
@@ -24,11 +26,7 @@
         </div>
         <% } %>
         <p><a href="/build/<%= build.id %>/logs">Full logs</a></p>
-        <div class="logs" id="logs">
-            <% (log || []).forEach(line => { %>
-                <p><%= line %></p>
-            <% }) %>
-        </div>
+        <pre><div class="logs" id="logs"><% (log || []).forEach(line => { %><p><%= line %></p><% }) %></div></pre>
 
         <% if (!ended) { %>
         <label id="followCheckmarkContainer" title="Follow logs">

views/head.ejs

@@ -14,7 +14,7 @@
 <link rel="canonical" href="<%= page.canonical%>"/>
 <% } %>
 <link rel="shortcut icon" href="/assets/svg/favicon.svg">
-<link rel="stylesheet" href="/assets/css/styles.css?v1">
+<link rel="stylesheet" href="/assets/css/styles.css?v2">
 <script nonce="<%= cspNonce %>">
     document.addEventListener("DOMContentLoaded", function() {
         document.body.classList.remove('preload');