[openstreetmap/openstreetmap-website] Rework user images and thumbnails to use flex grid (PR #3363)

[Andy Allan]

This PR continues work started in 9aa17258fcccf5b1f292e1190bd9a2968822274e and 31e247c1e223145a6ac8ce9012fe5eb586f1aaea to refactor the `user_image` and `user_thumbnail` css rules. Instead of using floats and margins, we now prefer to use the flex grid to control the layout.

The commits in this PR refactor each use of these helpers to use the temporary `_no_margins` rules, before refactoring the old rules and removing the class overrides at the end.
You can view, comment on, or merge this pull request online at:

  https://github.com/openstreetmap/openstreetmap-website/pull/3363

-- Commit Summary --

  * <a href="https://github.com/openstreetmap/openstreetmap-website/pull/3363/commits/6283d0a47aa6713372d3b23ca9120f9ed9d29f89">Rework diary comments to use flex grid rather than floats and margins</a>
  * <a href="https://github.com/openstreetmap/openstreetmap-website/pull/3363/commits/ee9c8ff7c8765923959466e7a14893e693c3c72a">Use grid for diary entry heading layout</a>
  * <a href="https://github.com/openstreetmap/openstreetmap-website/pull/3363/commits/afce5886f41aae45d55bd21b0a2ada8f78659873">Rework diary entries to use grid when a heading thumbnail is shown</a>
  * <a href="https://github.com/openstreetmap/openstreetmap-website/pull/3363/commits/2c9d2486ec4003e702d566ef1a13e779dc3673e2">Use flex grid for diary index headings</a>
  * <a href="https://github.com/openstreetmap/openstreetmap-website/pull/3363/commits/aa77ff5aec2f843c488f589c1779c745dbd9dabd">Use flex grid for issue reports and comments</a>
  * <a href="https://github.com/openstreetmap/openstreetmap-website/pull/3363/commits/dc67e54958c50301cd0b8b0ada72936a4ae0b0f2">Use grid for dashboard map popups</a>
  * <a href="https://github.com/openstreetmap/openstreetmap-website/pull/3363/commits/a9ca2fe7e73a65f85a326b167384c41b37f47410">fixup popup</a>
  * <a href="https://github.com/openstreetmap/openstreetmap-website/pull/3363/commits/9c9bf153cd90778172a70864eedde3672c412a53">Simplify user_image and user_thumbnail css</a>

-- File Changes --

    M app/assets/stylesheets/common.scss (24)
    M app/assets/stylesheets/leaflet-all.scss (3)
    M app/views/dashboards/_contact.html.erb (2)
    M app/views/dashboards/_popup.html.erb (12)
    M app/views/diary_entries/_diary_comment.html.erb (38)
    M app/views/diary_entries/_diary_entry.html.erb (17)
    M app/views/diary_entries/index.html.erb (43)
    M app/views/diary_entries/show.html.erb (12)
    M app/views/issues/_comments.html.erb (16)
    M app/views/issues/_reports.html.erb (18)
    M app/views/users/show.html.erb (2)

-- Patch Links --

https://github.com/openstreetmap/openstreetmap-website/pull/3363.patch
https://github.com/openstreetmap/openstreetmap-website/pull/3363.diff

-- 
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/pull/3363
-------------- next part --------------
An HTML attachment was scrubbed...
URL: <http://lists.openstreetmap.org/pipermail/rails-dev/attachments/20211110/c2fa59b2/attachment-0001.htm>