Page MenuHomePhabricator

Make height/width changes for Mentor/learner Feed on Co-op Landing page
Closed, ResolvedPublic

Description

The current Landing page of the Co-op (at https://test.wikipedia.org/wiki/Wikipedia:Co-opFront) is currently dependent on the page at https://test.wikipedia.org/wiki/Wikipedia:Co-opFront/Feed-_Listing. This page is dependent on the two sample templates at https://test.wikipedia.org/wiki/Template:Co-op_profile_mentor_front and https://test.wikipedia.org/wiki/Template:Co-op_profile_member_front. These two sample templates are called with the required parameters for creating the currently displayed samples on the Co-op Landing page.

The Learner sample template can contain text (under the "about" parameter) up to 120 characters, which ends up varying the height of the profile card containing the template based on how much text is present. So the height and width of both the profile cards needs to be fixed so that regardless of the amount of text in parameters, the size of the called templates does not vary. We might want to increase either the width or the height of the profile cards so that the new "fixed" size looks good while still being easily displayed on the Co-op landing page.

Moreover, in cases where the text on the called template is too long, it needs to be truncated so that the size of the template does not alter, and neither does the text overflow outside the template. (Jethro suggested using "overflow=hidden" for the div tags on the sample template to achieve the same)

Event Timeline

Soni assigned this task to Slalani.
Soni raised the priority of this task from to Medium.
Soni updated the task description. (Show Details)
Soni added a project: Co-op.
Soni added subscribers: Soni, I_JethroBT.
I_JethroBT set Security to None.

@Slalani After thinking about this, I'd suggest going with making the heights consistent rather than the width. I'm afraid that it will trying to increase the width to accommodate 120 characters will require too drastic of a change to the page, whereas changing the heights will only minimally change the page appearance overall.

Gave it a fixed height of 130px with 10px padding, and added the overflow:hidden property.