GeoIP Map

[CasperVerswijvelt]

Unchanged from my last post in #92

Only added small tweak to remove the limited-height on the session list where the content is already limited to 10 items, causing annoying scroll on there

Screenshots:

Phone	Desktop

Closes #92

[milesmcc]

Sweet. I made a few changes, but nothing that drastic — namely, I adjusted the colors to match the rest of the dashboard, and moved this interface into the smaller country table. Ready for the next release!

[CasperVerswijvelt]

@milesmcc I'm not sure if removing the table version of the country data was the right move. Although the Geo map looks pretty cool, it doesn't show the same kind of overview like the table does and I do miss that a bit. Also on mobile the table is alot more useful. Maybe we can bring back the table by being able to toggle between map/table view?

Something else I noticed is that in the released version, the map does not extend to the edge of the card anymore (see screenshot) , which it did in my version. Is this intentional?

[milesmcc]

I knew someone would suggest bringing the country list back 🙂. Having both would be redundant, but feel free to submit a PR that adds a toggle.

I thought about this but didn’t implement it because we don’t yet have a good way to support client-side interactivity, and manually hiding/showing two different divs using JS felt janky. Perhaps we use StimulusJS? I’m not sure.

As for adding padding to the sides, that was intentional. We maintain padding everywhere else, so it looked off to me with it removed.

[CasperVerswijvelt]

Why do you think using vanilla js would be janky? We could just use some inline js on the toggle button and then add a couple css rules, like this:

HTML
onclick="document.getElementById('geo-card').classList.toggle('geo-card--use-table-view')"

CSS

.geo-table {
  display: none;
} 

.geo-card--use-table-view .geo-map {
  display: none;
} 

.geo-card--use-table-view .geo-table {
  display: inline-block
} 

I don't really think adding a js framework for this is needed, but that might be something to look at for the long term

[haaavk]

Vanilla js is the best for small amount of code. This project may never need a full js framework.
There are some interesting micro frameworks like Stimulus or Alpine.js.
I personally don't trust young js frameworks because they come and go too often.

[CasperVerswijvelt]

Got it working like this now:

Table view	Map view

Not really happy about the toggle button in table view but can't think of anything else atm.

Code is on my geo-table-map branch

[milesmcc]

@CasperVerswijvelt this looks like a good start! What if we instead put the map and table buttons left aligned (i.e., after Country and Sessions by Geography) and renamed them to "(Switch to Table View)" and "(Switch to Map View") or something like that?

[CasperVerswijvelt]

Yea that does make more sense visually 😛 I'll try that out tomorrow