Comparatively light markup/style changes
authorChris Morgan <me@chrismorgan.info>
committerChris Morgan <me@chrismorgan.info>
• Better markup
• Went from [search, page_nav] to [header[page_nav, search]]
• Less float, more flex
• Normal font size rather than small, removed border around everything.

More invasive stuff coming shortly.
gitweb.cgi
static/gitweb.css

index b74ebd505746d69eba6a811fc906f5a567b292da..f57ed5a65700e539c8a0054866873f39ddec79e7 100755 (executable)
@@ -4026,40 +4026,36 @@ sub run_highlighter {
 ## functions printing HTML: header, footer, error page
 
 sub get_page_title {
-       my $title = to_utf8($site_name);
-
+       # Formats:
+       # SITE_NAME
+       # SITE_NAME - projects in FILTER
+       # PROJECT - SITE_NAME
+       # PROJECT ACTION - SITE_NAME
+       # FILENAME - PROJECT ACTION - SITE_NAME
+       my $title;
        unless (defined $project) {
+               $title = to_utf8($site_name);
                if (defined $project_filter) {
                        $title .= " - projects in '" . esc_path($project_filter) . "'";
                }
                return $title;
        }
-       $title .= " - " . to_utf8($project);
-
-       return $title unless (defined $action);
-       $title .= "/$action"; # $action is US-ASCII (7bit ASCII)
+       $title = to_utf8($project);
 
-       return $title unless (defined $file_name);
-       $title .= " - " . esc_path($file_name);
-       if ($action eq "tree" && $file_name !~ m|/$|) {
-               $title .= "/";
+       if (defined $action) {
+               $title .= " $action"; # $action is US-ASCII (7bit ASCII)
+               if (defined $file_name) {
+                       $title = " - " . $title;
+                       if ($action eq "tree" && $file_name !~ m|/$|) {
+                               $title = "/" . $title;
+                       }
+                       $title = esc_path($file_name) . $title;
+               }
        }
 
-       return $title;
-}
+       $title .= " - " . to_utf8($site_name);
 
-sub get_content_type_html {
-       # require explicit support from the UA if we are to send the page as
-       # 'application/xhtml+xml', otherwise send it as plain old 'text/html'.
-       # we have to do this because MSIE sometimes globs '*/*', pretending to
-       # support xhtml+xml but choking when it gets what it asked for.
-       if (defined $cgi->http('HTTP_ACCEPT') &&
-           $cgi->http('HTTP_ACCEPT') =~ m/(,|;|\s|^)application\/xhtml\+xml(,|;|\s|$)/ &&
-           $cgi->Accept('application/xhtml+xml') != 0) {
-               return 'application/xhtml+xml';
-       } else {
-               return 'text/html';
-       }
+       return $title;
 }
 
 sub print_feed_meta {
@@ -4116,17 +4112,17 @@ sub print_header_links {
        # print out each stylesheet that exist, providing backwards capability
        # for those people who defined $stylesheet in a config file
        if (defined $stylesheet) {
-               print '<link rel="stylesheet" type="text/css" href="'.esc_url($stylesheet).'"/>'."\n";
+               print '<link rel="stylesheet" href="'.esc_url($stylesheet).'"/>'."\n";
        } else {
                foreach my $stylesheet (@stylesheets) {
                        next unless $stylesheet;
-                       print '<link rel="stylesheet" type="text/css" href="'.esc_url($stylesheet).'"/>'."\n";
+                       print '<link rel="stylesheet" href="'.esc_url($stylesheet).'"/>'."\n";
                }
        }
        print_feed_meta()
                if ($status eq '200 OK');
        if (defined $favicon) {
-               print qq(<link rel="shortcut icon" href=").esc_url($favicon).qq(" type="image/png" />\n);
+               print qq(<link rel="icon" href=").esc_url($favicon).qq("/>\n);
        }
 }
 
@@ -4187,8 +4183,7 @@ sub print_search_form {
        if ($use_pathinfo) {
                $action .= "/".esc_url($project);
        }
-       print $cgi->start_form(-method => "get", -action => $action) .
-             "<div class=\"search\">\n" .
+       print $cgi->start_form(-method => "get", -action => $action, -role => "search") .
              (!$use_pathinfo &&
              $cgi->input({-name=>"p", -value=>$project, -type=>"hidden"}) . "\n") .
              $cgi->input({-name=>"a", -value=>"search", -type=>"hidden"}) . "\n" .
@@ -4202,7 +4197,6 @@ sub print_search_form {
              $cgi->checkbox(-name => 'sr', -value => 1, -label => 're',
                             -checked => $search_use_regexp) .
              "</span>" .
-             "</div>" .
              $cgi->end_form() . "\n";
 }
 
@@ -4212,27 +4206,25 @@ sub git_header_html {
        my %opts = @_;
 
        my $title = get_page_title();
-       my $content_type = get_content_type_html();
-       print $cgi->header(-type=>$content_type, -charset => 'utf-8',
+       # I wanted to switch to text/html, but it uses nested <a> in a couple of places (e.g. log refs are links inside the commit summary link), which is invalid but works in the XML syntax. Pity.
+       # (Various other invalid HTML is produced that HTML would have fixed but XHTML allows to be broken, like table > tr, lacking tbody.)
+       # TODO: reduce the doctype to <!DOCTYPE html>, but that takes replacing entities like &sdot; with ⋅.
+       print $cgi->header(-type => 'application/xhtml+xml', -charset => 'utf-8',
                           -status=> $status, -expires => $expires)
                unless ($opts{'-no_http_header'});
-       my $mod_perl_version = $ENV{'MOD_PERL'} ? " $ENV{'MOD_PERL'}" : '';
        print <<EOF;
 <?xml version="1.0" encoding="utf-8"?>
 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
-<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en-US" lang="en-US">
-<!-- git web interface version $version, (C) 2005-2006, Kay Sievers <kay.sievers\@vrfy.org>, Christian Gierke -->
-<!-- git core binaries version $git_version -->
+<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en-AU" lang="en-AU">
 <head>
-<meta http-equiv="content-type" content="$content_type; charset=utf-8"/>
-<meta name="generator" content="gitweb/$version git/$git_version$mod_perl_version"/>
+<meta charset="utf-8"/>
 <meta name="robots" content="index, nofollow"/>
 <title>$title</title>
 EOF
        # the stylesheet, favicon etc urls won't work correctly with path_info
        # unless we set the appropriate base URL
        if ($ENV{'PATH_INFO'}) {
-               print "<base href=\"".esc_url($base_url)."\" />\n";
+               print "<base href=\"".esc_url($base_url)."\"/>\n";
        }
        print_header_links($status);
 
@@ -4240,14 +4232,11 @@ EOF
                print to_utf8($site_html_head_string);
        }
 
-       print "</head>\n" .
-             "<body>\n";
-
        if (defined $site_header && -f $site_header) {
                insert_file($site_header);
        }
 
-       print "<div class=\"page_header\">\n";
+       print "</head>\n<body>\n<header class=\"page_header\">\n";
        if (defined $logo) {
                print $cgi->a({-href => esc_url($logo_url),
                               -title => $logo_label},
@@ -4257,18 +4246,23 @@ EOF
                                         -class => "logo"}));
        }
        print_nav_breadcrumbs(%opts);
-       print "</div>\n";
+       print "</header>\n";
+
+       print "<nav class=\"page_subhead\">\n";
+}
 
+sub git_end_subhead_html {
        my $have_search = gitweb_check_feature('search');
        if (defined $project && $have_search) {
                print_search_form();
        }
+       print "</nav>\n";
 }
 
 sub git_footer_html {
        my $feed_class = 'rss_logo';
 
-       print "<div class=\"page_footer\">\n";
+       print "<footer class=\"page_footer\">\n";
        if (defined $project) {
                my $descr = git_get_project_description($project);
                if (defined $descr) {
@@ -4296,7 +4290,7 @@ sub git_footer_html {
                                             project_filter => $project_filter),
                              -class => $feed_class}, "TXT") . "\n";
        }
-       print "</div>\n"; # class="page_footer"
+       print "</footer>\n"; # class="page_footer"
 
        if (defined $t0 && gitweb_check_feature('timed')) {
                print "<div id=\"generating_info\">\n";
@@ -4309,7 +4303,7 @@ sub git_footer_html {
                      $number_of_git_cmds.
                      '</span> git commands '.
                      " to generate.\n";
-               print "</div>\n"; # class="page_footer"
+               print "</div>\n";
        }
 
        if (defined $site_footer && -f $site_footer) {
@@ -4371,6 +4365,7 @@ sub die_error {
                503 => '503 Service Unavailable',
        );
        git_header_html($http_responses{$status}, undef, %opts);
+       git_end_subhead_html();
        print <<EOF;
 <div class="page_body">
 <br /><br />
@@ -4393,7 +4388,6 @@ EOF
 
 sub git_print_page_nav {
        my ($current, $suppress, $head, $treehead, $treebase, $extra) = @_;
-       $extra = '' if !defined $extra; # pager or formats
 
        my @navs = qw(summary shortlog log commit commitdiff tree);
        if ($suppress) {
@@ -4437,8 +4431,9 @@ sub git_print_page_nav {
                 map { $_ eq $current ?
                       $_ : $cgi->a({-href => ($arg{$_}{_href} ? $arg{$_}{_href} : href(%{$arg{$_}}))}, "$_")
                 } @navs);
-       print "<br/>\n$extra<br/>\n" .
-             "</div>\n";
+       print "<br/>\n$extra" if defined $extra; # pager or formats
+       print "</div>\n";
+       git_end_subhead_html();
 }
 
 # returns a submenu for the navigation of the refs views (tags, heads,
@@ -6539,6 +6534,7 @@ sub git_project_list {
        }
 
        git_header_html();
+       git_end_subhead_html();
        if (defined $home_text && -f $home_text) {
                print "<div class=\"index_include\">\n";
                insert_file($home_text);
@@ -7177,9 +7173,8 @@ sub git_blob {
                git_print_page_nav('','', $hash_base,$co{'tree'},$hash_base, $formats_nav);
                git_print_header_div('commit', esc_html($co{'title'}), $hash_base);
        } else {
-               print "<div class=\"page_nav\">\n" .
-                     "<br/><br/></div>\n" .
-                     "<div class=\"title\">".esc_html($hash)."</div>\n";
+               git_end_subhead_html();
+               print "<div class=\"title\">".esc_html($hash)."</div>\n";
        }
        git_print_page_path($file_name, "blob", $hash_base);
        print "<div class=\"page_body\">\n";
@@ -7260,8 +7255,7 @@ sub git_tree {
                git_print_header_div('commit', esc_html($co{'title'}) . $ref, $hash_base);
        } else {
                undef $hash_base;
-               print "<div class=\"page_nav\">\n";
-               print "<br/><br/></div>\n";
+               git_end_subhead_html();
                print "<div class=\"title\">".esc_html($hash)."</div>\n";
        }
        if (defined $file_name) {
@@ -7785,7 +7779,8 @@ sub git_blobdiff {
                        git_print_page_nav('','', $hash_base,$co{'tree'},$hash_base, $formats_nav);
                        git_print_header_div('commit', esc_html($co{'title'}), $hash_base);
                } else {
-                       print "<div class=\"page_nav\"><br/>$formats_nav<br/></div>\n";
+                       print "<div class=\"page_nav\"><br/>$formats_nav</div>\n";
+                       git_end_subhead_html();
                        print "<div class=\"title\">".esc_html("$hash vs $hash_parent")."</div>\n";
                }
                if (defined $file_name) {
index ba8e9917d1b2d6ca5d99fbba79ca1ea28734b2c1..78bed54b1d93f4ecff3418e9a4605ba0a56559bf 100644 (file)
@@ -1,11 +1,15 @@
+html,
+body {
+       height: 100%;
+}
+
 body {
        font-family: sans-serif;
-       font-size: small;
-       border: solid #d9d8d1;
-       border-width: 1px;
-       margin: 10px;
+       margin: 0;
        background-color: #ffffff;
        color: #000000;
+       display: flex;
+       flex-direction: column;
 }
 
 a {
@@ -41,24 +45,31 @@ a.list img.avatar {
        border-style: none;
 }
 
-div.page_header {
-       height: 25px;
-       padding: 8px;
+.page_header {
+       padding: 1rem;
        font-size: 150%;
        font-weight: bold;
-       background-color: #d9d8d1;
+       border-top: 0.25rem solid #f71;
+       background-color: #f716;
 }
 
-div.page_header a:visited, a.header {
+.page_header a:visited, a.header {
        color: #0000cc;
 }
 
-div.page_header a:hover {
+.page_header a:hover {
        color: #880000;
 }
 
+/* .page_header + nav.page_subhead now wraps .page_nav and the search form, which is reduced from <form><div class=search> to <form role=search>; and both it and .page_nav are optional; and page_nav comes first rather than last. */
+.page_subhead {
+       display: flex;
+       background: #eee;
+       margin-bottom: 1em;
+}
+
 div.page_nav {
-       padding: 8px;
+       padding: 0.5rem 1em;
 }
 
 div.page_nav a:visited {
@@ -72,14 +83,16 @@ div.page_path {
        border-width: 0px 0px 1px;
 }
 
-div.page_footer {
-       height: 22px;
+footer {
+       margin-top: auto;
+       display: flex;
        padding: 4px 8px;
        background-color: #d9d8d1;
+       justify-content: flex-end;
 }
 
 div.page_footer_text {
-       line-height: 22px;
+       margin-right: auto;
        float: left;
        color: #555555;
        font-style: italic;
@@ -525,13 +538,8 @@ div.index_include {
        padding: 12px 8px;
 }
 
-div.search {
-       font-size: 100%;
-       font-weight: normal;
-       margin: 4px 8px;
-       float: right;
-       top: 56px;
-       right: 12px
+.page_subhead [role=search] {
+       margin: 0.5rem 1rem 0.5rem auto;
 }
 
 div.projsearch {
@@ -554,9 +562,7 @@ a.linenr {
 }
 
 a.rss_logo {
-       float: right;
        padding: 3px 5px;
-       line-height: 10px;
        border: 1px solid;
        border-color: #fcc7a5 #7d3302 #3e1a01 #ff954e;
        color: #ffffff;