com web/news: Make tables responsive and avoid breaking words in them: article.php group.php style.css
| From: | Ben Ramsey | Date: | Sat, 22 Jul 2017 12:07:59 +0000 |
| Subject: | com web/news: Make tables responsive and avoid breaking words in them: article.php group.php style.css | ||
| Groups: | php.webmaster | ||
| Request: | Send a blank email to php-webmaster+get-26200@lists.php.net to get a copy of this message | ||
Commit: d66b48349fc0898ee01f7be818b8242a230584f0
Author: Mehdi Achour <machour@gmail.com> Sat, 22 Jul 2017 13:07:59 +0100
Parents: b980e41e829c414cf86d221508f76dd8a000a952
Branches: master
Link: http://git.php.net/?p=web/news.git;a=commitdiff;h=d66b48349fc0898ee01f7be818b8242a230584f0
Log:
Make tables responsive and avoid breaking words in them
Changed paths:
M article.php
M group.php
M style.css
Diff:
diff --git a/article.php b/article.php
index 6ee1e42..1a4f845 100644
--- a/article.php
+++ b/article.php
@@ -199,7 +199,7 @@ function navbar($group, $current) {
echo ' <th class="nav">';
if ($current > 1) {
- echo ' <a href="/' , $group , '/' , ($current-1) ,
'"><b>« previous</b></a>';
+ echo ' <a href="/' , $group , '/' , ($current-1) ,
'"><b>« <span>previous</span></b></a>';
} else {
echo ' ';
}
@@ -207,7 +207,7 @@ function navbar($group, $current) {
echo ' </th>' . "\n";
echo ' <th class="align-center">' . "$group
(#$current)</th>\n";
echo ' <th class="nav align-right">';
- echo ' <a href="/' , $group , '/' , ($current+1) ,
'"><b>next »</b></a>';
+ echo ' <a href="/' , $group , '/' , ($current+1) ,
'"><b><span>next</span> »</b></a>';
echo ' </th>' . "\n";
echo ' </tr>' . "\n";
echo ' </table>' . "\n";
diff --git a/group.php b/group.php
index 2d3b182..fb9a380 100644
--- a/group.php
+++ b/group.php
@@ -66,6 +66,7 @@ echo '</nav>';
echo '<section class="content">';
echo '<h1>'.htmlspecialchars($group, ENT_QUOTES,
"UTF-8").'</h1>';
navbar($group, $overview['group']['low'],
$overview['group']['high'], $overview['group']['start']);
+echo ' <div class="responsive-table">' . "\n";
echo ' <table class="standard">' . "\n";
echo ' <tr>' . "\n";
echo ' <th>#</th>' . "\n";
@@ -126,6 +127,7 @@ switch ($format) {
case 'html':
default:
echo " </table>\n";
+ echo " </div>\n";
navbar($group, $overview['group']['low'],
$overview['group']['high'], $overview['group']['start']);
echo "</section>";
foot();
@@ -137,7 +139,7 @@ function navbar($g, $f, $l, $i) {
echo ' <th class="nav">';
if ($i > $f) {
$p = max($i-20,$f);
- echo "<a href=\"/" . htmlspecialchars($g, ENT_QUOTES, "UTF-8") .
"/start/$p\"><b>« previous</b></a>";
+ echo "<a href=\"/" . htmlspecialchars($g, ENT_QUOTES, "UTF-8") .
"/start/$p\"><b>«
<span>previous</span></b></a>";
} else {
echo " ";
}
@@ -148,7 +150,7 @@ function navbar($g, $f, $l, $i) {
echo ' <th class="nav align-right">';
if ($i+20 <= $l) {
$n = min($i + 20, $l - 19);
- echo "<a href=\"/" . htmlspecialchars($g, ENT_QUOTES, "UTF-8") .
"/start/$n\"><b>next »</b></a>";
+ echo "<a href=\"/" . htmlspecialchars($g, ENT_QUOTES, "UTF-8") .
"/start/$n\"><b><span>next</span>
»</b></a>";
}
else {
echo " ";
diff --git a/style.css b/style.css
index c9e368c..6138928 100644
--- a/style.css
+++ b/style.css
@@ -320,8 +320,7 @@ a.footer-nav-item-link:hover{
/* Standard Tables */
table.standard {
border-collapse: collapse;
- border-style: hidden;
- border:1px solid #d9d9d9;
+ border: 1px solid #d9d9d9;
width: 100%;
border-spacing:2px;
}
@@ -364,6 +363,9 @@ table.standard th.subr {
text-align: right;
}
+.responsive-table { overflow-x: scroll; }
+.responsive-table table { word-break: normal; }
+
.align-right{
text-align: right;
}
@@ -399,6 +401,13 @@ table.standard th.subr {
}
@media screen and (max-width: 580px) {
+ th.nav a {
+ font-size: 2rem;
+ text-decoration: none;
+ }
+ th.nav span {
+ display: none;
+ }
.menu-icon{
display: block;
}