{"action":"created","issue":{"url":"https://api.github.com/repos/sfbrigade/adopt-a-drain/issues/53","labels_url":"https://api.github.com/repos/sfbrigade/adopt-a-drain/issues/53/labels{/name}","comments_url":"https://api.github.com/repos/sfbrigade/adopt-a-drain/issues/53/comments","events_url":"https://api.github.com/repos/sfbrigade/adopt-a-drain/issues/53/events","html_url":"https://github.com/sfbrigade/adopt-a-drain/pull/53","id":115216156,"number":53,"title":"Update bootstrap and make mobile-ready","user":{"login":"jasonlally","id":534176,"avatar_url":"https://avatars.githubusercontent.com/u/534176?v=3","gravatar_id":"","url":"https://api.github.com/users/jasonlally","html_url":"https://github.com/jasonlally","followers_url":"https://api.github.com/users/jasonlally/followers","following_url":"https://api.github.com/users/jasonlally/following{/other_user}","gists_url":"https://api.github.com/users/jasonlally/gists{/gist_id}","starred_url":"https://api.github.com/users/jasonlally/starred{/owner}{/repo}","subscriptions_url":"https://api.github.com/users/jasonlally/subscriptions","organizations_url":"https://api.github.com/users/jasonlally/orgs","repos_url":"https://api.github.com/users/jasonlally/repos","events_url":"https://api.github.com/users/jasonlally/events{/privacy}","received_events_url":"https://api.github.com/users/jasonlally/received_events","type":"User","site_admin":false},"labels":[{"url":"https://api.github.com/repos/sfbrigade/adopt-a-drain/labels/discussion","name":"discussion","color":"009800"}],"state":"open","locked":false,"assignee":null,"milestone":null,"comments":8,"created_at":"2015-11-05T06:14:18Z","updated_at":"2015-11-12T15:35:52Z","closed_at":null,"pull_request":{"url":"https://api.github.com/repos/sfbrigade/adopt-a-drain/pulls/53","html_url":"https://github.com/sfbrigade/adopt-a-drain/pull/53","diff_url":"https://github.com/sfbrigade/adopt-a-drain/pull/53.diff","patch_url":"https://github.com/sfbrigade/adopt-a-drain/pull/53.patch"},"body":"cc: @sfbrigade/website-tools-core-team \r\n\r\nThis pull request isn't ready for merge yet, but I want to benefit from all your brilliant ideas and make sure I'm heading in the right direction. I checked in with @therebelrobot on this and he gave me some great feedback that I haven't implemented yet. \r\n\r\n## Purpose\r\n\r\nAfter setting the application up locally and digging in I really wanted to make sure we start improving the mobile experience, which led me to a handful of changes bulleted below. I'm trying to keep the changes mostly foundational and not make any big design changes without feedback or input from others (and hopefully some user testing). This also addresses #52 \r\n\r\n## What's been done\r\n\r\nIn order to make the foundational changes I started with some basic updates including\r\n\r\n- Updating bootstrap from 2 to 3 (css and js)\r\n- Updating jQuery to 1.9.1 (the minimum requirement to support bootstrap.js\r\n- Updating jQuery .live calls to .on (live was deprecated in 1.7)\r\n- Modified the underlying layout to use column classes (col-*-#) instead of table classes, making the interface less rigid\r\n- Added some media queries so that the sidebar is absolutely positioned with overflow set to scroll on big screens and pops to the top on small (mobile) screens\r\n- Have a basic link to toggle the menu on mobile to reveal the login\r\n\r\n## What's left to do\r\n\r\nBased on feedback, I'd like to at a minimum get the following done before the PR is worth merging:\r\n\r\n- [x] Modify the sidebar on mobile into a collapsible menu with a hamburger menu icon to indicate it's collapsible (replacing the link that's there now and only showing the logo when it's collapsed)\r\n- [x] Make the map disappear when the menu is toggled on mobile\r\n- [x] Modify CSS to do a full height map instead of javascript. I know, that's terrible I did that! :smile: \r\n\r\n## For discussion\r\n\r\nThese aren't necessarily in the critical path for getting an initial workable mobile version done, but I think we ought to tackle these sooner rather than later. Here are some points of discussion:\r\n\r\n1. Should we modify the number of points dropped and the zoom level when viewing on smaller screens? My hypothesis is that when on a smaller screen, you are more likely interested in what's immediately around you OR at a minimum it'll be less overwhelming to a user to drop them into that experience and then invite them through the interface to explore.\r\n\r\n![screen shot 2015-11-04 at 10 10 40 pm](https://cloud.githubusercontent.com/assets/534176/10961201/28846c2c-8341-11e5-9dde-d195c87ae9bd.png)\r\n\r\n2. Should we change the interaction for signing in? For both the mobile and desktop experience, it may be more useful to have 2 fields: email and password and 2 buttons \"Sign In\" + \"Sign Up\".  Clicking Sign up would reveal the additional fields similar to what it does now. Less cognitive overload and less stuff to load in the initial interface.\r\n\r\n![screen shot 2015-11-04 at 10 11 40 pm 1](https://cloud.githubusercontent.com/assets/534176/10961206/33a882fa-8341-11e5-9250-977b909c68d9.png)\r\n\r\n3. Should we hook up the information window on the map where it says \"Sign in to adopt this Drain\" to the sign in/sign up form itself? I could imagine an interaction where a user clicks on that link and it pops them over to the form.\r\n\r\n![screen shot 2015-11-04 at 10 11 17 pm](https://cloud.githubusercontent.com/assets/534176/10961210/39f57064-8341-11e5-9fc6-33732be216bb.png)\r\n\r\nI'm sure there are things I'm missing but that's it for now.\r\n"},"comment":{"url":"https://api.github.com/repos/sfbrigade/adopt-a-drain/issues/comments/156140303","html_url":"https://github.com/sfbrigade/adopt-a-drain/pull/53#issuecomment-156140303","issue_url":"https://api.github.com/repos/sfbrigade/adopt-a-drain/issues/53","id":156140303,"user":{"login":"afomi","id":67984,"avatar_url":"https://avatars.githubusercontent.com/u/67984?v=3","gravatar_id":"","url":"https://api.github.com/users/afomi","html_url":"https://github.com/afomi","followers_url":"https://api.github.com/users/afomi/followers","following_url":"https://api.github.com/users/afomi/following{/other_user}","gists_url":"https://api.github.com/users/afomi/gists{/gist_id}","starred_url":"https://api.github.com/users/afomi/starred{/owner}{/repo}","subscriptions_url":"https://api.github.com/users/afomi/subscriptions","organizations_url":"https://api.github.com/users/afomi/orgs","repos_url":"https://api.github.com/users/afomi/repos","events_url":"https://api.github.com/users/afomi/events{/privacy}","received_events_url":"https://api.github.com/users/afomi/received_events","type":"User","site_admin":false},"created_at":"2015-11-12T15:35:52Z","updated_at":"2015-11-12T15:35:52Z","body":"lgtm"}}