Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

feat: tup-490 increase portal font-size #312

Merged
merged 6 commits into from
Sep 13, 2023
Merged

feat: tup-490 increase portal font-size #312

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
6 commits
Select commit Hold shift + click to select a range
e5b3d74
feat: increase portal font-size
wesleyboar Sep 5, 2023
2aa44f3
fix: do NOT increase user news font-size
wesleyboar Sep 5, 2023
228c1ac
fix: system status should not have horz. scrollbar
wesleyboar Sep 5, 2023
ddc9afa
fix: un-pairing ui not responsive
wesleyboar Sep 6, 2023
8cec1b8
fix: change mfa panel width at viewport widths
wesleyboar Sep 6, 2023
b647f6a
fix: only put `width: max-content` where needed
wesleyboar Sep 6, 2023
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
17 changes: 17 additions & 0 deletions .../src/taccsite_custom/tup_cms/static/tup_cms/css/for-core-styles/settings/font--portal.css
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -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 <body> uses `--global-font-size--small` (is now 1.4rem)
- tup-cms <body> uses `--global-font-size--medium` (has been 1.4rem)
- tacc-docs <body> 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;
}
2 changes: 1 addition & 1 deletion apps/tup-cms/src/taccsite_custom/tup_cms/static/tup_cms/css/tup-cms.for-core-styles.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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);
Expand Down
94 changes: 79 additions & 15 deletions libs/tup-components/src/mfa/Mfa.module.css
View file
Open in desktop
Copy link
Member Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

This prevents horizontal scrollbar on MFA section.

This complex fix is isolated in #315, but required here.

Original file line number Diff line number Diff line change
Expand Up @@ -2,13 +2,15 @@

/* 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) {
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 {
Expand All @@ -22,7 +24,7 @@
}

.field-error {
/* so message with very littel text still appears beneath input */
/* So message with very little text still appears beneath input */
display: flex;
}

Expand Down Expand Up @@ -59,17 +61,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';
Expand All @@ -90,3 +81,76 @@ label.qr-code-alt-label {
.mfa-success-container button {
margin-top: 30px; /* match .mfa-type-selection */
}



/* 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 */
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);
}

/* 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 */
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;
}
}
4 changes: 3 additions & 1 deletion libs/tup-components/src/news/UserNews.module.css
View file
Open in desktop
Copy link
Member Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

These changes keeps User News font sizes the same.

Original file line number Diff line number Diff line change
@@ -1,5 +1,5 @@
.news-list {
font-size: var(--global-font-size--small);
font-size: var(--global-font-size--x-small);
}

.news-list-item {
Expand Down Expand Up @@ -39,6 +39,8 @@

margin-top: 10px;
margin-bottom: 5px;

font-size: var(--global-font-size--small);
}

.news-error {
Expand Down
7 changes: 6 additions & 1 deletion libs/tup-components/src/system-status/details/SystemDetails.module.css
View file
Open in desktop
Copy link
Member Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

This prevents horizontal scrollbar on System Status section.

Original file line number Diff line number Diff line change
Expand Up @@ -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;
Expand Down
75 changes: 2 additions & 73 deletions libs/tup-components/styles/c-step-panels.css
View file
Open in desktop
Copy link
Member Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

This prevents horizontal scrollbar on MFA section.

This complex fix is isolated in #315, but required here.

Original file line number Diff line number Diff line change
Expand Up @@ -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);
}





Expand All @@ -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;
}