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

fix: figure image shrunk if figure was not aligned #120

Merged
merged 4 commits into from
Feb 1, 2023
Merged

fix: figure image shrunk if figure was not aligned #120

merged 4 commits into from
Feb 1, 2023

Conversation

wesleyboar
Copy link
Member

@wesleyboar wesleyboar commented Feb 1, 2023 •
edited
Loading

⚠️ Notice ⚠️

This just pushed the bug under the rug. In a8e4407, I expose the problem for the client to solve. See #120 (comment) for details.

Overview

Problem: Shrink-wrapped figure shrinks image that has max-width: 100%.

Solution: Only apply width: min-content to figure if it is aligned.

Origin: #114 @ src/lib/_imports/elements/html-elements.css line 59

Related

Changes

  • fix: an <img> in a <figure> was shrunk if <figure> was not aligned c30de99
  • feat: @figure partial can give wide and tall images 4ca0897
  • feat: "HTML Elements" demo adds a figure with a variable image width a4c55a0 (and 2f721df)

Testing

  1. Open http://localhost:3000/components/detail/html-elements.
  2. Scroll to the two figures.
  3. Verify neither figures caption wraps at image width.
  4. Verify neither image is shrunk (less than what its markup and styles dictate).

UI

default figures
(no image shrink)		 aligned figures
(unchanged)		 aligned blockquotes
(unchanged)
default figures (no wrap now) aligned figures (unchanged) aligned blockquotes (unchanged)

@wesleyboar
fix: figure image shrunk if figure was not aligned
c30de99 
Problem: Shrink-wrapped figure shrinks image that has `max-width: 100%`.

Solution: Only apply `width: min-content` to figure if it is aligned.
@wesleyboar
feat(_partials): figure, wide and tall images
4ca0897
@wesleyboar
feat(elements): html-elements, variable img width
a4c55a0
@wesleyboar
chore(demo): name html-element's figures
2f721df
@wesleyboar wesleyboar merged commit 8876a8c into main Feb 1, 2023
@wesleyboar wesleyboar deleted the bugfix/figure-image-shrinks-if-figure-not-aligned branch February 1, 2023 01:00
wesleyboar added a commit to TACC/Core-CMS that referenced this pull request Feb 1, 2023
@wesleyboar
fix(core-styles): unaligned figure image shrink
dc0b2be 
H.P. came across this bug twice:
- https://dev.tup.tacc.utexas.edu/partnerships/star-industry-program/
- https://dev.tup.tacc.utexas.edu/use-tacc/visualization-services/

She had to make a fake caption because of the problem.

TACC/Core-Styles#120
wesleyboar added a commit to TACC/tup-ui that referenced this pull request Feb 1, 2023
@wesleyboar
fix(core-styles): unaligned figure image shrink
2c4c2a4 
H.P. came across this bug twice:
- https://dev.tup.tacc.utexas.edu/partnerships/star-industry-program/
- https://dev.tup.tacc.utexas.edu/use-tacc/visualization-services/

She had to make a fake caption because of the problem.

TACC/Core-Styles#120
@wesleyboar
Copy link
Member Author

wesleyboar commented Feb 1, 2023 •
edited
Loading

⚠️ This solves the problem only for unaligned images. But the bug still exists for aligned images. If I set min-content on the parent, then a child with a dynamic width will shrink. In a8e4407, I gave up and just set max-width: 50% for all aligned elements. Let the client (e.g. https://github.com/TACC/Core-CMS, https://github.com/TACC/TACC-Docs) decide how to wrap captions. If any come up with a great generic solution, then add it to https://github.com/TACC/Core-Styles.

Render as of a8e4407

new align render

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Reviewers
No reviews
Assignees
No one assigned
Labels
None yet
Projects
None yet
Milestone
No milestone
Development

Successfully merging this pull request may close these issues.
1 participant
@wesleyboar