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

Site header redesign #6567

Merged
merged 6 commits into from Nov 19, 2017

Conversation

Projects
None yet
3 participants
@ashmaroli
Member

ashmaroli commented Nov 19, 2017

  • render site header at full-width using Flexbox
  • use site color scheme for search input

Desktop resolution sample

localhost_4000_docs_home_

Sample at 800px viewport-width

localhost_4000_docs_home_800px

Sample at 480px viewport-width

localhost_4000_docs_home_ 480px

Site header redesign
  - render site header at full-width using Flexbox
  - use site color scheme for search input

@ashmaroli ashmaroli added the site label Nov 19, 2017

@ashmaroli ashmaroli requested a review from DirtyF Nov 19, 2017

@DirtyF

This comment has been minimized.

Show comment
Hide comment
@DirtyF

DirtyF Nov 19, 2017

Member

Nicely done. 👏

On full width on desktop we could:

  • add jekyll latest version and get GitHub link out of the main navigation (it's an external link).
  • increase search font-size a bit so that input height equals current navigation item.

jekyll-header

Now that we use flexbox, I'd like to also display search for lower resolutions and get a full width search on mobile.

Member

DirtyF commented Nov 19, 2017

Nicely done. 👏

On full width on desktop we could:

  • add jekyll latest version and get GitHub link out of the main navigation (it's an external link).
  • increase search font-size a bit so that input height equals current navigation item.

jekyll-header

Now that we use flexbox, I'd like to also display search for lower resolutions and get a full width search on mobile.

@ashmaroli

This comment has been minimized.

Show comment
Hide comment
@ashmaroli

ashmaroli Nov 19, 2017

Member

Regarding the version, would it be static or dynamic via {{ jekyll.version }}? And if its dynamic, would the site show the version on master or the one on github-pages?

with this, search has been opened up for 800px wide and above.. was planning to raise the accessibility in future PRs..

Member

ashmaroli commented Nov 19, 2017

Regarding the version, would it be static or dynamic via {{ jekyll.version }}? And if its dynamic, would the site show the version on master or the one on github-pages?

with this, search has been opened up for 800px wide and above.. was planning to raise the accessibility in future PRs..

@DirtyF

This comment has been minimized.

Show comment
Hide comment
@DirtyF

DirtyF Nov 19, 2017

Member

For now I guess we could go the easy way with {{ jekyll.version }} as GitHub Pages usually updates quickly.

We would link to GitHub release or Rubygems:

Member

DirtyF commented Nov 19, 2017

For now I guess we could go the easy way with {{ jekyll.version }} as GitHub Pages usually updates quickly.

We would link to GitHub release or Rubygems:

ashmaroli added some commits Nov 19, 2017

re-organize header links
  - move link to GitHub repo out of primary nav but remain as is on mobile-devices
  - add a slot that displays current Jekyll version on large-screens
@DirtyF

This comment has been minimized.

Show comment
Hide comment
@DirtyF

DirtyF Nov 19, 2017

Member

Looks like the search needs a bit of margin to be perfectly vertically aligned.

If I get .metaout of the search, navigation, search and meta are more equally distributed:

header-nav

Member

DirtyF commented Nov 19, 2017

Looks like the search needs a bit of margin to be perfectly vertically aligned.

If I get .metaout of the search, navigation, search and meta are more equally distributed:

header-nav

@ashmaroli

This comment has been minimized.

Show comment
Hide comment
@ashmaroli

ashmaroli Nov 19, 2017

Member

If I get .metaout of the search, navigation, search and meta are more equally distributed:

True. I had modeled it based on your earlier suggestion. But the current suggestion will allow us little more freedom with the search input.. so 👍

The search looks aligned properly to me.. 🤓 🔍

Member

ashmaroli commented Nov 19, 2017

If I get .metaout of the search, navigation, search and meta are more equally distributed:

True. I had modeled it based on your earlier suggestion. But the current suggestion will allow us little more freedom with the search input.. so 👍

The search looks aligned properly to me.. 🤓 🔍

split search and meta-slots to separate divisions
  - props @DirtyF
  - render search input from 700px and above
@DirtyF

This comment has been minimized.

Show comment
Hide comment
@DirtyF

DirtyF Nov 19, 2017

Member

Thanks @ashmaroli, looks great 🙌

Maybe we should move away from gridism at one point if we want more control over the grid?

Member

DirtyF commented Nov 19, 2017

Thanks @ashmaroli, looks great 🙌

Maybe we should move away from gridism at one point if we want more control over the grid?

@DirtyF

This comment has been minimized.

Show comment
Hide comment
@DirtyF

DirtyF Nov 19, 2017

Member

@jekyllbot: merge +site

Member

DirtyF commented Nov 19, 2017

@jekyllbot: merge +site

@jekyllbot jekyllbot merged commit b59078e into jekyll:master Nov 19, 2017

3 checks passed

WIP ready for review
Details
continuous-integration/appveyor/pr AppVeyor build succeeded
Details
continuous-integration/travis-ci/pr The Travis CI build passed
Details
@ashmaroli

This comment has been minimized.

Show comment
Hide comment
@ashmaroli

ashmaroli Nov 20, 2017

Member

Maybe we should move away from gridism at one point if we want more control over the grid?

Yes, like you said a few days ago, it was designed 5 years ago.
Browsers have improved quite a lot in the interim.

Member

ashmaroli commented Nov 20, 2017

Maybe we should move away from gridism at one point if we want more control over the grid?

Yes, like you said a few days ago, it was designed 5 years ago.
Browsers have improved quite a lot in the interim.

@ashmaroli ashmaroli deleted the ashmaroli:docs-header branch Nov 20, 2017

DirtyF added a commit that referenced this pull request Dec 7, 2017

Site header redesign (#6567)
Merge pull request 6567

DirtyF added a commit that referenced this pull request Dec 7, 2017

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