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

Squished WAIL icon on loading screen #81

Open
machawk1 opened this issue May 16, 2017 · 6 comments
Open

Squished WAIL icon on loading screen #81

machawk1 opened this issue May 16, 2017 · 6 comments

Comments

@machawk1
Copy link

machawk1 commented May 16, 2017

When loading, the WAIL icon has a pointier nose/head. Is the icon being dimensionally squeezed?
screen shot 2017-05-16 at 3 22 18 pm

@N0taN3rd
Copy link
Owner

@machawk1 I use a circle effect to ensure the icon does not make the header portion too large

@machawk1
Copy link
Author

That explains the pointiness, @N0taN3rd . Is there any way to prevent the clipping? How would the icon being square cause the header portion to be any larger?

@N0taN3rd
Copy link
Owner

@machawk1 the icon is displayed via material-ui/Avatar and internally they apply

root: {
      color: color || avatar.color,
      backgroundColor: backgroundColor || avatar.backgroundColor,
      userSelect: 'none',
      display: 'inline-flex',
      alignItems: 'center',
      justifyContent: 'center',
      fontSize: size / 2,
      borderRadius: '50%',
      height: size,
      width: size
 },
icon: {
      color: color || avatar.color,
      width: size * 0.6,
      height: size * 0.6,
      fontSize: size * 0.6,
      margin: size * 0.2   
 }

Which maybe causing the clipping.

How would the icon being square cause the header portion to be any larger?
Previous versions of Material-UI when the image displayed was largish and you did not supply styling the original width/height was used.
So I used the circle effect to contain the icon as I was using the 256 sized icon to ensure that on high dpi screens (macs retina screens etc) the icon would look sharp.

@machawk1
Copy link
Author

@N0taN3rd Can you customize the Avatar lib to not use a border-radius? It's good that you accounted for high-res screens but on those screen it will be both crisp and clipped. ;)

@N0taN3rd
Copy link
Owner

@machawk1 I do believe I can easily since the material-ui library has matured from the time I created the component for the header and displaying the icon. But if not css tweaking will probably do the trick.

@machawk1
Copy link
Author

Still present in 1.2.0-beta. 😕

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests

2 participants