BHG: Partials and Components

[khaled]

Build Resuable Components (Partials) for use across Baby Health Guru.

Important Partials Include:

1. Left Column Navigation (leftcolumn.phtml & left navigation class)
2. Category Navigation (You Are Here) (categorynav.phtml)
3. Search Box (searchbox.phtml)
4. Registration Box (registerbox.phtml)
5. Timeline (timeline.phtml)
6. Feature Slideshow (featureslideshow.phtml)
7. Getting Started (gettingstarted.phtml)
8. What's Next Container (whatsnextbox.phtml)
9. Right Column Related Content Box (contentbox.phtml)
10. Survey Single Question Box (singlequestionbox.phtml)
11. Survey Response Chart (surveyresponsechart.phtml)
12. Comment Block (commentblock.phtml)
13. You are here section (2 versions)

[lila]

Survey Question--Right Hand Column

-two grey pixels 1px by 300px on the top and the bottom of the survey question
-hex#:e7e7e7 bar spans 300px wide across the top of the box and has the text: "Channel Health Guru Survey" (if the call out question is in BHG, it will say Baby Health Guru Survey"
-this text is #444444
-Title of the survey is hex#:000000
-title is centered
-answers/survey text is hex#:828282
-Take the complete survey! button is centered in the box

[maryann]

Replying to lila:

Survey Question--Right Hand Column

-two grey pixels 1px by 300px on the top and the bottom of the survey question<---Phase2
-hex#:e7e7e7 bar spans 300px wide across the top of the box and has the text: "Channel Health Guru Survey" (if the call out question is in BHG, it will say Baby Health Guru Survey"<---already is
-this text is #444444<---yo, doneizzle
-Title of the survey is hex#:000000<--- is already
-title is centered<---is already
-answers/survey text is hex#:828282<---k
-Take the complete survey! button is centered in the box<---is already

done and done

[lila]

QA--LILA dec 3, 2009
phase #2
BHG-What's Next Container on watch page
BHG-What's Next Container on Category Page

Mac OS 10
FIREFOX 3.0

Page Tested: http://devbaby.healthgurumedia.com/content/video/watch/102166/How_to_Prepare_Your_Child_for_a_New_Baby

-right and left arrows should be #bbbaba, but when rolled over or clicked become darker making it hex:#7d7d7d
-when user rolls over or clicks a video
-add a 1px black stroke around the videos the user rolls over--everytime the title of a video gets underlined/rolled over, add this stroke (this is a new design element we will be implementing in the What's Next containers across all channels)
-the gray text above each thumbnail that says "video, article, survey, etc" is centered and hex:#828282 (it is currently centered, but the gray is a lighter gray and we're trying to be more consistent w the grays we're using)

---

BHG-What's Next Container on category page

Mac OS 10
FIREFOX 3.0

Page Tested: http://devbaby.healthgurumedia.com/content/browse/cid/409/Newborn_Development

-right and left arrows should be #bbbaba, but when rolled over or clicked become darker making it hex#: 7d7d7d
-when user rolls over or clicks a video
-add a 1px black stroke around the videos the user rolls over--everytime the title of a video gets underlined/rolled over, add this stroke (this is a new design element we will be implementing in the What's Next containers across all channels)

[lila]

QA--LILA dec 3, 2009
phase #1

Mac OS 10
Safari

Page Tested:
BHG Home Page-- http://devbaby.healthgurumedia.com/

-Timeline does not work on any of the pages

[lila]

QA--Lila dec 3, 2009
phase #1

Mac OS 10
Safari

Left Column Navigation
page tested: http://devbaby.healthgurumedia.com/

-when user rolls over the baby health vid categories and the talk box appears on rollover going upwards, the three pieces of artwork used to make that rollover are not lined up correctly--the middle piece juts out to the right on the rt hand side, but matches on the left hand side of the talk box. (this bubble looks fine when it's facing downwards).

[brent]

QA--Brent dec 3, 2009
phase #2

Ubuntu
Firefox 3.0.15

1. Left Column Navigation (leftcolumn.phtml & left navigation class)
Page Tested: http://devbaby.healthgurumedia.com/
- The upper right of the left nav bar should not curve inward in the corner where it meets the header
- the arrow functunality is nbot aligned with the links in my environment
- the bullets and text links are misalgned in my enviroment
- in the rollovers "Popular Contents" should be changed to "Most Popular Content" and the links should be underlined as a default and with rollover the line dissapears. Also the line spacing in these links is out-of-whack when a link wraps to a 2nd line.
- in the channel rollovers the artwork is not lined up properly
- The "Health Conditions A-Z" rollover is all messed up
- there should be more vertical space between the "Now viewing" mode section below the nav bar and the "Follow us on" section also both of these sections should be moved to the right so that the text aligns with the text in the nav bar boxes

2. Category Navigation (You Are Here) (categorynav.phtml)
Page Tested: http://devbaby.healthgurumedia.com/
- all links in the ticker should show underline with rollover

4. Registration Box (registerbox.phtml)
- the headline should be centered and the button should appear to the right of the text box

5. Timeline (timeline.phtml)
- the boxes abvove the timeline should follow the mouse similar to the phg timeline
- there should be text that appears above the points on the timline with rollover that say 'week 6, or 'month 2'
- the heading "Newborn (month 1-8)" should change to "Newborn (weeks 1-8)"
- the heading "Infant (month 3-12)" should change to "Infant (months 3-12)"

7. Getting Started (gettingstarted.phtml)
- the text for each of the links is having wrapping issues.
- This section should be controlled in the backoffice... someone needs to show me how it works.

8. What's Next Container (whatsnextbox.phtml)
- in my environment the bars neaxt to the whats next heading breaks onto a 2nd line
- there should be a rollover effect for the arrows (darker grey - see lila for hex)
- the images should have an outline with rollover. 1 px dark grey (see lila for hex)
- When an article is featured without an image... we should show an article icon. When there is an image... we should show the image.
-

9. Right Column Related Content Box (contentbox.phtml)
- "Watch Videos in Same Category" title should be moved down a little bit from the box above and changed to read "More Videos in [category/subcategory name]
- "Watch Videos in Same Category" section.. the headlines should not be bold or as large of a font.

10. Survey Single Question Box (singlequestionbox.phtml)
- Lila has uploaded new design for this uploaded to ticket

11. Survey Response Chart (surveyresponsechart.phtml)
- pie charts look good.. please do not show bar charts on homepage

12. Comment Block (commentblock.phtml)
- comments - when not logged in and attempting to submit a comment the login register box should open.
- the + - and comment flag should use the same artwork as the current site.
- the comments section should wrap tighter on the right to allow for the comment rating as it does on the live site (see http://pregnancy.healthguru.com/content/video/watch/100110/Boost_Fertility_Naturally)
- line spacing on the heading is a bit odd when wrapping onto a second line.

13. You are here section (2 versions)
Homepage version
- prob should use smaller font... in order to make things fit more properly.
- triangles not lighning up properly with text links in my environment
- 'You are here Health Guru (home)' link should be changed to "Health Guru (home)"

middle comlun (watchpage) version
- prob should use smaller font... in order to make things fit more properly.
- triangles not lighning up properly with text links in my environment
- links at the bottom should include 'Health Conditions A-Z' 'Baby Health Guru (home)' and 'Health Guru (home)'
- Pregnancy Health guru wraps to a second line a looks strange.