From c1dc4f62ebdd4f145948897dbab5edee0a43286a Mon Sep 17 00:00:00 2001 From: Anton Khorev Date: Mon, 29 Apr 2024 07:14:30 +0300 Subject: [PATCH] Write browse icons using Sass loop --- app/assets/stylesheets/browse.scss | 358 ++++++++++++++--------------- app/assets/stylesheets/common.scss | 24 +- 2 files changed, 195 insertions(+), 187 deletions(-) diff --git a/app/assets/stylesheets/browse.scss b/app/assets/stylesheets/browse.scss index 7c0fbd2c0..30cb25c00 100644 --- a/app/assets/stylesheets/browse.scss +++ b/app/assets/stylesheets/browse.scss @@ -1,192 +1,178 @@ -.browse-section { - - /* Make space for icons */ - - .node::before, - .way::before, - .relation::before { - display: inline-block; - width: 25px; - margin-left: -25px; - } - - .node, .way, .relation { - margin-left: 25px; - } +$map-sidebar-icons: ( /* Nodes (and ways as areas) */ - .aeroway.aerodrome::before { content: image-url('browse/aerodrome.p.16.png'); } - - .amenity.atm::before { content: image-url('browse/amenity_atm.16.png'); } - .amenity.bank::before { content: image-url('browse/amenity_bank.16.png'); } - .amenity.bar::before { content: image-url('browse/amenity_bar.16.png'); } - .amenity.bench::before { content: image-url('browse/amenity_bench.16.png'); } - .amenity.biergarten::before { content: image-url('browse/amenity_biergarten.16.png'); } - .amenity.bicycle_parking::before { content: image-url('browse/amenity_bicycle_parking.16.png'); } - .amenity.bicycle_rental::before { content: image-url('browse/transport_rental_bicycle.16.png'); } - .amenity.bus_station::before { content: image-url('browse/bus_station.n.16.png'); } - .amenity.cafe::before { content: image-url('browse/amenity_cafe.16.png'); } - .amenity.car_rental::before { content: image-url('browse/transport_rental_car.16.png'); } - .amenity.car_sharing::before { content: image-url('browse/car_share.p.16.png'); } - .amenity.cinema::before { content: image-url('browse/amenity_cinema.16.png'); } - .amenity.courthouse::before { content: image-url('browse/amenity_courthouse.16.png'); } - .amenity.dentist::before { content: image-url('browse/amenity_dentist.16.png'); } - .amenity.doctors::before { content: image-url('browse/amenity_doctors.16.png'); } - .amenity.drinking_water::before { content: image-url('browse/amenity_drinking_water.16.png'); } - .amenity.embassy::before { content: image-url('browse/amenity_embassy.16.png'); } - .amenity.fast_food::before { content: image-url('browse/amenity_fast_food.16.png'); } - .amenity.fire_station::before { content: image-url('browse/amenity_fire_station.16.png'); } - .amenity.fuel::before { content: image-url('browse/amenity_fuel.16.png'); } - .amenity.hospital::before { content: image-url('browse/amenity_hospital.16.png'); } - .amenity.library::before { content: image-url('browse/library.p.16.png'); } - .amenity.nursery::before { content: image-url('browse/education_nursery.p.16.png'); } - .amenity.nightclub::before { content: image-url('browse/amenity_nightclub.16.png'); } - .amenity.parking::before { content: image-url('browse/parking.p.16.png'); } - .amenity.pharmacy::before { content: image-url('browse/amenity_pharmacy.16.png'); } - .amenity.place_of_worship::before { content: image-url('browse/amenity_place_of_worship.16.png'); } - .amenity.police::before { content: image-url('browse/amenity_police.16.png'); } - .amenity.post_box::before { content: image-url('browse/post_box.p.16.png'); } - .amenity.post_office::before { content: image-url('browse/post_office.p.16.png'); } - .amenity.prison::before { content: image-url('browse/amenity_prison.16.png'); } - .amenity.pub::before { content: image-url('browse/amenity_pub.16.png'); } - .amenity.restaurant::before { content: image-url('browse/amenity_restaurant.16.png'); } - .amenity.recycling::before { content: image-url('browse/amenity_recycling.16.png'); } - .amenity.school::before { content: image-url('browse/education_school.p.16.png'); } - .amenity.shelter::before { content: image-url('browse/shelter2.p.16.png'); } - .amenity.taxi::before { content: image-url('browse/amenity_taxi.16.png'); } - .amenity.telephone::before { content: image-url('browse/telephone.p.16.png'); } - .amenity.theatre::before { content: image-url('browse/amenity_theatre.16.png'); } - .amenity.toilets::before { content: image-url('browse/amenity_toilets.16.png'); } - .amenity.townhall::before { content: image-url('browse/amenity_townhall.16.png'); } - .amenity.university::before { content: image-url('browse/education_university.p.16.png'); } - .amenity.veterinary::before { content: image-url('browse/health_veterinary.p.16.png'); } - .amenity.waste_basket::before { content: image-url('browse/amenity_waste_basket.16.png'); } - - .barrier.gate::before { content: image-url('browse/gate2.p.16.png'); } - - .highway.bus_stop::before { content: image-url('browse/highway_bus_stop.16.png'); } - .highway.mini_roundabout::before { content: image-url('browse/mini_round.p.16.png'); } - .highway.traffic_signals::before { content: image-url('browse/traffic_light.png'); } - .highway.turning_circle::before { content: image-url('browse/turning_circle.p.16.png'); } - - .historic.archaeological_site::before { content: image-url('browse/historic_archaeological_site.16.png'); } - .historic.castle::before { content: image-url('browse/tourist_castle.p.16.png'); } - .historic.memorial::before { content: image-url('browse/historic_memorial.16.png'); } - .historic.monument::before { content: image-url('browse/historic_monument.16.png'); } - .historic.ruins::before { content: image-url('browse/tourist_ruins.p.16.png'); } - .historic.wreck::before { content: image-url('browse/tourist_wreck.p.16.png'); } - - .man_made.lighthouse::before { content: image-url('browse/man_made_lighthouse.16.png'); } - .man_made.water_tower::before { content: image-url('browse/man_made_water_tower.16.png'); } - .man_made.windmill::before { content: image-url('browse/man_made_windmill.16.png'); } - - .natural.tree::before { content: image-url('browse/tree.p.16.png'); } - - .railway.halt::before { content: image-url('browse/halt.p.16.png'); } - .railway.station::before { content: image-url('browse/station.p.16.png'); } - .railway.level_crossing::before { content: image-url('browse/level_crossing.p.16.png'); } - - .shop::before { content: image-url('browse/shop_convenience.p.16.png'); } - .shop.alcohol::before { content: image-url('browse/shop_alcohol.16.png'); } - .shop.bakery::before { content: image-url('browse/shop_bakery.16.png'); } - .shop.bicycle::before { content: image-url('browse/shop_bicycle.16.png'); } - .shop.books::before { content: image-url('browse/shop_books.16.png'); } - .shop.butcher::before { content: image-url('browse/shop_butcher.p.16.png'); } - .shop.clothes::before { content: image-url('browse/shop_clothes.16.png'); } - .shop.car_parts::before { content: image-url('browse/shop_car_parts.16.png'); } - .shop.car_repair::before { content: image-url('browse/shop_car_repair.16.png'); } - .shop.convenience::before { content: image-url('browse/shop_convenience.p.16.png'); } - .shop.diy::before { content: image-url('browse/shop_doityourself.16.png'); } - .shop.electronics::before { content: image-url('browse/shop_electronics.16.png'); } - .shop.estate_agent::before { content: image-url('browse/shop_estateagent2.p.16.png'); } - .shop.fashion::before { content: image-url('browse/shop_clothes.16.png'); } - .shop.fish::before { content: image-url('browse/shop_fish.p.16.png'); } - .shop.florist::before { content: image-url('browse/shop_florist.16.png'); } - .shop.furniture::before { content: image-url('browse/shop_furniture.16.png'); } - .shop.garden_centre::before { content: image-url('browse/shop_florist.16.png'); } - .shop.gift::before { content: image-url('browse/shop_gift.16.png'); } - .shop.greengrocer::before { content: image-url('browse/shop_greengrocer.p.16.png'); } - .shop.hardware::before { content: image-url('browse/shop_doityourself.16.png'); } - .shop.hairdresser::before { content: image-url('browse/shop_hairdresser.16.png'); } - .shop.jewelry::before { content: image-url('browse/shop_jewellery.16.png'); } - .shop.jewellery::before { content: image-url('browse/shop_jewellery.16.png'); } - .shop.mobile_phone::before { content: image-url('browse/shop_mobile_phone.16.png'); } - .shop.optician::before { content: image-url('browse/shop_optician.16.png'); } - .shop.pet::before { content: image-url('browse/shop_pet.16.png'); } - .shop.shoes::before { content: image-url('browse/shop_shoes.16.png'); } - .shop.supermarket::before { content: image-url('browse/shop_supermarket.p.16.png'); } - - .tourism.alpine_hut::before { content: image-url('browse/tourism_alpine_hut.16.png'); } - .tourism.camp_site::before { content: image-url('browse/tourism_camp_site.16.png'); } - .tourism.caravan_site::before { content: image-url('browse/tourism_caravan_site.16.png'); } - .tourism.hostel::before { content: image-url('browse/tourism_hostel.16.png'); } - .tourism.hotel::before { content: image-url('browse/tourism_hotel.16.png'); } - .tourism.motel::before { content: image-url('browse/tourism_motel.16.png'); } - .tourism.museum::before { content: image-url('browse/tourism_museum.16.png'); } - .tourism.picnic_site::before { content: image-url('browse/tourism_picnic_site.16.png'); } - .tourism.viewpoint::before { content: image-url('browse/view_point.p.16.png'); } - .tourism.wilderness_hut::before { content: image-url('browse/tourism_wilderness_hut.16.png'); } + ".aeroway.aerodrome": ("filename": "aerodrome.p.16.png"), + + ".amenity.atm": ("filename": "amenity_atm.16.png"), + ".amenity.bank": ("filename": "amenity_bank.16.png"), + ".amenity.bar": ("filename": "amenity_bar.16.png"), + ".amenity.bench": ("filename": "amenity_bench.16.png"), + ".amenity.biergarten": ("filename": "amenity_biergarten.16.png"), + ".amenity.bicycle_parking": ("filename": "amenity_bicycle_parking.16.png"), + ".amenity.bicycle_rental": ("filename": "transport_rental_bicycle.16.png"), + ".amenity.bus_station": ("filename": "bus_station.n.16.png"), + ".amenity.cafe": ("filename": "amenity_cafe.16.png"), + ".amenity.car_rental": ("filename": "transport_rental_car.16.png"), + ".amenity.car_sharing": ("filename": "car_share.p.16.png"), + ".amenity.cinema": ("filename": "amenity_cinema.16.png"), + ".amenity.courthouse": ("filename": "amenity_courthouse.16.png"), + ".amenity.dentist": ("filename": "amenity_dentist.16.png"), + ".amenity.doctors": ("filename": "amenity_doctors.16.png"), + ".amenity.drinking_water": ("filename": "amenity_drinking_water.16.png"), + ".amenity.embassy": ("filename": "amenity_embassy.16.png"), + ".amenity.fast_food": ("filename": "amenity_fast_food.16.png"), + ".amenity.fire_station": ("filename": "amenity_fire_station.16.png"), + ".amenity.fuel": ("filename": "amenity_fuel.16.png"), + ".amenity.hospital": ("filename": "amenity_hospital.16.png"), + ".amenity.library": ("filename": "library.p.16.png"), + ".amenity.nursery": ("filename": "education_nursery.p.16.png"), + ".amenity.nightclub": ("filename": "amenity_nightclub.16.png"), + ".amenity.parking": ("filename": "parking.p.16.png"), + ".amenity.pharmacy": ("filename": "amenity_pharmacy.16.png"), + ".amenity.place_of_worship": ("filename": "amenity_place_of_worship.16.png"), + ".amenity.police": ("filename": "amenity_police.16.png"), + ".amenity.post_box": ("filename": "post_box.p.16.png"), + ".amenity.post_office": ("filename": "post_office.p.16.png"), + ".amenity.prison": ("filename": "amenity_prison.16.png"), + ".amenity.pub": ("filename": "amenity_pub.16.png"), + ".amenity.restaurant": ("filename": "amenity_restaurant.16.png"), + ".amenity.recycling": ("filename": "amenity_recycling.16.png"), + ".amenity.school": ("filename": "education_school.p.16.png"), + ".amenity.shelter": ("filename": "shelter2.p.16.png"), + ".amenity.taxi": ("filename": "amenity_taxi.16.png"), + ".amenity.telephone": ("filename": "telephone.p.16.png"), + ".amenity.theatre": ("filename": "amenity_theatre.16.png"), + ".amenity.toilets": ("filename": "amenity_toilets.16.png"), + ".amenity.townhall": ("filename": "amenity_townhall.16.png"), + ".amenity.university": ("filename": "education_university.p.16.png"), + ".amenity.veterinary": ("filename": "health_veterinary.p.16.png"), + ".amenity.waste_basket": ("filename": "amenity_waste_basket.16.png"), + + ".barrier.gate": ("filename": "gate2.p.16.png"), + + ".highway.bus_stop": ("filename": "highway_bus_stop.16.png"), + ".highway.mini_roundabout": ("filename": "mini_round.p.16.png"), + ".highway.traffic_signals": ("filename": "traffic_light.png"), + ".highway.turning_circle": ("filename": "turning_circle.p.16.png"), + + ".historic.archaeological_site": ("filename": "historic_archaeological_site.16.png"), + ".historic.castle": ("filename": "tourist_castle.p.16.png"), + ".historic.memorial": ("filename": "historic_memorial.16.png"), + ".historic.monument": ("filename": "historic_monument.16.png"), + ".historic.ruins": ("filename": "tourist_ruins.p.16.png"), + ".historic.wreck": ("filename": "tourist_wreck.p.16.png"), + + ".man_made.lighthouse": ("filename": "man_made_lighthouse.16.png"), + ".man_made.water_tower": ("filename": "man_made_water_tower.16.png"), + ".man_made.windmill": ("filename": "man_made_windmill.16.png"), + + ".natural.tree": ("filename": "tree.p.16.png"), + + ".railway.halt": ("filename": "halt.p.16.png"), + ".railway.station": ("filename": "station.p.16.png"), + ".railway.level_crossing": ("filename": "level_crossing.p.16.png"), + + ".shop": ("filename": "shop_convenience.p.16.png"), + ".shop.alcohol": ("filename": "shop_alcohol.16.png"), + ".shop.bakery": ("filename": "shop_bakery.16.png"), + ".shop.bicycle": ("filename": "shop_bicycle.16.png"), + ".shop.books": ("filename": "shop_books.16.png"), + ".shop.butcher": ("filename": "shop_butcher.p.16.png"), + ".shop.clothes": ("filename": "shop_clothes.16.png"), + ".shop.car_parts": ("filename": "shop_car_parts.16.png"), + ".shop.car_repair": ("filename": "shop_car_repair.16.png"), + ".shop.convenience": ("filename": "shop_convenience.p.16.png"), + ".shop.diy": ("filename": "shop_doityourself.16.png"), + ".shop.electronics": ("filename": "shop_electronics.16.png"), + ".shop.estate_agent": ("filename": "shop_estateagent2.p.16.png"), + ".shop.fashion": ("filename": "shop_clothes.16.png"), + ".shop.fish": ("filename": "shop_fish.p.16.png"), + ".shop.florist": ("filename": "shop_florist.16.png"), + ".shop.furniture": ("filename": "shop_furniture.16.png"), + ".shop.garden_centre": ("filename": "shop_florist.16.png"), + ".shop.gift": ("filename": "shop_gift.16.png"), + ".shop.greengrocer": ("filename": "shop_greengrocer.p.16.png"), + ".shop.hardware": ("filename": "shop_doityourself.16.png"), + ".shop.hairdresser": ("filename": "shop_hairdresser.16.png"), + ".shop.jewelry": ("filename": "shop_jewellery.16.png"), + ".shop.jewellery": ("filename": "shop_jewellery.16.png"), + ".shop.mobile_phone": ("filename": "shop_mobile_phone.16.png"), + ".shop.optician": ("filename": "shop_optician.16.png"), + ".shop.pet": ("filename": "shop_pet.16.png"), + ".shop.shoes": ("filename": "shop_shoes.16.png"), + ".shop.supermarket": ("filename": "shop_supermarket.p.16.png"), + + ".tourism.alpine_hut": ("filename": "tourism_alpine_hut.16.png"), + ".tourism.camp_site": ("filename": "tourism_camp_site.16.png"), + ".tourism.caravan_site": ("filename": "tourism_caravan_site.16.png"), + ".tourism.hostel": ("filename": "tourism_hostel.16.png"), + ".tourism.hotel": ("filename": "tourism_hotel.16.png"), + ".tourism.motel": ("filename": "tourism_motel.16.png"), + ".tourism.museum": ("filename": "tourism_museum.16.png"), + ".tourism.picnic_site": ("filename": "tourism_picnic_site.16.png"), + ".tourism.viewpoint": ("filename": "view_point.p.16.png"), + ".tourism.wilderness_hut": ("filename": "tourism_wilderness_hut.16.png"), /* Ways */ - .aeroway.runway::before { content: image-url('browse/runway.20.png'); } - .aeroway.taxiway::before { content: image-url('browse/taxiway.20.png'); } - - .barrier.wall::before { content: image-url('browse/wall.20.png'); } - - .building::before { content: image-url('browse/building.png'); } - - .highway.bridleway::before { content: image-url('browse/bridleway.20.png'); } - .highway.cycleway::before { content: image-url('browse/cycleway.20.png'); } - .highway.footway::before { content: image-url('browse/footway.20.png'); } - .highway.motorway::before { content: image-url('browse/motorway.20.png'); } - .highway.motorway_link::before { content: image-url('browse/motorway.20.png'); } - .highway.path::before { content: image-url('browse/path.20.png'); } - .highway.pedestrian::before { content: image-url('browse/service.20.png'); } - .highway.primary::before { content: image-url('browse/primary.20.png'); } - .highway.primary_link::before { content: image-url('browse/primary.20.png'); } - .highway.residential::before { content: image-url('browse/unclassified.20.png'); } - .highway.secondary::before { content: image-url('browse/secondary.20.png'); } - .highway.secondary_link::before { content: image-url('browse/secondary.20.png'); } - .highway.service::before { content: image-url('browse/service.20.png'); } - .highway.tertiary::before { content: image-url('browse/tertiary.20.png'); } - .highway.track::before { content: image-url('browse/track.20.png'); } - .highway.trunk::before { content: image-url('browse/trunk.20.png'); } - .highway.trunk_link::before { content: image-url('browse/trunk.20.png'); } - .highway.unclassified::before { content: image-url('browse/unclassified.20.png'); } - - .landuse.brownfield::before { content: image-url('browse/brownfield.png'); } - .landuse.cemetery::before { content: image-url('browse/cemetery.png'); } - .landuse.commercial::before { content: image-url('browse/commercial.png'); } - .landuse.farmland::before { content: image-url('browse/farmland.png'); } - .landuse.farmyard::before { content: image-url('browse/farmyard.png'); } - .landuse.forest::before { content: image-url('browse/forest.png'); } - .landuse.grass::before { content: image-url('browse/grass.png'); } - .landuse.industrial::before { content: image-url('browse/industrial.png'); } - .landuse.meadow::before { content: image-url('browse/meadow.png'); } - .landuse.military::before { content: image-url('browse/military.png'); } - .landuse.residential::before { content: image-url('browse/residential.png'); } - .landuse.retail::before { content: image-url('browse/retail.png'); } - .landuse.tourism::before { content: image-url('browse/tourism.png'); } - - .leisure.golf_course::before { content: image-url('browse/golf.png'); } - .leisure.park::before { content: image-url('browse/park.png'); } - .leisure.picnic_table::before { content: image-url('browse/tourism_picnic_site.16.png'); } - .leisure.playground::before { content: image-url('browse/leisure_playground.16.png'); } - .leisure.pitch::before { content: image-url('browse/pitch.png'); } - .leisure.nature_reserve::before { content: image-url('browse/reserve.png'); } - .leisure.water_park::before { content: image-url('browse/leisure_water_park.16.png'); } - - .natural.grassland::before { content: image-url('browse/grassland.png'); } - .natural.heath::before { content: image-url('browse/heathland.png'); } - .natural.scrub::before { content: image-url('browse/scrub.png'); } - .natural.water::before { content: image-url('browse/lake.png'); } - .natural.wood::before { content: image-url('browse/wood.png'); } - - .railway.light_rail::before { content: image-url('browse/light_rail.20.png'); } - .railway.rail::before { content: image-url('browse/rail.20.png'); } - .railway.subway::before { content: image-url('browse/subway.20.png'); } - .railway.tram::before { content: image-url('browse/tram.20.png'); } - -} + ".aeroway.runway": ("filename": "runway.20.png"), + ".aeroway.taxiway": ("filename": "taxiway.20.png"), + + ".barrier.wall": ("filename": "wall.20.png"), + + ".building": ("filename": "building.png"), + + ".highway.bridleway": ("filename": "bridleway.20.png"), + ".highway.cycleway": ("filename": "cycleway.20.png"), + ".highway.footway": ("filename": "footway.20.png"), + ".highway.motorway": ("filename": "motorway.20.png"), + ".highway.motorway_link": ("filename": "motorway.20.png"), + ".highway.path": ("filename": "path.20.png"), + ".highway.pedestrian": ("filename": "service.20.png"), + ".highway.primary": ("filename": "primary.20.png"), + ".highway.primary_link": ("filename": "primary.20.png"), + ".highway.residential": ("filename": "unclassified.20.png"), + ".highway.secondary": ("filename": "secondary.20.png"), + ".highway.secondary_link": ("filename": "secondary.20.png"), + ".highway.service": ("filename": "service.20.png"), + ".highway.tertiary": ("filename": "tertiary.20.png"), + ".highway.track": ("filename": "track.20.png"), + ".highway.trunk": ("filename": "trunk.20.png"), + ".highway.trunk_link": ("filename": "trunk.20.png"), + ".highway.unclassified": ("filename": "unclassified.20.png"), + + ".landuse.brownfield": ("filename": "brownfield.png"), + ".landuse.cemetery": ("filename": "cemetery.png"), + ".landuse.commercial": ("filename": "commercial.png"), + ".landuse.farmland": ("filename": "farmland.png"), + ".landuse.farmyard": ("filename": "farmyard.png"), + ".landuse.forest": ("filename": "forest.png"), + ".landuse.grass": ("filename": "grass.png"), + ".landuse.industrial": ("filename": "industrial.png"), + ".landuse.meadow": ("filename": "meadow.png"), + ".landuse.military": ("filename": "military.png"), + ".landuse.residential": ("filename": "residential.png"), + ".landuse.retail": ("filename": "retail.png"), + ".landuse.tourism": ("filename": "tourism.png"), + + ".leisure.golf_course": ("filename": "golf.png"), + ".leisure.park": ("filename": "park.png"), + ".leisure.picnic_table": ("filename": "tourism_picnic_site.16.png"), + ".leisure.playground": ("filename": "leisure_playground.16.png"), + ".leisure.pitch": ("filename": "pitch.png"), + ".leisure.nature_reserve": ("filename": "reserve.png"), + ".leisure.water_park": ("filename": "leisure_water_park.16.png"), + + ".natural.grassland": ("filename": "grassland.png"), + ".natural.heath": ("filename": "heathland.png"), + ".natural.scrub": ("filename": "scrub.png"), + ".natural.water": ("filename": "lake.png"), + ".natural.wood": ("filename": "wood.png"), + + ".railway.light_rail": ("filename": "light_rail.20.png"), + ".railway.rail": ("filename": "rail.20.png"), + ".railway.subway": ("filename": "subway.20.png"), + ".railway.tram": ("filename": "tram.20.png"), + +) diff --git a/app/assets/stylesheets/common.scss b/app/assets/stylesheets/common.scss index 7c31b3cb1..8a5aa142c 100644 --- a/app/assets/stylesheets/common.scss +++ b/app/assets/stylesheets/common.scss @@ -1,4 +1,6 @@ +@use "sass:map"; @import "parameters"; +@import "browse"; @import "bootstrap"; @import "rails_bootstrap_forms"; @@ -1010,4 +1012,24 @@ img.trace_image { } } -@import 'browse'; +/* Rules for map sidebar icons */ + +.browse-section { + .node::before, + .way::before, + .relation::before { + display: inline-block; + width: 25px; + margin-left: -25px; + } + + .node, .way, .relation { + margin-left: 25px; + } +} + +@each $class, $item in $map-sidebar-icons { + .browse-section #{$class}::before { + content: image-url('browse/#{map.get($item, "filename")}'); + } +} -- 2.45.2