[PATCH yew-widget-toolkit-assets 0/3] material: 8px spacing, touch-sized controls

[PATCH yew-widget-toolkit-assets 0/3] material: 8px spacing, touch-sized controls

[Thomas Lamprecht]

Our material theme's 10px spacer puts its steps at 10, 20, 30 and
40px, off the 8dp grid that Material Design aligns components to, and
leaves a lot of room on desktops. Also, on phones, several controls are
smaller than a finger hits reliably.

This series lowers the Material default to 8px and keeps selected
controls at 44px where the primary pointer is coarse. The last patch
adds a root class that turns the touch sizes off, so an application
can offer that choice next to the density.

I checked it in Chromium with phone, tablet and desktop emulation in
the PVE mobile GUI and the PMG quarantine GUI and some other internal
UIs. FWICT, none of them needs changes but pages get about a fifth
tighter (more content visible and usable), and on a phone buttons grow
from 40px to 44px while list rows were already taller than that.

Updating the precompiled CSS is not sent along as part of the series and
needs a rebuild after applying, but that's purely mechanical.

Thomas Lamprecht (3):
  material: give controls a fingertip-sized target on touch screens
  material: reduce default spacing to 8px
  material: let an application turn the touch-sized controls off

 scss/introduction.md                      |  8 +++
 scss/material/_theme_config_material.scss |  7 +--
 scss/material/_theme_post_material.scss   | 74 +++++++++++++++++++++++
 3 files changed, 85 insertions(+), 4 deletions(-)

-- 
2.47.3

[PATCH yew-widget-toolkit-assets 1/3] material: give controls a fingertip-sized target on touch screens

[Thomas Lamprecht]

On phones and tablets, buttons, date-picker days, tabs and menu
entries are smaller than a finger hits reliably.

Where the browser reports a coarse primary pointer, buttons,
date-picker items, tab links and menu entries are at least 44px in
both directions, and floating action buttons stay square while growing
to that size. The inputs and action icons of a dialog are at least
44px high, the action icons also 44px wide, and its checkboxes are
drawn larger. Inputs, action icons and checkboxes outside a dialog
keep their size, so dense lists and tables do not spread out. Calendar
span bars default to 32px instead of about 22px; an application that
sets its own bar height keeps it.

44px is a chosen minimum and is actually slightly below Material's 48px
recommendation, which was IMO rather overly huge again and did not feel
justified to me.

The rules follow the primary pointer the browser reports, so a notebook
with a touch screen that is used with a mouse usually keeps the denser
sizes. The Material and the mobile theme share these rules, at every
density.

Signed-off-by: Thomas Lamprecht <t.lamprecht@proxmox.com>
---
 scss/material/_theme_post_material.scss | 68 +++++++++++++++++++++++++
 1 file changed, 68 insertions(+)

diff --git a/scss/material/_theme_post_material.scss b/scss/material/_theme_post_material.scss
index c88b055..0d99cf9 100644
--- a/scss/material/_theme_post_material.scss
+++ b/scss/material/_theme_post_material.scss
@@ -86,3 +86,71 @@ ul.pwt-menubar {
         border-top-left-radius: var(--pwt-shape-corner-large);
         border-top-right-radius: var(--pwt-shape-corner-large);
 }
