Author: Lars Hjemli <hjemli@gmail.com>
Change the cgit layout
This modifies and hopefully improves the layout of all cgit pages:
* Remove the header from all pages and replace it with a sidebar;
most pages have sufficient width but many needs more height.
* Add a dropdown-box to switch between branches, using a one-liner
javascript to reload the current page in context of the selected branch.
* Include refs found below refs/archives in the sidebar, appearing as a
set of menuitems below a 'download' heading.
* Include the brand new cgit logo
Signed-off-by: Lars Hjemli <hjemli@gmail.com>
cgit.css | 149 +++++++++++++++++++--------------------------- cgit.h | 2 cgitrc | 9 ++ shared.c | 31 +++++++++ ui-shared.c | 172 ++++++++++++++++++++++++++++++++++++++--------------- ui-summary.c | 65 +------------------
diff --git a/cgit.css b/cgit.css index 5d47099a66c2c953be9b4272bc64fa4dcdb735a7..6cf45170b8a42548efd30ab16fd9f656170a8f1e 100644 --- a/cgit.css +++ b/cgit.css @@ -1,13 +1,14 @@ -body { - font-family: arial, sans-serif; - font-size: 11pt; - color: black; - background: white; -} - body, table { padding: 0em; margin: 0em; +} + +body { + font-family: sans; + font-size: 10pt; + color: #333; + background: white; + padding-left: 4px; } table { @@ -35,12 +36,13 @@ font-weight: bold; } a { - color: blue; + color: #600; text-decoration: none; } a:hover { - text-decoration: underline; + background-color: #ddd; + text-decoration: none; } table.list { @@ -53,7 +55,7 @@ background: white; } table.list tr:hover { - background: #eee; + background: #f8f8f8; } table.list tr.nohover:hover { @@ -76,98 +78,78 @@ img { border: none; } -table#layout { - width: 100%; - border-collapse: collapse; - margin: 0px; +div#sidebar { + vertical-align: top; + width: 162px; + padding: 0px 0px 0px 0px; + margin: 4px; + float: left; } -td#header, td#logo { - color: #666; - background-color: #ddd; - border-bottom: solid 1px #000; +div#logo { + margin: 0px; + padding: 4px 0px 4px 0px; + text-align: center; + background-color: #ccc; + border-top: solid 1px #eee; + border-left: solid 1px #eee; + border-right: solid 1px #aaa; + border-bottom: solid 1px #aaa; } -td#header { - font-size: 150%; - font-weight: bold; - padding: 0.2em 0.5em; - vertical-align: text-bottom; +div#sidebar div.infobox { + margin: 0px 0px 0pax 0px; + padding: 0.5em; + text-align: left; + background-color: #ccc; + border-top: solid 1px #eee; + border-left: solid 1px #eee; + border-right: solid 1px #aaa; + border-bottom: solid 1px #aaa; } -td#header a { - color: #666; -} - -td#header a:hover { - text-decoration: underline; -} - -td#logo { - text-align: right; - vertical-align: middle; - padding-right: 0.5em; -} - -td#crumb, td#search { - color: #ccc; - border-top: solid 3px #555; - background-color: #666; - border-bottom: solid 1px #333; - padding: 2px 1em; -} - -td#crumb { +div#sidebar div.infobox h1 { + font-size: 11pt; font-weight: bold; + margin: 0px; } -td#crumb a { - color: #ccc; - background-color: #666; - padding: 0em 0.5em 0em 0.5em; -} - -td#crumb a:hover { - color: #666; +div#sidebar div.infobox a.menu { + display: block; background-color: #ccc; + padding: 0.1em 0.5em; text-decoration: none; } -td#search { - text-align: right; - vertical-align: middle; - padding-right: 0.5em; -} - -td#search form { - margin: 0px; - padding: 0px; +div#sidebar div.infobox a.menu:hover { + background-color: #bbb; + text-decoration: none; } -td#search select { - font-size: 9pt; +div#sidebar div.infobox select { + width: 100%; + border: solid 1px #aaa; + background-color: #bbb; + margin: 2px 0px 0px 0px; padding: 0px; - border: solid 1px #333; - color: #333; - background-color: #fff; } -td#search input { - font-size: 9pt; - padding: 0px; +div#sidebar div.infobox input.txt { + width: 100%; + border: solid 1px #aaa; + background-color: #bbb; + margin: 2px 0px 0px 0px; + padding: 0; } -td#search input.txt { - width: 8em; - border: solid 1px #333; - color: #333; - background-color: #fff; +table#grid { + margin: 0px; } -td#search input.btn { - border: solid 1px #333; - color: #333; - background-color: #ccc; +td#content { + vertical-align: top; + padding: 1em 2em 1em 1em; + border: none; } div#summary { @@ -185,10 +167,6 @@ } table#downloads th { background-color: #ccc; -} - -td#content { - padding: 1em 0.5em; } div#blob { @@ -284,7 +262,6 @@ } table.diffstat { border-collapse: collapse; - width: 100%; border: solid 1px #aaa; background-color: #eee; } @@ -325,7 +302,7 @@ color: blue; } table.diffstat td.graph { - width: 75%; + width: 500px; vertical-align: middle; } diff --git a/cgit.h b/cgit.h index b8af9706e93ef1a2eafa6e245260e2e29f89c961..42036c30f1ddea942063695c33c53e59c0f28ec3 100644 --- a/cgit.h +++ b/cgit.h @@ -181,6 +181,8 @@ extern int chk_non_negative(int result, char *msg); extern int hextoint(char c); extern char *trim_end(const char *str, char c); +extern char *strlpart(char *txt, int maxlen); +extern char *strrpart(char *txt, int maxlen); extern void cgit_add_ref(struct reflist *list, struct refinfo *ref); extern int cgit_refs_cb(const char *refname, const unsigned char *sha1, diff --git a/cgit.png b/cgit.png new file mode 100644 index 0000000000000000000000000000000000000000..ee48197a8d55abf3345d913a87c17734c1af040e Binary files /dev/null and b/cgit.png differ diff --git a/cgitrc b/cgitrc index 2b09e01b97a8ac03398708c0fb2a2e68b65a7387..6363c9c921b0ed11c81c8d7fd9d4af6fa9b705fc 100644 --- a/cgitrc +++ b/cgitrc @@ -85,8 +85,13 @@ ## Set the title printed on the root page #root-title=Git repository browser -## If specified, the file at this path will be included as HTML in the index -## of repositories +## If specified, the file at this path will be included as HTML in the +## sidebar on the repository index page +#index-info= + + +## If specified, the file at this path will be included as HTML above +## the repository index #index-header= diff --git a/shared.c b/shared.c index 50fe8e1343437380b035aa98cc120c2b8b9bc2da..e06df91bb8c74a617fa95d67e8b0737b4a1099cb 100644 --- a/shared.c +++ b/shared.c @@ -303,6 +303,37 @@ t[len] = c; return s; } +char *strlpart(char *txt, int maxlen) +{ + char *result; + + if (!txt) + return txt; + + if (strlen(txt) <= maxlen) + return txt; + result = xmalloc(maxlen + 1); + memcpy(result, txt, maxlen - 3); + result[maxlen-1] = result[maxlen-2] = result[maxlen-3] = '.'; + result[maxlen] = '\0'; + return result; +} + +char *strrpart(char *txt, int maxlen) +{ + char *result; + + if (!txt) + return txt; + + if (strlen(txt) <= maxlen) + return txt; + result = xmalloc(maxlen + 1); + memcpy(result + 3, txt + strlen(txt) - maxlen + 4, maxlen - 3); + result[0] = result[1] = result[2] = '.'; + return result; +} + void cgit_add_ref(struct reflist *list, struct refinfo *ref) { size_t size; diff --git a/ui-shared.c b/ui-shared.c index 14180105116cd27dca0d366bca7a39b531b4e08b..1d6694041baac51f214477a803a8c9360fe31347 100644 --- a/ui-shared.c +++ b/ui-shared.c @@ -362,76 +362,148 @@ } void cgit_print_docend() { - html("</td></tr></table>"); - html("</body>\n</html>\n"); + html("</td>\n</tr>\n<table>\n</body>\n</html>\n"); +} + +int print_branch_option(const char *refname, const unsigned char *sha1, + int flags, void *cb_data) +{ + char *name = (char *)refname; + html_option(name, name, cgit_query_head); + return 0; +} + +int print_archive_ref(const char *refname, const unsigned char *sha1, + int flags, void *cb_data) +{ + struct tag *tag; + struct taginfo *info; + struct object *obj; + char buf[256], *url; + unsigned char fileid[20]; + int *header = (int *)cb_data; + + if (prefixcmp(refname, "refs/archives")) + return 0; + strncpy(buf, refname+14, sizeof(buf)); + obj = parse_object(sha1); + if (!obj) + return 1; + if (obj->type == OBJ_TAG) { + tag = lookup_tag(sha1); + if (!tag || parse_tag(tag) || !(info = cgit_parse_tag(tag))) + return 0; + hashcpy(fileid, tag->tagged->sha1); + } else if (obj->type != OBJ_BLOB) { + return 0; + } else { + hashcpy(fileid, sha1); + } + if (!*header) { + html("<p><h1>download</h1>"); + *header = 1; + } + url = cgit_pageurl(cgit_query_repo, "blob", + fmt("id=%s&path=%s", sha1_to_hex(fileid), + buf)); + html_link_open(url, NULL, "menu"); + html_txt(strlpart(buf, 20)); + html_link_close(); + return 0; +} + +void add_hidden_formfields(int incl_head, int incl_search) +{ + if (!cgit_virtual_root) { + if (cgit_query_repo) + html_hidden("r", cgit_query_repo); + if (cgit_query_page) + html_hidden("p", cgit_query_page); + } + + if (incl_head && strcmp(cgit_query_head, cgit_repo->defbranch)) + html_hidden("h", cgit_query_head); + + if (cgit_query_sha1) + html_hidden("id", cgit_query_sha1); + if (cgit_query_sha2) + html_hidden("id2", cgit_query_sha2); + + if (incl_search) { + if (cgit_query_grep) + html_hidden("qt", cgit_query_grep); + if (cgit_query_search) + html_hidden("q", cgit_query_search); + } } void cgit_print_pageheader(char *title, int show_search) { - html("<table id='layout'>"); - html("<tr><td id='header'><a href='"); - html_attr(cgit_rooturl()); - html("'>"); - html_txt(cgit_root_title); - html("</a></td><td id='logo'>"); + static const char *default_info = "This is cgit, a fast webinterface for git repositories"; + int header = 0; + + html("<div id='sidebar'>\n"); html("<a href='"); - html_attr(cgit_logo_link); - htmlf("'><img src='%s' alt='logo'/></a>", cgit_logo); - html("</td></tr>"); - html("<tr><td id='crumb'>"); + html_attr(cgit_rooturl()); + htmlf("'><div id='logo'><img src='%s' alt='cgit'/></div></a>\n", + cgit_logo); + html("<div class='infobox'>"); if (cgit_query_repo) { - html_txt(cgit_repo->name); - html(" ("); - html_txt(cgit_query_head); - html(") : "); - reporevlink(NULL, "summary", NULL, NULL, cgit_query_head, + html("<h1>"); + html_txt(strrpart(cgit_repo->name, 20)); + html("</h1>\n"); + html_txt(cgit_repo->desc); + if (cgit_repo->owner) { + html("<p>\n<h1>owner</h1>\n"); + html_txt(cgit_repo->owner); + } + html("<p>\n<h1>navigate</h1>\n"); + reporevlink(NULL, "summary", NULL, "menu", cgit_query_head, NULL, NULL); - html(" "); - cgit_log_link("log", NULL, NULL, cgit_query_head, + cgit_log_link("log", NULL, "menu", cgit_query_head, cgit_query_sha1, cgit_query_path, 0); - html(" "); - cgit_tree_link("tree", NULL, NULL, cgit_query_head, + cgit_tree_link("tree", NULL, "menu", cgit_query_head, cgit_query_sha1, NULL); - html(" "); - cgit_commit_link("commit", NULL, NULL, cgit_query_head, + cgit_commit_link("commit", NULL, "menu", cgit_query_head, cgit_query_sha1); - html(" "); - cgit_diff_link("diff", NULL, NULL, cgit_query_head, + cgit_diff_link("diff", NULL, "menu", cgit_query_head, cgit_query_sha1, cgit_query_sha2, cgit_query_path); - } else { - html_txt("Index of repositories"); - } - html("</td>"); - html("<td id='search'>"); - if (show_search) { + + for_each_ref(print_archive_ref, &header); + + html("<p>\n<h1>branch</h1>\n"); + html("<form method='get' action=''>\n"); + add_hidden_formfields(0, 1); + html("<select name='h' onchange='this.form.submit();'>\n"); + for_each_branch_ref(print_branch_option, cgit_query_head); + html("</select>\n"); + html("</form>\n"); + + html("<p>\n<h1>search</h1>\n"); html("<form method='get' action='"); - html_attr(cgit_currurl()); - html("'>"); - if (!cgit_virtual_root) { - if (cgit_query_repo) - html_hidden("r", cgit_query_repo); - if (cgit_query_page) - html_hidden("p", cgit_query_page); - } - if (cgit_query_head) - html_hidden("h", cgit_query_head); - if (cgit_query_sha1) - html_hidden("id", cgit_query_sha1); - if (cgit_query_sha2) - html_hidden("id2", cgit_query_sha2); - html("<select name='qt'>"); + html_attr(cgit_pageurl(cgit_query_repo, "log", NULL)); + html("'>\n"); + add_hidden_formfields(1, 0); + html("<select name='qt'>\n"); html_option("grep", "log msg", cgit_query_grep); html_option("author", "author", cgit_query_grep); html_option("committer", "committer", cgit_query_grep); - html("</select>"); + html("</select>\n"); html("<input class='txt' type='text' name='q' value='"); html_attr(cgit_query_search); - html("'/><input class='btn' type='submit' value='...'/></form>"); + html("'/>\n"); + html("</form>\n"); + } else { + if (!cgit_index_info || html_include(cgit_index_info)) + html(default_info); } - html("</td></tr>"); - html("<tr><td id='content' colspan='2'>"); + + html("</div>\n"); + + html("</div>\n<table class='grid'><tr><td id='content'>\n"); } + void cgit_print_snapshot_start(const char *mimetype, const char *filename, struct cacheitem *item) diff --git a/ui-summary.c b/ui-summary.c index ba90510f0289d11dcfa9263cf86a03ae5c6a0bb3..39fe33078b737b8c4d7f58e6344677149e0a4604 100644 --- a/ui-summary.c +++ b/ui-summary.c @@ -120,47 +120,6 @@ } return 0; } -static int cgit_print_archive_cb(const char *refname, const unsigned char *sha1, - int flags, void *cb_data) -{ - struct tag *tag; - struct taginfo *info; - struct object *obj; - char buf[256], *url; - unsigned char fileid[20]; - - if (prefixcmp(refname, "refs/archives")) - return 0; - strncpy(buf, refname+14, sizeof(buf)); - obj = parse_object(sha1); - if (!obj) - return 1; - if (obj->type == OBJ_TAG) { - tag = lookup_tag(sha1); - if (!tag || parse_tag(tag) || !(info = cgit_parse_tag(tag))) - return 0; - hashcpy(fileid, tag->tagged->sha1); - } else if (obj->type != OBJ_BLOB) { - return 0; - } else { - hashcpy(fileid, sha1); - } - if (!header) { - html("<table id='downloads'>"); - html("<tr><th>Downloads</th></tr>"); - header = 1; - } - html("<tr><td>"); - url = cgit_pageurl(cgit_query_repo, "blob", - fmt("id=%s&path=%s", sha1_to_hex(fileid), - buf)); - html_link_open(url, NULL, NULL); - html_txt(buf); - html_link_close(); - html("</td></tr>"); - return 0; -} - static void print_refs_link(char *path) { html("<tr class='nohover'><td colspan='4'>"); @@ -221,28 +180,16 @@ if (maxcount < list.count) print_refs_link("tags"); } -static void cgit_print_archives() -{ - header = 0; - for_each_ref(cgit_print_archive_cb, NULL); - if (header) - html("</table>"); -} - void cgit_print_summary() { - html("<div id='summary'>"); - cgit_print_archives(); - html("<h2>"); - html_txt(cgit_repo->name); - html(" - "); - html_txt(cgit_repo->desc); - html("</h2>"); - if (cgit_repo->readme) + if (cgit_repo->readme) { + html("<div id='summary'>"); html_include(cgit_repo->readme); - html("</div>"); + html("</div>"); + } if (cgit_summary_log > 0) - cgit_print_log(cgit_query_head, 0, cgit_summary_log, NULL, NULL, NULL, 0); + cgit_print_log(cgit_query_head, 0, cgit_summary_log, NULL, + NULL, NULL, 0); html("<table class='list nowrap'>"); if (cgit_summary_log > 0) html("<tr class='nohover'><td colspan='4'> </td></tr>");