Riveascore/remember_for_TCE.md

## remember_for_TCE.md

      
    Raw
  

              remember_for_TCE.md
            
          
    Generic scroll notifier shadow

Scroll cases


When scrolling inline element, add CSS class to allow JS to prevent body scroll when reaching end of element's scroll
When scrolling body, don't allow other elements to scroll (another CSS class?), find all elements with overflow auto or scroll, and temporarily add class to prevent scroll, then on stop, remove said class.

Fix ECFE Course dates issue, examples:

example
another example

Links to Switchboard or Feepay


 Course Enroll process, "add a new relationship"

Course category show courses (search), tell user which category they're viewing courses for:
http://riveascore.local:3000/courses/classes-for-adults/aquatics-2
Menu dropdown, add feature, first list item when user is logged in in 1st column of dropdown, "Programs Recommended for You", looks slightly different? click on it, and 1 big course, 2 small courses and "view all" shows up.
Course show, if more than 50 sections, load the rest via AJAX Example of 500 sections...
Stackicons for credit cards (visa etc.) if time permits.
IE8 support, have backup on all +box-shadow calls for IE to use borders instead
Single list item on hover, move caret like on okcupid.
Tags for courses under picutre?

ALL CASES! Instead of "Details" button, replace all with chevrons

"Become an instructor" button on Coursera redesign
MODAL FORM GENIUS "enter your billing information from https://www.okcupid.com/
Rate icon, fa fa-lin-chart or percentage or something else???
For header_img, use this approach for buttons, actions etc.?
Facility request show page, use building_or_site's image as header_img's :background_image
"Check E-mail Now" button, example http://www.aliexpress.com/
In quick search results, make sure each object shows primary thing that people came here to do, good vs. bad example: metacritic search results show rating, which is the whole reason you came here, rotten tomatoes does NOT.
When "search" filtering down a list, .list-group-items etc, should you auto-select first item?

Upside: Lets user know that they can select things with arrow keys
Downside Annoying if user is used to using arrow key to select and ends up selecting 2nd item (muscle memory) then they really wanted the first

Table, put primary subject (transaction history, Chipotle) in middle of page, UI/UX study on this?
Modals are fucking annoying when you want to look at a giant list, Bremer when trying to view transactions.
Have "Change password" page available through account, (NOT JUST SIGN IN), search most common appraoch to where this is placed.
Make sure bootstrap-select UI has exact same interaction as native selects (i.e. type to select value), also determine if native selects are the same accross all browsers.
Make sure collapsible can distinctly tell that objects are open/closed. Hard to tell on Mint
Prevent copy events on password fields
Bad idea: Google Contacts, add to circles button becomes dropdown, SO FUCKING CONFUSING!
Search bar, when fund results and unfocused input, don't hide results (using "Done" button). Bad example
http://www.caffeineinformer.com
Tooltip/Tipsy styles, use "Pocket" and/or "Team Treehouse" appraoch/style.
Is this still an issue with new front-end?
  <script type="text/javascript">
    if (navigator.platform.match(/mac/i)) {
      $('<%= part_prefix %>_room_ids').title = $('<%= part_prefix %>_room_ids').title.replace(/Control/i, "Command");
    }
    jQuery($('<%= part_prefix %>_room_ids')).tipsy({gravity: 'w'});

  </script>
Mobile: For back/forth, ALWAYS show carousel radios, even if including "Previous/Next" buttons, shows user naturally that they can swipe to move. ALWAYS INCLUDE SWIPE FUNCIONALITY (Zach Smith guide on swipe location)
Select and select-like objects, can always do the following:

Type continuously to get to exact object
Arrow keys down and same enter/tab functionality as native

At login screen, ALWAYS differentiate between:

"Your username does not exist"
Password is incorrect

For password fields, always include "Show password" toggle/checkbox below password input.
For all mobile text inputs, always include auto clear (circle with x)
Use proper attributes to make sure devices (like iOS) recognize and adapt keyboard properly (i.e., provide "search" button in keyboard)
<form>
  <input name="search" id="global_search" type="search" placeholder="Search by contract, program or child" class="form-control">
</form>

meta for preventing zoom on mobile (especially for input :focus)

For state input, detect current state for ease.
iOS, fixed submit button bottom, in safari, when header/footer navs are collapsed, hitting that fixed submit button will cause toolbar to appear, what do?
TYPICALLY,
Use ordering:
"Choose an existing child"
or
"Add a New Child"
BECAUSE! Many users will not necessarily remember that their child is in the system and will try to re-add their child.
"Bootstrap-select", typing multiple letters, first letter goes to first, second letter goes to different select beginning, i.e.
n, m (for new mexico)
goes to "Nevada", then to "Maine"
Use Google Material Design animations, especially for touch interactions
Search bar, stay in same row from activation to save more vertical space on mobile:
http://cdn.pttrns.com/pttrns/3342/original/IMG_0349.PNG
Animated menu icons:
http://sarasoueidan.com/blog/navicon-transformicons/