From mboxrd@z Thu Jan 1 00:00:00 1970 Return-Path: Received: from gate001.proxmox.com (gate001.proxmox.com [IPv6:2a0f:8001:1:32::40]) by lore.proxmox.com (Postfix) with ESMTPS id 81B531FF1A3 for ; Thu, 22 Oct 2026 19:43:44 +0200 (CEST) Received: from gate001.proxmox.com (localhost.localdomain [127.0.0.1]) by gate001.proxmox.com (Proxmox) with ESMTP id 715B2214CA; Thu, 22 Oct 2026 19:43:43 +0200 (CEST) From: Thomas Lamprecht To: yew-devel@lists.proxmox.com Subject: [PATCH yew-widget-toolkit-assets 3/3] material: let an application turn the touch-sized controls off Date: Thu, 22 Oct 2026 19:41:02 +0200 Message-ID: <20261022174334.2286071-4-t.lamprecht@proxmox.com> X-Mailer: git-send-email 2.47.3 In-Reply-To: <20261022174334.2286071-1-t.lamprecht@proxmox.com> References: <20261022174334.2286071-1-t.lamprecht@proxmox.com> MIME-Version: 1.0 Content-Transfer-Encoding: 8bit X-Bm-Milter-Handled: 55990f41-d878-4baa-be0a-ee34c49e34d2 X-Bm-Transport-Timestamp: 1792691019670 X-SPAM-LEVEL: Spam detection results: 0 AWL 0.511 Adjusted score from AWL reputation of From: address DMARC_MISSING 0.1 Missing DMARC policy KAM_DMARC_STATUS 0.01 Test Rule for DKIM or SPF Failure with Strict Alignment (newer systems) RCVD_IN_DNSWL_MED -2.3 Sender listed at https://www.dnswl.org/, medium trust SPF_HELO_NONE 0.001 SPF: HELO does not publish an SPF Record SPF_PASS -0.001 SPF: sender matches SPF record Message-ID-Hash: 5VEWD3FCWL4UGXK2RDGR362NGGC6PTXD X-Message-ID-Hash: 5VEWD3FCWL4UGXK2RDGR362NGGC6PTXD X-MailFrom: t.lamprecht@proxmox.com X-Mailman-Rule-Misses: dmarc-mitigation; no-senders; approved; loop; banned-address; emergency; member-moderation; nonmember-moderation; administrivia; implicit-dest; max-recipients; max-size; news-moderation; no-subject; digests; suspicious-header X-Mailman-Version: 3.3.10 Precedence: list List-Id: Yew framework devel list at Proxmox List-Help: List-Owner: List-Post: List-Subscribe: List-Unsubscribe: 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 --- 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