BHG: Category Page Updates

[khaled]

Updates and Fixes for the Category Page

content/browse

[lila]

QA--Lila. Dec 15, 2009

firefox mac os10

http://devbaby.healthgurumedia.com/content/browse/cid/408/sid/424/Baby_Health/Common_Ailments

1. in the rt hand col under the tags box, 'view more' and 'view less' need to be underlined
2. in the ftr'd video section, pls align the page numbers with the bottom of the ftr'd thumbnail and bring everything beneath that up so the page is more consolidated.

[maryann]

1. in the rt hand col under the tags box, 'view more' and 'view less' need to be underlined<---this seems like a similar problem to on the video description page--it begins underlined but does not remain so---passing to khaled
2. in the ftr'd video section, pls align the page numbers with the bottom of the ftr'd thumbnail and bring everything beneath that up so the page is more consolidated.<---fixed this

[khaled]

1. Fixed the right column tags box so that it always says view more and close. These anchors are now always underlined. Changed content_browse.js so that the instantiation of the HGViewToggle object includes the directive setOptions so that toggleBehavior:html and toggleText uses html.

[deepu]

1. Fixed the right column tags box so that it always says view more and close. These anchors are now always underlined. Changed content_browse.js so that the instantiation of the HGViewToggle object includes the directive setOptions so that toggleBehavior:html and toggleText uses html.---- Working fine in FF, Chrome but in IE the underline thing is missing--functions properly

[brent]

QA from Brent 122109
Ubuntu - Firefox 3.1

Category Page:
- For each of the sub-cats shown with 4 or fewer pieces of content... no arrows should be displayed.
- the 'back to top' links should be underlined by default
- in the subcategory listings the link for videos looks like '(4 videos) view all' and the link for articles looks like '(2 articles) (view all)'. we should lose the link for 'view all' and just have '(4 videos)' or (2 articles)be underlined as a link. [this is how it was done on the basic site]
- in the tags section each tag should appear underlined and the underline dissapears by default.
- the 'Join the Baby Health Guru Newsletter!' box should appear above the tags and below the 300x250 ad
- in the page heading "a category in [channel name]' The channel name should be underlined and the underline dissapears with rollover.

[deepu]

Category Page:
- For each of the sub-cats shown with 4 or fewer pieces of content... no arrows should be displayed.--Now we have no arrows displayed for videos less than 4 to make it work made a change in main.css just added arrow-right.hide and arrow-left.hide and used if condition in categorybrowsebox.phtml

- the 'back to top' links should be underlined by default -- is underlined now just added <u> tag in categorybrowsebox.phtml

- in the subcategory listings the link for videos looks like '(4 videos) view all' and the link for articles looks like '(2 articles) (view all)'. we should lose the link for 'view all' and just have '(4 videos)' or (2 articles)be underlined as a link. [this is how it was done on the basic site]-- now the link is only for video numbers no view all and to make it made a change in categorybrowsebox.phtml
i.e just added videos to anchor function

- in the tags section each tag should appear underlined and the underline dissapears by default.--now all the tags are underlined added class of underlined in content_browse.phtml

- the 'Join the Baby Health Guru Newsletter!' box should appear above the tags and below the 300x250 ad -- moved up just moved the tag up in content_browse.phtml

- in the page heading "a category in [channel name]' The channel name should be underlined and the underline dissapears with rollover.---just added <u> tags in breadcrumb.phtml

[maryann]

Replying to deepu:

Category Page:
- For each of the sub-cats shown with 4 or fewer pieces of content... no arrows should be displayed.--Now we have no arrows displayed for videos less than 4 to make it work made a change in main.css just added arrow-right.hide and arrow-left.hide and used if condition in categorybrowsebox.phtml<---I changed this so that the arrows will not be visible (but the space will still be there), by adding a no-arrow class that just moves the background over 200px so that you can no longer see it

- the 'back to top' links should be underlined by default -- is underlined now just added <u> tag in categorybrowsebox.phtml<--- I changed this to use the .underlined class so that it has the hover function that we use across the site

- in the subcategory listings the link for videos looks like '(4 videos) view all' and the link for articles looks like '(2 articles) (view all)'. we should lose the link for 'view all' and just have '(4 videos)' or (2 articles)be underlined as a link. [this is how it was done on the basic site]-- now the link is only for video numbers no view all and to make it made a change in categorybrowsebox.phtml
i.e just added videos to anchor function

- in the tags section each tag should appear underlined and the underline dissapears by default.--now all the tags are underlined added class of underlined in content_browse.phtml

- the 'Join the Baby Health Guru Newsletter!' box should appear above the tags and below the 300x250 ad -- moved up just moved the tag up in content_browse.phtml

- in the page heading "a category in [channel name]' The channel name should be underlined and the underline dissapears with rollover.---just added <u> tags in breadcrumb.phtml<--- changed this back to the original and instead added the underlined class to the title bar in browse.phtml (original QA misunderstood)

[brent]

everything checks out except it looks like a minor issue with the arrows. on http://devbaby.healthgurumedia.com/content/browse/cid/406/Newborn_Care the bottom sub-cate listed is 'Baby Safety' with 8 videos. For some reason when you load the page there are arrows to go both left and right.... it should only have the arrow to go to the right.

[brent]

- Below the tag cloud there are two sets of double grey lines…

[brent]

Comments from Senior Mgmt Team

10· Below the tag cloud there are two sets of double grey lines…
11. In sub-categories where there are more than 4 videos and the arrows show up, they do not seem to be working to scroll and see more videos.

[maryann]

1. Everything checks out except it looks like a minor issue with the arrows. on http://devbaby.healthgurumedia.com/content/browse/cid/406/Newborn_Care the bottom sub-cate listed is 'Baby Safety' with 8 videos. For some reason when you load the page there are arrows to go both left and right.... it should only have the arrow to go to the right.<---passing to lei

2. Below the tag cloud there are two sets of double grey lines…<---put it in the rightcol phtml instead of in the singlequestionbox.phtml partial to avoid this problem in the future

(mngm. comments)
10· Below the tag cloud there are two sets of double grey lines… <---put it in the rightcol phtml instead of in the singlequestionbox.phtml partial to avoid this problem in the future

11. In sub-categories where there are more than 4 videos and the arrows show up, they do not seem to be working to scroll and see more videos. <---lei, probably the same problem as above?

[lei]

1. Everything checks out except it looks like a minor issue with the arrows. on http://devbaby.healthgurumedia.com/content/browse/cid/406/Newborn_Care the bottom sub-cate listed is 'Baby Safety' with 8 videos. For some reason when you load the page there are arrows to go both left and right.... it should only have the arrow to go to the right.<---passing to lei

--Done

11. In sub-categories where there are more than 4 videos and the arrows show up, they do not seem to be working to scroll and see more videos. <---lei, probably the same problem as above?

--Done

Both of these are caused by a bug in class HGPrevNextFx in HGCore.js,

When it gets Elements for left arrow buttons and right arrow buttons, it should use getElements() instead of getElement():

this.leftBtn = this.el.getElements(this.options.prevEl);
this.rightBtn = this.el.getElements(this.options.nextEl);