ENGAGE-331: On tap, tappables should highlight to indicate "touched" feedback

Description

Buttons, list items, etc. should highlight to a colour (say, blue) to indicate that the user successfully tapped on a particular item. See http://wiki.fluidproject.org/display/fluid/Mobile+wireframes%2C+draft+9#Mobilewireframes%2Cdraft9-Guidelines...fortappingonatappable

Attachments

• ENGAGE-331.patch

Comments

• James Yoon commented 2010-02-05T16:31:01.000-0500

  Bug Parade Engage 0.3

• Colin Clark commented 2010-02-18T11:09:05.000-0500

  Justin will review and commit this fix.

• Justin Obara commented 2010-02-18T12:31:14.000-0500

  Committed the changes to the engage-mobile.css file from Yura's patch ENGAGE-331.patch In talking with Yura yesterday it was determined that this was the only place we needed to update it and then link in this file into all the necessary pages. I did a few other changes. 1) I added the highlighting to all inputs as well 2) for the comments page, I added the highlighting to the textarea 3) on the code entry page i changed the buttons from images to inputs with type="image"

• Justin Obara commented 2010-02-18T12:31:30.000-0500

  Colin Clark will review my changes.

• Colin Clark commented 2010-02-18T12:45:41.000-0500

  I've reviewed Justin's changes and suggested the following:

  colinclark: your change in engage-mobile.css sets up this tap highlight for all links and inputs
  colinclark: But then in guestbook.css, you add the same declaration to textareas
  colinclark: Why not do it in one place?
  colinclark: Similarly, you add the same style in Cabinet.css to cabinet handles
  colinclark: Why not put the style in engage-mobile.css generically for all things tappable?
  colinclark: which might include, at least, links, inputs, and textareas
  colinclark: along with a generic fl- class for other types of tappables
  justin_o: ah okay... i see
  justin_o: that makes sense

• Colin Clark commented 2010-02-18T12:46:08.000-0500

  I've reopened this issue so Justin can make some minor tweaks to his fix based on my code review.

• Justin Obara commented 2010-02-18T13:27:18.000-0500

  Made some modifications. Centralized the css for setting the tap highlight all into engage-mobile.css as per colin's suggestions. Also updated guestbook markup so that tap highlighting and activation would work on the label "add note". And changed the container of the icon to be a span so that it would pass validation.

• Colin Clark commented 2010-02-18T14:14:57.000-0500

  Justin's latest commit at r9435 addresses this issue nicely. +1 for inclusion in Engage 0.3b