Let's add an 'current' class to a selected section via the navigation or as it is scrolled through.

Generic notifications should link to their hrefs somehow. For instance, if an action alert is added, the user should be able to click the corresponding notification to view the action alert. The notification already receives this information in the url attribute; we just need the front-end to inform the user somehow that it's clickable.

Location bar URI updates no longer update accurately. There seems to be some very large offset, perhaps at 1000px or greater.

Currently the logo file being used was doctored by me because the PDF was rendering some errors in transparency.

Can we get a copy of all logo asset files in either an AI or EPS file format?

Seems tabbing through a sidebar form field for instance can completely dismantle the UI.

When submitting the donate form, the submit doesn't disable, allowing for accidental duplicate submissions.

Tabs sometimes result in incorrect class assignment on click of area of tab.

In the What We Do section, it looks like <h3> elements have no top margin, and <li> elements have no bullet point. That's what's causing the formatting to look a bit off. In reality, some of the sections are actually well-formed from markdown, such as the Advocacy page; it just doesn't look like it because of some missing styles.

When logged in as a site admin, the edit name fields for article sections don't display the section's name if that section is a sub-section.

Ideally I think the URL and nav active class would change as a section takes over 50% of the viewport.
However not sure if that's possible.

The donate section can be too large for some displays, requiring a scroll. I don't think this should be the case.

Staff members aren't very keen on writing markdown for sections. Help them out with some compromised interface that allows for some WYSIWYG elements without causing additions of poor code and without incurring a buggy and unpredictable interface.

If the hash value in the URI in the browser's location bar changes, prevent the page from reloading and smooth scroll to the respective location.

Clicking the Twitter icon will open the twitter feed, but clicking it again won't close it. Same goes for notifications element.

When a user's email address gets verified by them following a link sent to them in an email, we need to somehow convey to the user that the email has been verified successfully.

CSS rules should be in place for letting the user know that a button is disabled and may not be clicked. This includes the following:

<button>
<input type="submit" />

The following templates may contain disabled buttons at any given time:

• register
• login
• profile
• donate

Just shows the exclamation icon, hex  I think it should show the number of notifications, unless you disagree. If so, I can add a dataset property for an ::after psuedo-element, or connect the number in the template directly.

At times, clicking a link will cause a stutter before the smooth scroll appears. It's almost as if the page relocates to that location of the destination, then back in less than half a second before beginning the smooth scroll.

CSS required for print in addition to singular print icon styles.

Template components, like the Donate, work, callout, and community sections should be modularized into their own folders. In that way they may eventually register themselves to new API features, which I anticipate will be required in order for the "Complete Location and History Support" milestone to complete.

Create an API for NoSLB that will allow features to register methods without worrying about race conditions.

Fields with errors now highlight after form submission; however, they look terrible. The color of the inset box shadow on the error fields should reflect the brand. Furthermore, the error messages are ::after pseudo elements on error field parent nodes since input elements cannot contain pseudo elements and I think error messages should be adequately presented near the problem fields. My current solution has some display problems, as you can see in the screenshot. Particularly, error messages on the expiration or cvv2 fields cover the submit button because those fields are floating. I tried to clear the float, as well as the overflow:auto; hack, but neither resolve the problem.

Please create a show all button in the Providers section that will cause the map to zoom out and display all providers for the state.

When a user verifies their email address, a popup appears showing their email has been verified. We need to style this section.

The section appears as the first child under <body>. Here's the markup:

<div class="accounts-dialog accounts-centered-dialog">
    Email verified.
    You are now logged in as ********@gmail.com.
    <div class="login-button" id="just-verified-dismiss-button">Dismiss</div>
</div>

Styles currently applied to the whole section:

** login_buttons.import.less:342 **
.accounts-centered-dialog {
    font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
    z-index: 1001;
    position: fixed;
    left: 50%;
    margin-left: -129px;
    top: 50%;
    margin-top: -40px;
}

