From 278a2c5ea53471d34f933d7c83b70f2ea09c17ad Mon Sep 17 00:00:00 2001 From: Martin Raifer Date: Fri, 10 May 2013 14:50:52 +0200 Subject: [PATCH] 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. --- app/assets/stylesheets/browse.css.scss | 274 +++++++++++++------------ 1 file changed, 139 insertions(+), 135 deletions(-) diff --git a/app/assets/stylesheets/browse.css.scss b/app/assets/stylesheets/browse.css.scss index 5d620d794..59ba0be73 100644 --- 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'); } -- 2.39.5