src/app.py

@@ -21,6 +21,7 @@ assets.register('scss_all', scss)
 class ArtifactItem:
     file: str
     description: str
+    width: int = 0
 
     def __init__(self, file, description):
         self.file = file
@@ -39,6 +40,9 @@ class Artifact:
         self.changelog = changelog
         self.artifacts = [ArtifactItem(**item)
                           for item in artifacts]
+        maxwidth = max((len(a.file) for a in self.artifacts), default=0)
+        for a in self.artifacts:
+            a.width = maxwidth
 
     @classmethod
     def from_json(cls, json_str):

src/static/script/artifacts.js

@@ -1,15 +1,21 @@
-window.addEventListener("load", () => {
+function init() {
+    let dates = document.querySelectorAll("span.build-date");
+
+    for (let date of dates) {
+        date.textContent = new Date(date.textContent).toLocaleString();
+    }
+
     let artifacts = document.querySelectorAll("div.artifact-item");
-    for(let artifact of artifacts) {
+    for (let artifact of artifacts) {
         let contents = artifact.querySelector(".artifact-contents");
-        if(!contents || !(contents instanceof HTMLElement))
+        if (!contents || !(contents instanceof HTMLElement))
             continue;
         artifact.addEventListener("click", e => {
             e.preventDefault();
-            if(contents.classList.contains("contents-visible"))
+            if (contents.classList.contains("contents-visible"))
                 contents.classList.remove("contents-visible");
             else
                 contents.classList.add("contents-visible");
         });
     }
-});
+}

src/static/style/main.scss

@@ -15,6 +15,29 @@ $menu-label-color: hsl(0, 0%, 96%);
   }
 }
 
+@media (min-width: $tablet) {
+  nav {
+    position: fixed !important;
+    top: 0;
+    width: 100%;
+  }
+
+  body {
+    padding-top: $navbar-height;
+  }
+
+  aside#project-menu {
+    position: fixed;
+    width: inherit;
+    top: $navbar-height + $column-gap;
+    padding-right: $column-gap * 3;
+  }
+}
+
+aside#project-menu {
+  user-select: none;
+}
+
 @media (max-width: $tablet) {
   div#ci-menu {
     padding-right: 1.5rem;
@@ -43,6 +66,7 @@ div#ci-menu {
 
 nav {
   box-shadow: 0 -3px 10px 3px black;
+  user-select: none;
 }
 
 hr.content-divider {
@@ -51,6 +75,11 @@ hr.content-divider {
   height: 1px;
 }
 
+table td.min-size {
+  width: 1%;
+  white-space: nowrap;
+}
+
 div.artifact-item {
   $artifact-item-radius: 2px;
   margin-bottom: 0.75rem;
@@ -58,9 +87,9 @@ div.artifact-item {
   & > div.artifact-details {
     @extend .columns, .is-mobile;
 
+    user-select: none;
     align-items: center;
     margin-top: 0;
-    // margin-bottom: 0 !important;
     cursor: pointer;
 
     & > div.artifact-id {

src/templates/nav.html

@@ -1,4 +1,4 @@
-<aside class="menu">
+<aside id="project-menu" class="menu">
     <p class="menu-label">
         Available projects
     </p>

src/templates/project_view.html

@@ -33,7 +33,7 @@
         </div>
         <div class="artifact-info">
             <div class="artifact-info-content" style="align-items: center">
-                <p>Build date: {{artifact.date}}</p>
+                <p>Build date: <span class="build-date">{{artifact.date}}</span></p>
                 <div class="dropdown-button">
                     <span class="icon-down-open"></span>
                 </div>
@@ -55,7 +55,7 @@
                     <tbody>
                         {%-for download_item in artifact.artifacts%}
                         <tr>
-                            <td><a class="button is-link" href="{{ url_for('download_item', project_id=selected_project.id, artifact_id=artifact.id, download_item=download_item.file)}}">{{download_item.file}}</a></td>
+                            <td class="min-size"><a class="button is-link" style="width: calc({{download_item.width}} * 0.6rem);" href="{{ url_for('download_item', project_id=selected_project.id, artifact_id=artifact.id, download_item=download_item.file)}}">{{download_item.file}}</a></td>
                             <td>{{download_item.description}}</td>
                         </tr>
                         {%-endfor%}
@@ -74,4 +74,5 @@
 </div>
 {%-endfor%}
 
+<script>init();</script>
 {%endblock%}