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>

diff --git a/cgit.css b/cgit.css
index 5d47099a66c2c953be9b4272bc64fa4dcdb735a7..6cf45170b8a42548efd30ab16fd9f656170a8f1e 100644 (file)
--- a/cgit.css
+++ b/cgit.css
@@ -1,15 +1,16 @@
-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;
 }
@@ -35,12 +36,13 @@ h4 {
 }
 
 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 @@ table.list tr {
 }
 
 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;
-}
-
-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 {
@@ -187,10 +169,6 @@ table#downloads th {
        background-color: #ccc;
 }
 
-td#content {
-       padding: 1em 0.5em;
-}
-
 div#blob {
        border: solid 1px black;
 }
@@ -284,7 +262,6 @@ div.diffstat-header {
 
 table.diffstat {
        border-collapse: collapse;
-       width: 100%;
        border: solid 1px #aaa;
        background-color: #eee;
 }
@@ -325,7 +302,7 @@ table.diffstat td.upd a {
 }
 
 table.diffstat td.graph {
-       width: 75%;
+       width: 500px;
        vertical-align: middle;
 }
 

diff --git a/cgit.h b/cgit.h
index b8af9706e93ef1a2eafa6e245260e2e29f89c961..42036c30f1ddea942063695c33c53e59c0f28ec3 100644 (file)
--- 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 (file)
index 0000000..ee48197
Binary files /dev/null and b/cgit.png differ

diff --git a/cgitrc b/cgitrc
index 2b09e01b97a8ac03398708c0fb2a2e68b65a7387..6363c9c921b0ed11c81c8d7fd9d4af6fa9b705fc 100644 (file)
--- a/cgitrc
+++ b/cgitrc
@@ -85,8 +85,13 @@
 #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 (file)
--- a/shared.c
+++ b/shared.c
@@ -303,6 +303,37 @@ char *trim_end(const char *str, char 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 (file)
--- a/ui-shared.c
+++ b/ui-shared.c
@@ -362,77 +362,149 @@ void cgit_print_docstart(char *title, struct cacheitem *item)
 
 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)
 {

diff --git a/ui-summary.c b/ui-summary.c
index ba90510f0289d11dcfa9263cf86a03ae5c6a0bb3..39fe33078b737b8c4d7f58e6344677149e0a4604 100644 (file)
--- a/ui-summary.c
+++ b/ui-summary.c
@@ -120,47 +120,6 @@ static int print_tag(struct refinfo *ref)
        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'>");
@@ -221,28 +180,16 @@ void cgit_print_tags(int maxcount)
                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>");