+
+/// `@media (pointer: coarse)`
+/// : enlarge selected controls when the primary pointer is coarse
+///
+/// Follows the browser-reported primary pointer, not the last input device used. A hybrid device
+/// can report either a fine or a coarse primary pointer, even with a mouse attached.
+///
+/// - buttons and date-picker items have a chosen minimum of 44px in both dimensions
+/// - floating action buttons grow to the same minimum and stay square
+/// - tab links, menu entries, and menubar entries have the same minimum, with centered content
+/// - inputs in a dialog are at least 44px high; dialog action icons are also at least 44px wide
+/// - checkboxes in a dialog have a larger drawing at 1.5rem, not a 44px target
+/// - calendar span bars default to 32px high; applications can override this
+///
+/// These floors apply at every density in the Material and mobile themes. Inputs, action icons,
+/// and checkboxes outside a dialog keep their size. This is not universal 44px target sizing.
+///
+@media (pointer: coarse) {
+    .pwt-button,
+    dialog :is(.pwt-input, .pwt-action-icon),
+    .pwt-date-panel .pwt-date-panel-item {
+        min-height: 44px;
+    }
+
+    .pwt-button,
+    dialog .pwt-action-icon,
+    .pwt-date-panel .pwt-date-panel-item {
+        min-width: 44px;
+    }
+
+    // Keep labels centered when a minimum height exceeds the content height.
+    .pwt-button {
+        align-items: center;
+    }
+
+    // A FAB sets its own height and minimum width, which the button floor above would replace.
+    .pwt-fab {
+        height: max(44px, #{$normal-fab-size});
+        min-width: max(44px, #{$normal-fab-size});
+
+        &.pwt-fab-small {
+            height: max(44px, #{$small-fab-size});
+            min-width: max(44px, #{$small-fab-size});
+        }
+    }
+
+    .pwt-date-panel .pwt-date-panel-item {
+        box-sizing: border-box;
+    }
+
+    .pwt-nav-link,
+    ul.pwt-menu .pwt-menu-item,
+    ul.pwt-menubar .pwt-menubar-item {
+        min-width: 44px;
+        min-height: 44px;
+        box-sizing: border-box;
+        display: flex;
+        align-items: center;
+    }
+
+    dialog .pwt-checkbox {
+        font-size: 1.5rem;
+    }
+
+    .pwt-calendar {
+        --pwt-calendar-span-height: 32px;
+    }
+}
-- 
2.47.3

[PATCH yew-widget-toolkit-assets 2/3] material: reduce default spacing to 8px

[Thomas Lamprecht]

Material Design aligns components to an 8dp grid, with a 4dp grid for
finer elements such as icons and type. A 10px spacer put the spacer
steps at 10, 20, 30 and 40px, off that grid; with 8px they are 8, 16,
24 and 32px.

The 10px default also left a lot of room between controls, on desktops
as well as on phones, and 8px fits more content at the same font size.
Anyone who wants more room can choose Relaxed, and on touch screens
the controls keep a fingertip-sized target.

Signed-off-by: Thomas Lamprecht <t.lamprecht@proxmox.com>
---
 scss/material/_theme_config_material.scss | 7 +++----
 1 file changed, 3 insertions(+), 4 deletions(-)

diff --git a/scss/material/_theme_config_material.scss b/scss/material/_theme_config_material.scss
index 7e7c040..2eeecb8 100644
--- a/scss/material/_theme_config_material.scss
+++ b/scss/material/_theme_config_material.scss
@@ -1,11 +1,10 @@
 /// ### The "Material" Theme
 ///
-/// This theme is intended for use on mobile/touch devices and uses a very
-/// large `10px` spacer. It is broadly similar to material design as
-/// described in <https://m3.material.io/>.
+/// This theme uses an `8px` default spacer, with relaxed spacing and coarse-pointer control sizing
+/// available. It is broadly similar to Material Design as described in <https://m3.material.io/>.
 ///
 
-$spacer: 10px;
+$spacer: 8px;
 
 $button-corner-shape: map-get($shape-corner, full);
 $fab-corner-shape: map-get($shape-corner, large);
-- 
2.47.3

[PATCH yew-widget-toolkit-assets 3/3] material: let an application turn the touch-sized controls off

[Thomas Lamprecht]

The touch sizes follow the primary pointer the browser reports, which
need not match how a device is used: a hybrid device can report a
coarse pointer while a mouse or touchpad is in use. Choosing a denser
spacing does not help, as the sizes apply at every density.

The class `pwt-touch-targets-off` on the root element now turns them
off, so an application can offer that choice next to the density,
whose classes sit there as well. The rules keep their specificity, so
how they combine with other styles does not change.

Signed-off-by: Thomas Lamprecht <t.lamprecht@proxmox.com>
---

In an ideal world we wouldn't need this, but as browsers, devices and
OS (reportings) are odd, it's rather likely that one wants to turn
this off manually, so lets support doing so from the start.

Could be also squashed into previous changes, but doesn't hurt to have
it as dedicated commit IMO.

 scss/introduction.md                    |   8 ++
 scss/material/_theme_post_material.scss | 102 +++++++++++++-----------
 2 files changed, 62 insertions(+), 48 deletions(-)

diff --git a/scss/introduction.md b/scss/introduction.md
index 9baa240..6ad4ea9 100644
--- a/scss/introduction.md
+++ b/scss/introduction.md
@@ -157,3 +157,11 @@ overwrite it manually using the following CSS classes:
 - `pwt-density-high`: very small spacer (`3px`), high density
 - `pwt-density-medium`: normal (`5px`), usefule for desktop apps
 - `pwt-density-touch`: larger spacer (`10px`), useful for touch devices
+
+The Material and mobile themes enlarge selected controls where the
+primary pointer is coarse, at every density. This follows the
+browser-reported primary pointing device, not the last input device
+used: a hybrid device can report either a fine or a coarse primary
+pointer, even with a mouse attached. Choosing Compact or Medium does not
+disable those control-size floors, but the class `pwt-touch-targets-off`
+on the root element does.
diff --git a/scss/material/_theme_post_material.scss b/scss/material/_theme_post_material.scss
index 0d99cf9..2d0f6c4 100644
--- a/scss/material/_theme_post_material.scss
+++ b/scss/material/_theme_post_material.scss
@@ -103,54 +103,60 @@ ul.pwt-menubar {
 /// These floors apply at every density in the Material and mobile themes. Inputs, action icons,
 /// and checkboxes outside a dialog keep their size. This is not universal 44px target sizing.
 ///
+/// The class `pwt-touch-targets-off` on the root element turns all of them off, as the density
+/// classes there set the spacing.
+///
 @media (pointer: coarse) {
-    .pwt-button,
-    dialog :is(.pwt-input, .pwt-action-icon),
-    .pwt-date-panel .pwt-date-panel-item {
-        min-height: 44px;
-    }
-
-    .pwt-button,
-    dialog .pwt-action-icon,
-    .pwt-date-panel .pwt-date-panel-item {
-        min-width: 44px;
-    }
-
-    // Keep labels centered when a minimum height exceeds the content height.
-    .pwt-button {
-        align-items: center;
-    }
-
-    // A FAB sets its own height and minimum width, which the button floor above would replace.
-    .pwt-fab {
-        height: max(44px, #{$normal-fab-size});
-        min-width: max(44px, #{$normal-fab-size});
-
-        &.pwt-fab-small {
-            height: max(44px, #{$small-fab-size});
-            min-width: max(44px, #{$small-fab-size});
-        }
-    }
-
-    .pwt-date-panel .pwt-date-panel-item {
-        box-sizing: border-box;
-    }
-
-    .pwt-nav-link,
-    ul.pwt-menu .pwt-menu-item,
-    ul.pwt-menubar .pwt-menubar-item {
-        min-width: 44px;
-        min-height: 44px;
-        box-sizing: border-box;
-        display: flex;
-        align-items: center;
-    }
-
-    dialog .pwt-checkbox {
-        font-size: 1.5rem;
-    }
-
-    .pwt-calendar {
-        --pwt-calendar-span-height: 32px;
+    // :where() adds no specificity, so the rules combine with others as if they stood alone.
+    :where(:root:not(.pwt-touch-targets-off)) {
+        .pwt-button,
+        dialog :is(.pwt-input, .pwt-action-icon),
+        .pwt-date-panel .pwt-date-panel-item {
+            min-height: 44px;
+        }
+
+        .pwt-button,
+        dialog .pwt-action-icon,
+        .pwt-date-panel .pwt-date-panel-item {
+            min-width: 44px;
+        }
+
+        // Keep labels centered when a minimum height exceeds the content height.
+        .pwt-button {
+            align-items: center;
+        }
+
+        // A FAB sets its own height and minimum width, which the button floor above would replace.
+        .pwt-fab {
+            height: max(44px, #{$normal-fab-size});
+            min-width: max(44px, #{$normal-fab-size});
+
+            &.pwt-fab-small {
+                height: max(44px, #{$small-fab-size});
+                min-width: max(44px, #{$small-fab-size});
+            }
+        }
+
+        .pwt-date-panel .pwt-date-panel-item {
+            box-sizing: border-box;
+        }
+
+        .pwt-nav-link,
+        ul.pwt-menu .pwt-menu-item,
+        ul.pwt-menubar .pwt-menubar-item {
+            min-width: 44px;
+            min-height: 44px;
+            box-sizing: border-box;
+            display: flex;
+            align-items: center;
+        }
+
+        dialog .pwt-checkbox {
+            font-size: 1.5rem;
+        }
+
+        .pwt-calendar {
+            --pwt-calendar-span-height: 32px;
+        }
     }
 }
-- 
2.47.3