Improve the default styles
timwis opened this issue · comments
JKAN looks a bit dated with the default bootstrap 4 styles. While it's easy to customise, it would be nice if it started with a modern look and feel, and this will show up in product screenshots etc.
My first thought was to upgrade to bootstrap 5, but that's still a rather barebones starting point. Any other ideas? Or does bootstrap 5 sound like a good next step?
(Note that bootstrap 5 dropped support for IE 11, but this site seems to be able to polyfill it.)
Asked for style/usability review. Also have test site up https://next.opendataphilly.org/ but note, it may be overwritten by PRs testing data import.
I can't imagine anyone has just IE11 available nowadays. I'm sure there are plenty of people who have it - but if that's their only browser they will have issues with more and more of the web.
All that to say, why do you feel going out of our way to support IE11 is worth it? I'd generally argue that we have a requirement to push people off unsupported browsers to reduce them spreading viruses/ransomware.
Hi @timwis! I'm a designer at Azavea/E84. I just put together a very quick mockup how JKAN might look like with Bootstrap 5 and a few small enhancements of the homepage:
Hi @philippschmitt! Welcome. That looks like a great start! I'm curious how you got the tiles to line up like that... The only way I could think of was a grid, but then you need rather complicated template markup unless you know exactly how many there are.
Anyway, happy to work with you to pull in bootstrap 5 upstream, or I can scoop up the changes from the OpenDataPhilly repo after you've implemented them, if that's easier.
@BryanQuigley I'm absolutely with you in principle. In my experience, though, it's often that the government organisation has key legacy software that only runs on IE, so they need to keep it around for that. They often have Chrome or Edge installed as well, but for some reason it's not marked as the default browser, or there's no desktop icon for it (but there is for IE), so users end up using a mixture of both. It's bizarre, really, and even that situation feels quite fixable from an IT domain admin perspective, but it happens :( The question is how often does it happen in 2023, and I don't have much data around that, just anecdotal experience. I wonder what OpenDataPhilly's google analytics data says?
But the important thing is that I don't think it makes much of a difference. Philp Walton came up with this dual bundle approach, which is now an out-of-the-box feature of parcel and other bundlers, and involves roughly zero cost for modern browsers. The CSS picture is a different story, but usually the worst case scenario is the layout is a bit wonky for IE11 users. In other words, we don't really have to go out of our way more than an inch or two. If we ever do, then I agree we should get more data and consider whether it's worth it.
Sorry, I should have been clearer: This is a design mockup I made in Figma, our design tool, not in code. I'll let @BryanQuigley speak to whether we can implement the actual upgrade.
The grid should be possible using CSS grid without knowing the exact number of items or columns. I applied this in the browser inspector and it worked:
.homepage-categories {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(110px, 1fr));
grid-gap: 1rem;
grid-auto-flow: dense;
}
You can read more about that in this article. I'm not sure how well IE11 supports this but it seems like we'd get usable results.
Oh, great, okay, thanks. I actually started a local branch implementing bootstrap 5, so no worries. Shouldn't be a massive job to be honest. Was more just wondering if you were planning to do it for OpenDataPhilly anyway (likewise if ODP would be an easier job if it were implemented upstream first)
Just made some "internal" cards for this and other suggestions @philippschmitt made - opendataphilly/opendataphilly-jkan#11. Hoping to get most of them upstream, but still writing some of them up. Early feedback appreciated and how we can best help with bootstrap upgrade.
Understood re:IE11. I've asked for Google Analytics data. Searched some public data on this and found two sites:
https://radar.cloudflare.com/adoption-and-usage - which doesn't show it at all
https://gs.statcounter.com/browser-version-market-share/desktop/worldwide/#weekly-202309-202310-bar, if you drill down into by downloading the CSV, you get
...
"360 Safe Browser 0",0.61
"IE 11.0",0.5
... other old versions of current browsers
"Yandex Browser 23.1",0.32
...
Just to be clear on that, that's .5% of desktops browsers, which is itself about half of modern internet traffic. It's still possible that IE11 is higher for this kind of website, so still hoping to get the ODP specific data.
Got IE11 info from City (they run the analytics).
Of 156,826 sessions since Jan 1, 2022, only 337 have used some version of IE - and that included time when Microsoft wasn't as aggressive in disabling it. Here is some further data:
Tablets/Mobile
| Browser | # of sessions |
|---|---|
| Safari | 24,463 |
| Chrome | 11,107 |
| Android Webview | 1,608 |
| Samsung Internet | 614 |
| Safari (in-app) | 412 |
| Amazon Silk | 158 |
| UC Browser | 128 |
| Firefox | 126 |
Desktops
| Browser | # of sessions |
|---|---|
| Chrome | 85,413 |
| Edge | 14,414 |
| Safari | 10,639 |
| Firefox | 5,459 |
| (not set) | 1,124 |
| Opera | 371 |
| Internet Explorer | 326 |
| CDPJHU Bot | 195 |
| Mozilla Compatible Agent | 128 |
@timwis I was wondering if I could support at all with the upgrade to Bootstrap v5. It seems to run fine when I update the package. I'm happy to go through the breaking changes and make sure nothing is affected then post a PR if that would be helpful.
Sure @lydiascarf! I've just pushed up the branch I started in early March (bootstrap5), which basically just swaps the CDN URL and fixes some of the most obvious components like the jumbotron and list groups. To give you a sense of where I left off: I noticed that the breadcrumbs don't have a background in bootstrap 5, which could either be addressed tailwind style (with utility classes, as the jumbotron is), or by modifying the css/sass variables (which is probably the better approach, given that there are variables like breadcrumbs-bg-color or something).
I started to pull in the bootstrap5 ruby gem, hoping to leverage Jekyll's Sass support, but it wasn't obvious how to set it up, and I ran out of time.
I think it's safe to mark this as completed. Thanks @lydiascarf !