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

refactor: more icon alignment #293

Merged
merged 6 commits into from
Jan 10, 2024
Merged

refactor: more icon alignment #293

merged 6 commits into from
Jan 10, 2024

Conversation

wesleyboar
Copy link
Member

@wesleyboar wesleyboar commented Jan 8, 2024 •
edited

Overview

Align icons inside all card links and all buttons using similar styles.

Credit to @R-Tomas-Gonzalez for the effort this builds upon.

Related

Changes

  • changed parent buttons and links to use display: inline-flex
  • changed set display for all links in cards (not just :only-child's)
  • changed child icon to use b46b218 alignment
  • fixed missing space between two icon links in a paragraph

Testing

  1. Verify alignment of icon in a link in a card is good:
    • when link is not in a <p> tag
    • when link is in a <p> tag
  2. Verify alignment of icon in a button in a card is good:
    • when link is not in a <p> tag
    • when link is in a <p> tag
  3. Verify alignment of icon in a button anywhere is good:
    • when link is not in a <p> tag
    • when link is in a <p> tag

Note

Making alignment of icon in a link anywhere is tempting. But I fear doing so would paint me into a corner. From TACC designers, I've never seen unique icon alignment in buttons, but I have seen unique icon alignment in links.

UI

Before After
in a p tag BEFORE - in a P tag AFTER - in a P tag
not in a p tag BEFORE - sans P tag AFTER - sans P tag

Fix Links Too Close Together

wide card narrow card
space between p a links, wide card space between p a links, narrow card

@github-actions github-actions bot added the refactor Re-writes/structures code but retains behavior label Jan 8, 2024
@wesleyboar wesleyboar changed the title Refactor/polish icon alignment refactor: polish icon alignment Jan 8, 2024
wesleyboar added a commit that referenced this pull request Jan 8, 2024
@wesleyboar
fix: revert code change that is for #293
8411892
@wesleyboar wesleyboar added the patch A backward-compatible fix label Jan 8, 2024
@wesleyboar wesleyboar marked this pull request as ready for review January 8, 2024 22:55
@wesleyboar wesleyboar changed the title refactor: polish icon alignment refactor: more icon alignment Jan 8, 2024
R-Tomas-Gonzalez
R-Tomas-Gonzalez approved these changes Jan 9, 2024
View reviewed changes
Copy link
Collaborator

@R-Tomas-Gonzalez R-Tomas-Gonzalez left a comment

Choose a reason for hiding this comment

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

I think this looks great, I'm approving this with a suggestion.

Two a tags next to each other look a little crowded. Might be good to space apart.
Screenshot 2024-01-09 at 11 39 05 AM

Screenshot 2024-01-09 at 11 40 59 AM

@wesleyboar wesleyboar merged commit 99a6f66 into main Jan 10, 2024
@wesleyboar wesleyboar deleted the refactor/polish-icon-alignment branch January 10, 2024 18:30
wesleyboar added a commit that referenced this pull request Jan 10, 2024
@wesleyboar
fix: publish contact card styles (#294)
2fe4867 
* fix: isolate contact card styles

* fix: revert code change that is for #293

* fix: contact card wider than its image
@wesleyboar wesleyboar mentioned this pull request Jan 18, 2024
Merged
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Reviewers

@R-Tomas-Gonzalez R-Tomas-Gonzalez R-Tomas-Gonzalez approved these changes

Assignees
No one assigned
Labels
patch A backward-compatible fix refactor Re-writes/structures code but retains behavior
Projects
None yet
Milestone
No milestone
Development

Successfully merging this pull request may close these issues.

None yet
2 participants
@wesleyboar @R-Tomas-Gonzalez