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>

7 files changed, 231 insertions, 197 deletions

diff --git a/cgit.css b/cgit.css
index 5d47099..6cf4517 100644
--- a/cgit.css
+++ b/cgit.css
@@ -1,24 +1,25 @@
-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 {
       border-collapse: collapse;
 }
 
 h2 {
         font-size: 120%;
         font-weight: bold;
         margin-top: 0em;
         margin-bottom: 0.25em;
 }
 
 h3 {
@@ -26,180 +27,157 @@ h3 {
         font-size: 100%;
         font-weight: normal;
 }
 
 h4 {
         margin-top: 1.5em;
         margin-bottom: 0.1em;
         font-size: 100%;
         font-weight: bold;
 }
 
 a {
-        color: blue;
+        color: #600;
         text-decoration: none;
 }
 
 a:hover {
-        text-decoration: underline;
+        background-color: #ddd;
+        text-decoration: none;
 }
 
 table.list {
         border: none;
         border-collapse: collapse;
 }
 
 table.list tr {
         background: white;
 }
 
 table.list tr:hover {
-        background: #eee;
+        background: #f8f8f8;
 }
 
 table.list tr.nohover:hover {
         background: white;
 }
 
 table.list th {
         font-weight: bold;
         border-bottom: solid 1px #777;
         padding: 0.1em 0.5em 0.1em 0.5em;
         vertical-align: baseline;
 }
 
 table.list td {
         border: none;
         padding: 0.1em 0.5em 0.1em 0.5em;
 }
 
 img {
         border: none;
 }
 
-table#layout {
-        width: 100%;
-        border-collapse: collapse;
-        margin: 0px;
-}
-
-td#header, td#logo {
-        color: #666;
-        background-color: #ddd;
-        border-bottom: solid 1px #000;
-}
-
-td#header {
-        font-size: 150%;
-        font-weight: bold;
-        padding: 0.2em 0.5em;
-        vertical-align: text-bottom;
-}
-
-td#header a {
-        color: #666;
-}
-
-td#header a:hover {
-        text-decoration: underline;
+div#sidebar {
+        vertical-align: top;
+        width: 162px;
+        padding: 0px 0px 0px 0px;
+        margin: 4px;
+        float: left;
 }
 
-td#logo {
-        text-align: right;
-        vertical-align: middle;
-        padding-right: 0.5em;
+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#crumb, td#search {
-        color: #ccc;
-        border-top: solid 3px #555;
-        background-color: #666;
-        border-bottom: solid 1px #333;
-        padding: 2px 1em;
+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#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 {
         vertical-align: top;
         margin-bottom: 1em;
 }
 
 table#downloads {
         float: right;
         border-collapse: collapse;
         border: solid 1px #777;
         margin-left: 0.5em;
         margin-bottom: 0.5em;
 }
 
 table#downloads th {
         background-color: #ccc;
 }
 
