Create digest page from Wireframe

[MirandaEcho]

ENN Digest Page Wireframe (1).pdf

• [x] Create template (if not done already)
• [ ] Text area at top for description, link to FAQ page (pending link from ENN)
• [x] Add search to top
• [x] List of posts under search
• [ ] Set up widget areas
• [ ] Insert widgets in sidebar

[benlk]

Status:

• [x] Create template (if not done already)
  • done in https://github.com/INN/umbrella-energynewsnetwork/pull/83 for https://github.com/INN/umbrella-energynewsnetwork/issues/77
• [ ] Text area at top for description, link to FAQ page (pending link from ENN)
  • pending configuration info from ENN; is pure config.
• [x] Add search to top
  • done in #83 for #77
• [x] List of posts under search
  • done in #83 for #77
• [ ] Set up widget areas
  • see discussion below
• [ ] Insert widgets in sidebar
  • configuration, pending availability of the widget area

---

The problem with the widget areas is as described in https://github.com/INN/umbrella-energynewsnetwork/issues/77#issuecomment-583161630:

For unknown reasons, creating a sidebar named "Digest Sidebar" in Theme Options > Layout > Sidebar Options, and saving that sidebar in the sidebar picker at Posts > Categories > "Digests" > edit > Archive Sidebar, results in that sidebar not being found by the elaborate fallback queue in sidebar.php, and as a result the sidebar is not output.

The expectation was that we'd be able to use existing Largo functionality to create a named widget area and output it only on this page.

Instead, that named widget area is not output upon the page.

It is not known why this is the case.

Our options are:

1. try to debug the thing
2. hardcode it so that this template only ever shows the hardcoded sidebar, which I'll call "Digest Sidebar", with the effect that the setting in the Digest category edit page is silently ignored

1 has an unknown amount of time. 2 makes things weird in a way that might confuse the client, but shouldn't take more than an hour.

[MirandaEcho]

I thought we had decided to hardcode it given the difficulty, so let's go ahead with that.

[benlk]

@MirandaEcho I'm guessing that we should add some padding to these textwidgets?

[MirandaEcho]

@benlk - yes please. We didn't budget any fancy styling, but some basic cleanup would be good. Lets remove the border and make the button match the other button in the sidebar, at least.

Also, what's up with the description/title for the subscribe widget and all that extra text there?

[benlk]

In that screenshot, I used a Ninja Forms widget. The extra text is what the widget was configured to output.

We should ask them if they're using Ninja Forms for the mailchimp signups now rather than the ENN Mailchimp Subscribe widget we built them.

[benlk]

The default style of the widget is to have padding and border; it looks like Largo removes the padding at certain viewport sizes:

https://github.com/INN/largo/blob/1744bbc7ae99f501129d158c3b585cddf6b5409e/less/inc/widgets.less#L214-L222

The theme contains a style that removes the borders when the widget has the "Reverse" background class applied, so not removing the border here is more-respecting of the existing styles.

[benlk]

There's CSS being injected via the Customizer that makes the Ninja Forms button wider than the column on some screen sizes:

#nf-field-33 {
  padding: 0.75em 2.3em;
    margin: 16px 0 0 0;
}

And a lot of other CSS affecting the Ninja Form.

Here's where I ended up at on Desktop:

And on Mobile:

These changes try not to have an adverse effect on the article pages, which have different layouts for that text.

But the fact of the matter is, the Ninja Forms widget has weird markup that makes it hard to guarantee that the input won't go beyond the container, because an input type="button"'s text content isn't text, but instead its value attribute. The CSS rules for wrapping text don't apply.