Diff options
| author | Lars Hjemli <hjemli@gmail.com> | |
|---|---|---|
| committer | Lars Hjemli <hjemli@gmail.com> | |
| commit | ||
| parent | ||
| tree | ||
| download | ||
Use tables for page layout
It feels like the Right Thing, and it fixes some rendering problems in a
much used webbrowser.
Signed-off-by: Lars Hjemli <hjemli@gmail.com>
| -rw-r--r-- | cgit.css | 49 | |
| -rw-r--r-- | ui-shared.c | 22 |
2 files changed, 41 insertions, 30 deletions
@@ -8,7 +8,7 @@ body { font-size: 10pt; color: #333; background: white; - padding-left: 4px; + padding: 4px; } table { @@ -78,29 +78,39 @@ img { border: none; } -div#sidebar { +table#layout { + border-collapse: collapse; + border: none; + margin: 0px; +} + +td#sidebar { vertical-align: top; width: 162px; padding: 0px 0px 0px 0px; - margin: 4px; - float: left; + margin: 0px; } -div#logo { +td#sidebar table { + border-collapse: separate; + border-spacing: 0px; margin: 0px; - padding: 4px 0px 4px 0px; - text-align: center; + padding: 0px; background-color: #ccc; +} + +td#sidebar table.sidebar td.sidebar { + padding: 4px; border-top: solid 1px #eee; border-left: solid 1px #eee; border-right: solid 1px #aaa; border-bottom: solid 1px #aaa; } -div#sidebar div.infobox { - margin: 0px 0px 0px 0px; - padding: 0.5em; - text-align: left; +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; @@ -108,43 +118,42 @@ div#sidebar div.infobox { border-bottom: solid 1px #aaa; } -div#sidebar div.infobox h1 { +td#sidebar h1 { font-size: 10pt; font-weight: bold; margin: 8px 0px 0px 0px; } -div#sidebar div.infobox h1.first { +td#sidebar h1.first { margin-top: 0px; } -div#sidebar div.infobox a.menu { +td#sidebar a.menu { display: block; background-color: #ccc; padding: 0.1em 0.5em; text-decoration: none; } -div#sidebar div.infobox a.menu:hover { +td#sidebar a.menu:hover { background-color: #bbb; text-decoration: none; } -div#sidebar div.infobox select { +td#sidebar select { width: 100%; margin: 2px 0px 0px 0px; } -td#branch-dropdown-cell { - width: 99%; +td#sidebar form { + text-align: right; } input#switch-btn { - width: 20px; margin: 2px 0px 0px 0px; } -div#sidebar div.infobox input.txt { +td#sidebar input.txt { width: 100%; margin: 2px 0px 0px 0px; } diff --git a/ui-shared.c b/ui-shared.c index 2f771da..4c0613a 100644 --- a/ui-shared.c +++ b/ui-shared.c @@ -457,12 +457,14 @@ void cgit_print_pageheader(char *title, int show_search) static const char *default_info = "This is cgit, a fast webinterface for git repositories"; int header = 0; - html("<div id='sidebar'>\n"); - html("<div id='logo'><a href='"); + html("<table id='layout' summary=''>\n"); + html("<tr><td id='sidebar'>\n"); + html("<table class='sidebar' summary=''>\n"); + html("<tr><td class='sidebar'>\n<a href='"); html_attr(cgit_rooturl()); - htmlf("'><img src='%s' alt='cgit'/></a></div>\n", + htmlf("'><img src='%s' alt='cgit'/></a>\n", cgit_logo); - html("<div class='infobox'>"); + html("</td></tr>\n<tr><td class='sidebar'>\n"); if (cgit_query_repo) { html("<h1 class='first'>"); html_txt(strrpart(cgit_repo->name, 20)); @@ -489,13 +491,13 @@ void cgit_print_pageheader(char *title, int show_search) html("<h1>branch</h1>\n"); html("<form method='get' action=''>\n"); add_hidden_formfields(0, 1, cgit_query_page); - html("<table summary='branch selector' class='grid'><tr><td id='branch-dropdown-cell'>"); +// html("<table summary='branch selector' class='grid'><tr><td id='branch-dropdown-cell'>"); html("<select name='h' onchange='this.form.submit();'>\n"); for_each_branch_ref(print_branch_option, cgit_query_head); html("</select>\n"); - html("</td><td>"); - html("<noscript><input type='submit' id='switch-btn' value='..'/></noscript>\n"); - html("</td></tr></table>"); +// html("</td><td>"); + html("<noscript><input type='submit' id='switch-btn' value='switch'/></noscript>\n"); +// html("</td></tr></table>"); html("</form>\n"); html("<h1>search</h1>\n"); @@ -519,9 +521,9 @@ void cgit_print_pageheader(char *title, int show_search) html(default_info); } - html("</div>\n"); + html("</td></tr></table></td>\n"); - html("</div>\n<table summary='page content' class='grid'><tr><td id='content'>\n"); + html("<td id='content'>\n"); } |