Widgets Controls on Touch Screen - Update (Chrome)

This works with both Android and Desktop Chrome (v63) as well as IE 11.
exception: there is apparently an incompatibility between Chrome and JQuery sortable.  So drag/drop sort doesn't work in Chrome.

This is a modification of the previous:
3f7ee41b53

Touch events not working with the widget controls (link, buttons, drag/drop sort).
Add distance, delay and touch-action css for the widget controls to work with touch screen input.

Widget controls not working correctly with touch screen input
https://github.com/opnsense/core/issues/2092
This commit is contained in:
NOYB 2018-01-26 20:34:34 -08:00 committed by Franco Fichtner
parent 816ddcbb57
commit 201c62d60c
3 changed files with 10 additions and 2 deletions

View File

@ -125,6 +125,9 @@ body{
min-width: 320px;
}
.widget_sort_handle {
touch-action: none; }
.page-head{
background: map-get($colors, darkgrey);
top: 0;

View File

@ -5478,6 +5478,9 @@ body {
touch-action: manipulation;
min-width: 320px; }
.widget_sort_handle {
touch-action: none; }
.page-head {
background: #3C3C3B;
top: 0;

View File

@ -275,7 +275,7 @@ include("fbegin.inc");?>
// sortable widgets
$(".dashboard_grid_column").sortable({
handle: '.content-box-head',
handle: '.widget_sort_handle',
delay: 50,
distance: 2,
group: 'dashboard_grid_column',
@ -371,7 +371,7 @@ include("fbegin.inc");?>
}?>
<section class="widgetdiv" data-sortkey="<?=$widgetItem['sortKey'] ?>" id="<?=$widgetItem['name'];?>" style="display:<?=$divdisplay;?>;">
<div class="content-box">
<header class="content-box-head container-fluid" style="touch-action: none">
<header class="content-box-head container-fluid">
<ul class="list-inline __nomb">
<li><h3>
<?php
@ -394,6 +394,8 @@ include("fbegin.inc");?>
</div>
</li>
</ul>
<div class="container-fluid widget_sort_handle">
</div>
</header>
<div class="content-box-main collapse in" id="<?= $widgetItem['name'] ?>-container" style="display:<?= $mindiv ?>">
<input type="hidden" value="<?= $inputdisplay ?>" id="<?= $widgetItem['name'] ?>-config" name="<?= $widgetItem['name'] ?>-config" />