{"action":"created","issue":{"url":"https://api.github.com/repos/CenterForOpenScience/osf.io/issues/5777","repository_url":"https://api.github.com/repos/CenterForOpenScience/osf.io","labels_url":"https://api.github.com/repos/CenterForOpenScience/osf.io/issues/5777/labels{/name}","comments_url":"https://api.github.com/repos/CenterForOpenScience/osf.io/issues/5777/comments","events_url":"https://api.github.com/repos/CenterForOpenScience/osf.io/issues/5777/events","html_url":"https://github.com/CenterForOpenScience/osf.io/pull/5777","id":157937419,"number":5777,"title":"[Production and Staging] Fixed jumpy user and project settings side nav bar [#OSF-3825]","user":{"login":"sf2ne","id":16869216,"avatar_url":"https://avatars.githubusercontent.com/u/16869216?v=3","gravatar_id":"","url":"https://api.github.com/users/sf2ne","html_url":"https://github.com/sf2ne","followers_url":"https://api.github.com/users/sf2ne/followers","following_url":"https://api.github.com/users/sf2ne/following{/other_user}","gists_url":"https://api.github.com/users/sf2ne/gists{/gist_id}","starred_url":"https://api.github.com/users/sf2ne/starred{/owner}{/repo}","subscriptions_url":"https://api.github.com/users/sf2ne/subscriptions","organizations_url":"https://api.github.com/users/sf2ne/orgs","repos_url":"https://api.github.com/users/sf2ne/repos","events_url":"https://api.github.com/users/sf2ne/events{/privacy}","received_events_url":"https://api.github.com/users/sf2ne/received_events","type":"User","site_admin":false},"labels":[],"state":"open","locked":false,"assignee":null,"assignees":[],"milestone":null,"comments":2,"created_at":"2016-06-01T15:31:08Z","updated_at":"2016-06-30T20:11:36Z","closed_at":null,"pull_request":{"url":"https://api.github.com/repos/CenterForOpenScience/osf.io/pulls/5777","html_url":"https://github.com/CenterForOpenScience/osf.io/pull/5777","diff_url":"https://github.com/CenterForOpenScience/osf.io/pull/5777.diff","patch_url":"https://github.com/CenterForOpenScience/osf.io/pull/5777.patch"},"body":"## Purpose\r\n\r\nIn osf.io when on the user settings page or on the project settings page the side nav bar jumps to affix to the bottom of the page when the page is refreshed. This problem happens most consistently on Chrome and Firefox but I have found it also happens sometimes on Safari. \r\n\r\nUser Settings Page\r\n![screen shot 2016-05-31 at 10 34 05 pm](https://cloud.githubusercontent.com/assets/16869216/15696622/1d2b0320-2780-11e6-90a2-a9d04243a51d.png)\r\n\r\nProject Settings Page\r\n![screen shot 2016-05-31 at 10 39 27 pm](https://cloud.githubusercontent.com/assets/16869216/15696667/c3562b6c-2780-11e6-89ae-3e60f8d4c706.png)\r\n\r\nThese changes were implemented to improve the user experience and have the side nav bar actually return to its proper place when the page is refreshed.\r\n\r\n## Changes\r\n\r\nThe problem was found to be that in bootstrap when something like a panel is affixed both to the top and the bottom, there are instances of conflict between the two affixes. I was unable to find an HTML or CSS solution as simply removing the bottom affix causes the panel to run over the footer and trying to translate the panel up and down the y-axis merely stopped the panel from scrolling with the page. \r\n\r\nInstead a jquery solution was found consisting of a function called sticky_element which affixes the side nav panel to the bottom footer and then calculates the top affix based on the top of the screen window and not some affixed value through bootstrap. This bypasses the bootstrap affix complication entirely. To fix some minor bugs discovered in the process of writing that function two resize functions were put in to handle if a window is resized bigger or smaller. \r\n\r\nThis is how the side nav bar looks now when refreshed at the bottom of the page:\r\n![screen shot 2016-06-01 at 11 23 09 am](https://cloud.githubusercontent.com/assets/16869216/15715144/5e64934a-27eb-11e6-9be1-6a3e5bfc8c43.png)\r\n\r\n\r\n## Side effects\r\n\r\nThe only side effect I could think of is that if the user resizes the screen to the mobile size and then refreshes the page. If after that they then resize back to a normal larger screen size the side nav bar stops scrolling.\r\n\r\nAside from that the only other thing added that should affect anything else is that I added div IDs to the user and project settings side nav panels and to the footer.\r\n\r\n\r\n## Ticket\r\n\r\nhttps://openscience.atlassian.net/browse/OSF-3825"},"comment":{"url":"https://api.github.com/repos/CenterForOpenScience/osf.io/issues/comments/229774213","html_url":"https://github.com/CenterForOpenScience/osf.io/pull/5777#issuecomment-229774213","issue_url":"https://api.github.com/repos/CenterForOpenScience/osf.io/issues/5777","id":229774213,"user":{"login":"brianjgeiger","id":6599111,"avatar_url":"https://avatars.githubusercontent.com/u/6599111?v=3","gravatar_id":"","url":"https://api.github.com/users/brianjgeiger","html_url":"https://github.com/brianjgeiger","followers_url":"https://api.github.com/users/brianjgeiger/followers","following_url":"https://api.github.com/users/brianjgeiger/following{/other_user}","gists_url":"https://api.github.com/users/brianjgeiger/gists{/gist_id}","starred_url":"https://api.github.com/users/brianjgeiger/starred{/owner}{/repo}","subscriptions_url":"https://api.github.com/users/brianjgeiger/subscriptions","organizations_url":"https://api.github.com/users/brianjgeiger/orgs","repos_url":"https://api.github.com/users/brianjgeiger/repos","events_url":"https://api.github.com/users/brianjgeiger/events{/privacy}","received_events_url":"https://api.github.com/users/brianjgeiger/received_events","type":"User","site_admin":false},"created_at":"2016-06-30T20:11:36Z","updated_at":"2016-06-30T20:11:36Z","body":"Looks like you will need to handle some merge conflicts."}}
{"actor":{"display_login":"brianjgeiger"}}