QA Review - Desktop

[kaylima]

Homepage

Overall:

• Less white space on sides at larger browser widths

Alert box:

• Text should be centered

Header:

• Replace logo with higher quality and larger version
• Different rollover (looks fuzzy)
• Black top meta nav is missing

Navigation:

• Remove underline from Nav links
• Update font size and color to match mockup
• DONATE should be a button, not link
• Increase spacing between nav links
• Remove drop-down arrow from Services & Programs -> Remove drop-down arrow from Services & Programs #46

Homepage Middle Widgets:

• All of the divider lines should be the same length, despite content length changes (look into Flexbox and Tables options and let Kay know what you find)
• Smaller font for homepage middle widgets' titles: EVENTS, FROM INN, FROM OUR MEMBERS
• Add “More Info” button (blue) to Events widget
• Add image to Events
• Set featured images in FROM INN and FROM OUR MEMBER widgets to be the suggested size in the mockups (and add image size prompts to widget)

FROM OUR MEMBERS:

• Use the Link Roundups plugin to populate a custom widget and provide Kay instructions to pass along to the folks that will be updating this content
• Increase spacing between member link (top tag) and title

FROM INN:

• Add top tag (but have it under the image and look the same was the FROM OUR MEMBERS)

Newsletter signup:

• Remove “News from INN and our members. Delivered weekly.”
• Update remaining styles to match mockup

Footer:

• Left align the mission
• Increase logo size
• Increase font size for mission
• 
Increase header logo size

Interior Posts/Pages

1. Go to http://inndev.staging.wpengine.com/2017/05/smith-to-head-inn-labs/

• Header tag should be darker
• Smaller body font size
• Decrease P spacing
• Newsletter signup needs to be added to bottom of post
• Remove previous and next from all pages and posts
• Update sidebar to match mockup
• Remove byline/date
• Remove left-hand floating social media links and add social sharing links to bottom of pages and posts (above the newsletter signup)
• Remove Disqus from bottom of posts/pages

2. Go to: http://inndev.staging.wpengine.com/pocantico-declaration/

• Needs to be left aligned with space for right sidebar

3. Go to: http://inndev.staging.wpengine.com/about/

• Needs to be new styles

[benlk]

For the "From INN Members" widget, check if https://github.com/INN/link-roundups/ has featured media so we can have thumbnails with the most-recent saved link. If so:

• custom widget to output saved links, choosing the most-recent saved link

All of the divider lines should be the same length, despite content length changes

Do this with flexbox, if flexbox supports borders in this way.. Otherwise, it's probably table-style display hacks? There's gotta be a better way.

• switch every page to two-column layouts, possibly?
• newsletter signup widget gets added to Main Sidebar.

Pages have their own weird template within single-one-column.php: https://github.com/INN/inn/blob/4f140621a852a4d297e3f1c72a24387c24be113b/single-one-column.php

[benlk]

This is a list of configuration things:

• Replace logo with higher quality and larger version

Theme Options > Theme Images

• Black global nav is missing

The Global Nav menu needs to be configured with content at Appearance > Menus > Global Navigation.

• Add “More Info” button (blue) to Events widget

This is a configuration issue; the event needs to have a URL set in the event editor under "EVENT WEBSITE". The link should go either to the event page or to the event signup page.

We want to encourage them to set the event URL, but if necessary I guess that button could fall back to the event's permalink. Should we do that?

• Add image to Events

Events must have a featured image set.

• Newsletter signup needs to be added to bottom of post

This can be done with widgets placed in the Article Bottom widget area. It should use a separate CTA text than the homepage one, but can use the same form elements pasted into a textwidget.

• Remove previous and next from all pages and posts

This is a widget in the Article Bottom widget area.

• Update sidebar to match mockup

One Largo Recent Posts widget in the Main Sidebar, with following options:

• Title: Read More
• number: 3
• thumbnail: none
• excerpt: none

Styles for this were added in b566578.

• Remove left-hand floating social media links

Appearance > Theme Options > Single Post Options > Would you like to display share icons in a floating bar beside posts using the single-column post template?

• add social sharing links to bottom of pages and posts (above the newsletter signup)

Add a "Largo Follow" widget to the "Article Bottom" widget area.

• Remove Disqus from bottom of posts/pages

Disable the Disqus plugin, then disable commenting in Settings > Discussion

• http://inndev.staging.wpengine.com/pocantico-declaration/ Needs to be left aligned with space for right sidebar

Edit page, choose "Two Column (Classic)" template. Select an appropriate sidebar.

A list of questions

Remove underline from Nav links

I'm guessing this is the directive for on hover, since that's the only time they appear. I think we should have some sort of visual indication of when a nav link is hovered that is stronger than the very slight #ffffff to #f2f2f2 background color change, and underlines are that right now.

If we remove the underline, might we want to go with a darker background color, or perhaps a more-significant color change?

Increase spacing between nav links

If we increase the spacing any more, nav items start wrapping onto a second line on narrower browsers.

Set featured images in FROM INN and FROM OUR MEMBER widgets to be the suggested size in the mockups (and add image size prompts to widget)

What's the exact aspect ratio we're aiming for here? We may need to either cut a custom thumbnail crop with that aspect ratio, or we may need to request people upload separate featured images that have a specific aspect ratio, which is going to throw off a lot of other places that thumbnail image is used.

