ui: tip toeing around mobile issues for #1003

This tries to address table overflow problems we have and is
only meant as a base for further discussion.  It gets rid of
table overflow, e.g. in the dashboard on small mobile screens
by setting "table-layout: fixed;" for all tables.  This breaks
the stacked-to-horizontal emulation, so the workaround there
is to switch it off, which requires a proper viewport detection.

While there, fiddle with the logs template, but for these non-
hooked stacked-to-horizontal tables the fix for table-layout
can't be undone, because that would break the original fix in
the first place.

Moral of the story: tables are deprecated.  ;)

src/opnsense/mvc/app/views/layouts/default.volt

@@ -27,6 +27,9 @@
       .typeahead {
         overflow: hidden;
       }
+      table {
+        table-layout: fixed;
+      }
     </style>
 
     <!-- Favicon -->

src/opnsense/www/themes/opnsense/assets/stylesheets/main.scss

@@ -231,10 +231,6 @@ body{
   }
 }
 
-.page-content-main [class^="col-"] + [class^="col-"]{
-  padding-top: ($grid-gutter-width/2);
-}
-
 .brand-logo{
     display: none;
 

src/opnsense/www/themes/opnsense/build/css/main.css

@@ -5558,9 +5558,6 @@ body {
   .tab-content .tab-content:last-child {
     margin-bottom: 0; }
 
-.page-content-main [class^="col-"] + [class^="col-"] {
-  padding-top: 20px; }
-
 .brand-logo {
   display: none; }
   @media (min-width: 768px) {

src/www/diag_logs_template.inc

@@ -69,9 +69,18 @@ include("head.inc");
     <div class="container-fluid">
       <div class="row">
         <section class="col-xs-12">
+          <p>
+            <form action="<? $_SERVER['REQUEST_URI'] ?>" method="post">
+              <input type="text" class="form-control" id="filtertext" name="filtertext" placeholder="<?= html_safe(gettext('Search for a specific message...')) ?>" value="<?=$filtertext;?>"/>
+            </form>
+          </p>
           <div class="tab-content content-box col-xs-12">
             <div class="table-responsive">
               <table class="table table-striped table-sort">
+                <tr>
+                  <td class="col-md-2 col-sm-3 col-xs-4"><?= gettext('Date') ?></td>
+                  <td class="col-md-10 col-sm-9 col-xs-8"><?= gettext('Message') ?></td>
+                </tr>
                 <?php if (isset($logpills)): ?>
                 <tr>
                   <td colspan="2">
@@ -83,14 +92,6 @@ include("head.inc");
                   </td>
                 </tr>
                 <?php endif; ?>
-                <tr>
-                  <td colspan="2">
-                    <form id="clearform" name="clearform" action="<? $_SERVER['REQUEST_URI'] ?>" method="post">
-                      <input id="filtertext" name="filtertext" value="<?=$filtertext;?>"/>
-                      <input id="filtersubmit" name="filtersubmit" type="submit" class="btn btn-primary" value="<?=gettext("Filter");?>" />
-                    </form>
-                  </td>
-                </tr>
                 <?php
                   if ($logclog) {
                       dump_clog($logfile, $nentries, $filtertext);
@@ -101,7 +102,7 @@ include("head.inc");
                 <tr>
                   <td colspan="2">
                     <form action="<? $_SERVER['REQUEST_URI'] ?>" method="post">
-                      <input name="clear" type="submit" class="btn" value="<?= gettext("Clear log");?>" />
+                      <input name="clear" type="submit" class="btn btn-primary" value="<?= gettext("Clear log");?>" />
                     </form>
                   </td>
                 </tr>

src/www/foot.inc

@@ -10,6 +10,12 @@
   <!-- /row-->
 </main>
 
+<!-- viewport breakpoint detection -->
+<div class="device-xs visible-xs"></div>
+<div class="device-sm visible-sm"></div>
+<div class="device-md visible-md"></div>
+<div class="device-lg visible-lg"></div>
+
 <?php
     if (isset($widgetCollection)):
       // sort by name

src/www/guiconfig.inc

@@ -364,20 +364,20 @@ function print_dump($logarr)
     global $config;
 
     if (!is_array($logarr)) {
-        echo "<tr valign=\"top\">\n";
-        echo "<td class=\"listlr\" colspan=\"2\">" . htmlspecialchars($logarr) . "</td>\n";
+        echo "<tr>\n";
+        echo "<td colspan=\"2\">" . htmlspecialchars($logarr) . "</td>\n";
         echo "</tr>\n";
         return;
     }
 
     foreach ($logarr as $logent) {
         $logent = preg_split("/\s+/", $logent, 6);
-        echo "<tr valign=\"top\">\n";
+        echo "<tr>\n";
         $entry_date_time = htmlspecialchars(join(" ", array_slice($logent, 0, 3)));
         $entry_text = ($logent[3] ==  $config['system']['hostname']) ? "" : $logent[3] . " ";
         $entry_text .= htmlspecialchars($logent[4] . " " . $logent[5]);
-        echo "<td class=\"listlr nowrap\">{$entry_date_time}</td>\n";
-        echo "<td class=\"listr\">{$entry_text}</td>\n";
+        echo "<td>{$entry_date_time}</td>\n";
+        echo "<td>{$entry_text}</td>\n";
         echo "</tr>\n";
     }
 }

src/www/head.inc

@@ -69,6 +69,10 @@ $pagetitle .= sprintf(' | %s.%s', $config['system']['hostname'], $config['system
         z-index: 2000;
       }
 
+      table {
+        table-layout: fixed;
+      }
+
       ol.example li.placeholder {
         position: relative;
       }

src/www/javascript/opnsense_legacy.js

@@ -61,6 +61,13 @@ function hook_ipv4v6(classname, data_id) {
   });
 }
 
+/**
+ * return the current viewport size from: http://stackoverflow.com/questions/18575582/how-to-detect-responsive-breakpoints-of-twitter-bootstrap-3-using-javascript
+ * @param alias: the bootstrap viewport name, e.g. 'xs'
+ */
+function isBreakpoint( alias ) {
+    return $('.device-' + alias).is(':visible');
+}
 /**
  * transform input forms for better mobile experience (stack description on top)
  * @param match: query pattern to match tables
@@ -118,6 +125,11 @@ function hook_stacked_form_tables(match)
                           ++index;
                       }
                   });
+                  if (isBreakpoint('xs')) {
+                      root_node.css('table-layout', 'auto');
+                  } else {
+                      root_node.css('table-layout', 'fixed');
+                  }
               }
               $( window ).resize(root_node.do_resize);
               root_node.do_resize();