com web/news: HTML improvements: article.php group.php index.php style.css

Commit: f39ceca0927bd0c4921e93b9c1d30aafcb66f7ec Author: Sobak <msobaczewski@gmail.com> Mon, 29 Dec 2014 16:08:17 +0100 Parents: 5e9dff7a2e603bd94402d535b60658a5fcdb1ac7 Branches: master Link: http://git.php.net/?p=web/news.git;a=commitdiff;h=f39ceca0927bd0c4921e93b9c1d30aafcb66f7ec Log: HTML improvements - odd/even rows styled with CSS - cleaner CSS selectors for styling headers Changed paths: M article.php M group.php M index.php M style.css Diff: diff --git a/article.php b/article.php index 6378895..6e02136 100644 --- a/article.php +++ b/article.php @@ -271,8 +271,8 @@ function navbar($group, $current) { $group = htmlspecialchars($group, ENT_QUOTES, "UTF-8"); echo ' <table border="0" cellpadding="2" cellspacing="2" width="100%">' . "\n"; - echo ' <tr class="alisthead">' . "\n"; - echo ' <td class="nav">'; + echo ' <tr>' . "\n"; + echo ' <th class="nav">'; if ($current > 1) { echo ' <a href="/' , $group , '/' , ($current-1) , '"><b>&laquo; previous</b></a>'; @@ -280,11 +280,11 @@ function navbar($group, $current) { echo '&nbsp;'; } - echo ' </td>' . "\n"; - echo ' <td align="center" class="alisthead">' . "$group (#$current)</td>\n"; - echo ' <td align="right" class="nav">'; + echo ' </th>' . "\n"; + echo ' <th align="center">' . "$group (#$current)</th>\n"; + echo ' <th align="right" class="nav">'; echo ' <a href="/' , $group , '/' , ($current+1) , '"><b>next &raquo;</b></a>'; - echo ' </td>' . "\n"; + echo ' </th>' . "\n"; echo ' </tr>' . "\n"; echo ' </table>' . "\n"; } diff --git a/group.php b/group.php index de5feec..36d61f7 100644 --- a/group.php +++ b/group.php @@ -72,19 +72,18 @@ case 'html': default: head($group); navbar($group,$f,$l,$i); -echo ' <table class="alist" width="100%">' . "\n"; +echo ' <table class="stripped" width="100%">' . "\n"; echo ' <tr>' . "\n"; -echo ' <td class="alisthead">#</td>' . "\n"; -echo ' <td class="alisthead">subject</td>' .. "\n"; -echo ' <td class="alisthead">author</td>' . "\n"; -echo ' <td class="alisthead">date</td>' . "\n"; -echo ' <td class="alisthead">lines</td>' . "\n"; +echo ' <th>#</td>' . "\n"; +echo ' <th>subject</th>' . "\n"; +echo ' <th>author</th>' . "\n"; +echo ' <th>date</th>' . "\n"; +echo ' <th>lines</th>' . "\n"; echo ' </tr>' . "\n"; break; } # list of articles -$class = "even"; # TODO: somehow determine the correct charset $charset = ""; @@ -116,16 +115,15 @@ while ($line = fgets($s, 16384)) { case 'html': default: echo " <tr>\n"; - echo " <td class=\"$class\"><a href=\"/$group/$n\">$n</a></td>\n"; - echo " <td class=\"$class\"><a href=\"/$group/$n\">"; + echo " <td><a href=\"/$group/$n\">$n</a></td>\n"; + echo " <td><a href=\"/$group/$n\">"; echo format_subject($subj, $charset); echo "</a></td>\n"; - echo " <td class=\"$class vcard\">".format_author($author, $charset)."</td>\n"; - echo " <td align=\"center\" class=\"$class\"><tt>" . format_date($odate) . "</tt></td>\n"; - echo " <td align=\"right\" class=\"$class\">$lines</td>\n"; + echo " <td vcard\">".format_author($author, $charset)."</td>\n"; + echo " <td align=\"center\"><tt>" . format_date($odate) . "</tt></td>\n"; + echo " <td align=\"right\">$lines</td>\n"; echo " </tr>\n"; } - $class = ($class == "even") ? "odd" : "even"; } switch ($format) { @@ -144,19 +142,19 @@ switch ($format) { function navbar($g, $f, $l, $i) { echo ' <table border="0" cellpadding="2" cellspacing="2" width="100%">' . "\n"; - echo ' <tr class="alisthead">' . "\n"; - echo ' <td class="nav">'; + echo ' <tr>' . "\n"; + echo ' <th class="nav">'; if ($i > $f) { $p = max($i-20,$f); echo "<a href=\"/" . htmlspecialchars($g, ENT_QUOTES, "UTF-8") . "/start/$p\"><b>&laquo; previous</b></a>"; } else { echo "&nbsp;"; } - echo '</td>' . "\n"; + echo '</th>' . "\n"; $j = min($i + 20, $l); $c = $l - $f + 1; - echo ' <td align="center" class="alisthead">'.htmlspecialchars($g, ENT_QUOTES, "UTF-8")." ($i-$j of $c)</td>\n"; - echo ' <td align="right" class="nav">'; + echo ' <th align="center">'.htmlspecialchars($g, ENT_QUOTES, "UTF-8")." ($i-$j of $c)</th>\n"; + echo ' <th align="right" class="nav">'; if ($i+20 <= $l) { $n = min($i + 20, $l - 19); echo "<a href=\"/" . htmlspecialchars($g, ENT_QUOTES, "UTF-8") . "/start/$n\"><b>next &raquo;</b></a>"; @@ -164,7 +162,7 @@ function navbar($g, $f, $l, $i) { else { echo "&nbsp;"; } - echo '</td>' . "\n"; + echo '</th>' . "\n"; echo ' </tr>' . "\n"; echo ' </table>' . "\n"; } diff --git a/index.php b/index.php index 0795eb5..624a4b7 100644 --- a/index.php +++ b/index.php @@ -17,15 +17,14 @@ head(); <table border="0" cellpadding="6" cellspacing="0"> <tr> <td> - <table class="grouplist"> - <tr class="alisthead"> - <td>name</td> - <td>messages</td> - <td>rss</td> - <td>rdf</td> + <table class="stripped"> + <tr> + <th>name</th> + <th>messages</th> + <th>rss</th> + <th>rdf</th> </tr> <?php -$class = "even"; while ($line = fgets($s, 1024)) { if ($line == ".\r\n") { break; @@ -33,20 +32,19 @@ while ($line = fgets($s, 1024)) { $line = chop($line); list($group, $high, $low, $active) = explode(" ", $line); echo " <tr>\n"; - echo " <td class=\"$class\"><a class=\"active$active\" href=\"/$group\">$group</a></td>\n"; - echo " <td align=\"right\" class=\"$class\">", $high-$low+1, "</td>\n"; - echo " <td class=\"$class\">"; + echo " <td><a class=\"active$active\" href=\"/$group\">$group</a></td>\n"; + echo " <td align=\"right\">", $high-$low+1, "</td>\n"; + echo " <td>"; if ($active != 'n') { echo "<a href=\"group.php?group=$group&amp;format=rss\">rss</a>"; } echo "</td>\n"; - echo " <td class=\"$class\">"; + echo " <td>"; if ($active != 'n') { echo "<a href=\"group.php?group=$group&amp;format=rdf\">rdf</a>"; } echo "</td>\n"; echo " </tr>\n"; - $class = ($class == "even") ? "odd" : "even"; } ?> </table> diff --git a/style.css b/style.css index d486373..9e81419 100644 --- a/style.css +++ b/style.css @@ -50,24 +50,20 @@ a:visited { color: #F6F; } -.alisthead { +th { background: #CCC; font-weight: bold; text-align: center; } -.even { +table.stripped tr:nth-child(even) td { background: #EEE; } -.odd { +table.stripped tr:nth-child(odd) td { background: #DDD; } -.grouplistmsgs { - text-align: right; -} - .headerlabel { background: #CCC; font-weight: bold;