diff --git a/JoshHeaps.Net/wwwroot/css/casino/holdem.css b/JoshHeaps.Net/wwwroot/css/casino/holdem.css index 9ce0944..9c6fc28 100644 --- a/JoshHeaps.Net/wwwroot/css/casino/holdem.css +++ b/JoshHeaps.Net/wwwroot/css/casino/holdem.css @@ -1013,9 +1013,24 @@ button, text-align: center; } +/* A bare checkbox ships at 13x13, which misses the 24px minimum with a mouse as well + as with a thumb. The row around it is the real target on touch, but the box itself + should be findable on any device. */ +#dedicatedDealerToggle { + width: 24px; + height: 24px; +} + .linkBtn { background: none; border: none; + /* An underlined word was a 91x14 target, which misses the 24px minimum with a + mouse as well as with a thumb. The coarse-pointer block takes it to 44; this is + the floor everywhere else, and it changes nothing about how it looks. */ + display: inline-flex; + align-items: center; + box-sizing: border-box; + min-height: 24px; padding: 0; color: #d8b46a; font-family: inherit; @@ -1470,7 +1485,16 @@ button, .sidebarPanel summary { cursor: pointer; - padding: 0.7rem 0; + /* These headers are the sidebar's whole navigation and were 38px tall on every + device, phones included — the touch pass further down never reached them. + Padding rather than a flex box with min-height, because a only draws + its disclosure triangle while it is display: list-item. */ + padding: 0.85rem 0; + /* A is content-box, so min-height would have been *added* to the padding + — measured at 71px before this line went in. Same trap the header buttons were + in, one file over. */ + box-sizing: border-box; + min-height: 44px; font-size: 0.9rem; color: #eee; letter-spacing: 0.03em; @@ -3185,3 +3209,66 @@ textarea:focus-visible { font-size: 0.72rem; color: #9a9a9a; } + +/* ---------- Touch targets on a wide touch screen ---------- + + Every touch-target rule in this file sits behind `max-width: 700px`, and width was + never the question. A phone held sideways is 844px wide, so none of that work + applied to it. Measured on an emulated touch device at 844x390, with the sidebar + panels open: twelve controls under 44px, including the rulings link at 91x14 and + the dedicated-dealer checkbox at 13x13. + + Restated here against the pointer instead of the viewport. The width-scoped block + keeps its layout changes — one column, stacked dialogs — because those really are + about how much room there is. This is only about what a thumb can hit, so it asks + about the thumb. */ +@media (pointer: coarse) { + .panelBody input:not([type="checkbox"]):not([type="color"]), + .subPanelBody input:not([type="checkbox"]):not([type="color"]), + .panelBody select { + font-size: 16px; + min-height: 44px; + padding: 0.4rem 0.6rem; + } + + .panelBody .holdemBtnSmall, + .handHistoryActions .holdemBtn, + .toastAction { + min-height: 44px; + } + + /* Destructive and tiny is the worst combination: these delete a chip colour or a + custom field, and are 28px wide. */ + .removeChipColorBtn, + .removeFieldBtn { + min-width: 44px; + min-height: 44px; + } + + /* flex-shrink would take a stated width straight back off again. */ + .chipColorInput { + flex: none; + width: 44px; + height: 44px; + } + + /* A bare checkbox can't grow into a target, but the row it sits in can — the + label is what a tap actually lands on. */ + .panelBody .fieldRow { + min-height: 44px; + } + + #dedicatedDealerToggle { + width: 24px; + height: 24px; + } + + /* An underlined word is a 14px-tall target; give it room without making it look + like a button. */ + .linkBtn { + display: inline-flex; + align-items: center; + min-height: 44px; + padding: 0 0.4rem; + } +}