-
Notifications
You must be signed in to change notification settings - Fork 22
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
Visualize Item Floats in a Floatbar (Market + Inventory) #274
Conversation
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Thanks @GODrums, looks great!
Left a few code-style comments, nits are optional. The tooltip with details such as min/max float would be cool, but it'd probably a decent amount of work to make a re-usable tooltip system -- your choice whether you want to implement that in a follow up!
Co-authored-by: Step7750 <[email protected]>
Motivation
Floats can be a pretty confusing concept at first glance. To illustrate the basics of low/high-floats, we want to introduce a float-bar, which visualizes an item's float according to all possible values in a colored bar.
Solves #9.
Description
This PR contains a new float-bar component:
FloatBar
(LitElement) inspired by the floatbar on the CSFloat website:<float-bar></float-bar>
0.8
to adjust color-spectrum to Steam's "dark theme"FloatBar
to inventory-pageFloatBar
to market-page and limits its width in a responsive mannerPossible follow-ups:
Screenshots
Floatbar in the inventory:



Floatbar on the market:
Floatbar on the market (mobile):