From e558963d30cd3c3d39b246be4034c8beaca56a77 Mon Sep 17 00:00:00 2001 From: Tolmachev Igor Date: Thu, 8 Jan 2026 02:22:44 +0900 Subject: Fix css and add js file - Fix header image size - Prevent text wrapping in lists - Do not display empty commit msg - Wrap big tables in div.scrollable --- www/cgit.css | 52 ++++++++++++---------------- www/cgit.js | 108 +++++++++++++++++++++++++++++++++++++++++++++++++++++++++++ 2 files changed, 129 insertions(+), 31 deletions(-) create mode 100644 www/cgit.js 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 + * + * 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, + ); +})(); -- cgit v1.2.3