From ddc9afabba04fe81419b192bca2278baf1943ce7 Mon Sep 17 00:00:00 2001 From: Wesley Bomar Date: Wed, 6 Sep 2023 09:52:13 -0500 Subject: [PATCH] fix: un-pairing ui not responsive CSS Modules compose rules in @media does not respect query. So, pull the @media query into Mfa.module.css, thus no need to compose. This means c-step-panels leaves message and responsive layout to client. https://github.com/css-modules/css-modules/issues/75 --- libs/tup-components/src/mfa/Mfa.module.css | 80 ++++++++++++++++---- libs/tup-components/styles/c-step-panels.css | 75 +----------------- 2 files changed, 68 insertions(+), 87 deletions(-) diff --git a/libs/tup-components/src/mfa/Mfa.module.css b/libs/tup-components/src/mfa/Mfa.module.css index 262b579da..462884951 100644 --- a/libs/tup-components/src/mfa/Mfa.module.css +++ b/libs/tup-components/src/mfa/Mfa.module.css @@ -2,9 +2,9 @@ /* Layout styles */ .pairing-container { - --extra-space-below-panel-for-message: 50px; /* text copy input height ++ */ + composes: c-step-panels from '../../styles/c-step-panels.css'; - composes: c-step-panels c-step-panels--has-scroll-parent from '../../styles/c-step-panels.css'; + padding-bottom: var(--global-space--section-bottom); } .pairing-container > *:not(.pairing-separator) { @@ -21,8 +21,13 @@ margin-top: 30px; /* match .mfa-success-container button */ } +.mfa-message { + /* So OTP code copy field will not stretch to fill narrow-width screen */ + width: max-content; +} + .field-error { - /* so message with very littel text still appears beneath input */ + /* So message with very little text still appears beneath input */ display: flex; } @@ -59,17 +64,6 @@ label.qr-code-alt-label { } -/* Wide */ -@media screen and (--medium-and-above) { - .pairing-container { - composes: c-step-panels--horizontal from '../../styles/c-step-panels.css'; - } - .mfa-message { - composes: c-step-panels__message from '../../styles/c-step-panels.css'; - } -} - - .mfa-form { composes: c-step-panels__content from '../../styles/c-step-panels.css'; @@ -90,3 +84,61 @@ label.qr-code-alt-label { .mfa-success-container button { margin-top: 30px; /* match .mfa-type-selection */ } + + + +/* Responsive layout */ +@media screen and (--medium-and-above) { + .pairing-container { + /* To layout items on one left-aligned row */ + grid-auto-flow: column; + justify-content: start; + + /* To support `position: absolute` child */ + position: relative; + width: max-content; /* to not let wide child change parent width */ + } + + /* HACK: Add extra space to hold the .mfa-message "outside" of the panels */ + .pairing-container { + --space-below-panel-before-message: var(--global-space--section-bottom); + --space-below-panel-for-form-field: 50px; /* text copy input height++ */ + + /* FAQ: body font-size * body line-height + button vert. border + … */ + --space-below-panel-for-message: calc( + var(--global-font-size--small) * 1.4 + + (var(--global-border-width--normal) * 2) + + var(--space-below-panel-for-form-field) + + var(--space-below-panel-before-message) + ); + + padding-bottom: var(--space-below-panel-for-message); + } + + /* HACK: Position .mfa-message at the bottom and "outside" of the panels */ + .pairing-container *:not(:only-child) .mfa-message { + /* To position message beneath both paring steps */ + position: absolute; + top: calc( + 100% + - var(--space-below-panel-for-message) + + var(--space-below-panel-before-message) + ); + + /* To not let message horizontally overflow .pairing-container */ + max-width: calc( + 100% + - var(--global-space--section-left) + - var(--global-space--section-right) + ); + + /* To horizontally center content (not text) */ + left: 0; + right: 0; + margin-left: auto; + margin-right: auto; + + /* To horizontally center text (not content) */ + text-align: center; + } +} diff --git a/libs/tup-components/styles/c-step-panels.css b/libs/tup-components/styles/c-step-panels.css index 0e1ed4861..86b613e56 100644 --- a/libs/tup-components/styles/c-step-panels.css +++ b/libs/tup-components/styles/c-step-panels.css @@ -3,30 +3,11 @@ .c-step-panels { display: grid; padding-inline: var(--global-space--section-left); - padding-bottom: var(--global-space--section-bottom); gap: var(--global-space--section-left); - - --space-below-panel-before-message: var(--global-space--section-bottom); - --extra-space: var(--extra-space-below-panel-for-message, 0px); - - /* FAQ: body font-size * body line-height + button vert. border + extra … */ - --space-below-panel-for-message: calc( - var(--global-font-size--small) - * 1.4 - + (var(--global-border-width--normal) * 2) - + var(--extra-space) - + var(--space-below-panel-before-message) - ) } ol.c-step-panels { margin-bottom: 0; /* overwrite core-styles.base.css */ } -/* HACK: Add space for c-step-panels__message to avoid causing scrollbar */ -.c-step-panels--has-scroll-parent { - padding-bottom: var(--space-below-panel-for-message); -} - - @@ -40,64 +21,12 @@ li.c-step-panels__separator { } /* To add space between "2." and separator */ -.c-step-panels__separator + li { +.c-step-panels__separator { /* This assumes `list-style-position: outside` (browser default) */ - margin-left: 1.25em; + margin-right: 1.25em; } .c-step-panels__content { padding-top: 10px; padding-bottom: 10px; } - - - - - -/* Modifiers */ - -/* Modifiers: Vertical */ - -.c-step-panels--vertical { - /* no extra styles required yet */ -} - - - -/* Modifiers: Horizontal */ - -.c-step-panels--horizontal { - /* To layout items on one left-aligned row */ - grid-auto-flow: column; - justify-content: start; - - /* To support `position: absolute` child */ - position: relative; - width: max-content; /* to not let wide child change parent width */ -} -.c-step-panels--horizontal li:not(:only-child) .c-step-panels__message { - /* To position message beneath both paring steps */ - position: absolute; - top: calc( - 100% - - var(--space-below-panel-for-message) - + var(--space-below-panel-before-message) - ); - - /* To stretch content */ - width: max-content; - max-width: calc( - 100% - - var(--global-space--section-left) - - var(--global-space--section-right) - ); - - /* To horizontally center content (not text) */ - left: 0; - right: 0; - margin-left: auto; - margin-right: auto; - - /* To horizontally center text (not content) */ - text-align: center; -}