[PHP-WEBMASTER] com web/news: Make tables responsive and avoid breaking words in them: article.php group.php style.css

[Ben Ramsey]

Commit:    d66b48349fc0898ee01f7be818b8242a230584f0
Author:    Mehdi Achour <mach...@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>&laquo; previous</b></a>';
+               echo '     <a href="/' , $group , '/' , ($current-1) , 
'"><b>&laquo; <span>previous</span></b></a>';
        } else {
                echo '&nbsp;';
        }
@@ -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 
&raquo;</b></a>';
+       echo '     <a href="/' , $group , '/' , ($current+1) , 
'"><b><span>next</span> &raquo;</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>&laquo; previous</b></a>";
+               echo "<a href=\"/" . htmlspecialchars($g, ENT_QUOTES, "UTF-8") 
. "/start/$p\"><b>&laquo; <span>previous</span></b></a>";
        } else {
                echo "&nbsp;";
        }
@@ -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 &raquo;</b></a>";
+               echo "<a href=\"/" . htmlspecialchars($g, ENT_QUOTES, "UTF-8") 
. "/start/$n\"><b><span>next</span> &raquo;</b></a>";
        }
        else {
                echo "&nbsp;";
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;
        }


--
PHP Webmaster List Mailing List (http://www.php.net/)
To unsubscribe, visit: http://www.php.net/unsub.php