From 15c020263f5c99b3598a48428ad9a7fd4af0c06b Mon Sep 17 00:00:00 2001 From: Chris Morgan Date: Sat, 8 Jan 2022 17:54:52 +1100 Subject: [PATCH] Some miscellaneous style alterations Grouping some things into blocks visually, tweaking diff spacing and appearance, bumping minimum font size, that kind of stuff. --- gitweb.cgi | 23 ++++++++- static/gitweb.css | 117 +++++++++++++++++++++++++++------------------- 2 files changed, 89 insertions(+), 51 deletions(-) diff --git a/gitweb.cgi b/gitweb.cgi index ea06c90..1aba48a 100755 --- a/gitweb.cgi +++ b/gitweb.cgi @@ -4848,11 +4848,11 @@ sub git_difftree_body { my ($difftree, $hash, @parents) = @_; my ($parent) = $parents[0]; my $have_blame = gitweb_check_feature('blame'); - print "
\n"; if ($#{$difftree} > 10) { + print "
\n"; print(($#{$difftree} + 1) . " files changed:\n"); + print "
\n"; } - print "
\n"; print " 1 ? "combined " : "") . @@ -5877,11 +5877,13 @@ sub git_log_body { $from = 0 unless defined $from; $to = $#{$commitlist} if (!defined $to || $#{$commitlist} < $to); + print "
\n"; for (my $i = 0; $i <= $to; $i++) { my %co = %{$commitlist->[$i]}; next if !%co; my $commit = $co{'id'}; my $ref = format_ref_marker($refs, $commit); + print "
\n"; git_print_header_div('commit', "" . esc_html($co{'title'}) . $ref, @@ -5900,7 +5902,9 @@ sub git_log_body { print "
\n"; git_print_log($co{'comment'}); print "
\n"; + print "
\n"; } + print "
\n"; if ($extra) { print "
\n"; print "$extra\n"; @@ -6625,51 +6629,66 @@ sub git_summary { print "
\n"; + print("
\n"); + # If XSS prevention is on, we don't include README.html. # TODO: Allow a readme in some safe format. if (!$prevent_xss && -s "$projectroot/$project/README.html") { + print("
\n"); print "
readme
\n" . "
\n"; insert_file("$projectroot/$project/README.html"); print "\n
\n"; # class="readme" + print("
\n"); } # we need to request one more than 16 (0..15) to check if # those 16 are all my @commitlist = $head ? parse_commits($head, 17) : (); if (@commitlist) { + print("
\n"); git_print_header_div('shortlog'); git_shortlog_body(\@commitlist, 0, 15, $refs, $#commitlist <= 15 ? undef : $cgi->a({-href => href(action=>"shortlog")}, "...")); + print("
\n"); } if (@taglist) { + print("
\n"); git_print_header_div('tags'); git_tags_body(\@taglist, 0, 15, $#taglist <= 15 ? undef : $cgi->a({-href => href(action=>"tags")}, "...")); + print("
\n"); } if (@headlist) { + print("
\n"); git_print_header_div('heads'); git_heads_body(\@headlist, $head, 0, 15, $#headlist <= 15 ? undef : $cgi->a({-href => href(action=>"heads")}, "...")); + print("
\n"); } if (%remotedata) { + print("
\n"); git_print_header_div('remotes'); git_remotes_body(\%remotedata, 15, $head); + print("
\n"); } if (@forklist) { + print("
\n"); git_print_header_div('forks'); git_project_list_body(\@forklist, 'age', 0, 15, $#forklist <= 15 ? undef : $cgi->a({-href => href(action=>"forks")}, "..."), 'no_header'); + print("
\n"); } + print("
\n"); git_footer_html(); } diff --git a/static/gitweb.css b/static/gitweb.css index 0cd760a..b3bf60b 100644 --- a/static/gitweb.css +++ b/static/gitweb.css @@ -8,8 +8,28 @@ body { margin: 0; background-color: #ffffff; color: #000000; + /*display: flex; + flex-direction: column;*/ +} + +.cards { display: flex; flex-direction: column; + gap: 1rem; + margin: 1rem; +} + +.cards > article { + border: 1px solid #ddd; +} + +.cards > article > .header > .title { + --card-title-pad-left: 0.5rem; + padding: 0.25rem 0.5rem; +} + +.cards > article > table { + padding: 0; } a { @@ -81,17 +101,18 @@ div.page_nav a:visited { } div.page_path { - padding: 8px; + padding: 0.5rem 1rem; font-weight: bold; - border: solid #d9d8d1; + border: solid #ddd; border-width: 0px 0px 1px; } -footer { +.page_footer { margin-top: auto; + margin-top: 2rem; display: flex; - padding: 4px 8px; - background-color: #d9d8d1; + padding: 0.5rem 1rem; + background-color: #ddd; justify-content: flex-end; } @@ -103,22 +124,22 @@ div.page_footer_text { } div#generating_info { - margin: 4px; + margin: 0.5rem 1rem; font-size: smaller; text-align: center; color: #505050; } div.page_body { - padding: 8px; + padding: 0.5rem 1rem; font-family: monospace; } div.title, a.title { display: block; - padding: 6px 8px; + padding: 0.5rem 1rem; font-weight: bold; - background-color: #edece6; + background-color: #ddd; text-decoration: none; color: #000000; } @@ -128,17 +149,22 @@ div.readme { } a.title:hover { - background-color: #d9d8d1; + background-color: #ccc; } div.title_text { - padding: 6px 0px; - border: solid #d9d8d1; + padding: 0; + border: solid #ccc; border-width: 0px 0px 1px; } +:root { + /* FIXME: not good, too tied to the font, restructure */ + --log-sidebar-width: 10rem; +} + div.log_body { - padding: 8px 8px 8px 150px; + padding: 8px 8px 8px var(--log-sidebar-width); } time { @@ -147,7 +173,8 @@ time { time.age { float: left; - width: 142px; + /* From .cards > article > .header > .title padding-left; eww, TODO tidy all this up */ + width: calc(var(--log-sidebar-width) - var(--card-title-pad-left)); } span.signoff { @@ -155,13 +182,13 @@ span.signoff { } div.log_link { - padding: 0px 8px; - font-size: 70%; + padding: 0 0.5rem; + font-size: 80%; font-family: sans-serif; font-style: normal; position: relative; float: left; - width: 136px; + width: calc(var(--log-sidebar-width) - 0.5rem - 0.5rem); } div.list_head { @@ -215,9 +242,12 @@ a.text:hover { } table { - padding: 8px 4px; + padding: 0.5rem 1rem; border-spacing: 0; } +table.tree { + padding: 0; +} table.diff_tree { font-family: monospace,m; @@ -259,21 +289,17 @@ th { text-align: left; } -/* do not change row style on hover for 'blame' view */ -tr.light, -table.blame .light:hover { - background-color: #ffffff; +th:first-child { + padding-left: 0; } -tr.dark, -table.blame .dark:hover { - background-color: #f6f6f0; +/* do not change row style on hover for 'blame' view */ +tr.light { + background-color: #ffffff; } -/* currently both use the same, but it can change */ -tr.light:hover, -tr.dark:hover { - background-color: #edece6; +tr.dark { + background-color: #f6f6f6; } /* boundary commits in 'blame' view */ @@ -289,14 +315,13 @@ tr.color2 { background-color: #f6f6ff; } tr.color3 { background-color: #fff6f6; } td { - padding: 2px 5px; - vertical-align: top; + padding: 0.25rem 0.5rem; } td.link, td.selflink { padding: 2px 5px; font-family: sans-serif; - font-size: 70%; + font-size: 80%; } td.selflink { @@ -409,13 +434,8 @@ div.diff.extended_header { div.diff.header { font-weight: bold; - - background-color: #edece6; - - margin-top: 4px; - padding: 4px 0px 2px 0px; - border: solid #d9d8d1; - border-width: 1px 0px 1px 0px; + background-color: #eee; + box-shadow: inset 0 1px #0003; } div.diff.header a.path { @@ -425,16 +445,17 @@ div.diff.header a.path { div.diff.extended_header, div.diff.extended_header a.path, div.diff.extended_header a.hash { - color: #777777; + color: #333; } div.diff.extended_header .info { - color: #b0b0b0; + opacity: 0.5; } -div.diff.extended_header { - background-color: #f6f5ee; - padding: 2px 0px 2px 0px; +div.diff.extended_header, +div.diff.from_file, +div.diff.to_file { + background-color: #eee; } div.diff a.list, @@ -481,9 +502,6 @@ div.diff.chunk_header { } div.diff.chunk_header { - border: dotted #ffe0ff; - border-width: 1px 0px 0px 0px; - margin-top: 2px; } div.diff.chunk_header span.chunk_info { @@ -492,6 +510,7 @@ div.diff.chunk_header span.chunk_info { div.diff.chunk_header span.section { color: #aa22aa; + font-style: italic; } div.diff.incomplete { @@ -570,7 +589,7 @@ a.rss_logo { background-color: #ff6600; font-weight: bold; font-family: sans-serif; - font-size: 70%; + font-size: 80%; text-align: center; text-decoration: none; } @@ -589,7 +608,7 @@ a.rss_logo.generic:hover { span.refs span { padding: 0px 4px; - font-size: 70%; + font-size: 80%; font-weight: normal; border: 1px solid; background-color: #ffaaff; -- 2.42.0