-td#content {
-        padding: 1em 0.5em;
-}
-
 div#blob {
         border: solid 1px black;
 }
 
 div.error {
         color: red;
         font-weight: bold;
         margin: 1em 2em;
 }
 
 a.ls-blob, a.ls-dir, a.ls-mod {
         font-family: monospace;
@@ -275,25 +253,24 @@ div.commit-subject {
 div.commit-msg {
         white-space: pre;
         font-family: monospace;
 }
 
 div.diffstat-header {
         font-weight: bold;
         padding-top: 1.5em;
 }
 
 table.diffstat {
         border-collapse: collapse;
-        width: 100%;
         border: solid 1px #aaa;
         background-color: #eee;
 }
 
 table.diffstat th {
         font-weight: normal;
         text-align: left;
         text-decoration: underline;
         padding: 0.1em 1em 0.1em 0.1em;
         font-size: 100%;
 }
 
@@ -316,25 +293,25 @@ table.diffstat td.add a {
         color: green;
 }
 
 table.diffstat td.del a {
         color: red;
 }
 
 table.diffstat td.upd a {
         color: blue;
 }
 
 table.diffstat td.graph {
-        width: 75%;
+        width: 500px;
         vertical-align: middle;
 }
 
 table.diffstat td.graph table {
         border: none;
 }
 
 table.diffstat td.graph td {
         padding: 0px;
         border: 0px;
         height: 7pt;
 }
diff --git a/cgit.h b/cgit.h
index b8af970..42036c3 100644
--- a/cgit.h
+++ b/cgit.h
@@ -172,24 +172,26 @@ extern int htmlfd;
 extern int cgit_get_cmd_index(const char *cmd);
 extern struct repoinfo *cgit_get_repoinfo(const char *url);
 extern void cgit_global_config_cb(const char *name, const char *value);
 extern void cgit_repo_config_cb(const char *name, const char *value);
 extern void cgit_querystring_cb(const char *name, const char *value);
 
 extern int chk_zero(int result, char *msg);
 extern int chk_positive(int result, char *msg);
 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,
                         int flags, void *cb_data);
 
 extern void *cgit_free_commitinfo(struct commitinfo *info);
 
 extern int cgit_diff_files(const unsigned char *old_sha1,
                            const unsigned char *new_sha1,
                            linediff_fn fn);
 
 extern void cgit_diff_tree(const unsigned char *old_sha1,
diff --git a/cgit.png b/cgit.png
new file mode 100644
index 0000000..ee48197
--- a/dev/null
+++ b/cgit.png
diff --git a/cgitrc b/cgitrc
index 2b09e01..6363c9c 100644
--- a/cgitrc
+++ b/cgitrc
@@ -76,26 +76,31 @@
 ##    url.rewrite = (
 ##        "^/git/([^?/]+/[^?]*)?(?:\?(.*))?$" => "/cgit.cgi?url=$1&$2"
 ##    )
 ##
 ## This setting is disabled by default.
 #virtual-root=/git
 
 
 ## 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=
 
 
 ## Link to css file
 #css=/cgit/cgit.css
 
 
 ## Link to logo file
 #logo=/cgit/git-logo.png
 
 
 ## Url loaded when clicking the logo
diff --git a/shared.c b/shared.c
index 50fe8e1..e06df91 100644
--- a/shared.c
+++ b/shared.c
@@ -294,24 +294,55 @@ char *trim_end(const char *str, char c)
                 len--;
 
         if (len == 0)
                 return NULL;
 
         c = t[len];
         t[len] = '\0';
         s = xstrdup(t);
         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;
 
         if (list->count >= list->alloc) {
                 list->alloc += (list->alloc ? list->alloc : 4);
                 size = list->alloc * sizeof(struct refinfo *);
                 list->refs = xrealloc(list->refs, size);
         }
         list->refs[list->count++] = ref;
 }
 
diff --git a/ui-shared.c b/ui-shared.c
index 1418010..1d66940 100644
--- a/ui-shared.c
+++ b/ui-shared.c
@@ -353,95 +353,167 @@ void cgit_print_docstart(char *title, struct cacheitem *item)
         html_txt(title);
         html("</title>\n");
         htmlf("<meta name='generator' content='cgit %s'/>\n", cgit_version);
         html("<link rel='stylesheet' type='text/css' href='");
         html_attr(cgit_css);
         html("'/>\n");
         html("</head>\n");
         html("<body>\n");
 }
 
 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&amp;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(") : &nbsp;");
-                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)
 {
         htmlf("Content-Type: %s\n", mimetype);
         htmlf("Content-Disposition: inline; filename=\"%s\"\n", filename);
         htmlf("Last-Modified: %s\n", http_date(item->st.st_mtime));
         htmlf("Expires: %s\n", http_date(item->st.st_mtime +
                                          ttl_seconds(item->ttl)));
         html("\n");
 }
 
 /* vim:set sw=8: */
diff --git a/ui-summary.c b/ui-summary.c
index ba90510..39fe330 100644
--- a/ui-summary.c
+++ b/ui-summary.c
@@ -111,65 +111,24 @@ static int print_tag(struct refinfo *ref)
         } else {
                 if (!header)
                         print_tag_header();
                 html("<tr><td>");
                 html_txt(name);
                 html("</td><td colspan='2'/><td>");
                 cgit_object_link(ref->object);
                 html("</td></tr>\n");
         }
         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&amp;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'>");
         cgit_refs_link("[...]", NULL, NULL, cgit_query_head, NULL, path);
         html("</td></tr>");
 }
 
 void cgit_print_branches(int maxcount)
 {
         struct reflist list;
         int i;
 
@@ -212,42 +171,30 @@ void cgit_print_tags(int maxcount)
         if (!maxcount)
                 maxcount = list.count;
         else if (maxcount > list.count)
                 maxcount = list.count;
         print_tag_header();
         for(i=0; i<maxcount; i++)
                 print_tag(list.refs[i]);
 
         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'>&nbsp;</td></tr>");
         cgit_print_branches(cgit_summary_branches);
         html("<tr class='nohover'><td colspan='4'>&nbsp;</td></tr>");
         cgit_print_tags(cgit_summary_tags);
         html("</table>");
 }