[openstreetmap/openstreetmap-website] Browse icons as svg (PR #5080)
mmd
notifications at github.com
Thu Aug 15 07:53:08 UTC 2024
The browse icons haven't been updated for quite some time and are still served as PNG icons. As the icons should reflect the current carto style, I copied a fair amount to this PR, and added some coloring similar to [amenity-points.mss](https://github.com/gravitystorm/openstreetmap-carto/blob/master/style/amenity-points.mss).
One of the design goals for the conversion was to use osm-carto svg files as-is, and at the same time use svg files as < img >, rather than inlining them. This has some implications on coloring: color values need to be translated to a filter, for which i used https://blog.union.io/code/2017/08/10/img-svg-fill/
Before converting more icons in browse.scss + common.scss, I wanted to get some feedback if the overall approach is sound. As an example, for the fill parameter I tried "#666666" as parameter value, as well as the original color descriptions from osm-cargo (e.g. "amenity-brown"). I find the latter more easily to understand.
You can view, comment on, or merge this pull request online at:
https://github.com/openstreetmap/openstreetmap-website/pull/5080
-- Commit Summary --
* Browse icons as svg
-- File Changes --
A app/assets/images/browse/amenity_advertising_column.svg (5)
A app/assets/images/browse/amenity_aerodrome.svg (3)
A app/assets/images/browse/amenity_arts_centre.svg (3)
A app/assets/images/browse/amenity_atm.svg (3)
A app/assets/images/browse/amenity_bank.svg (3)
A app/assets/images/browse/amenity_bar.svg (3)
A app/assets/images/browse/amenity_bbq.svg (3)
A app/assets/images/browse/amenity_bench.svg (3)
A app/assets/images/browse/amenity_bicycle_parking.svg (3)
A app/assets/images/browse/amenity_bicycle_repair_station.svg (3)
A app/assets/images/browse/amenity_biergarten.svg (3)
A app/assets/images/browse/amenity_boat_rental.svg (3)
A app/assets/images/browse/amenity_bureau_de_change.svg (6)
A app/assets/images/browse/amenity_bus_station.svg (4)
A app/assets/images/browse/amenity_cafe.svg (3)
A app/assets/images/browse/amenity_car_wash.svg (3)
A app/assets/images/browse/amenity_casino.svg (3)
A app/assets/images/browse/amenity_charging_station.svg (3)
A app/assets/images/browse/amenity_cinema.svg (3)
A app/assets/images/browse/amenity_community_centre.svg (3)
A app/assets/images/browse/amenity_courthouse.svg (3)
A app/assets/images/browse/amenity_dentist.svg (3)
A app/assets/images/browse/amenity_doctors.svg (3)
A app/assets/images/browse/amenity_drinking_water.svg (3)
A app/assets/images/browse/amenity_emergency_phone.svg (3)
A app/assets/images/browse/amenity_entrance.svg (3)
A app/assets/images/browse/amenity_excrement_bags.svg (3)
A app/assets/images/browse/amenity_fast_food.svg (3)
A app/assets/images/browse/amenity_ferry.svg (3)
A app/assets/images/browse/amenity_firestation.svg (3)
A app/assets/images/browse/amenity_fountain.svg (3)
A app/assets/images/browse/amenity_fuel.svg (3)
A app/assets/images/browse/amenity_helipad.svg (3)
A app/assets/images/browse/amenity_hospital.svg (3)
A app/assets/images/browse/amenity_hunting_stand.svg (3)
A app/assets/images/browse/amenity_ice_cream.svg (3)
A app/assets/images/browse/amenity_internet_cafe.svg (3)
A app/assets/images/browse/amenity_library.svg (3)
A app/assets/images/browse/amenity_motorcycle_parking.svg (3)
A app/assets/images/browse/amenity_nightclub.svg (3)
A app/assets/images/browse/amenity_parcel_locker.svg (8)
A app/assets/images/browse/amenity_parking.svg (3)
A app/assets/images/browse/amenity_parking_entrance_multistorey.svg (3)
A app/assets/images/browse/amenity_parking_entrance_underground.svg (3)
A app/assets/images/browse/amenity_parking_subtle.svg (3)
A app/assets/images/browse/amenity_parking_tickets.svg (3)
A app/assets/images/browse/amenity_pharmacy.svg (3)
A app/assets/images/browse/amenity_place_of_worship.svg (3)
A app/assets/images/browse/amenity_police.svg (3)
A app/assets/images/browse/amenity_post_box.svg (3)
A app/assets/images/browse/amenity_post_office.svg (3)
A app/assets/images/browse/amenity_prison.svg (3)
A app/assets/images/browse/amenity_pub.svg (3)
A app/assets/images/browse/amenity_public_bath.svg (3)
A app/assets/images/browse/amenity_public_bookcase.svg (3)
A app/assets/images/browse/amenity_public_transport_tickets.svg (3)
A app/assets/images/browse/amenity_recycling.svg (3)
A app/assets/images/browse/amenity_rental_bicycle.svg (3)
A app/assets/images/browse/amenity_rental_car.svg (3)
A app/assets/images/browse/amenity_restaurant.svg (3)
A app/assets/images/browse/amenity_shelter.svg (3)
A app/assets/images/browse/amenity_shower.svg (12)
A app/assets/images/browse/amenity_social_facility.svg (3)
A app/assets/images/browse/amenity_taxi.svg (3)
A app/assets/images/browse/amenity_telephone.svg (3)
A app/assets/images/browse/amenity_theatre.svg (3)
A app/assets/images/browse/amenity_toilets.svg (3)
A app/assets/images/browse/amenity_town_hall.svg (3)
A app/assets/images/browse/amenity_vehicle_inspection.svg (3)
A app/assets/images/browse/amenity_veterinary.svg (3)
A app/assets/images/browse/amenity_waste_basket.svg (3)
A app/assets/images/browse/amenity_waste_disposal.svg (3)
A app/assets/images/browse/barrier_cattle_grid.svg (6)
A app/assets/images/browse/barrier_cycle_barrier.svg (4)
A app/assets/images/browse/barrier_full-height_turnstile.svg (3)
A app/assets/images/browse/barrier_gate.svg (11)
A app/assets/images/browse/barrier_kissing_gate.svg (3)
A app/assets/images/browse/barrier_level_crossing.svg (4)
A app/assets/images/browse/barrier_level_crossing2.svg (4)
A app/assets/images/browse/barrier_lift_gate.svg (3)
A app/assets/images/browse/barrier_motorcycle_barrier.svg (3)
A app/assets/images/browse/barrier_stile.svg (3)
A app/assets/images/browse/barrier_toll_booth.svg (4)
A app/assets/images/browse/historic_archaeological_site.svg (3)
A app/assets/images/browse/historic_bust.svg (3)
A app/assets/images/browse/historic_castle.svg (3)
A app/assets/images/browse/historic_city_gate.svg (3)
A app/assets/images/browse/historic_fort.svg (3)
A app/assets/images/browse/historic_fortress.svg (3)
A app/assets/images/browse/historic_manor.svg (3)
A app/assets/images/browse/historic_memorial.svg (3)
A app/assets/images/browse/historic_monument.svg (3)
A app/assets/images/browse/historic_obelisk.svg (3)
A app/assets/images/browse/historic_palace.svg (3)
A app/assets/images/browse/historic_plaque.svg (3)
A app/assets/images/browse/historic_shrine.svg (3)
A app/assets/images/browse/historic_statue.svg (3)
A app/assets/images/browse/historic_stone.svg (3)
A app/assets/images/browse/shop_alcohol.svg (3)
A app/assets/images/browse/shop_art.svg (4)
A app/assets/images/browse/shop_bag.svg (3)
A app/assets/images/browse/shop_bakery.svg (3)
A app/assets/images/browse/shop_beauty.svg (3)
A app/assets/images/browse/shop_bed.svg (3)
A app/assets/images/browse/shop_beverages.svg (3)
A app/assets/images/browse/shop_bicycle.svg (3)
A app/assets/images/browse/shop_bookmaker.svg (4)
A app/assets/images/browse/shop_butcher.svg (3)
A app/assets/images/browse/shop_car.svg (3)
A app/assets/images/browse/shop_car_parts.svg (3)
A app/assets/images/browse/shop_car_repair.svg (37)
A app/assets/images/browse/shop_carpet.svg (3)
A app/assets/images/browse/shop_charity.svg (3)
A app/assets/images/browse/shop_chemist.svg (4)
A app/assets/images/browse/shop_clothes.svg (3)
A app/assets/images/browse/shop_coffee.svg (3)
A app/assets/images/browse/shop_computer.svg (3)
A app/assets/images/browse/shop_confectionery.svg (3)
A app/assets/images/browse/shop_convenience.svg (4)
A app/assets/images/browse/shop_copyshop.svg (3)
A app/assets/images/browse/shop_dairy.svg (3)
A app/assets/images/browse/shop_deli.svg (3)
A app/assets/images/browse/shop_department_store.svg (3)
A app/assets/images/browse/shop_diy.svg (3)
A app/assets/images/browse/shop_electronics.svg (3)
A app/assets/images/browse/shop_fabric.svg (3)
A app/assets/images/browse/shop_florist.svg (3)
A app/assets/images/browse/shop_furniture.svg (3)
A app/assets/images/browse/shop_garden_centre.svg (3)
A app/assets/images/browse/shop_gift.svg (3)
A app/assets/images/browse/shop_greengrocer.svg (3)
A app/assets/images/browse/shop_hairdresser.svg (3)
A app/assets/images/browse/shop_hearing_aids.svg (3)
A app/assets/images/browse/shop_hifi.svg (3)
A app/assets/images/browse/shop_houseware.svg (4)
A app/assets/images/browse/shop_interior_decoration.svg (3)
A app/assets/images/browse/shop_jewelry.svg (3)
A app/assets/images/browse/shop_laundry.svg (3)
A app/assets/images/browse/shop_marketplace.svg (3)
A app/assets/images/browse/shop_massage.svg (3)
A app/assets/images/browse/shop_medical_supply.svg (3)
A app/assets/images/browse/shop_mobile_phone.svg (3)
A app/assets/images/browse/shop_motorcycle.svg (3)
A app/assets/images/browse/shop_music.svg (4)
A app/assets/images/browse/shop_musical_instrument.svg (3)
A app/assets/images/browse/shop_newsagent.svg (3)
A app/assets/images/browse/shop_optician.svg (3)
A app/assets/images/browse/shop_outdoor.svg (3)
A app/assets/images/browse/shop_paint.svg (3)
A app/assets/images/browse/shop_perfumery.svg (3)
A app/assets/images/browse/shop_pet.svg (3)
A app/assets/images/browse/shop_photo.svg (3)
A app/assets/images/browse/shop_seafood.svg (3)
A app/assets/images/browse/shop_second_hand.svg (3)
A app/assets/images/browse/shop_shoes.svg (3)
A app/assets/images/browse/shop_sports.svg (3)
A app/assets/images/browse/shop_stationery.svg (3)
A app/assets/images/browse/shop_supermarket.svg (3)
A app/assets/images/browse/shop_tea.svg (3)
A app/assets/images/browse/shop_ticket.svg (3)
A app/assets/images/browse/shop_tobacco.svg (3)
A app/assets/images/browse/shop_toys.svg (3)
A app/assets/images/browse/shop_trade.svg (3)
A app/assets/images/browse/shop_travel_agency.svg (3)
A app/assets/images/browse/shop_tyres.svg (3)
A app/assets/images/browse/shop_variety_store.svg (3)
A app/assets/images/browse/shop_video.svg (3)
A app/assets/images/browse/shop_video_games.svg (4)
A app/assets/images/browse/tourism_alpinehut.svg (3)
A app/assets/images/browse/tourism_apartment.svg (5)
A app/assets/images/browse/tourism_artwork.svg (3)
A app/assets/images/browse/tourism_audioguide.svg (3)
A app/assets/images/browse/tourism_board.svg (3)
A app/assets/images/browse/tourism_camping.svg (3)
A app/assets/images/browse/tourism_caravan_park.svg (3)
A app/assets/images/browse/tourism_chalet.svg (4)
A app/assets/images/browse/tourism_guest_house.svg (4)
A app/assets/images/browse/tourism_guidepost.svg (3)
A app/assets/images/browse/tourism_hostel.svg (4)
A app/assets/images/browse/tourism_hotel.svg (3)
A app/assets/images/browse/tourism_map.svg (3)
A app/assets/images/browse/tourism_motel.svg (3)
A app/assets/images/browse/tourism_museum.svg (3)
A app/assets/images/browse/tourism_office.svg (3)
A app/assets/images/browse/tourism_picnic.svg (3)
A app/assets/images/browse/tourism_terminal.svg (3)
A app/assets/images/browse/tourism_viewpoint.svg (3)
A app/assets/images/browse/tourism_wilderness_hut.svg (3)
M app/assets/stylesheets/browse.scss (91)
M app/assets/stylesheets/common.scss (27)
-- Patch Links --
https://github.com/openstreetmap/openstreetmap-website/pull/5080.patch
https://github.com/openstreetmap/openstreetmap-website/pull/5080.diff
--
Reply to this email directly or view it on GitHub:
https://github.com/openstreetmap/openstreetmap-website/pull/5080
You are receiving this because you are subscribed to this thread.
Message ID: <openstreetmap/openstreetmap-website/pull/5080 at github.com>
-------------- next part --------------
An HTML attachment was scrubbed...
URL: <http://lists.openstreetmap.org/pipermail/rails-dev/attachments/20240815/8e07c0a2/attachment-0001.htm>
More information about the rails-dev
mailing list