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.

[khaled]

Replying to 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/

a. The upper right of the left nav bar should not curve inward in the corner where it meets the header - PHASE 2 - Modular Navigation Box Unit, don't really see the value in specifically redefining one case, and having to specially design new units to accommodate this. If not critical, it should not be done.

b. the arrow functionality is not aligned with the links in my environment - PHASE 3 - Likely a cross-browser/cross-environment fix that may need implementation. Cannot duplicate.

c. the bullets and text links are misaligned in my environment - PHASE 3 - See above

d. 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 disappears. Also the line spacing in these links is out-of-whack when a link wraps to a 2nd line.- PHASE 1/2 - Change to "Most Popular Content" (caveat though, if we ever decide to curate these, Popular Content is a more accurate label, which is why we chose Popular over Most Popular in the first place). Fix links. Line spacing is an issue when the font size is made larger (non-standard). Potentially, we can look at setting default line spacings instead of trying to fix every one. Maryann

e. in the channel rollovers the artwork is not lined up properly - PHASE 1 - Fix middle panel art for upwards pointing balloon. Maryann.

f. The "Health Conditions A-Z" rollover is all messed up - PHASE 1 - Sizing and layout is clearly defunct. Possibly Javascript is also defunct. Assigning to Maryann and Thomas

g. 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 - PHASE 2 - Maryann. Note that this is not to design but is a follow up request.

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

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

- PHASE 1 - Maryann

5. Timeline (timeline.phtml)
a. the boxes above the timeline should follow the mouse similar to the phg timeline - PHASE 2 - This is more complicated due to the differing sizes of the boxes. Requires new javascript as well. Assigned to Thomas. Be sure to check the Pregnancy.healthguru.com timeline to reference what this request is asking for.

1. there should be text that appears above the points on the timline with rollover that say 'week 6, or 'month 2' - PHASE 2 - As above, assigned to Thomas.

c. the heading "Newborn (month 1-8)" should change to "Newborn (weeks 1-8)" - PHASE 1 - Khaled
d. the heading "Infant (month 3-12)" should change to "Infant (months 3-12)" - PHASE 1 - Khaled

7. Getting Started (gettingstarted.phtml)
a. the text for each of the links is having wrapping issues. - PHASE 1 - Text should concatenate sooner. - Deepu
b. This section should be controlled in the backoffice... someone needs to show me how it works. - Works via the Feature Queues already.


8. What's Next Container (whatsnextbox.phtml)
a. in my environment the bars next to the whats next heading breaks onto a 2nd line - PHASE 3
b. there should be a rollover effect for the arrows (darker grey - see lila for hex) - PHASE 2 - Requires Javascript image switching as well as a new image arrow in the different color. Alternately, this can be done as a 'cutaway' layered over a background which can change color. Either way requires artwork and Javascripting. - Lila / Thomas
c. the images should have an outline with rollover. 1 px dark grey (see lila for hex) - PHASE 2 - Deepu
d. When an article is featured without an image... we should show an article icon. When there is an image... we should show the image. - PHASE 1 - Khaled


9. Right Column Related Content Box (contentbox.phtml)
a. "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] - PHASE 1 - Already assigned to Thomas
b. "Watch Videos in Same Category" section.. the headlines should not be bold or as large of a font. - PHASE 2 - Maryann

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

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

12. Comment Block (commentblock.phtml)
a. comments - when not logged in and attempting to submit a comment the login register box should open. PHASE 2 - Khaled
b. the + - and comment flag should use the same artwork as the current site. - PHASE 1 - Maryann
c. 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) - PHASE 1 - Maryann
d. line spacing on the heading is a bit odd when wrapping onto a second line. - PHASE 2 - Maryann

13. You are here section (2 versions) (categorynav.phtml)
Home Page - 4 Columns
a. prob should use smaller font... in order to make things fit more properly.
b. triangles not lining up properly with text links in my environment - PHASE 3
c. 'You are here Health Guru (home)' link should be changed to "Health Guru (home)" - PHASE 1 - Maryann

Other Pages - 3 Columns
- prob should use smaller font... in order to make things fit more properly.
- triangles not lining up properly with text links in my environment - PHASE 3
- links at the bottom should include 'Health Conditions A-Z' 'Baby Health Guru (home)' and 'Health Guru (home)' - PHASE 2 - Khaled
- Pregnancy Health guru wraps to a second line a looks strange. - PHASE 3

[deepu]

7. Getting Started (gettingstarted.phtml)
a. the text for each of the links is having wrapping issues. - PHASE 1 - Text should concatenate sooner. - Deepu -----Works Fine and cannot be duplicated

[deepu]

c. the heading "Newborn (month 1-8)" should change to "Newborn (weeks 1-8)" - PHASE 1 - deepu---- got it fixed
d. the heading "Infant (month 3-12)" should change to "Infant (months 3-12)" - PHASE 1 - deepu --- done with the change

[lila]

100x75 article icon. please use as default article icon when we don't have a thumbnail for an article.

