runatlantis / atlantis

Terraform Pull Request Automation
https://www.runatlantis.io
Other
7.68k stars 1.05k forks source link

Use larger icon on home page #769

Open Nuru opened 5 years ago

Nuru commented 5 years ago

There is a nice big icon in the repo. Let us use it (maybe scaled down a bit) on the home/index page instead of the puny 64x56 pixel icon currently being used. https://github.com/runatlantis/atlantis/blob/2f5bdd69351dc4e0ab7e16b99bb5f1c2d4b2bb08/server/web_templates.go#L76

The project homepage uses a 240x240 image, maybe that is a better choice, but please, for the hero (and only) image on the server index page, let's use something nicer than what we are currently using.

lkysow commented 5 years ago

Hi Nuru, can you explain why you want a bigger icon there? The idea was for it to be a logo image like on most sites.

image

Like GitHub:

image

Nuru commented 5 years ago

@lkysow Nothing about the page layout suggests the logo is meant to be an unobtrusive logo in the top left corner like the GitHub image you posted. The image is in the "hero image" location top center with lots of white space around it, and when there are no locks it looks particularly lame.


image


Compare to runatlantis.io:


image


If you want to change the page layout so that the icon and title are at the top left edge of the page, like on GitHub or like the menu bar on runatlantis.io that would be another option, but there is so little content on the page that I think a hero image is a better choice.

Of course it is subjective, but on a big screen (not a phone), I think this looks better:


image


and by reducing the margin above the image from 10rem to 4vw, it stays responsive but has a lot less white space while not taking up much, if any, extra vertical height.

lkysow commented 5 years ago

Yeah without locks it doesn't look good but most users will have a lot of locks. I don't think we should take up more space with the image since unlike the runatlantis home page this page is meant to be functional.

On Wed, Sep 11, 2019, 2:46 AM Nuru notifications@github.com wrote:

@lkysow https://github.com/lkysow Nothing about the page layout suggests the logo is meant to be an unobtrusive logo in the top left corner like the GitHub image you posted. The image is in the "hero image" location top center with lots of white space around it, and when there are no locks it looks particularly lame.

[image: image] https://user-images.githubusercontent.com/2793313/64686762-0a74d300-d43e-11e9-971c-50775035ab7e.png Compare to runatlantis.io https://www.runatlantis.io/ [image: image] https://user-images.githubusercontent.com/2793313/64686857-398b4480-d43e-11e9-9377-1eafa533606a.png

— You are receiving this because you were mentioned. Reply to this email directly, view it on GitHub https://github.com/runatlantis/atlantis/issues/769?email_source=notifications&email_token=AAH4RPIKABWCUDXONZ57G6DQJC47LA5CNFSM4IURK2U2YY3PNVWWK3TUL52HS4DFVREXG43VMVBW63LNMVXHJKTDN5WW2ZLOORPWSZGOD6N5PRA#issuecomment-530307012, or mute the thread https://github.com/notifications/unsubscribe-auth/AAH4RPP433UA7FV6SH6TLR3QJC47LANCNFSM4IURK2UQ .

Nuru commented 5 years ago

Yeah without locks it doesn't look good but most users will have a lot of locks. I don't think we should take up more space with the image since unlike the runatlantis home page this page is meant to be functional.

I'm not suggesting we use the full height of the 512 pixel icon, but scaling down the big icon looks better than scaling up the little one, and the little one is too small for the layout. On my screen there are 100 pixels of white space above an icon 56 pixels high. You could make this 44 pixels of whitespace with an image 112 pixels high and have an image twice the size without taking up any more information-bearing space. I think it is odd and unattractive that the icon is smaller than the margin above it.

lkysow commented 5 years ago

Okay, submit a PR and lets see how it looks.

This is what the UI looks like for me when I have locks: image

Nuru commented 5 years ago

Okay, submit a PR and lets see how it looks.

@lkysow #783 is the PR you requested