fix: tup-615 inconsistent header spacing - left & vertical #339

wesleyboar · 2023-10-10T21:06:44Z

Overview

Make header spacing consistent.

Changes

Testing

Open all sections.
Verify all header text has the same space before and above.
Verify, in Dashboard section, on large window (or with small text):
- no excess space above "Dashboard" header text
- no excess space between "Active Projects" and "My Tickets" table

UI

dashboard layout

The cut-off System Status "Running Jobs" is caused by #312, not this.

Designers do not intend nor like big gap. It's been around since Portal. But it's been so difficult to fix… until `project-ticket-grid` came. I hadn't noticed the fix was possible until just now.

* feat: tup-619 c-content block migration * removed content-block import

* migrated c-update to core-styles * removed c-update import

* feat: tup-624: added generics/attributes to demo * migrated rest of attributes.css to core-styles * removed unnecessary comments in css file for c-button

* getting rid of django.cms.blog.app.item.css * removing the import for django.cms.blog.app.item.css

Co-authored-by: Wesley Bomar <[email protected]>

WARNING: v2.17.3 causes login form field bug.

No need for u-highlight per jira ticket Co-authored-by: Wesley B <[email protected]>

Co-authored-by: Wesley Bomar <[email protected]>

* I believe this has already been merged into core-styles... Padding and Margin seem to be available on prod * remove import of core-styles o-heading-steps.css

* feat/tup-633: Migrate lightgallery to core-cms * delete unnecessary import of django.cms.picture.css

WARNING: Introduces login form field width bug. (Core-Styles v2.17.3 might be the cause.)

R-Tomas-Gonzalez

Question on headers and consistency. I noticed that some headers have nested headers, and some do not. The headers that are not nested, seem to have padding-right, due to being within articles. The headers that are nested, span the whole width of the page. Right padding may not matter. But thought I'd mention it.
Here are the examples:

R-Tomas-Gonzalez · 2023-11-14T17:29:15Z

Note:

All look good to me

wesleyboar · 2023-11-14T17:33:24Z

Hm, thanks @R-Tomas-Gonzalez for #339 (review).

I did not pay attention to the right side of the headers…

I'll check this, and how #335 interacts with it.

wesleyboar · 2023-11-14T21:43:16Z

@R-Tomas-Gonzalez What do you think consistent space on the right being handled in a new ticket instead of this one?

My reasoning…

original ticket was focused on left and vertical
this PR seems to be a valid fix for left and vertical
i think it may be easier to tackle right-hand side in isolation
i think it will be easier to tackle right-hand side after merges of existing PRs

R-Tomas-Gonzalez · 2023-11-14T21:47:58Z

@R-Tomas-Gonzalez What do you think consistent space on the right being handled in a new ticket instead of this one?

My reasoning…

original ticket was focused on left and vertical

this PR seems to be a valid fix for left and vertical

i think it may be easier to tackle right-hand side in isolation

i think it will be easier to tackle right-hand side after merges of existing PRs

I agree. 👍 :)

R-Tomas-Gonzalez · 2023-11-14T21:50:26Z

Will approve when conflicts are resolved.

wesleyboar · 2023-11-14T21:57:24Z

New ticket.

TUP-651: Consistent Spacing on Right for Section Headers

jarosenb

Approving now that long project lists no longer overflow the column.

wesleyboar · 2023-11-14T22:45:43Z

Warning
Do not merge. Diff has accidental merge of CSS migration via 0e222ee.

…onsistency" This reverts commit 0e222ee, reversing changes made to d6215e3.

wesleyboar · 2023-11-14T22:56:29Z

Important
Safe to merge. Problem resolved. I reverted 0e222ee via f6b7bd5. Retested. Re-reviewed diff.

This was fixed by #369, which is merged in here via main. But #369 only worked because it was tested at zoom of maybe 90%. When tested (in PR #339) at zoom 100%, cut off still happens. So, I'm jsut gonna tweak ratio slightly to avoid cut off.

wesleyboar · 2023-11-14T23:07:37Z

apps/tup-ui/src/pages/Dashboard/Dashboard.module.css

