I've gone through and refactored all the JS/Sass/Slim code for the map, with these goals in mind.
Move all html out of the JavaScript and into the show.html.slim file
More all text out of the JavaScript so that it can be easily translatable.
Systematise the JS, split panels and areas of responsibility into their own methods. (eg. AtlasAPI, SearchBox, WorldMap, ListingPanel, etc)
Make all the JS compliant with eslint
Make the Sass code follow the BEM pattern
JavaScript and Sass now use different selectors to match the elements they need to handle (All selectors which are used in javascript are prefixed with js-)
I've ensured that all the following features were ported
Openable and fillable panels
Collapsible search box
Search area button
Filter events when you click on a venue
Registration form can be submitted
I've also added
Proper feedback for validation errors on the registration
When the map fits markers into bounds, it will pad the bounds so that the panels won't overlap any markers.
Whenever you select an event, the map will zoom to that venue
No results panel
A small notification banner when events are being filtered to only show one event.
Still needs to be done
[x] Abstract sass values into variables
[x] All mobile support was lost in this refactor
[x] I've made it so that it doesn't recreate all markers every time you load new events (instead it appends those markers). However this creates a situation where you can click on a venue whose events are not currently in the listing. Some solution needs to be made for that.
[x] You can no longer view more than one panel at a time (plus the listing panel). I figured this made more sense space wise, and having 3 panels open at once wasn't that useful. But this means there is no direct way to go from the registration panel to an info panel for the same event. Need to add an icon button that will switch you back.
[x] Any progress on the sharing panel has been removed.
[ ] When you zoom in/out it doesn't keep the marker or whatever you are viewing in view (because zoom origin is the center of the map, not the center of the useable viewport - aka the viewport excluding the part covered by controls)
I've gone through and refactored all the JS/Sass/Slim code for the map, with these goals in mind.
show.html.slimfilejs-)I've ensured that all the following features were ported
I've also added
Still needs to be done