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

docs.coala.io: Header's aspect ratio not consistent (in mobile browsers) #299

Open
shashank-b opened this issue Jan 9, 2019 · 6 comments · May be fixed by coala/documentation#592
Open

docs.coala.io: Header's aspect ratio not consistent (in mobile browsers) #299

shashank-b opened this issue Jan 9, 2019 · 6 comments · May be fixed by coala/documentation#592
Assignees
@Anmolbansal1
Labels
area/documentation difficulty/newcomer type/bug

Comments

@shashank-b
Copy link
Member

Overview Description

The coala header in https://docs.coala.io/en/latest/ gets scaled only horizontally when viewed using mobile browsers leading to a distortion of the logo. It would be better if the consistency of the logo is maintained, else the koala bear starts looking like a starved chipmunk 😄

Steps to Reproduce

  1. Open https://docs.coala.io/en/latest/ in any mobile web browser (portrait mode)

Actual Results

Header distortion

Expected Results

If the image scales while preserving aspect ratio and is aligned to the center or to the left, the logo would remain round.
@shashank-b shashank-b mentioned this issue Jan 10, 2019
Open
@shashank-b
Copy link
Member Author

Something like this could also be done (source: webservices.coala.io on a mobile browser):
Good Header

@Anmolbansal1
Copy link

Sir can I work on this issue.

@shashank-b
Copy link
Member Author

Hi @Anmolbansal1. Please go through the Newcomers' Guide, read it, get an invite and then a maintainer would assign you the issue. And please don't call anyone Sir/Ma'am at coala 🙂.

@Anmolbansal1
Copy link

I have gone through Newcomers' Guide and want to work on this issue for my newcomer pr. I have sent Hello World to the gitter channel but hadn't received invitation mail yet.

@Anmolbansal1 Anmolbansal1 linked a pull request Jan 15, 2019 that will close this issue
Open
2 tasks
@Anmolbansal1
Copy link

@shashank-b @li-boxuan please review my pr related to this issue.

Anmolbansal1 added a commit to Anmolbansal1/documentation that referenced this issue Jan 28, 2019
@Anmolbansal1
index.rst: Display header according to logo.html
35c9aa2 
logo.html: Display header according to screen width

Now bear-header is rendered according to screen-width.

Closes coala/landing-frontend#299
Anmolbansal1 added a commit to Anmolbansal1/documentation that referenced this issue Feb 1, 2019
@Anmolbansal1
index.rst: Display header according to logo.html
e2e3293 
logo.html: Display header according to screen width

Now bear-header is rendered according to screen-width.

Closes coala/landing-frontend#299
Anmolbansal1 added a commit to Anmolbansal1/documentation that referenced this issue Feb 1, 2019
@Anmolbansal1
index.rst: Display header according to logo.html
c594df2 
logo.html: Display header according to screen width

Now bear-header is rendered according to screen-width.

Closes coala/landing-frontend#299
Anmolbansal1 added a commit to Anmolbansal1/documentation that referenced this issue Feb 1, 2019
@Anmolbansal1
index.rst: Display header according to logo.html
e5597d8 
logo.html: Display header according to screen width

Now bear-header is rendered according to screen-width.

Closes coala/landing-frontend#299
@sangamcse
Copy link
Member

As per the last discussion that I remember (Don't remember which channel or issue), the idea was to create an SVG version of coala-header and sync it with the repo which is using PNG version of coala-header. I have already added the SVG version of coala-header.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees

@Anmolbansal1 Anmolbansal1

Labels
area/documentation difficulty/newcomer type/bug
Milestone
No milestone
Development

Successfully merging a pull request may close this issue.

logo.html: Make header icon responsive Anmolbansal1/documentation
4 participants
@jayvdb @shashank-b @sangamcse @Anmolbansal1