ProjectLighthouse icon indicating copy to clipboard operation
ProjectLighthouse copied to clipboard

Refactor profile and slot pages to use iFrames for pagination

Open Slendy opened this issue 2 years ago • 2 comments

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

image

image

image image image

Slendy avatar Jul 14 '23 22:07 Slendy

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!

m88youngling avatar Jul 17 '23 04:07 m88youngling

I think you can use the attribute target="_parent" on links to make them open outside an iframe

uhwot avatar Jul 17 '23 10:07 uhwot