Refactor profile and slot pages to use iFrames for pagination
This PR turns the major sections of profiles and levels on the website into their own pages that are loaded through iFrames to allow the website to mimic responsiveness. This way you can go through pages of comments without reloading the entire page. It also has the benefit of consolidating all the styling and logic for loading comments, photos, and scores into a single page.
Current drawbacks
When you click a link in an iframe it doesn't immediately load the page like you would expect because instead, the iframe travels to that link. My solution for this was to put a script in BaseLayout that would detect if the window is in an iframe, if it is then it sets the top-level window location to the current page location. It works fairly seamlessly but it does introduce some delay that some users might notice. There might be a better solution to this and I still have yet to try more solutions.
Closes #394, closes #604
Todos
- [x] Fix off by one error in pagination
- [ ] Implement viewing different score types
- [ ] Make pagination buttons look pretty
- [x] Snap parent page to the top of the frame whenever new page loads?
Pictures
When I saw you mentioned iframes, I was at first concerned about links. Your workaround though is a clever way of getting around that issue, interesting!
I think you can use the attribute target="_parent" on links to make them open outside an iframe