search

nprapps / elections18-graphics

2018 midterm election front-end; iteration upon 2016 GE work
MIT License
5 stars 1 forks source link

Add bottom padding for homepage modules #215

Closed mileswwatkins closed 6 years ago

mileswwatkins commented 6 years ago

Otherwise, the update spinner sits too close to the article topic:

screen shot 2018-10-31 at 14 59 03
alykat commented 6 years ago

Can add a checkbox (a la dailygraphics) to apply a ?mode=hp param to the URL and add styles accordingly.

mileswwatkins commented 6 years ago

Since our www/js/*-hp graphics are all going to require this bottom-padding (whether they're in stories or on the homepage), will that extra parameter be necessary? Or is Seamus-default story embed padding different than Seamus-default homepage embed padding?

alykat commented 6 years ago

We typically add more top/bottom padding to graphics that appear on story pages. (Boards and state results excepted.)

alykat commented 6 years ago

bop-hp and bop-gcu-hp get an HP checkmark above the embed code box:

image

This adds a URL param of ?mode=hp. The graphics then look for that param onWindowLoaded and add it as a CSS class to the body.

bop-hp may appear on the homepage OR on story pages. It gets 22px of padding-bottom when it appears on the homepage (with checkbox). It gets 33px of padding-top and padding-bottom when it appears anywhere else.

bop-gcu-hp is the other embed that could appear on the homepage. It gets 22px of padding-bottom when it appears on the homepage (with checkbox). It gets 0 padding-top and padding-bottom when it appears anywhere else. (It is not intended to appear on a story page. I added the checkbox for consistency, so the embed instructions are the same for both.)