-    grid-template-columns: 0.65fr 0.35fr;
+    grid-template-columns: 0.6fr 0.4fr;


This performs #369 again (see 16c2c0c), but is tested at 100% zoom.¹

Footnotes

Seems I had tested Fix/tup 598 running jobs cut off #369 at 90% zoom. 🫤 ↩

wesleyboar added 2 commits October 10, 2023 16:05

feat: tup-615 small header buttons (#338)

c0d1ff5

feat: tup-615 my account header (#340)

5b00457

wesleyboar changed the title ~~feat: tup-615 small header buttons (#338)~~ fix: tup-615 inconsistent header spacing Oct 10, 2023

wesleyboar and others added 3 commits October 10, 2023 16:19

fix: inconsistent header spacing (#341)

34a7322

fix: tup-615 flexible space above dashboard header (#342)

25e10b9

fix: project ticket grid too much middle space

f027640

Designers do not intend nor like big gap. It's been around since Portal. But it's been so difficult to fix… until `project-ticket-grid` came. I hadn't noticed the fix was possible until just now.

wesleyboar marked this pull request as ready for review October 10, 2023 21:47

wesleyboar and others added 23 commits October 11, 2023 16:41

docs: more css thoughts in comment

af717a0

docs: more css thoughts in comment

6616d03

feat: tup-619 c-content block migration (#346)

d65bbf2

* feat: tup-619 c-content block migration * removed content-block import

feat: tup-623 c-update migration (#348)

fd34bdc

* migrated c-update to core-styles * removed c-update import

feat: tup-624: added generics/attributes to demo (#345)

65d0e0d

* feat: tup-624: added generics/attributes to demo * migrated rest of attributes.css to core-styles * removed unnecessary comments in css file for c-button

feat/tup-625: Migrate o-heading-steps to core-styles (#349)

9e90907

feat/tup-630: Migrate django.cms.blog.app.item (#351)

caf95c0

* getting rid of django.cms.blog.app.item.css * removing the import for django.cms.blog.app.item.css

Merge branch 'main' into feat/tup-463

b2d9f2b

feat/tup-632: Migrate django.cms.picture.css to core-cms (#355)

fcd4dc4

Merge branch 'main' into feat/tup-463

73d673c

Migrate c-card fixes to core-styles (#361)

a087d26

Co-authored-by: Wesley Bomar <[email protected]>

Merge branch 'main' into fix/tup-615-header-spacing-consistency

65a8e8e

Migrated header to Core-Styles (#359)

fcb4a3e

Co-authored-by: Wesley Bomar <[email protected]>

fix: tup-617 c-button font-weight redunant style (#364)

23b6fd8

feat(tup-cms): core-cms with core-styles v2.19

88c0da4

Merge branch 'main' into feat/tup-463

23dd0d9

chore: lowercase comment

c7e5cd4

feat(tup-cms)!: core-cms with core-styles v2.19

65c88a9

WARNING: v2.17.3 causes login form field bug.

feat/tup-634: Migrate pseudo-elements to core-cms (#358)

aca968f

feat/tup-625: delete u-highlight stylesheet (#352)

457c6c9

No need for u-highlight per jira ticket Co-authored-by: Wesley B <[email protected]>

Migrate card list support to core-styles (#360)

7da8bbb

Co-authored-by: Wesley Bomar <[email protected]>

feat/tup-626: delete o-section from tup-ui (#353)

a67b340

* I believe this has already been merged into core-styles... Padding and Margin seem to be available on prod * remove import of core-styles o-heading-steps.css

feat/tup-633: Migrate lightgallery to core-cms (#357)

474edaf

* feat/tup-633: Migrate lightgallery to core-cms * delete unnecessary import of django.cms.picture.css

wesleyboar added 3 commits November 13, 2023 11:12

feat(tup-cms): core-cms with core-styles v2.20

1b0dd28

WARNING: Introduces login form field width bug. (Core-Styles v2.17.3 might be the cause.)

Merge branch 'feat/tup-463' of github.com:TACC/tup-ui into feat/tup-463

0e84c10

feat(tup-ui): core-styles v2.20

3167014

R-Tomas-Gonzalez self-requested a review November 14, 2023 16:52

Merge branch 'main' into fix/tup-615-header-spacing-consistency

d6215e3

R-Tomas-Gonzalez reviewed Nov 14, 2023

View reviewed changes

Merge branch 'feat/tup-463' into fix/tup-615-header-spacing-consistency

0e222ee

This was referenced Nov 14, 2023

feat: tup-612 isNestedHeader prop in <SectionHeader> #335

Merged

feat: add link in Dashboard to "View all tickets"layout — fixed header #331

Merged

Merge branch 'main' into fix/tup-615-header-spacing-consistency

960597a

wesleyboar changed the title ~~fix: tup-615 inconsistent header spacing~~ fix: tup-615 inconsistent header spacing - left & vertical Nov 14, 2023

Merge branch 'main' into fix/tup-615-header-spacing-consistency

c714a54

R-Tomas-Gonzalez approved these changes Nov 14, 2023

View reviewed changes

jarosenb approved these changes Nov 14, 2023

View reviewed changes

wesleyboar marked this pull request as draft November 14, 2023 22:45

Revert "Merge branch 'feat/tup-463' into fix/tup-615-header-spacing-c…

f6b7bd5

…onsistency" This reverts commit 0e222ee, reversing changes made to d6215e3.

wesleyboar marked this pull request as ready for review November 14, 2023 22:56

fix: tup-598 sysmon horz. cut off

16c2c0c

This was fixed by #369, which is merged in here via main. But #369 only worked because it was tested at zoom of maybe 90%. When tested (in PR #339) at zoom 100%, cut off still happens. So, I'm jsut gonna tweak ratio slightly to avoid cut off.

wesleyboar commented Nov 14, 2023

View reviewed changes

wesleyboar mentioned this pull request Nov 14, 2023

Fix/tup 598 running jobs cut off #369

Merged

wesleyboar merged commit 5b0a2b6 into main Nov 14, 2023
1 check passed

wesleyboar deleted the fix/tup-615-header-spacing-consistency branch November 14, 2023 23:11

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

fix: tup-615 inconsistent header spacing - left & vertical #339

fix: tup-615 inconsistent header spacing - left & vertical #339

wesleyboar commented Oct 10, 2023 •

edited

Loading

R-Tomas-Gonzalez left a comment

R-Tomas-Gonzalez commented Nov 14, 2023

wesleyboar commented Nov 14, 2023

wesleyboar commented Nov 14, 2023

R-Tomas-Gonzalez commented Nov 14, 2023

R-Tomas-Gonzalez commented Nov 14, 2023

wesleyboar commented Nov 14, 2023 •

edited

Loading

jarosenb left a comment

wesleyboar commented Nov 14, 2023 •

edited

Loading

wesleyboar commented Nov 14, 2023

wesleyboar Nov 14, 2023 •

edited

Loading

		grid-template-columns: 0.65fr 0.35fr;
		grid-template-columns: 0.6fr 0.4fr;

fix: tup-615 inconsistent header spacing - left & vertical #339

fix: tup-615 inconsistent header spacing - left & vertical #339

Conversation

wesleyboar commented Oct 10, 2023 • edited Loading

Overview

Related

Changes

Testing

UI

R-Tomas-Gonzalez left a comment

Choose a reason for hiding this comment

R-Tomas-Gonzalez commented Nov 14, 2023

wesleyboar commented Nov 14, 2023

wesleyboar commented Nov 14, 2023

R-Tomas-Gonzalez commented Nov 14, 2023

R-Tomas-Gonzalez commented Nov 14, 2023

wesleyboar commented Nov 14, 2023 • edited Loading

jarosenb left a comment

Choose a reason for hiding this comment

wesleyboar commented Nov 14, 2023 • edited Loading

wesleyboar commented Nov 14, 2023

wesleyboar Nov 14, 2023 • edited Loading

Choose a reason for hiding this comment

Footnotes

wesleyboar commented Oct 10, 2023 •

edited

Loading

wesleyboar commented Nov 14, 2023 •

edited

Loading

wesleyboar commented Nov 14, 2023 •

edited

Loading

wesleyboar Nov 14, 2023 •

edited

Loading