Fix gap for iconless nodes in history view

Done by inlining icons via ::before and content: url(...) so that tag
combinations without an icon do not get any additional markup at all.

diff --git a/app/assets/stylesheets/browse.css.scss b/app/assets/stylesheets/browse.css.scss
index 5d620d7941ecbb955df5cd8fe7e84f233bbbf186..59ba0be73a269bf62766eed0e31c86825b35725b 100644 (file)
--- a/app/assets/stylesheets/browse.css.scss
+++ b/app/assets/stylesheets/browse.css.scss
@@ -1,12 +1,16 @@
 /* Make space for icons */
 
 a.node, a.way, a.relation { 
-  padding-left: 25px;
-
   &:first-child {
-    margin-left: -25px;
+    &::before {
+      margin-left: -25px;
+    }
   }
 }
+a.node::before, a.way::before, a.relation::before {
+  display: inline-block;
+  width: 25px;
+}
 
 /* Deleted objects */
 
@@ -14,138 +18,138 @@ a.node, a.way, a.relation {
 
 /* Nodes (and ways as areas) */
 
-.aeroway.aerodrome { background: image-url('browse/aerodrome.p.16.png') no-repeat center left; }
-
-.amenity.atm { background: image-url('browse/atm2.p.16.png') no-repeat center left; }
-.amenity.bank { background: image-url('browse/bank2.p.16.png') no-repeat center left; }
-.amenity.bar { background: image-url('browse/bar.p.16.png') no-repeat center left; }
-.amenity.bicycle_parking { background: image-url('browse/transport_parking_bicycle.p.16.png') no-repeat center left; }
-.amenity.bicycle_rental { background: image-url('browse/transport_rental_bicycle.p.16.png') no-repeat center left; }
-.amenity.bus_station { background: image-url('browse/bus_station.n.16.png') no-repeat center left; }
-.amenity.cafe { background: image-url('browse/cafe.p.16.png') no-repeat center left; }
-.amenity.car_rental { background: image-url('browse/transport_rental_car.p.16.png') no-repeat center left; }
-.amenity.car_sharing { background: image-url('browse/car_share.p.16.png') no-repeat center left; }
-.amenity.cinema { background: image-url('browse/cinema.p.16.png') no-repeat center left; }
-.amenity.dentist { background: image-url('browse/health_dentist.p.16.png') no-repeat center left; }
-.amenity.doctors { background: image-url('browse/health_doctors.p.16.png') no-repeat center left; }
-.amenity.drinking_water { background: image-url('browse/drinkingtap.p.16.png') no-repeat center left; }
-.amenity.fast_food { background: image-url('browse/fast_food.p.16.png') no-repeat center left; }
-.amenity.fire_station { background: image-url('browse/firestation.p.16.png') no-repeat center left; }
-.amenity.fuel { background: image-url('browse/fuel.p.16.png') no-repeat center left; }
-.amenity.hospital { background: image-url('browse/hospital.p.16.png') no-repeat center left; }
-.amenity.library { background: image-url('browse/library.p.16.png') no-repeat center left; }
-.amenity.nursery { background: image-url('browse/education_nursery.p.16.png') no-repeat center left; }
-.amenity.parking { background: image-url('browse/parking.p.16.png') no-repeat center left; }
-.amenity.pharmacy { background: image-url('browse/pharmacy.p.16.png') no-repeat center left; }
-.amenity.place_of_worship { background: image-url('browse/place_of_worship_unknown3.p.16.png') no-repeat center left; }
-.amenity.police { background: image-url('browse/police.p.16.png') no-repeat center left; }
-.amenity.post_box { background: image-url('browse/post_box.p.16.png') no-repeat center left; }
-.amenity.post_office { background: image-url('browse/post_office.p.16.png') no-repeat center left; }
-.amenity.prison { background: image-url('browse/prison.p.16.png') no-repeat center left; }
-.amenity.pub { background: image-url('browse/pub.p.16.png') no-repeat center left; }
-.amenity.restaurant { background: image-url('browse/restaurant.p.16.png') no-repeat center left; }
-.amenity.recycling { background: image-url('browse/recycling.p.16.png') no-repeat center left; }
-.amenity.school { background: image-url('browse/education_school.p.16.png') no-repeat center left; }
-.amenity.shelter { background: image-url('browse/shelter2.p.16.png') no-repeat center left; }
-.amenity.telephone { background: image-url('browse/telephone.p.16.png') no-repeat center left; }
-.amenity.theatre { background: image-url('browse/theatre.p.16.png') no-repeat center left; }
-.amenity.toilets { background: image-url('browse/toilets.p.16.png') no-repeat center left; }
-.amenity.university { background: image-url('browse/education_university.p.16.png') no-repeat center left; }
-.amenity.veterinary { background: image-url('browse/health_veterinary.p.16.png') no-repeat center left; }
-
-.barrier.gate { background: image-url('browse/gate2.p.16.png') no-repeat center left; }
-
-.highway.bus_stop { background: image-url('browse/bus_stop.p.16.png') no-repeat center left; }
-.highway.mini_roundabout { background: image-url('browse/mini_round.p.16.png') no-repeat center left; }
-.highway.traffic_signals { background: image-url('browse/traffic_light.png') no-repeat center left; }
-.highway.turning_circle { background: image-url('browse/turning_circle.p.16.png') no-repeat center left; }
-
-.historic.castle { background: image-url('browse/tourist_castle.p.16.png') no-repeat center left; }
-.historic.memorial { background: image-url('browse/tourist_memorial.p.16.png') no-repeat center left; }
-.historic.monument { background: image-url('browse/tourist_monument.p.16.png') no-repeat center left; }
-.historic.ruins { background: image-url('browse/tourist_ruins.p.16.png') no-repeat center left; }
-.historic.wreck { background: image-url('browse/tourist_wreck.p.16.png') no-repeat center left; }
-
-.man_made.lighthouse { background: image-url('browse/lighthouse.p.16.png') no-repeat center left; }
-.man_made.windmill { background: image-url('browse/tourist_windmill.p.16.png') no-repeat center left; }
-
-.natural.tree { background: image-url('browse/tree.p.16.png') no-repeat center left; }
-
-.railway.halt { background: image-url('browse/halt.p.16.png') no-repeat center left; }
-.railway.station { background: image-url('browse/station.p.16.png') no-repeat center left; }
-.railway.level_crossing { background: image-url('browse/level_crossing.p.16.png') no-repeat center left; }
-
-.shop { background: image-url('browse/shop_convenience.p.16.png') no-repeat center left; }
-.shop.bakery { background: image-url('browse/shop_bakery.p.16.png') no-repeat center left; }
-.shop.bicycle { background: image-url('browse/shop_bicycle.p.16.png') no-repeat center left; }
-.shop.books { background: image-url('browse/shop_books.p.16.png') no-repeat center left; }
-.shop.butcher { background: image-url('browse/shop_butcher.p.16.png') no-repeat center left; }
-.shop.clothes { background: image-url('browse/shop_clothes.p.16.png') no-repeat center left; }
-.shop.convenience { background: image-url('browse/shop_convenience.p.16.png') no-repeat center left; }
-.shop.diy { background: image-url('browse/shop_diy.p.16.png') no-repeat center left; }
-.shop.estate_agent { background: image-url('browse/shop_estateagent2.p.16.png') no-repeat center left; }
-.shop.fish { background: image-url('browse/shop_fish.p.16.png') no-repeat center left; }
-.shop.garden_centre { background: image-url('browse/shop_garden_centre.p.16.png') no-repeat center left; }
-.shop.gift { background: image-url('browse/shop_gift.p.16.png') no-repeat center left; }
-.shop.greengrocer { background: image-url('browse/shop_greengrocer.p.16.png') no-repeat center left; }
-.shop.hairdresser { background: image-url('browse/shop_hairdresser.p.16.png') no-repeat center left; }
-.shop.jewelry { background: image-url('browse/shop_jewelry.p.16.png') no-repeat center left; }
-.shop.supermarket { background: image-url('browse/shop_supermarket.p.16.png') no-repeat center left; }
-
-.tourism.alpine_hut { background: image-url('browse/alpinehut.p.16.png') no-repeat center left; }
-.tourism.camp_site { background: image-url('browse/camping.n.16.png') no-repeat center left; }
-.tourism.caravan_site { background: image-url('browse/caravan_park.n.16.png') no-repeat center left; }
-.tourism.hostel { background: image-url('browse/hostel.p.16.png') no-repeat center left; }
-.tourism.hotel { background: image-url('browse/hotel.p.16.png') no-repeat center left; }
-.tourism.museum { background: image-url('browse/museum.p.16.png') no-repeat center left; }
-.tourism.picnic_site { background: image-url('browse/tourist_picnic.p.16.png') no-repeat center left; }
-.tourism.viewpoint { background: image-url('browse/view_point.p.16.png') no-repeat center left; }
+.aeroway.aerodrome::before { content: image-url('browse/aerodrome.p.16.png'); }
+
+.amenity.atm::before { content: image-url('browse/atm2.p.16.png'); }
+.amenity.bank::before { content: image-url('browse/bank2.p.16.png'); }
+.amenity.bar::before { content: image-url('browse/bar.p.16.png'); }
+.amenity.bicycle_parking::before { content: image-url('browse/transport_parking_bicycle.p.16.png'); }
+.amenity.bicycle_rental::before { content: image-url('browse/transport_rental_bicycle.p.16.png'); }
+.amenity.bus_station::before { content: image-url('browse/bus_station.n.16.png'); }
+.amenity.cafe::before { content: image-url('browse/cafe.p.16.png'); }
+.amenity.car_rental::before { content: image-url('browse/transport_rental_car.p.16.png'); }
+.amenity.car_sharing::before { content: image-url('browse/car_share.p.16.png'); }
+.amenity.cinema::before { content: image-url('browse/cinema.p.16.png'); }
+.amenity.dentist::before { content: image-url('browse/health_dentist.p.16.png'); }
+.amenity.doctors::before { content: image-url('browse/health_doctors.p.16.png'); }
+.amenity.drinking_water::before { content: image-url('browse/drinkingtap.p.16.png'); }
+.amenity.fast_food::before { content: image-url('browse/fast_food.p.16.png'); }
+.amenity.fire_station::before { content: image-url('browse/firestation.p.16.png'); }
+.amenity.fuel::before { content: image-url('browse/fuel.p.16.png'); }
+.amenity.hospital::before { content: image-url('browse/hospital.p.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.parking::before { content: image-url('browse/parking.p.16.png'); }
+.amenity.pharmacy::before { content: image-url('browse/pharmacy.p.16.png'); }
+.amenity.place_of_worship::before { content: image-url('browse/place_of_worship_unknown3.p.16.png'); }
+.amenity.police::before { content: image-url('browse/police.p.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/prison.p.16.png'); }
+.amenity.pub::before { content: image-url('browse/pub.p.16.png'); }
+.amenity.restaurant::before { content: image-url('browse/restaurant.p.16.png'); }
+.amenity.recycling::before { content: image-url('browse/recycling.p.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.telephone::before { content: image-url('browse/telephone.p.16.png'); }
+.amenity.theatre::before { content: image-url('browse/theatre.p.16.png'); }
+.amenity.toilets::before { content: image-url('browse/toilets.p.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'); }
+
+.barrier.gate::before { content: image-url('browse/gate2.p.16.png'); }
+
+.highway.bus_stop::before { content: image-url('browse/bus_stop.p.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.castle::before { content: image-url('browse/tourist_castle.p.16.png'); }
+.historic.memorial::before { content: image-url('browse/tourist_memorial.p.16.png'); }
+.historic.monument::before { content: image-url('browse/tourist_monument.p.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/lighthouse.p.16.png'); }
+.man_made.windmill::before { content: image-url('browse/tourist_windmill.p.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.bakery::before { content: image-url('browse/shop_bakery.p.16.png'); }
+.shop.bicycle::before { content: image-url('browse/shop_bicycle.p.16.png'); }
+.shop.books::before { content: image-url('browse/shop_books.p.16.png'); }
+.shop.butcher::before { content: image-url('browse/shop_butcher.p.16.png'); }
+.shop.clothes::before { content: image-url('browse/shop_clothes.p.16.png'); }
+.shop.convenience::before { content: image-url('browse/shop_convenience.p.16.png'); }
+.shop.diy::before { content: image-url('browse/shop_diy.p.16.png'); }
+.shop.estate_agent::before { content: image-url('browse/shop_estateagent2.p.16.png'); }
+.shop.fish::before { content: image-url('browse/shop_fish.p.16.png'); }
+.shop.garden_centre::before { content: image-url('browse/shop_garden_centre.p.16.png'); }
+.shop.gift::before { content: image-url('browse/shop_gift.p.16.png'); }
+.shop.greengrocer::before { content: image-url('browse/shop_greengrocer.p.16.png'); }
+.shop.hairdresser::before { content: image-url('browse/shop_hairdresser.p.16.png'); }
+.shop.jewelry::before { content: image-url('browse/shop_jewelry.p.16.png'); }
+.shop.supermarket::before { content: image-url('browse/shop_supermarket.p.16.png'); }
+
+.tourism.alpine_hut::before { content: image-url('browse/alpinehut.p.16.png'); }
+.tourism.camp_site::before { content: image-url('browse/camping.n.16.png'); }
+.tourism.caravan_site::before { content: image-url('browse/caravan_park.n.16.png'); }
+.tourism.hostel::before { content: image-url('browse/hostel.p.16.png'); }
+.tourism.hotel::before { content: image-url('browse/hotel.p.16.png'); }
+.tourism.museum::before { content: image-url('browse/museum.p.16.png'); }
+.tourism.picnic_site::before { content: image-url('browse/tourist_picnic.p.16.png'); }
+.tourism.viewpoint::before { content: image-url('browse/view_point.p.16.png'); }
 
 /* Ways */
 
-.aeroway.runway { background: image-url('browse/runway.20.png') no-repeat center left; }
-.aeroway.taxiway { background: image-url('browse/taxiway.20.png') no-repeat center left; }
-
-.building { background: image-url('browse/building.png') no-repeat center left; }
-
-.highway.bridleway { background: image-url('browse/bridleway.20.png') no-repeat center left; }
-.highway.byway { background: image-url('browse/byway.20.png') no-repeat center left; }
-.highway.cycleway { background: image-url('browse/cycleway.20.png') no-repeat center left; }
-.highway.footway { background: image-url('browse/footway.20.png') no-repeat center left; }
-.highway.motorway { background: image-url('browse/motorway.20.png') no-repeat center left; }
-.highway.motorway_link { background: image-url('browse/motorway.20.png') no-repeat center left; }
-.highway.pedestrian { background: image-url('browse/service.20.png') no-repeat center left; }
-.highway.primary { background: image-url('browse/primary.20.png') no-repeat center left; }
-.highway.primary_link { background: image-url('browse/primary.20.png') no-repeat center left; }
-.highway.residential { background: image-url('browse/unclassified.20.png') no-repeat center left; }
-.highway.secondary { background: image-url('browse/secondary.20.png') no-repeat center left; }
-.highway.secondary_link { background: image-url('browse/secondary.20.png') no-repeat center left; }
-.highway.service { background: image-url('browse/service.20.png') no-repeat center left; }
-.highway.trunk { background: image-url('browse/trunk.20.png') no-repeat center left; }
-.highway.trunk_link { background: image-url('browse/trunk.20.png') no-repeat center left; }
-.highway.unclassified { background: image-url('browse/unclassified.20.png') no-repeat center left; }
-
-.landuse.brownfield { background: image-url('browse/brownfield.png') no-repeat center left; }
-.landuse.cemetery { background: image-url('browse/cemetery.png') no-repeat center left; }
-.landuse.commercial { background: image-url('browse/commercial.png') no-repeat center left; }
-.landuse.farm { background: image-url('browse/farm.png') no-repeat center left; }
-.landuse.forest { background: image-url('browse/forest.png') no-repeat center left; }
-.landuse.industrial { background: image-url('browse/industrial.png') no-repeat center left; }
-.landuse.military { background: image-url('browse/military.png') no-repeat center left; }
-.landuse.residential { background: image-url('browse/residential.png') no-repeat center left; }
-.landuse.retail { background: image-url('browse/retail.png') no-repeat center left; }
-.landuse.tourism { background: image-url('browse/tourism.png') no-repeat center left; }
-.landuse.wood { background: image-url('browse/wood.png') no-repeat center left; }
-
-.leisure.golf_course { background: image-url('browse/golf.png') no-repeat center left; }
-.leisure.park { background: image-url('browse/park.png') no-repeat center left; }
-.leisure.pitch { background: image-url('browse/pitch.png') no-repeat center left; }
-.leisure.nature_reserve { background: image-url('browse/reserve.png') no-repeat center left; }
-
-.natural.heath { background: image-url('browse/heathland.png') no-repeat center left; }
-.natural.water { background: image-url('browse/lake.png') no-repeat center left; }
-
-.railway.light_rail { background: image-url('browse/light_rail.20.png') no-repeat center left; }
-.railway.rail { background: image-url('browse/rail.20.png') no-repeat center left; }
-.railway.subway { background: image-url('browse/subway.20.png') no-repeat center left; }
-.railway.tram { background: image-url('browse/tram.20.png') no-repeat center left; }
+.aeroway.runway::before { content: image-url('browse/runway.20.png'); }
+.aeroway.taxiway::before { content: image-url('browse/taxiway.20.png'); }
+
+.building::before { content: image-url('browse/building.png'); }
+
+.highway.bridleway::before { content: image-url('browse/bridleway.20.png'); }
+.highway.byway::before { content: image-url('browse/byway.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.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.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.farm::before { content: image-url('browse/farm.png'); }
+.landuse.forest::before { content: image-url('browse/forest.png'); }
+.landuse.industrial::before { content: image-url('browse/industrial.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'); }
+.landuse.wood::before { content: image-url('browse/wood.png'); }
+
+.leisure.golf_course::before { content: image-url('browse/golf.png'); }
+.leisure.park::before { content: image-url('browse/park.png'); }
+.leisure.pitch::before { content: image-url('browse/pitch.png'); }
+.leisure.nature_reserve::before { content: image-url('browse/reserve.png'); }
+
+.natural.heath::before { content: image-url('browse/heathland.png'); }
+.natural.water::before { content: image-url('browse/lake.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'); }