Page MenuHomePhabricator

Wiki Highlight Styling update
Closed, ResolvedPublic

Description

Overflow of “Discover more” text on cards

we set the text to be 3 lines, then we also set the card height not exceed to screen height, so in smaller screen we have this problem, I can try set to 2 lines when screen is smaller.

I tried to play with some css values and I think changing .wiki-highlight-thumb-text p font-size:1.1em to 1em is also helpful for this.

Can we reduce space between “Discover more” heading and cards? Can we set it to 10% from currentl value of 13%

Sure

Why sometimes back arrow arrears after several seconds?

this is because the arrow is loading after it is needed, I can try let it load before user need it.

can we also change “See all Wikihighlights” copy color for dark mode? as of now it looks quite light.

Sure, what color you are thinking of? (TBC)

Lets use #c8ccd1; can we also reduce its bottom value from 40px to 20px.

Add following changes to make highlight heading and text dark theme friendly.

For .wiki-highlight-card-text h2 - add color: #eaecf0;
For .wiki-highlight-card-text p - add color: : #c8ccd1;
For .wiki-highlight-view-swipe - add color: #c8ccd1;

Can we also make following change for .wiki-highlight-card-text font size?

Change .wiki-highlight-card-text p font-size from 1.3em to 1.2em

Event Timeline

SBisson triaged this task as High priority.Nov 29 2023, 3:11 PM
SBisson moved this task from Ready for Dev to Definition on the Inuka-Team (Kanban) board.

@SBisson shall I provide specific inputs for those changes? or is there anything else you would like to explore?

@SGautam_WMF maybe just answer the last question in the description about the color, then it should be good to go

@SGautam_WMF maybe just answer the last question in the description about the color, then it should be good to go

Made specific value changes in task description, I think its good to go from here.