From: Chris Morgan <me@chrismorgan.info>
Date: Sat, 8 Jan 2022 04:41:56 +0000 (+1100)
Subject: Comparatively light markup/style changes
X-Git-Url: https://git.chrismorgan.info/gitweb/commitdiff_plain/716b1f745fdbbbec87d4300191bc2721291b1baf

Comparatively light markup/style changes

• 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.
---

diff --git a/gitweb.cgi b/gitweb.cgi
index b74ebd5..f57ed5a 100755
--- a/gitweb.cgi
+++ b/gitweb.cgi
@@ -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) {
diff --git a/static/gitweb.css b/static/gitweb.css
index ba8e991..78bed54 100644
--- a/static/gitweb.css
+++ b/static/gitweb.css
@@ -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;