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

Make the material-theme a little more mobile friendly: #127

Merged

Conversation

@cheshirekow
Copy link
Contributor

@cheshirekow cheshirekow commented Aug 6, 2017

In the smallest of the bootstrap breakpoints:

  1. use a single column layout, rather than a two column layout
  2. make the navigation menu items inline-block so they form a
    horizontal menu across the top of the page
  3. remove padding from the content div
  4. don't scroll posts separately from the "background" of the page,
    leave it all as one linear stream

The comments probably aren't desirable and I didn't even check on style issues... but if the change is desirable I'd be happy to clean up this patch.

In the smallest of the bootstrap breakpoints:

1. use a single column layout, rather than a two column layout
2. make the navigation menu items inline-block so they form a
   horizontal menu across the top of the page
3. remove padding from the content div
4. don't scroll posts separately from the "background" of the page,
   leave it all as one linear stream
@Kwpolska Kwpolska requested a review from matuu Aug 6, 2017
@Kwpolska
Copy link
Member

@Kwpolska Kwpolska commented Aug 6, 2017

👍 from me, please try cleaning it up. But perhaps (2) would work better if you used the bootstrap-style expanding menu, if that’s possible?

@cheshirekow
Copy link
Contributor Author

@cheshirekow cheshirekow commented Aug 6, 2017

Cool. Have any pointers to documentation/tutorial/example of the bootstrap-style expanding menu you're referring to? Also is there a nikola style guide or should I just try to match what's there?

@Kwpolska
Copy link
Member

@Kwpolska Kwpolska commented Aug 6, 2017

I mean the menu bootstrap3 uses. There is no style guide for CSS — be reasonable, avoid unreadably clever hacks, indent with 4 spaces.

 2. implement responsive menu
@cheshirekow
Copy link
Contributor Author

@cheshirekow cheshirekow commented Aug 8, 2017

Updated the review.

Excuse my ignorance, I'm still not 100% positive what you meant by the menu, but I think I implemented it. As implemented, it looks like this:

unexpanded:
image

expanded:
selection_021

@Kwpolska
Copy link
Member

@Kwpolska Kwpolska commented Aug 8, 2017

I meant a menu that behaves the same way https://getnikola.com/ does on mobile. The hamburger button would work better as part of the green header.

Also restore the attribution button layout since the changes I
previously made seem to make it unclickable.
@cheshirekow
Copy link
Contributor Author

@cheshirekow cheshirekow commented Sep 1, 2017

Ok done. Moved hamburger button into the header. Now looks like this:

Closed:
selection_025

Open:
selection_027

@Kwpolska
Copy link
Member

@Kwpolska Kwpolska commented Sep 1, 2017

Looks great, thanks for fixing this!

@Kwpolska Kwpolska merged commit 427964d into getnikola:master Sep 1, 2017
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Linked issues

Successfully merging this pull request may close these issues.

None yet

2 participants