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

[Thomas Lamprecht <t.lamprecht@proxmox.com>]

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