Work

build.js

@@ -2,28 +2,30 @@ import {spawn} from 'child_process';
 import fs from 'fs';
 
 const spawnProcess = (command, args) => {
-    return new Promise((resolve, reject) => {
-        const process = spawn(command, args, { stdio: 'inherit', shell: true });
-        process.on('exit', (code) => {
-            if (code === 0) {
-                resolve();
-            } else {
-                reject(new Error(`Process exited with code ${code}`));
-            }
-        });
+  return new Promise((resolve, reject) => {
+    const process = spawn(command, args, {stdio: 'inherit', shell: true});
+    process.on('exit', (code) => {
+      if (code === 0) {
+        resolve();
+      } else {
+        reject(new Error(`Process exited with code ${code}`));
+      }
     });
+  });
 }
 
 // 1. Prepare the 'dist' directory
 if (fs.existsSync('./dist')) {
-    fs.rmSync('./dist', { recursive: true, force: true });
+  fs.rmSync('./dist', {recursive: true, force: true});
 }
 fs.mkdirSync('./dist');
 
 // 2. Run the build steps
-const npmCommand = /^win/.test(process.platform) ? 'npm.cmd' : 'npm';
+const isWindows = /^win/.test(process.platform);
+const npmCommand = isWindows ? 'npm.cmd' : 'npm';
 const cssBuildPromise = spawnProcess(npmCommand, ['run', 'build-css']);
 const jsBuildPromise = spawnProcess(npmCommand, ['run', 'build-js']);
-const jsCopyStatic = spawnProcess(npmCommand, ['run', 'build-static']);
+const jsCopyStatic = spawnProcess(npmCommand, ['run', isWindows ? 'build-static:windows' : 'build-static']);
 
-Promise.all([cssBuildPromise, jsBuildPromise, jsCopyStatic]).then(() => {});
+Promise.all([cssBuildPromise, jsBuildPromise, jsCopyStatic]).then(() => {
+});

package.json

@@ -11,7 +11,8 @@
     "build": "node ./build.js",
     "build-js": "tsc -noEmit && esbuild src/ts/app.ts --bundle --minify --tree-shaking=true --target=es2022 --outfile=dist/app.js",
     "build-css": "sass --no-source-map --style=compressed --color src/scss/index.scss dist/style.css",
-    "build-static": "cp -R ./static/* ./dist"
+    "build-static": "cp -R ./static/* ./dist",
+    "build-static:windows": "xcopy /E /Y /I static dist"
   },
   "author": {
     "name": "Quentin Ligier",

src/scss/footer.scss

@@ -0,0 +1,3 @@
+footer {
+  margin: 3em 0;
+}

src/scss/form.scss

@@ -0,0 +1,59 @@
+@import "colors";
+
+#new-build-request {
+  width: 100%;
+  height: 0;
+  opacity: 0;
+  transition: height 0.2s, opacity 0.2s;
+  background: $oc-gray-1;
+  border-radius: 10px;
+  padding: 1em 1em 0 1em;
+  overflow: hidden;
+  box-sizing: border-box;
+  margin-bottom: 2em;
+
+  &.active {
+    height: auto;
+    visibility: visible;
+    opacity: 1;
+  }
+
+  h3 {
+    margin: 0 0 1em 0;
+    color: $oc-gray-8;
+  }
+
+  div {
+    display: inline-block;
+    width: 49%;
+    margin-bottom: 1em;
+    vertical-align: top;
+  }
+
+  label {
+    display: inline-block;
+    width: 160px;
+  }
+
+  input {
+    width: 280px;
+    background: #fff;
+    padding: 0.5em;
+    border-radius: 8px;
+    border: 1px solid $oc-gray-4;
+
+    &:focus {
+      outline: none;
+      border-color: $oc-blue-7;
+    }
+  }
+
+  span {
+    background: $oc-blue-8;
+    color: #fff;
+    border-radius: 10px;
+    cursor: pointer;
+    padding: 0.5em 1em;
+    line-height: 2.5em;
+  }
+}

src/scss/header.scss

@@ -4,12 +4,13 @@ header {
   $logo-size: 100px;
 
   line-height: $logo-size;
+  margin-bottom: 1em;
 
   img {
     width: $logo-size;
     height: $logo-size;
-    border: 1px solid #ccc;
     display: inline-block;
+    filter: drop-shadow(3px 4px 0px rgba(0, 0, 0, 0.1));
   }
 
   h1 {
@@ -27,27 +28,40 @@ header {
 
   div {
     float: right;
-    width: 400px;
+    color: $oc-gray-4;
+    user-select: none;
   }
 
-  #refresh-data {
+  #refresh-data,
+  #request-new-build {
+    color: $oc-gray-7;
+    margin: 0 1.2em;
+
     svg {
-      width: 24px;
-      height: 24px;
+      width: 26px;
+      height: 26px;
       color: $oc-gray-5;
+      margin-right: 5px;
+      position: relative;
+      top: -1px;
+      stroke-width: 1.3px;
     }
+  }
 
-    &.active svg {
+  #refresh-data.active {
+    cursor: wait;
+
+    svg {
       animation-name: spin;
       animation-duration: 4000ms;
       animation-iteration-count: infinite;
       animation-timing-function: linear;
       @keyframes spin {
         from {
-          transform: rotate(0deg);
+          transform: rotate(360deg);
         }
         to {
-          transform: rotate(360deg);
+          transform: rotate(0deg);
         }
       }
     }

src/scss/index.scss

@@ -14,7 +14,15 @@ html {
   margin: 0 auto;
 }
 
+a,
+.clickable {
+  cursor: pointer;
+  text-decoration: underline #88aac9;
+  text-decoration-skip: leading-spaces trailing-spaces objects;
+}
+
 @import "header";
+@import "form";
 @import "logs";
 @import "footer";
 @import "notifications";

src/scss/logs.scss

@@ -19,6 +19,7 @@ $block-border-radius: 10px;
       font-weight: 500;
       line-height: 1;
     }
+
     .day-name {
       color: $oc-gray-5;
       font-size: 1.2rem;
@@ -44,8 +45,10 @@ $block-border-radius: 10px;
   &:last-child {
     margin-bottom: 0;
   }
+
   &:hover {
-    border-color: $oc-indigo-2;
+    border-color: $oc-blue-2;
+
     .switchy {
       color: $oc-blue-5;
       background: $oc-gray-1;
@@ -67,15 +70,18 @@ $block-border-radius: 10px;
       width: 5px;
       margin-right: $intercol-space;
       user-select: none;
+
       &.success {
         background: $oc-green-7;
       }
+
       &.error {
         background: $oc-red-7;
       }
     }
+
     .time {
-      width: 100px;
+      width: 120px;
       margin-right: $intercol-space;
       text-align: center;
       font-weight: 800;
@@ -84,11 +90,13 @@ $block-border-radius: 10px;
       line-height: $summary-height;
       letter-spacing: 1px;
     }
+
     .col2 {
       flex: 3;
       margin-right: $intercol-space;
       line-height: 1.7;
     }
+
     .col3 {
       width: 270px;
       line-height: 1.7;
@@ -99,15 +107,18 @@ $block-border-radius: 10px;
         vertical-align: text-bottom;
       }
     }
+
     .col4 {
       width: 120px;
       line-height: 1.7;
       color: $oc-gray-8;
+
       .icon {
         margin-right: 5px;
         vertical-align: text-bottom;
       }
     }
+
     .actions {
       width: $summary-height;
 
@@ -123,7 +134,6 @@ $block-border-radius: 10px;
 
     .repository {
       color: $oc-gray-7;
-      text-decoration: none;
 
       .country {
         width: 20px;
@@ -136,24 +146,39 @@ $block-border-radius: 10px;
         vertical-align: middle;
         position: relative;
         top: -2px;
+
         img {
           vertical-align: top;
+          border: 1px solid $oc-gray-4;
+          border-radius: 2px;
         }
       }
+
       span:nth-child(2) {
         margin-right: 4px;
       }
+
       span:nth-child(3) {
         font-weight: 600;
         margin-left: 4px;
       }
     }
+
     .branch {
       max-width: 100%;
       text-overflow: ellipsis;
       overflow: hidden;
       white-space: nowrap;
     }
+
+    .request-rebuild {
+      cursor: pointer;
+    }
+
+    .link-preview,
+    .link-failure-logs {
+      display: block;
+    }
   }
 
   .details {
@@ -176,6 +201,7 @@ $block-border-radius: 10px;
     .switchy {
       rotate: 90deg;
     }
+
     .details {
       display: block;
     }