From e5b3d74579e78028b70194c87f42dc052635607f Mon Sep 17 00:00:00 2001 From: Wesley Bomar Date: Tue, 5 Sep 2023 17:08:28 -0500 Subject: [PATCH 1/6] feat: increase portal font-size --- .../for-core-styles/settings/font--portal.css | 17 +++++++++++++++++ .../tup_cms/css/tup-cms.for-core-styles.css | 2 +- 2 files changed, 18 insertions(+), 1 deletion(-) create mode 100644 apps/tup-cms/src/taccsite_custom/tup_cms/static/tup_cms/css/for-core-styles/settings/font--portal.css diff --git a/apps/tup-cms/src/taccsite_custom/tup_cms/static/tup_cms/css/for-core-styles/settings/font--portal.css b/apps/tup-cms/src/taccsite_custom/tup_cms/static/tup_cms/css/for-core-styles/settings/font--portal.css new file mode 100644 index 000000000..b7b6871d5 --- /dev/null +++ b/apps/tup-cms/src/taccsite_custom/tup_cms/static/tup_cms/css/for-core-styles/settings/font--portal.css @@ -0,0 +1,17 @@ +/* Mimic Core-Styles settings/font--docs.css */ +/* FAQ: Design wants to increase base font from 12px to 14px */ +/* FAQ: This change ALMOST gives clients consistent font size variables */ +/* NOTE: + - tup-ui uses `--global-font-size--small` (is now 1.4rem) + - tup-cms uses `--global-font-size--medium` (has been 1.4rem) + - tacc-docs uses `--global-font-size--medium` (has been 1.6rem) +*/ +:root { + --global-font-size--x-small: 1.2rem; + --global-font-size--small: 1.4rem; + --global-font-size--medium: 1.6rem; + --global-font-size--large: 1.8rem; + --global-font-size--x-large: 2.1rem; + --global-font-size--xx-large: 2.8rem; + --global-font-size--xxx-large: 3.2rem; +} diff --git a/apps/tup-cms/src/taccsite_custom/tup_cms/static/tup_cms/css/tup-cms.for-core-styles.css b/apps/tup-cms/src/taccsite_custom/tup_cms/static/tup_cms/css/tup-cms.for-core-styles.css index 67ade64eb..e6f8ce97c 100644 --- a/apps/tup-cms/src/taccsite_custom/tup_cms/static/tup_cms/css/tup-cms.for-core-styles.css +++ b/apps/tup-cms/src/taccsite_custom/tup_cms/static/tup_cms/css/tup-cms.for-core-styles.css @@ -2,7 +2,7 @@ /* SEE: https://confluence.tacc.utexas.edu/x/IAA9Cw */ /* SETTINGS */ -/* ... */ +@import url("./for-core-styles/settings/font--portal.css") layer(base); /* GENERICS */ @import url("./for-core-styles/generics/attributes.css") layer(base); From 2aa44f327f84717c63650a66bff7df9191101be3 Mon Sep 17 00:00:00 2001 From: Wesley Bomar Date: Tue, 5 Sep 2023 17:08:44 -0500 Subject: [PATCH 2/6] fix: do NOT increase user news font-size --- libs/tup-components/src/news/UserNews.module.css | 4 +++- 1 file changed, 3 insertions(+), 1 deletion(-) diff --git a/libs/tup-components/src/news/UserNews.module.css b/libs/tup-components/src/news/UserNews.module.css index 68e527095..0a19f1401 100644 --- a/libs/tup-components/src/news/UserNews.module.css +++ b/libs/tup-components/src/news/UserNews.module.css @@ -1,5 +1,5 @@ .news-list { - font-size: var(--global-font-size--small); + font-size: var(--global-font-size--x-small); } .news-list-item { @@ -39,6 +39,8 @@ margin-top: 10px; margin-bottom: 5px; + + font-size: var(--global-font-size--small); } .news-error { From 228c1ac0696b39eee6d025cd2c91f07d8d57df5a Mon Sep 17 00:00:00 2001 From: Wesley Bomar Date: Tue, 5 Sep 2023 17:47:56 -0500 Subject: [PATCH 3/6] fix: system status should not have horz. scrollbar --- .../src/system-status/details/SystemDetails.module.css | 7 ++++++- 1 file changed, 6 insertions(+), 1 deletion(-) diff --git a/libs/tup-components/src/system-status/details/SystemDetails.module.css b/libs/tup-components/src/system-status/details/SystemDetails.module.css index 4d3708fa0..66eafa9d1 100644 --- a/libs/tup-components/src/system-status/details/SystemDetails.module.css +++ b/libs/tup-components/src/system-status/details/SystemDetails.module.css @@ -6,12 +6,17 @@ /* To reproduce complex layout of design doc */ @media (--wide-and-above) { gap: 25px; - grid-template-columns: 0.5fr 0.5fr; grid-template-rows: auto 1fr; grid-template-areas: "monitor avgwait" "queue avgwait"; } + @media (--wide-to-x-wide) { + grid-template-columns: 0.75fr 0.25fr; + } + @media (--x-wide-and-above) { + grid-template-columns: 0.5fr 0.5fr; + } /* To reproduce simple layout of narrow screens like CEPv2 */ @media (--wide-and-below) { row-gap: 25px; From ddc9afabba04fe81419b192bca2278baf1943ce7 Mon Sep 17 00:00:00 2001 From: Wesley Bomar Date: Wed, 6 Sep 2023 09:52:13 -0500 Subject: [PATCH 4/6] 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; -} From 8cec1b89cfcc7f666c90e61d03e62960a1463f2c Mon Sep 17 00:00:00 2001 From: Wesley Bomar Date: Wed, 6 Sep 2023 10:37:15 -0500 Subject: [PATCH 5/6] fix: change mfa panel width at viewport widths --- libs/tup-components/src/mfa/Mfa.module.css | 13 ++++++++++++- 1 file changed, 12 insertions(+), 1 deletion(-) diff --git a/libs/tup-components/src/mfa/Mfa.module.css b/libs/tup-components/src/mfa/Mfa.module.css index 462884951..aec8b3090 100644 --- a/libs/tup-components/src/mfa/Mfa.module.css +++ b/libs/tup-components/src/mfa/Mfa.module.css @@ -8,7 +8,9 @@ } .pairing-container > *:not(.pairing-separator) { - width: 365px; /* FAQ: static width, so .mfa-message is centered */ + /* To let panels easily become equal width so .mfa-message is centered */ + /* FAQ: Using a var makes width easy to change (e.g. in a @media query) */ + width: var(--panel-width, auto); } .pairing-separator { @@ -88,6 +90,15 @@ label.qr-code-alt-label { /* Responsive layout */ +@media screen and (--medium-and-below) { + .pairing-container { --panel-width: 365px; } +} +@media screen and (--medium-to-wide) { + .pairing-container { --panel-width: 330px; } +} +@media screen and (--wide-and-above) { + .pairing-container { --panel-width: 365px; } +} @media screen and (--medium-and-above) { .pairing-container { /* To layout items on one left-aligned row */ From b647f6a74d72b04ec951ef1d91342c1418f78bc5 Mon Sep 17 00:00:00 2001 From: Wesley Bomar Date: Wed, 6 Sep 2023 12:09:17 -0500 Subject: [PATCH 6/6] fix: only put `width: max-content` where needed --- libs/tup-components/src/mfa/Mfa.module.css | 11 ++++++----- 1 file changed, 6 insertions(+), 5 deletions(-) diff --git a/libs/tup-components/src/mfa/Mfa.module.css b/libs/tup-components/src/mfa/Mfa.module.css index aec8b3090..8b7556868 100644 --- a/libs/tup-components/src/mfa/Mfa.module.css +++ b/libs/tup-components/src/mfa/Mfa.module.css @@ -23,11 +23,6 @@ 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 little text still appears beneath input */ display: flex; @@ -126,6 +121,12 @@ label.qr-code-alt-label { padding-bottom: var(--space-below-panel-for-message); } + /* To not let message content stretch wider than necessary */ + /* FAQ: A TextCopyField in a message would stretch as wide as possible */ + .mfa-message { + width: max-content; + } + /* 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 */