Skip to content
New issue

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

#

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

Already on GitHub? # 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
Loading

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
# for free to join this conversation on GitHub. Already have an account? # 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.
2 participants
@wesleyboar @R-Tomas-Gonzalez