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

Sidebar now responsive as ever #3209

Merged
merged 7 commits into from
Mar 10, 2015
Merged

Sidebar now responsive as ever #3209

merged 7 commits into from
Mar 10, 2015

Conversation

Antrikshy
Copy link
Contributor

I have made some fancy CSS and Backbone changes that make the whole thing embrace various screen sizes more than ever before. I had never thought I'd see this happen anytime soon, but the sidebar now literally behaves like a Bootstrap component, resizing live with the window size. While I feel there is more optimization to do going forward, this is a stable enough update to be merged.

This update builds on top of #3139 and adds the following:

  • Complete auto-resizing of the sidebar when window width changes (in 100px steps, too!), because users will inevitably play around with the glorious responsiveness once they discover it. ;)
  • Media queries to change the text size based on screen width. I read somewhere that when implementing responsive typography, text sizes are lowered on smaller screens because they are held closer to the face.
  • Probably other stuff that I have forgotten.

Largest size (> 1300px)

screen shot 2015-03-09 at 1 32 12 pm

Smallest size (504px)

screen shot 2015-03-09 at 1 32 17 pm

Suggestions for tweaks and improvements welcome (are the font sizes okay?).

Note: I have not yet implemented the new color scheme because I can't make it look good enough on the huge sidebar. It's too saturated for that. Anyways, it will be a significant enough change to warrant for its own PR anyway because it will need several changes across the entire website.

@Antrikshy
Copy link
Contributor Author

Aaaaand I found a bug just after opening this PR. Resizing window with the sidebar closed makes it appear without actually opening it. Should be easy enough to fix actually.

@Antrikshy
Copy link
Contributor Author

Aaaaand fixed! That was easy.

@aronasorman aronasorman added this to the 0.13.x milestone Mar 9, 2015
@MCGallaspy MCGallaspy assigned MCGallaspy and unassigned 66eli77 Mar 9, 2015
this.resize_for_narrow();
if (this.state_model.get("open")) {
if ($(window).width() < 1260)
this.resize_for_narrow();

This comment was marked as spam.

This comment was marked as spam.

This comment was marked as spam.

@MCGallaspy
Copy link
Contributor

We're antsy to merge this, so I'll just add the brackets.

MCGallaspy added a commit that referenced this pull request Mar 10, 2015
@MCGallaspy MCGallaspy merged commit c46aedc into learningequality:develop Mar 10, 2015
@MCGallaspy MCGallaspy removed the has PR label Mar 10, 2015
@Antrikshy
Copy link
Contributor Author

@MCGallaspy You guys dig it so much, eh?

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

Successfully merging this pull request may close these issues.

4 participants