Using a custom aspect ratio is going to be annoying as regards the "FROM INN" widget, because that will require modifying or duplicating the Largo Recent Posts widget. It's a handful of minor changes to add a new image size, but we'll need to support this widget for as long as we want that particular aspect ratio on the site.

Add top tag (but have it under the image and look the same was the FROM OUR MEMBERS)

Same as above: The Largo Recent Posts widget only has an option to show the top term above the image. Custom widget is possible, but we're going to have to support this option for the rest of its lifetime on INN's site, even if we don't ever port it to INN members. (I don't know if we're keeping the Largo Recent Posts widget in Largo. @rclations, what do you say?)

Newsletter signup: Update remaining styles to match mockup

I fiddled with the spacing and increased the font size on the submit button in dc6e4b4, but what else needs to change?

Footer: Increase font size for mission

Bumped it from 20px up to 22px in b27aa92, but I'm worried that any larger and it'll be too large.

Footer: 
Increase header logo size

Is this a duplicate direction, or something else?

http://inndev.staging.wpengine.com/about/ Needs to be new styles

Does this mean that we're moving the left-sidebar style for interior pages with the "single" template to the right side, or does it mean that we're abandoning that template entirely? Sorry, I don't remember this piece of direction from the review meeting.

A list of other things

Different rollover (looks fuzzy)

We don't change the logo on rollover, but there's a Largo style that applies opacity: 0.85; to the image when the containing li.home-icon is hovered. Removed in 3e4bbc4

Smaller font for homepage middle widgets' titles: EVENTS, FROM INN, FROM OUR MEMBERS

Decreased from 20px to 18px in 459780e

Increase spacing between member link (top tag) and title

Increased to 1em in ddc217a

Smaller body font size

Decreased to 16px in 0ba91cb, which is the absolute minimum we should ever allow. Anything smaller is too small.

Decrease P spacing

Assuming that this is the spacing between

, I've decreased it from 24px to 1em in fcb51da. We can go smaller if necessary.

_Remove drop-down arrow from Services & Programs

This is because it's got a child menu of services and programs. If we don't want those, those can be removed from Appearance > Menus > Main Navigation. I'd left them in because that's currently a menu that exists on inn.org._

^ This is being ignored for now.

[benlk]

• in the nav, above 900px, add margin-left of 1em to the elements
• top-term on From INN and From Our Members can go at the top, but needs consistent styles
• Left sidebar on normal-template Pages does move to the right
• configuration change: everything goes to two-column template
  • the related template changes
• in event of a newsletter signup form in the article bottom widget area, because we will also have newsletter signup in the sidebar, we must hide one or the other.
• add pseudo-"Article Bottom" widget area to pages as well, call it "Page Bottom" -> add pseudo-"Article Bottom" widget area to pages #45

[benlk]

From our Members widget

Use the Link Roundups plugin to populate a custom widget and provide Kay instructions to pass along to the folks that will be updating this content

• install on dev/staging
• save a bunch of links
• custom widget?
• build custom widget, simplifying as necessary
• docs

Docs

Pretty much everything I would write is in here: https://largo.inn.org/guides/administrators/plugins/saved-links/

The other bits I would add:

• the widget on the homepage only displays the one most-recent saved link
• please pleas pelase make sure to set a featured image; automatic import doesn't always detect it and you need to check the "import this" box anyways
• the thing that looks like a top tag is the "Source:" field in the saved link dialog; please make sure to set that to something sensible otherwise you will get strange results like this:

• there's no reason to check "open links in new tab"

[benlk]

top-term on From INN and From Our Members can go at the top, but needs consistent styles

Since we made the "From Our Members" widget, we can put it at the top there, but with the "From INN" widget remaining unmodified Largo Recent Posts widget, it may not be best to keep that there. What I'd like to propose is making the "title" in that widget be the post's top term:

That way, if the post was an "announcement" it would be called that, or if it was something else it would be called that, while still being drawn from the "Announcements" category.

[kaylima]

@benlk We definitely want the widget titles to remain "FROM INN" and "FROM INN MEMBERS". The top term and member link (ex. www.themarshallproject.org) can either be after the title and before the image OR after the image - but they need to be in the same place. With that in mind, what's easiest?

[benlk]

Easiest is before the image.

[benlk]

Note on sidebars on staging:

• Single Sidebar contains the "About INN" text widget.
• Main Sidebar contains a newsletter signup form that submits to the same place as the homepage's form.

Unless a custom sidebar is set for a post/page, the sidebar that displays on singular items will be the Single Sidebar, and so we won't get double newsletter forms. For pages, we can set the "Main Sidebar" as the sidebar in the editor: https://largo.inn.org/guides/authors/writing-posts/advanced-post-settings/ section "Setting Custom Sidebars"

There are some pages that have weird template shenanigans going on under the hood:

• http://inndev.staging.wpengine.com/about/news/
• http://inndev.staging.wpengine.com/about/press/
• any project in the "projects" dropdown; example: http://inndev.dev/projects/largo-project/

I've ported those shenanigans from the one-column template to the two-column template, and reverted the one-column template to using Largo's default template, instead of a functionally similar template in the INN theme.

Also, if you're working on the theme, please run npm install to grab the latest version of grunt-contrib-less with support for nesting of @supports and @media.

[benlk]

Closing in favor of those above newly-created issues.