2 files changed, 129 insertions, 31 deletions

diff --git a/www/cgit.css b/www/cgit.css
index c3e015f..c0435e0 100644
--- a/www/cgit.css
+++ b/www/cgit.css
@@ -66,6 +66,15 @@ div#cgit table#header td.logo {
     padding-right: 1rem;
 }
 
+div#cgit table#header td.logo img {
+    max-height: 75px;
+    max-width: 100%;
+    width: auto;
+    height: auto;
+    border: none;
+    vertical-align: middle;
+}
+
 div#cgit table#header td.main {
     font-size: 1.5rem;
     font-weight: bold;
@@ -87,7 +96,7 @@ div#cgit table#header td.form {
 div#cgit table#header td.sub {
     display: block;
     width: 100%;
-    padding-top: 0.25rem;
+    padding-top: 0.5rem;
     color: var(--color-outline);
     font-size: 0.9rem;
     border-top: none;
@@ -240,6 +249,7 @@ div#cgit table.list th {
 div#cgit table.list td {
     padding: 0.75rem 0.5rem;
     vertical-align: middle;
+    white-space: nowrap;
 }
 
 /* Commit Graph columns */
@@ -251,13 +261,13 @@ div#cgit table.list td.commitgraph {
 
 /* 7. Diffs and Code */
 div#cgit table.blob,
+div#cgit table.bin-blob,
 div#cgit table.diff,
 div#cgit table.ssdiff {
     width: 100%;
     border: 1px solid var(--color-outline-variant);
     border-collapse: collapse;
     border-radius: 4px;
-    overflow: hidden;
     margin-top: 1rem;
     background: var(--color-surface-container-lowest);
 }
@@ -295,13 +305,6 @@ div#cgit table.ssdiff td {
 }
 
 div#cgit table.bin-blob {
-    width: 100%;
-    border: 1px solid var(--color-outline-variant);
-    border-collapse: collapse;
-    border-radius: 4px;
-    overflow: hidden;
-    margin-top: 1rem;
-    background: var(--color-surface-container-lowest);
     font-family: monospace;
     font-size: 0.95em;
 }
@@ -449,6 +452,10 @@ div#cgit div.commit-msg {
     color: var(--color-on-surface);
 }
 
+div#cgit div.commit-msg:empty {
+    display: none;
+}
+
 /* 10. Footer */
 div#cgit div.footer {
     margin-top: auto;
@@ -469,17 +476,8 @@ div#cgit div.error {
 
 /* 11. Responsive Adjustments */
 @media only screen and (max-width: 768px) {
-    div#cgit table#header {
-        flex-direction: column;
-        align-items: flex-start;
-    }
-
-    div#cgit table#header td.logo,
-    div#cgit table#header td.main,
-    div#cgit table#header td.form {
-        width: 100%;
-        text-align: left;
-        margin-bottom: 0.5rem;
+    div#cgit table#header td.logo img {
+        max-height: 40px;
     }
 
     div#cgit table.tabs {
@@ -503,20 +501,12 @@ div#cgit div.error {
         overflow-x: auto;
     }
 
-    /* Force tables to scroll on small screens */
-    div#cgit table.list,
-    div#cgit table.blob,
-    div#cgit table.diff {
-        white-space: nowrap;
-    }
-
-    div#cgit table.bin-blob {
-        white-space: nowrap;
-        display: block; /* Позволяет скроллить саму таблицу */
+    /* Make div.scrollable is scrollable*/
+    div#cgit div.scrollable {
         overflow-x: auto;
     }
 
-    div#cgit table.bin-blob th,
+    div#cgit div#cgit table.bin-blob th,
     div#cgit table.bin-blob td {
         padding: 0.5rem;
     }
diff --git a/www/cgit.js b/www/cgit.js
new file mode 100644
index 0000000..52a8c3c
--- /dev/null
+++ b/www/cgit.js
@@ -0,0 +1,108 @@
+/* cgit.js: javacript functions for cgit
+ *
+ * Copyright (C) 2006-2018 cgit Development Team <cgit@lists.zx2c4.com>
+ *
+ * Licensed under GNU General Public License v2
+ *   (see COPYING for full license text)
+ */
+
+(function () {
+  /* This follows the logic and suffixes used in ui-shared.c */
+
+  var age_classes = ["age-mins", "age-hours", "age-days", "age-weeks", "age-months", "age-years"];
+  var age_suffix = ["min.", "hours", "days", "weeks", "months", "years", "years"];
+  var age_next = [
+    60,
+    3600,
+    24 * 3600,
+    7 * 24 * 3600,
+    30 * 24 * 3600,
+    365 * 24 * 3600,
+    365 * 24 * 3600,
+  ];
+  var age_limit = [
+    7200,
+    24 * 7200,
+    7 * 24 * 7200,
+    30 * 24 * 7200,
+    365 * 25 * 7200,
+    365 * 25 * 7200,
+  ];
+  var update_next = [10, 5 * 60, 1800, 24 * 3600, 24 * 3600, 24 * 3600, 24 * 3600];
+
+  function render_age(e, age) {
+    var t, n;
+
+    for (n = 0; n < age_classes.length; n++) if (age < age_limit[n]) break;
+
+    t = Math.round(age / age_next[n]) + " " + age_suffix[n];
+
+    if (e.textContent != t) {
+      e.textContent = t;
+      if (n == age_classes.length) n--;
+      if (e.className != age_classes[n]) e.className = age_classes[n];
+    }
+  }
+
+  function aging() {
+    var n,
+      next = 24 * 3600,
+      now_ut = Math.round(new Date().getTime() / 1000);
+
+    for (n = 0; n < age_classes.length; n++) {
+      var m,
+        elems = document.getElementsByClassName(age_classes[n]);
+
+      if (elems.length && update_next[n] < next) next = update_next[n];
+
+      for (m = 0; m < elems.length; m++) {
+        var age = now_ut - elems[m].getAttribute("data-ut");
+
+        render_age(elems[m], age);
+      }
+    }
+
+    /*
+     * We only need to come back when the age might have changed.
+     * Eg, if everything is counted in hours already, once per
+     * 5 minutes is accurate enough.
+     */
+
+    window.setTimeout(aging, next * 1000);
+  }
+
+  function wrap_tables() {
+    const selectors = [
+      "div#cgit table.list",
+      "div#cgit table.blob",
+      "div#cgit table.bin-blob",
+      "div#cgit table.diff",
+      "div#cgit table.ssdiff",
+      "div#cgit table.commit-info",
+    ];
+
+    const tables = document.querySelectorAll(selectors.join(", "));
+
+    tables.forEach((table) => {
+      if (table.parentNode.classList.contains("scrollable")) {
+        return;
+      }
+
+      const wrapper = document.createElement("div");
+      wrapper.className = "scrollable";
+
+      table.parentNode.insertBefore(wrapper, table);
+      wrapper.appendChild(table);
+    });
+  }
+
+  document.addEventListener(
+    "DOMContentLoaded",
+    function () {
+      /* we can do the aging on DOM content load since no layout dependency */
+      aging();
+      wrap_tables();
+    },
+    false,
+  );
+})();