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.

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

Make .meter-text nowrap to prevent truncation #4101

Merged
merged 1 commit into from Oct 3, 2014

Conversation

@betaveros
Copy link
Contributor

commented Oct 2, 2014

  • Add white-space: nowrap to .meter-text to prevent the meter text from
    being cut off when the meter is very short and its content is long
    (mainly an issue with the experience bar, which can easily have a bar
    graph symbol plus one four-digit number over another e.g. 1,234 /
    5,678)

Before:
nowrap-before
After:
nowrap-after
Note that these are screenshots of my actual HabitRPG account, the second with CSS modified with Firefox Web Developer; since the problem only appears if one has a very large number of party members, I didn't know how to test it on my local instance without manually making ten test accounts, inviting each to a party, and then manually accepting the invitation from each, which I thought would rather be too much effort for a trivial one-line patch.

Interestingly, the bar actually becomes long enough that the problem goes away if the window is resized to be narrow enough, so this might not be the "right" solution. Still, I don't think there's any harm in preventing the meter text from wrapping anyway.

* Add white-space: nowrap to .meter-text to prevent the meter text from
  being cut off when the meter is very short and its content is long
  (mainly an issue with the experience bar, which can easily have a bar
  graph symbol plus one four-digit number over another e.g. 1,234 /
  5,678)
@paglias

This comment has been minimized.

Copy link
Contributor

commented Oct 2, 2014

@betaveros great! the graph icon seems a little more on the left now

@lefnire lefnire force-pushed the HabitRPG:develop branch from b51392f to ead42e7 Oct 2, 2014
@betaveros

This comment has been minimized.

Copy link
Contributor Author

commented Oct 2, 2014

Yes, now the graph icon is partially cut off. But it's only a little bit and there's enough of it left to be recognizable and clickable, so I thought it was better than the original result. The ideal fix might be something like dynamically changing letter-spacing when the meter text doesn't fit, but detecting that seems really messy.

(edit: Or we could make the meter's minimum width larger, of course.)

@betaveros

This comment has been minimized.

Copy link
Contributor Author

commented Oct 3, 2014

Upon closer examination, I realized that the width difference is caused by the padding of .hero-stats, which changes on small screens, whereas the min-width doesn't. Since the width is pushed down to min-width on either screen when one has many team members, maybe the more appropriate fix involves this? Maybe widen .hero-stats min-width and move the original min-width:175px value to under @media screen and (max-width:768px)? Unfortunately doing this in a way that perfectly preserves the width left for the meter involves adding ems to pixels, so I'm not sure what the result ought to be. (Sorry, now I think I should have filed an issue first.)

.hero-stats
  padding: 1.1em 1em 0
  ...
  min-width:175px
  @media screen and (max-width:768px)
    padding: 1.1em 0.618em 0
paglias added a commit that referenced this pull request Oct 3, 2014
Make .meter-text nowrap to prevent truncation
@paglias paglias merged commit 64b19ed into HabitRPG:develop Oct 3, 2014
1 check passed
1 check passed
continuous-integration/travis-ci The Travis CI build passed
Details
@paglias

This comment has been minimized.

Copy link
Contributor

commented Oct 3, 2014

@betaveros I'm going to merge this anyway, the few pixels difference now are much less important than the fix. What's your UUID so I can award you a badge? Thanks again :) 👍

@betaveros

This comment has been minimized.

Copy link
Contributor Author

commented Oct 3, 2014

f4c81087-58db-4b55-a8b4-f8ee29f7e0bd

Woo, thanks a ton!

@paglias

This comment has been minimized.

Copy link
Contributor

commented Oct 3, 2014

@betaveros awarded :)

@betaveros betaveros deleted the betaveros:betaveros/meter-text-nowrap branch Oct 14, 2014
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Projects
None yet
2 participants
You can’t perform that action at this time.