BHG: Video Watch Page

[khaled]

Build the Video Watch for Baby Health Guru as per design.

Back end is part of new Standard platform (content/video)
Front end is two tasks:
1. CSS generic for Standard platform
2. CSS specific for BHG

[khaled]

Evaluated design and approved. Cleared for implementation.

[maryann]

Front end is done.

[faisal]

Finished, should be 100% functional

[khaled]

Dev Testing:

1. On watch page, the 'POST A COMMENT' tag appears to be placed in the wrong location.
2. In the What's Next? section, the titles under the images appear to be getting cropped a little too much so that the roll-over underline is only visible on the first line.
3. The navigation unit at the bottom of the page appears to be force justified, it should just be left aligned. Also, lists in the box are spacing too large, and Baby Health Guru is breaking too soon (and falling down to the next row position).
4. The Channel(home) at the base of the navigation unit needs to have 'Channel' replaced with the name of the current channel.
5. The drop down login/register box needs to have it's close button labeled and moved up a bit more (guessing margin-top:-20px).

[khaled]

Item number 1 is a result of the Video player not having a specified min-size to start with. Correct by giving a fixed min-height to the video player block area.

[maryann]

Replying to khaled:
Dev Testing:

1. On watch page, the 'POST A COMMENT' tag appears to be placed in the wrong location.
---Faisal fixed this, appears to be working on dev (http://devbaby.healthgurumedia.com/content/video/watch/102168/How_to_Tell_What_Allergy_Your_Baby_Has)

2. In the What's Next? section, the titles under the images appear to be getting cropped a little too much so that the roll-over underline is only visible on the first line.
---Fixed this, only problem is with the videos all titled "Newborn Development--something" because there is only room to display that much, and they all look like they have the same title.

3. The navigation unit at the bottom of the page appears to be force justified, it should just be left aligned. Also, lists in the box are spacing too large, and Baby Health Guru is breaking too soon (and falling down to the next row position).
---Made it left justified and also made the font a little smaller, is still readable though.

4. The Channel(home) at the base of the navigation unit needs to have 'Channel' replaced with the name of the current channel.
---Removed.

5. The drop down login/register box needs to have it's close button labeled and moved up a bit more (guessing margin-top:-20px).
---changed it to look like the normal close box that is used elsewhere within the site.

[khaled]

Passed Development Testing. Sending to QA.

[brent]

QA from Brent -n- Lila 11/25/09

Page tested: http://devbaby.healthgurumedia.com/content/video/watch/101271/Newborn_Development_Month_3_Weeks_9_12

Ubuntu / Firefox 3.0.15

- Video description section - needs to be reworked to include thumbnail, just show description when closed limited to 3 lines of text, the whole section can be pushed up against the bottom of the player (much closer maybe a few pixels from player) see mock-up coming from lila
- the Whats next section should be moved up much closer to the the description. This space is a premium space on the site and it is imperative we keep things tight here.
- the arrows in the whats next section should have a subtle rollover effect where the grey gets slightly darker.
- video titles in the whats next section should probably wrap onto a third line when needed. also having a rollover effect similar to the one on the commenting policy showing the full video title might not be a bad idea.
- the you are here box should have better spacing and samller font between each section. There should be a link here for the BHG homepage next to the healthguru homepage. also the your are here section should show a breacrumb trail to mirror the one at the top of the page that wraps onto 2-3 lines if needed.

- 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.
- "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.
- the registration box over the video has odd placement for the close box. should always be upper right corner.

[lila]

video description has been tweaked.

[lila]

this is an example of when the user has clicked "view more" or any of the other links at the bottom of the description (transcript, category, expert, tags, or view more)

[khaled]

Replying to brent:

QA from Brent -n- Lila 11/25/09

Page tested: http://devbaby.healthgurumedia.com/content/video/watch/101271/Newborn_Development_Month_3_Weeks_9_12

Ubuntu / Firefox 3.0.15

- Video description section - needs to be reworked to include thumbnail, just show description when closed limited to 3 lines of text, the whole section can be pushed up against the bottom of the player (much closer maybe a few pixels from player) see mock-up coming from lila - PHASE 2

- the Whats next section should be moved up much closer to the the description. This space is a premium space on the site and it is imperative we keep things tight here. - PHASE 1

- the arrows in the whats next section should have a subtle rollover effect where the grey gets slightly darker. - PHASE 2

- video titles in the whats next section should probably wrap onto a third line when needed. also having a rollover effect similar to the one on the commenting policy showing the full video title might not be a bad idea. - PHASE 2

- the you are here box should have better spacing and samller font between each section. There should be a link here for the BHG homepage next to the healthguru homepage. also the your are here section should show a breacrumb trail to mirror the one at the top of the page that wraps onto 2-3 lines if needed. - PHASE 2

- comments - when not logged in and attempting to submit a comment the login register box should open. - PHASE 2

- the + - and comment flag should use the same artwork as the current site. - PHASE 1

- 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

- line spacing on the heading is a bit odd when wrapping onto a second line. - PHASE 1

- "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

- "Watch Videos in Same Category" section.. the headlines should not be bold or as large of a font. - PHASE 1

- the registration box over the video has odd placement for the close box. should always be upper right corner. - PHASE 1

[maryann]

To Khaled:
In reference to #1: there is a place for the thumbnail now, please just fill it with that videos thumb via PHP. Also, can you move the "view more" up into the text box? I tried to do it using CSS but it went behind the text box so that it was visible but not clickable. Everything else I tried, it could be moved but then when it expanded, the "view more" ran into the expanded text. It's important because the way it hangs down takes up a lot of space

In reference to # 7 and #8: the rating doesn't seem to be working properly. Once I pick a rating, I cannot change it like I can on live

In reference to #10: I'm not sure how to add the category/subcategory name because of the way that the info is being passed to the content box partial

---

Page tested: http://devbaby.healthgurumedia.com/content/video/watch/101271/Newborn_Development_Month_3_Weeks_9_12

Ubuntu / Firefox 3.0.15

1. Video description section - needs to be reworked to include thumbnail, just show description when closed limited to 3 lines of text, the whole section can be pushed up against the bottom of the player (much closer maybe a few pixels from player) see mock-up coming from lila - PHASE 2<--- was reworked to a certain extent; made area smaller, included thumbnail

2. the Whats next section should be moved up much closer to the the description. This space is a premium space on the site and it is imperative we keep things tight here. - PHASE 1<--- was moved up

3. the arrows in the whats next section should have a subtle rollover effect where the grey gets slightly darker. - PHASE 2<--- on hold

4. video titles in the whats next section should probably wrap onto a third line when needed. also having a rollover effect similar to the one on the commenting policy showing the full video title might not be a bad idea. - PHASE 2<--- made three lines

5. the you are here box should have better spacing and samller font between each section. There should be a link here for the BHG homepage next to the healthguru homepage. also the your are here section should show a breacrumb trail to mirror the one at the top of the page that wraps onto 2-3 lines if needed. - PHASE 2<--- on hold

6. comments - when not logged in and attempting to submit a comment the login register box should open. - PHASE 2 <---on hold

7. the + - and comment flag should use the same artwork as the current site. - PHASE 1<---passed to khaled

8. 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<---passed to khaled

9. line spacing on the heading is a bit odd when wrapping onto a second line. - PHASE 1<--- fixed

10. "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<--- I moved it down, still needs to say category/subcategory name, passed to khaled

11. "Watch Videos in Same Category" section.. the headlines should not be bold or as large of a font. - PHASE 1<---canceled

12. the registration box over the video has odd placement for the close box. should always be upper right corner. - PHASE 1<--- the close box is where it always is, 13px away from the top and from the right. To remain consistent, I left it there and moved down the rating explanation so that it looks better.

[khaled]

Replying to maryann:

To Khaled:

A. In reference to #1: there is a place for the thumbnail now, please just fill it with that videos thumb via PHP. Also, can you move the "view more" up into the text box? I tried to do it using CSS but it went behind the text box so that it was visible but not clickable. Everything else I tried, it could be moved but then when it expanded, the "view more" ran into the expanded text. It's important because the way it hangs down takes up a lot of space <- Khaled: Done

B. In reference to # 7 and #8: the rating doesn't seem to be working properly. Once I pick a rating, I cannot change it like I can on live <- Khaled: Can't replicate, Works Already

C. In reference to #10: I'm not sure how to add the category/subcategory name because of the way that the info is being passed to the content box partial <-Assigning to Thomas

The goal here is to change the partial, paritals/rightcolumn/content_video.phtml so that it properly provides the category name in the title instead of "More Videos in Same Category" it should read "More Videos in <Category Name>".

[lila]

QA--lila. dec 07, 2009

firefox
mac os 10

page tested: http://devbaby.healthgurumedia.com/content/video/watch/102109/Baby_Poop_Basics

PHASE 01

1. switch out text in rt hand col from More Videos in Newborn Care to: More Content From Category or Subcategory' (it's okay if this wraps on two lines.

POST RELEASE FIX:

2. add 'transcript, category, expert, tags in hex#444444 just to the right of the thumbnail (is this a jump link??). the function when the user hits one of these is to inform them that there is this specific info hidden in here and when the user does click on any of those links, it just opens up like the 'view more' function

[khaled]

1. Text has been changed per request.

[lila]

BHG-Watch Page
QA--LILA dec 8, 2009
phase 01
IE 07
Page Tested: http://devbaby.healthgurumedia.com/content/video/watch/102126/Tooth_Care_For_Babies

1. tabs above the player are moved over to the right--all three should be aligned directly on top of player
2. tabs need to read (from left to right): Embed, Rating, Views. Currently they read: rating, views, embed
3. when tried to rate the video, the login/reg box appeared under the left tab which reads 'embed' (note: it should drop down to span directly the width of the player)
4. all of the rt hand column is under the nav bar and You Are Here box in the left hand column
5. You Are Here box needs double gray px lines on top of it (all You Are Here boxes need this feature)
6. You Are Here box: when Sex Health arrow is pointed downward and the bulleted list appears, it pushes the CHG column over (it does not do this on firefox or safari)
7. Health conditions and Health Guru Home under the You Are Here box are justified all the way to the right of the page rather than to the right of the You Are Here box
8. the Email to a friend button in the embed roll over is outside of the box
9. Comment box--
9a-gray bounding box artwork disappears when user clicks inside to make a comment---only the 'submit' button on a gray isolated tab with text above it saying 'post a comment'
9b- i tried rating a specific comment and comment box with previous posted comments disappeared until the page was refreshed and the rating still didn't appear
10. cannot log out..when i try and log out, it takes me back to admin/login

[maryann]

Khaled-- numbers 9 and 10 need addressed

IE 07
Page Tested: http://devbaby.healthgurumedia.com/content/video/watch/102126/Tooth_Care_For_Babies

1. tabs above the player are moved over to the right--all three should be aligned directly on top of player<--- is only a problem in VBOX

2. tabs need to read (from left to right): Embed, Rating, Views. Currently they read: rating, views, embed<--- VBOX

3. when tried to rate the video, the login/reg box appeared under the left tab which reads 'embed' (note: it should drop down to span directly the width of the player)<---VBOX

4. all of the rt hand column is under the nav bar and You Are Here box in the left hand column<---VBOX

5. You Are Here box needs double gray px lines on top of it (all You Are Here boxes need this feature)<---done

6. You Are Here box: when Sex Health arrow is pointed downward and the bulleted list appears, it pushes the CHG column over (it does not do this on firefox or safari)<--VBOX is messing things up so the nav appears smaller than is ever should and in reality does, this is why there are problems

7. Health conditions and Health Guru Home under the You Are Here box are justified all the way to the right of the page rather than to the right of the You Are Here box<---fixed

8. the Email to a friend button in the embed roll over is outside of the box <---VBOX

9. Comment box--
9a-gray bounding box artwork disappears when user clicks inside to make a comment---only the 'submit' button on a gray isolated tab with text above it saying 'post a comment'<---Khaled, what is this?
9b- i tried rating a specific comment and comment box with previous posted comments disappeared until the page was refreshed and the rating still didn't appear<---this is also not working

10. cannot log out..when i try and log out, it takes me back to admin/login<---Khaled

[deepu]

1. tabs above the player are moved over to the right--all three should be aligned directly on top of player<--- is only a problem in VBOX --- Works Fine in normal IE

2. tabs need to read (from left to right): Embed, Rating, Views. Currently they read: rating, views, embed<--- VBOX---Works Fine in normal IE

3. when tried to rate the video, the login/reg box appeared under the left tab which reads 'embed' (note: it should drop down to span directly the width of the player)<---VBOX----Works Fine in normal IE

4. all of the rt hand column is under the nav bar and You Are Here box in the left hand column<---VBOX---Works Fine in normal IE

6. You Are Here box: when Sex Health arrow is pointed downward and the bulleted list appears, it pushes the CHG column over (it does not do this on firefox or safari)<--VBOX is messing things up so the nav appears smaller than is ever should and in reality does, this is why there are problems----Works Fine in normal IE

8. the Email to a friend button in the embed roll over is outside of the box <---VBOX ----not working in normal IE.

[maryann]

Comments via Josh:

*** Same issue with the navigation bullets
Under tags when you “view more” about the video, the second line of tags is not indented properly to match the first line

On comments, there does not seem to be any plus or minus buttons to fix the rating
The commenting policy is the old text – I believe we updated this at some point to include something about crediting sources for the HON code.

Same comment about the grey box on the bottom – if we could space it out a bit better I think all the categories would fit on one line and make it a lot neater (this design seems to carry to all of the other page formats as well)…

When you are logged in, the register box turns to “hello username” The words below that to see account settings should be center justified – we should generally do something better with the design of this box at some point.

Mouseovers on the nav bar – there are some weird dropshadow issues – the top and bottom right side corners do not match up with the rest of the shadow

*** On the nav bar – college health guru and new health guru have colors which are quite dark – it is not possible to read the black text which says the name of the channel – maybe make CHG yellow and NHG light blue as a quick fix…

[maryann]

New From Josh (cont...)
Video page
1)      The 3rd line of title text in the “What’s Next” box is cut in half.