** login_buttons.import.less:234 **
.accounts-dialog {
    border: 1px solid #cccccc;
    z-index: 1000;
    background: white;
    border-radius: 4px;
    padding: 8px 12px;
    margin: -8px -12px 0 -12px;
    width: 250px;
    box-shadow: 0 0 3px 0 rgba(0, 0, 0, 0.2);
    -webkit-box-shadow: 0 0 3px 0 rgba(0, 0, 0, 0.2);
    font-size: 16px;
    color: #333;
}

Styles currently applied to child "Dismiss" button:

** login_buttons.import.less:389 **
#just-verified-dismiss-button, #messages-dialog-dismiss-button {
    margin-top: 8px;
}

** login_buttons.import.less:153 **
.accounts-dialog .login-button {
    width: auto;
    margin-bottom: 4px;
}

** login_buttons.import.less:99 **
#login-buttons .login-button, .accounts-dialog .login-button {
    cursor: pointer;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    -o-user-select: none;
    user-select: none;
    padding: 4px 8px;
    font-size: 80%;
    font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
    line-height: 1.5;
    text-align: center;
    color: #fff;
    background: #596595;
    border: 1px solid #464f75;
    border-radius: 4px;
}

** login_buttons.import.less:256 **
.accounts-dialog > * {
    line-height: 1.6;
}

** login_buttons.import.less:133 **
.accounts-dialog * {
    padding: 0;
    margin: 0;
    line-height: inherit;
    color: inherit;
    font: inherit;
    font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
}

We need to complete the event for the 'Get Help' button in the utility navigation.
@micchickenburger , was hoping you could help.

Visible on line 55-61 in utility.js:
'click li.getHelp': closeAsides, 'click li.getHelp': function (event) { location.href='/#service-providers'; $('figure.alert').addClass('active').delay(5000).queue(function(){ $(this).removeClass("active").dequeue(); }); }

We need to scroll down the page to #service-providers and display an alert with content.
Alerts have their own module where their template can be referenced.

Perform cross-browser testing to ensure compatibility with:

• IE 9, 10, 11
• Edge
• Firefox
• Safari
• Chrome

There are templates all over for these sections, but the content is missing. Also, it looks like quite a bit of the content in these sections are static. I'd like to start building user profiles.

Currently only configured for Chrome.

To be used in such sections as news articles and large content editable areas such as work.

The hover effect established by the following code does not apply to email, search, or password input fields, which can make the hover effect feel inconsistent, such as in the profile tab under Account Details.

form .styledSelect:hover, form .cvv2:hover, form input[type=text]:hover {
    background-color: #4c5d67;
}

Furthermore, disabled fields should not have a hover effect.

<input type="text" value="Text" disabled />  <!-- Don't allow user to edit -->

This is something we should talk about.
Is scrolling to a section the best method?
Or could it be better if say it faded in/out?

If scrolling is the answer:
Observing a flicker of the section it is to scroll to occasionally.
Can we modify the easing of that effect?

The bubble summaries in the who-we-are section do not properly align with one another.

I understand we needed to implement a solution to prevent bubbling on the scroll action to detect if the fixed nav class should be added. However from an animation perspective, adding that fixed nav class right away is essential for a better UX.

Is there a way we can make that class added sooner? Perhaps on some type of "scroll initialized" function?

When user selects "Get Help" from the utility navigation: the page is to scroll to the "Providers" section. In addition to this: an alert is displayed for the user reading something such as:
"If this is an emergency please dial 911. Please use our provider locator to find the nearest available help center."

We need to acquire or create the appropriate verbiage for this alert.

Line 6 of account_register.html reads:
<p id="register-error" style="display:none;"></p>

I've added a display:none to this element temporarily.
It needs to only be only placed in the markup if error=true.
Then of course we can remove the inline style.

Alternatively it needs to have a class added to the element if error=true, that way I can hide the element unless error=true.

1. The drop down doesn't close unless the close button is pressed. It should close automatically if the user clicks outside of the box.
2. The drop down is hidden behind the donate section.
3. When logged in, the close button appears only partially on top of the logged-in user's email address.