Some miscellaneous style alterations
authorChris Morgan <me@chrismorgan.info>
committerChris Morgan <me@chrismorgan.info>
Grouping some things into blocks visually, tweaking diff spacing and
appearance, bumping minimum font size, that kind of stuff.
gitweb.cgi
static/gitweb.css

index ea06c90313fa9d32153d38af235cfddd095b7bc4..1aba48a08b115007d5bcafb3c66c248253580e5e 100755 (executable)
@@ -4848,11 +4848,11 @@ sub git_difftree_body {
        my ($difftree, $hash, @parents) = @_;
        my ($parent) = $parents[0];
        my $have_blame = gitweb_check_feature('blame');
-       print "<div class=\"list_head\">\n";
        if ($#{$difftree} > 10) {
+               print "<div class=\"list_head\">\n";
                print(($#{$difftree} + 1) . " files changed:\n");
+               print "</div>\n";
        }
-       print "</div>\n";
 
        print "<table class=\"" .
              (@parents > 1 ? "combined " : "") .
@@ -5877,11 +5877,13 @@ sub git_log_body {
        $from = 0 unless defined $from;
        $to = $#{$commitlist} if (!defined $to || $#{$commitlist} < $to);
 
+       print "<section class=\"cards\">\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 "<article>\n";
                git_print_header_div('commit',
                               "<time datetime=\"$co{'age_string_iso8601'}\" title=\"$co{'age_string_iso8601'}\" class=\"age\">$co{'age_string'}</time>" .
                               esc_html($co{'title'}) . $ref,
@@ -5900,7 +5902,9 @@ sub git_log_body {
                print "<div class=\"log_body\">\n";
                git_print_log($co{'comment'});
                print "</div>\n";
+               print "</article>\n";
        }
+       print "</section>\n";
        if ($extra) {
                print "<div class=\"page_nav\">\n";
                print "$extra\n";
@@ -6625,51 +6629,66 @@ sub git_summary {
 
        print "</table>\n";
 
+       print("<section class=\"cards\">\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("<article>\n");
                print "<div class=\"title\">readme</div>\n" .
                      "<div class=\"readme\">\n";
                insert_file("$projectroot/$project/README.html");
                print "\n</div>\n"; # class="readme"
+               print("</article>\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("<article>\n");
                git_print_header_div('shortlog');
                git_shortlog_body(\@commitlist, 0, 15, $refs,
                                  $#commitlist <=  15 ? undef :
                                  $cgi->a({-href => href(action=>"shortlog")}, "..."));
+               print("</article>\n");
        }
 
        if (@taglist) {
+               print("<article>\n");
                git_print_header_div('tags');
                git_tags_body(\@taglist, 0, 15,
                              $#taglist <=  15 ? undef :
                              $cgi->a({-href => href(action=>"tags")}, "..."));
+               print("</article>\n");
        }
 
        if (@headlist) {
+               print("<article>\n");
                git_print_header_div('heads');
                git_heads_body(\@headlist, $head, 0, 15,
                               $#headlist <= 15 ? undef :
                               $cgi->a({-href => href(action=>"heads")}, "..."));
+               print("</article>\n");
        }
 
        if (%remotedata) {
+               print("<article>\n");
                git_print_header_div('remotes');
                git_remotes_body(\%remotedata, 15, $head);
+               print("</article>\n");
        }
 
        if (@forklist) {
+               print("<article>\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("</article>\n");
        }
+       print("</section>\n");
 
        git_footer_html();
 }
index 0cd760a2df44088405ea9c952dbf99090952494f..b3bf60b5dddf7c730cdd5d882987de5340d2b71b 100644 (file)
@@ -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;