author | Lars Hjemli <hjemli@gmail.com> | 2007-11-16 08:52:03 (UTC) |
---|---|---|
committer | Lars Hjemli <hjemli@gmail.com> | 2007-11-16 08:52:03 (UTC) |
commit | 6ef637e0908ca5a14675b3513f48cd390d3757fe (patch) (unidiff) | |
tree | e9e74f73e3d52d5b1fb931ac92a99476d09130af | |
parent | fd90d2826a979f3844312718ad130880cf19d52c (diff) | |
download | cgit-6ef637e0908ca5a14675b3513f48cd390d3757fe.zip cgit-6ef637e0908ca5a14675b3513f48cd390d3757fe.tar.gz cgit-6ef637e0908ca5a14675b3513f48cd390d3757fe.tar.bz2 |
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
@@ -3,17 +3,17 @@ body, table { | |||
3 | margin: 0em; | 3 | margin: 0em; |
4 | } | 4 | } |
5 | 5 | ||
6 | body { | 6 | body { |
7 | font-family: sans; | 7 | font-family: sans; |
8 | font-size: 10pt; | 8 | font-size: 10pt; |
9 | color: #333; | 9 | color: #333; |
10 | background: white; | 10 | background: white; |
11 | padding-left: 4px; | 11 | padding: 4px; |
12 | } | 12 | } |
13 | 13 | ||
14 | table { | 14 | table { |
15 | border-collapse: collapse; | 15 | border-collapse: collapse; |
16 | } | 16 | } |
17 | 17 | ||
18 | h2 { | 18 | h2 { |
19 | font-size: 120%; | 19 | font-size: 120%; |
@@ -73,83 +73,92 @@ table.list td { | |||
73 | border: none; | 73 | border: none; |
74 | padding: 0.1em 0.5em 0.1em 0.5em; | 74 | padding: 0.1em 0.5em 0.1em 0.5em; |
75 | } | 75 | } |
76 | 76 | ||
77 | img { | 77 | img { |
78 | border: none; | 78 | border: none; |
79 | } | 79 | } |
80 | 80 | ||
81 | div#sidebar { | 81 | table#layout { |
82 | border-collapse: collapse; | ||
83 | border: none; | ||
84 | margin: 0px; | ||
85 | } | ||
86 | |||
87 | td#sidebar { | ||
82 | vertical-align: top; | 88 | vertical-align: top; |
83 | width: 162px; | 89 | width: 162px; |
84 | padding: 0px 0px 0px 0px; | 90 | padding: 0px 0px 0px 0px; |
85 | margin: 4px; | 91 | margin: 0px; |
86 | float: left; | ||
87 | } | 92 | } |
88 | 93 | ||
89 | div#logo { | 94 | td#sidebar table { |
95 | border-collapse: separate; | ||
96 | border-spacing: 0px; | ||
90 | margin: 0px; | 97 | margin: 0px; |
91 | padding: 4px 0px 4px 0px; | 98 | padding: 0px; |
92 | text-align: center; | ||
93 | background-color: #ccc; | 99 | background-color: #ccc; |
100 | } | ||
101 | |||
102 | td#sidebar table.sidebar td.sidebar { | ||
103 | padding: 4px; | ||
94 | border-top: solid 1px #eee; | 104 | border-top: solid 1px #eee; |
95 | border-left: solid 1px #eee; | 105 | border-left: solid 1px #eee; |
96 | border-right: solid 1px #aaa; | 106 | border-right: solid 1px #aaa; |
97 | border-bottom: solid 1px #aaa; | 107 | border-bottom: solid 1px #aaa; |
98 | } | 108 | } |
99 | 109 | ||
100 | div#sidebar div.infobox { | 110 | div#logo { |
101 | margin: 0px 0px 0px 0px; | 111 | margin: 0px; |
102 | padding: 0.5em; | 112 | padding: 4px 0px 4px 0px; |
103 | text-align: left; | 113 | text-align: center; |
104 | background-color: #ccc; | 114 | background-color: #ccc; |
105 | border-top: solid 1px #eee; | 115 | border-top: solid 1px #eee; |
106 | border-left: solid 1px #eee; | 116 | border-left: solid 1px #eee; |
107 | border-right: solid 1px #aaa; | 117 | border-right: solid 1px #aaa; |
108 | border-bottom: solid 1px #aaa; | 118 | border-bottom: solid 1px #aaa; |
109 | } | 119 | } |
110 | 120 | ||
111 | div#sidebar div.infobox h1 { | 121 | td#sidebar h1 { |
112 | font-size: 10pt; | 122 | font-size: 10pt; |
113 | font-weight: bold; | 123 | font-weight: bold; |
114 | margin: 8px 0px 0px 0px; | 124 | margin: 8px 0px 0px 0px; |
115 | } | 125 | } |
116 | 126 | ||
117 | div#sidebar div.infobox h1.first { | 127 | td#sidebar h1.first { |
118 | margin-top: 0px; | 128 | margin-top: 0px; |
119 | } | 129 | } |
120 | 130 | ||
121 | div#sidebar div.infobox a.menu { | 131 | td#sidebar a.menu { |
122 | display: block; | 132 | display: block; |
123 | background-color: #ccc; | 133 | background-color: #ccc; |
124 | padding: 0.1em 0.5em; | 134 | padding: 0.1em 0.5em; |
125 | text-decoration: none; | 135 | text-decoration: none; |
126 | } | 136 | } |
127 | 137 | ||
128 | div#sidebar div.infobox a.menu:hover { | 138 | td#sidebar a.menu:hover { |
129 | background-color: #bbb; | 139 | background-color: #bbb; |
130 | text-decoration: none; | 140 | text-decoration: none; |
131 | } | 141 | } |
132 | 142 | ||
133 | div#sidebar div.infobox select { | 143 | td#sidebar select { |
134 | width: 100%; | 144 | width: 100%; |
135 | margin: 2px 0px 0px 0px; | 145 | margin: 2px 0px 0px 0px; |
136 | } | 146 | } |
137 | 147 | ||
138 | td#branch-dropdown-cell { | 148 | td#sidebar form { |
139 | width: 99%; | 149 | text-align: right; |
140 | } | 150 | } |
141 | 151 | ||
142 | input#switch-btn { | 152 | input#switch-btn { |
143 | width: 20px; | ||
144 | margin: 2px 0px 0px 0px; | 153 | margin: 2px 0px 0px 0px; |
145 | } | 154 | } |
146 | 155 | ||
147 | div#sidebar div.infobox input.txt { | 156 | td#sidebar input.txt { |
148 | width: 100%; | 157 | width: 100%; |
149 | margin: 2px 0px 0px 0px; | 158 | margin: 2px 0px 0px 0px; |
150 | } | 159 | } |
151 | 160 | ||
152 | table#grid { | 161 | table#grid { |
153 | margin: 0px; | 162 | margin: 0px; |
154 | } | 163 | } |
155 | 164 | ||
diff --git a/ui-shared.c b/ui-shared.c index 2f771da..4c0613a 100644 --- a/ui-shared.c +++ b/ui-shared.c | |||
@@ -452,22 +452,24 @@ void add_hidden_formfields(int incl_head, int incl_search, char *page) | |||
452 | } | 452 | } |
453 | } | 453 | } |
454 | 454 | ||
455 | void cgit_print_pageheader(char *title, int show_search) | 455 | void cgit_print_pageheader(char *title, int show_search) |
456 | { | 456 | { |
457 | static const char *default_info = "This is cgit, a fast webinterface for git repositories"; | 457 | static const char *default_info = "This is cgit, a fast webinterface for git repositories"; |
458 | int header = 0; | 458 | int header = 0; |
459 | 459 | ||
460 | html("<div id='sidebar'>\n"); | 460 | html("<table id='layout' summary=''>\n"); |
461 | html("<div id='logo'><a href='"); | 461 | html("<tr><td id='sidebar'>\n"); |
462 | html("<table class='sidebar' summary=''>\n"); | ||
463 | html("<tr><td class='sidebar'>\n<a href='"); | ||
462 | html_attr(cgit_rooturl()); | 464 | html_attr(cgit_rooturl()); |
463 | htmlf("'><img src='%s' alt='cgit'/></a></div>\n", | 465 | htmlf("'><img src='%s' alt='cgit'/></a>\n", |
464 | cgit_logo); | 466 | cgit_logo); |
465 | html("<div class='infobox'>"); | 467 | html("</td></tr>\n<tr><td class='sidebar'>\n"); |
466 | if (cgit_query_repo) { | 468 | if (cgit_query_repo) { |
467 | html("<h1 class='first'>"); | 469 | html("<h1 class='first'>"); |
468 | html_txt(strrpart(cgit_repo->name, 20)); | 470 | html_txt(strrpart(cgit_repo->name, 20)); |
469 | html("</h1>\n"); | 471 | html("</h1>\n"); |
470 | html_txt(cgit_repo->desc); | 472 | html_txt(cgit_repo->desc); |
471 | if (cgit_repo->owner) { | 473 | if (cgit_repo->owner) { |
472 | html("<h1>owner</h1>\n"); | 474 | html("<h1>owner</h1>\n"); |
473 | html_txt(cgit_repo->owner); | 475 | html_txt(cgit_repo->owner); |
@@ -484,23 +486,23 @@ void cgit_print_pageheader(char *title, int show_search) | |||
484 | cgit_diff_link("diff", NULL, "menu", cgit_query_head, | 486 | cgit_diff_link("diff", NULL, "menu", cgit_query_head, |
485 | cgit_query_sha1, cgit_query_sha2, NULL); | 487 | cgit_query_sha1, cgit_query_sha2, NULL); |
486 | 488 | ||
487 | for_each_ref(print_archive_ref, &header); | 489 | for_each_ref(print_archive_ref, &header); |
488 | 490 | ||
489 | html("<h1>branch</h1>\n"); | 491 | html("<h1>branch</h1>\n"); |
490 | html("<form method='get' action=''>\n"); | 492 | html("<form method='get' action=''>\n"); |
491 | add_hidden_formfields(0, 1, cgit_query_page); | 493 | add_hidden_formfields(0, 1, cgit_query_page); |
492 | html("<table summary='branch selector' class='grid'><tr><td id='branch-dropdown-cell'>"); | 494 | // html("<table summary='branch selector' class='grid'><tr><td id='branch-dropdown-cell'>"); |
493 | html("<select name='h' onchange='this.form.submit();'>\n"); | 495 | html("<select name='h' onchange='this.form.submit();'>\n"); |
494 | for_each_branch_ref(print_branch_option, cgit_query_head); | 496 | for_each_branch_ref(print_branch_option, cgit_query_head); |
495 | html("</select>\n"); | 497 | html("</select>\n"); |
496 | html("</td><td>"); | 498 | // html("</td><td>"); |
497 | html("<noscript><input type='submit' id='switch-btn' value='..'/></noscript>\n"); | 499 | html("<noscript><input type='submit' id='switch-btn' value='switch'/></noscript>\n"); |
498 | html("</td></tr></table>"); | 500 | // html("</td></tr></table>"); |
499 | html("</form>\n"); | 501 | html("</form>\n"); |
500 | 502 | ||
501 | html("<h1>search</h1>\n"); | 503 | html("<h1>search</h1>\n"); |
502 | html("<form method='get' action='"); | 504 | html("<form method='get' action='"); |
503 | if (cgit_virtual_root) | 505 | if (cgit_virtual_root) |
504 | html_attr(cgit_fileurl(cgit_query_repo, "log", | 506 | html_attr(cgit_fileurl(cgit_query_repo, "log", |
505 | cgit_query_path, NULL)); | 507 | cgit_query_path, NULL)); |
506 | html("'>\n"); | 508 | html("'>\n"); |
@@ -514,19 +516,19 @@ void cgit_print_pageheader(char *title, int show_search) | |||
514 | html_attr(cgit_query_search); | 516 | html_attr(cgit_query_search); |
515 | html("'/>\n"); | 517 | html("'/>\n"); |
516 | html("</form>\n"); | 518 | html("</form>\n"); |
517 | } else { | 519 | } else { |
518 | if (!cgit_index_info || html_include(cgit_index_info)) | 520 | if (!cgit_index_info || html_include(cgit_index_info)) |
519 | html(default_info); | 521 | html(default_info); |
520 | } | 522 | } |
521 | 523 | ||
522 | html("</div>\n"); | 524 | html("</td></tr></table></td>\n"); |
523 | 525 | ||
524 | html("</div>\n<table summary='page content' class='grid'><tr><td id='content'>\n"); | 526 | html("<td id='content'>\n"); |
525 | } | 527 | } |
526 | 528 | ||
527 | 529 | ||
528 | void cgit_print_snapshot_start(const char *mimetype, const char *filename, | 530 | void cgit_print_snapshot_start(const char *mimetype, const char *filename, |
529 | struct cacheitem *item) | 531 | struct cacheitem *item) |
530 | { | 532 | { |
531 | htmlf("Content-Type: %s\n", mimetype); | 533 | htmlf("Content-Type: %s\n", mimetype); |
532 | htmlf("Content-Disposition: inline; filename=\"%s\"\n", filename); | 534 | htmlf("Content-Disposition: inline; filename=\"%s\"\n", filename); |