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

Jump to bottom

chore:updating styles #27798

Merged
merged 1 commit into from
Sep 13, 2023
Merged

chore:updating styles #27798

merged 1 commit into from
Sep 13, 2023

Conversation

warrensplayer
Copy link
Contributor

Taking a pass at making the RunCard data more visible at wider breakpoints

  • Being consistent when using flex to rely on gap versus having to make sure each child has the correct margin on the correct side
  • Adding min-w-0 to some flex children to allow them to shrink if needed
  • Allowing branch tag to be as wide as needed but truncating if there is not enough space
  • Moved max widths out of RunTag to allow it to be more flexible. Applied them as an attribute on an instance of the component when needed
  • Increased width of created-at div at largest breakpoint to allow it to show the entire string for almost all times and duration
  • Updated style for RunNumber component when used as an external link. Best approach would be to move the ExternalLink into the component and conditionally render it depending on its usage, but did not do that refactor. The issue is with fighting default styles on the a tag rendered by the ExternalLink component and the internal styles of the RunNumber component. Made use of the group utility class in Tailwind
  • Removed "fade-out` from RunResults and removed the max-width. With the original implementation, there was always a "fade-out" shown, even when the entire text was visible. The times when the number values will be so large and the viewport so small to cause overflow are very minimal. Not worth the trade off.
  • Refactored RunCard test.
    • Added more examples of various states of data in the first loop of tests. It could use more examples to show off more permutations of data.
    • Changed the wrapping styles to make the component more visible
  • Added to the RunNumber test to assert component was visible when rendered and that hover styles were applied when appropriate

@warrensplayer warrensplayer mentioned this pull request Sep 13, 2023
Merged
1 task
@dkasper-was-taken dkasper-was-taken merged commit 4764a91 into dkasper/app/runs-page-visuals Sep 13, 2023
4 of 6 checks passed
@dkasper-was-taken dkasper-was-taken deleted the stokes/runcard_style_updates branch September 13, 2023 17:38
dkasper-was-taken added a commit that referenced this pull request Sep 14, 2023
@dkasper-was-taken @warrensplayer
feat(app): Update Runs page visuals to new layout and card design (#2…
0e239bf 
…7770)

* basic card visuals, working on click

* visual tweaks and i18n

* match other i18n

* redo duration format, should make common too

* basic debug, needs validation of relevant run

* refactor and move files

* working top level state

* working grouping, needs subcomponent

* switch click target

* remove dayjs change

* fix current commit

* revise commit for message

* working view runs button

* fix type check

* fix tests

* fix integration tests

* remove old test

* add layout

* add component test for new layout and cleanup

* add count check

* standardize cy tags

* revise count test

* fix typos

* fix padding

* start wrapping

* happy wrap, next trunc

* responsive if wonky

* clean up and titles

* magic resize, needs tests per breakpoint

* standardize the rollup

* working default rollup

* rollup spacing tweaks

* center elements

* update tests for multiple viewports

* add missing breakpoint tests

* fix debug tests for status and badge

* remove unneeded check

* add functional component

* fix check_ts

* update container test

* add changelog

* add tooltip, needs aria label and external link update

* fix overflow

* fix avatar and add aria label to count summary

* change to external href

* remove popup sizing

* add tests

* add missing data cy

* fix runcard test

* Truncate result count

* make truncate style conditional

* match design truncate position

* adddress PR comments

* chore:updating styles (#27798)

* add tooltip content tests and skeletons

* clean up tooltip validation

* fix runs selector

* Update packages/app/src/runs/RunsSkeletonRow.vue

Co-authored-by: Stokes Player <[email protected]>

* Update packages/app/src/runs/RunTagCount.vue

Co-authored-by: Stokes Player <[email protected]>

* Update packages/app/src/runs/RunsSkeleton.vue

Co-authored-by: Stokes Player <[email protected]>

* Update packages/app/src/runs/RunTagCount.vue

Co-authored-by: Stokes Player <[email protected]>

* Update packages/app/src/runs/RunsSkeleton.vue

Co-authored-by: Stokes Player <[email protected]>

* Update packages/app/src/runs/RunsSkeletonRow.vue

Co-authored-by: Stokes Player <[email protected]>

* Update packages/app/src/runs/RunTagCount.vue

Co-authored-by: Stokes Player <[email protected]>

* Update packages/app/src/runs/RunTagCount.vue

Co-authored-by: Stokes Player <[email protected]>

* remove redundant shrink-1s

* more shrinks

---------

Co-authored-by: Stokes Player <[email protected]>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Reviewers

@dkasper-was-taken dkasper-was-taken Awaiting requested review from dkasper-was-taken

Assignees
No one assigned
Labels
None yet
Projects
None yet
Milestone
No milestone
Development

Successfully merging this pull request may close these issues.
2 participants
@warrensplayer @dkasper-was-taken