lucaspalomodevelop/core
1
0
Fork 0
mirror of https://github.com/lucaspalomodevelop/core.git synced 2026-03-18 18:44:44 +00:00
Code Issues Packages Projects Releases Wiki Activity

ui: tip toeing around mobile issues for #1003

Browse Source 
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.  ;)
This commit is contained in:
Franco Fichtner 2016-06-11 12:36:22 +02:00
parent bf745deac8
commit f44b7e0ca3
8 changed files with 40 additions and 21 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

3
src/opnsense/mvc/app/views/layouts/default.volt
View File

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

4
src/opnsense/www/themes/opnsense/assets/stylesheets/main.scss
View File

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

3
src/opnsense/www/themes/opnsense/build/css/main.css
View File

@ -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) {

19
src/www/diag_logs_template.inc
View File

@ -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>

6
src/www/foot.inc
View File

@ -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

10
src/www/guiconfig.inc
View File

@ -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";
}
}

4
src/www/head.inc
View File

@ -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;
}

12
src/www/javascript/opnsense_legacy.js
View File

@ -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();