[openstreetmap/openstreetmap-website] Better styling for Getting Help page (#2321)
Andy Allan
notifications at github.com
Wed Jul 17 16:23:10 UTC 2019
The [Getting Help](https://www.openstreetmap.org/help) page is currently rather unappealing.
Back in 2014 [we had a PR from @danstowell](https://github.com/openstreetmap/openstreetmap-website/pull/728) with suggestions for improvement. Unfortunately the PR had some unresolved questions around the images, and since then more links have been added to the page and the PR is no longer mergeable.
However, I feel like the basic suggestion of moving to what [Bootstrap describes as "cards"](https://getbootstrap.com/docs/4.3/components/card/) is a valid idea. To test it out further, without having to recreate everything that bootstrap offers, [I crowbarred Bootstrap 4 into the site, and made some mockups](https://github.com/gravitystorm/openstreetmap-website/commit/d4cf08f837965cde30ee741355cf8c491b921ec3).
# Basic cards
![Screenshot from 2019-07-17 17-53-53](https://user-images.githubusercontent.com/360803/61391868-f25d5900-a8bd-11e9-8a26-283ded81203e.png)
# Cards with URL footers
![Screenshot from 2019-07-17 17-54-12](https://user-images.githubusercontent.com/360803/61391870-f25d5900-a8bd-11e9-9ab8-906045de9d83.png)
# Cards with images (and URL footers)
![Screenshot from 2019-07-17 17-55-18](https://user-images.githubusercontent.com/360803/61391871-f25d5900-a8bd-11e9-9770-2d3973b1bfba.png)
I think the overall approach of cards (or something similar) works well. I also experimented with regular lists, and definition lists, without much success.
For the implementation details, we could simply duplicate all the CSS rules from Bootstrap 4 related to the cards. Or we could come up with our own CSS rules that do similar things, but that's outside my own wheelhouse. My preference would be to switch to Bootstrap entirely, and get this kind of thing for free, but that's a much larger topic. So suggestions and advice around this are requested.
Alternatively, other people might have better ideas for sprucing up this page that take a different approach entirely! Again, alternative suggestions would be welcome.
--
You are receiving this because you are subscribed to this thread.
Reply to this email directly or view it on GitHub:
https://github.com/openstreetmap/openstreetmap-website/issues/2321
-------------- next part --------------
An HTML attachment was scrubbed...
URL: <http://lists.openstreetmap.org/pipermail/rails-dev/attachments/20190717/42e7f57a/attachment.html>
More information about the rails-dev
mailing list