[lila]

QA--Lila, Dec 07, 2009
Firefox (cozy animal)

PHASE 01

in response to: 8.d. --article icon is now uploaded _{please insert this icon into any 100x75px spot where we don't have an article icon. (what's next container, related section, etc.) THANKS!}

[maryann]

Everything done except Khaled-- refer to number 13

1. Left Column Navigation (leftcolumn.phtml & left navigation class)
Page Tested: http://devbaby.healthgurumedia.com/
a. The upper right of the left nav bar should not curve inward in the corner where it meets the header - PHASE 2 - Modular Navigation Box Unit, don't really see the value in specifically redefining one case, and having to specially design new units to accommodate this. If not critical, it should not be done.<---already done anyway
b. the arrow functionality is not aligned with the links in my environment - PHASE 3 - Likely a cross-browser/cross-environment fix that may need implementation. Cannot duplicate.<-- might have something to do with larger font size?
c. the bullets and text links are misaligned in my environment - PHASE 3 - See above
d. 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 disappears. Also the line spacing in these links is out-of-whack when a link wraps to a 2nd line.- PHASE 1/2 - Change to "Most Popular Content" (caveat though, if we ever decide to curate these, Popular Content is a more accurate label, which is why we chose Popular over Most Popular in the first place). Fix links. Line spacing is an issue when the font size is made larger (non-standard). Potentially, we can look at setting default line spacings instead of trying to fix every one. Maryann<---done done and done
e. in the channel rollovers the artwork is not lined up properly - PHASE 1 - Fix middle panel art for upwards pointing balloon. Maryann.<---fixeyfixed
f. The "Health Conditions A-Z" rollover is all messed up - PHASE 1 - Sizing and layout is clearly defunct. Possibly Javascript is also defunct. Assigning to Maryann and Thomas<--- it looks good now, has a todo for Phase 2/3 just to make the code a little better
g. 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 - PHASE 2 - Maryann. Note that this is not to design but is a follow up request.<--- this was a comment already made and already dealt with in a different ticket.

2. Category Navigation (You Are Here) (categorynav.phtml)
Page Tested: http://devbaby.healthgurumedia.com/
a. all links in the ticker should show underline with rollover - PHASE 1 - Maryann.<---moved to number 6

4. Registration Box (registerbox.phtml)
a. the headline should be centered and the button should appear to the right of the text box
- PHASE 1 - Maryann<---doneskies

6. Featured Slideshow
Page Tested: http://devbaby.healthgurumedia.com/
a. all links in the ticker should show underline with rollover - PHASE 1 - Maryann.<---this was fixed, and also moved from its original location because it was a mistake to put it under the you are here box

9. Right Column Related Content Box (contentbox.phtml)
b. "Watch Videos in Same Category" section.. the headlines should not be bold or as large of a font. - PHASE 2 - Maryann<---this has already been fixed/canceled

10. Survey Single Question Box (singlequestionbox.phtml)
a. Lila has uploaded new design for this uploaded to ticket - PHASE 2 - New design?<--- this has also already been dealt with

12. Comment Block (commentblock.phtml)
b. the + - and comment flag should use the same artwork as the current site. - PHASE 1 - Maryann<---done
c. 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) - PHASE 1 - Maryann<---done
d. line spacing on the heading is a bit odd when wrapping onto a second line. - PHASE 2 - Maryann<---done

13. You are here section (2 versions) (categorynav.phtml)
Home Page - 4 Columns
c. 'You are here Health Guru (home)' link should be changed to "Health Guru (home)" - PHASE 1 - Maryann<---done, but now there's a problem that they hang out over the edge--khaled?

[deepu]

3.
c. the images should have an outline with rollover. 1 px dark grey (see lila for hex) - PHASE 2 - Deepu ----"Now the Image is having a rollover"

[khaled]

PHASE 3 Target List
1. Left Navigation
b. Arrows are not horizontally(?) lined up with text anchors in left navigation
c. Bullets are not horizontally(?) lined up with text anchors in left navigation

8. What's Next
a. in my environment the bars next to the whats next heading breaks onto a 2nd line

13. You Are Here Navigation (4 and 3 Column)
a. Alignment issues with box

NEXT RELEASE / LIVE FIXES
1. Left Navigation
f. Will need to come up with an algorithm for layout of this box as number of items here grows (if it grows)

5. Time Line
a. there should be text that appears above the points on the time line with rollover that say 'week 6, or 'month
b. the boxes above the time line should follow the mouse similar to the PHG time line

[deepu]

3.
c. the images should have an outline with rollover. 1 px dark grey (see lila for hex) - PHASE 2 - Deepu ----"Needs to write Java Script Code"

[khaled]

8 d. Fixed for all Article Thumbs without an image.

13. Fixed hanging links on homepage. Added Channel (home) to navigation links at bottom.

11. Fixed questions so that if the featured question has no answers it will still work (i.e. use zero instead of trying to divide by 0).

12. Login/Register box slides in if the user is not logged in and tries to comment.