49 newsletter changes - Githubissues

benlk commented 4 years ago

Changes

This pull request makes the following changes:

Copies https://github.com/INN/largo/commit/cea7d6f0855968696046c02fcaa29626580bd610 into this child theme
sets a maximum with of 1170px on the background image used on the footer, so that it matches the
Removes the programmatically-added newsletter signup widgets from the top of series and other archives, from the footer, from diverse other places
Refashions the "CL Newsletter Link for Header" widget into a "City Limits Newsletter Signup" widget, with an updated description
Updates styles for the widget to match the mockups
- fullwidth and no bottom city border if it's the last widget on the series landing page
Updates styles for the mobile popover newsletter signup
Improves javascript for the newsletter signup forms, while trying not to damage the functioning of the /newsletter-subscriptions/ page which is powered by the same JS and styles
Does update the styles for /newsletter-subscriptions/ to use the brand colors and fonts, where those overlapped with the newsletter — the red and greys have updated, and the fonts, but not the green or the shadows.
Changes the JS for the mobile subscribe and widget to only be enqueued if the partials are output, since that might improve performance a bit

At the bottom of the series landing page:

Screen Shot 2019-11-12 at 21 22 28

In the middle of another page:

Screen Shot 2019-11-12 at 21 22 37

The mobile popup, which is a link to the main subscribe page:

Screen Shot 2019-11-13 at 00 25 29

In the "Before Footer" widget area:

Screen Shot 2019-11-13 at 00 35 49

Why

For #49

Testing/Questions

Features that this PR affects:

stuff

Questions that need to be answered before merging:

[x] Is this PR targeting the correct branch in this repository?
[x] are we worried about the inputs having black innards on the newsletter subscription page? The styles overlap with the widget. We could make that background black and the rest of the text white.
[ ] do we want to change the close button on the mobile popup? It's /img/newsletter_close_box_hover.svg
[ ] can we trim off this spire on the background image?
[ ] are there any pages where we don't want to have the mobile popup? I'd suggest any "Page" type of post.

Steps to test this PR:

Enable the "Before Footer" widget area as described in the go-live ticket #76
Put the widgets on the homepage, on series landing pages, in the "before footer" widget area.
Click on buttons. Fill out text areas. Click on checkboxes.

joshdarby commented 4 years ago

This looks pretty good!

A couple of questions/notes:

[ ] Should there be a success message after submit? For me, at least, the entire widget just disappears once I click submit
[ ] We will probably need to remove the whitespace between the special projects section and this widget on the homepage (screenshot below)
[x] I think @kaylima will want the sign up button font styles to match the new "Donate" button in the header (Use @font-header)

Screen Shot 2019-11-13 at 10 43 54 AM

benlk commented 4 years ago

the sign up button font styles to match the new "Donate" button in the header (Use @font-header)

Should we do this in all .btn? I saw you made that change in the donation block QA as well: https://github.com/INN/umbrella-citylimits/pull/113/files#diff-e9e368afac8d2ce03b400013cbd45deeR46-R49

kaylima commented 4 years ago

Should there be a success message after submit? For me, at least, the entire widget just disappears once I click submit

Yes! It shouldn't disappear.

We will probably need to remove the whitespace between the special projects section and this widget on the homepage (screenshot below)

on the homepage, the newsletter should only be between the top featured and "section 1". so, I don't think we need to worry about the whitespace in this case. however, we need to make sure there isn't whitespace between the special projects and footer.

I think @kaylima will want the sign up button font styles to match the new "Donate" button in the header (Use @font-header)

Yes, please!

kaylima commented 4 years ago

@benlk I just noticed that in @joshdarby 's screenshot above, the border to the right of "city limits newsletters" is missing:

benlk commented 4 years ago

I'm confused.

There is a 1px white border to the left and right of the headline group in Josh's screenshot. It may not be visible in the screenshot on some monitors or browsers because it's an already-thin line that is being compressed by shrinking the image to fit in Github's layout. It's visible when clicking to embiggen.

Or are you referring to a different border?

benlk commented 4 years ago

are we worried about the inputs having black innards on the newsletter subscription page? The styles overlap with the widget. We could make that background black and the rest of the text white.