Page MenuHomePhabricator

Improve spacing between Create a Wikistory button
Open, MediumPublic

Description

Problem
Screenshot 2024-05-03 at 7.50.44 PM.png (1×770 px, 220 KB)

The spacing between "Create a Wikistory" and the subtitle text looks off at the moment. This task aims to improve it to make it look nice.

Design

TBD

Event Timeline

@SGautam_WMF could you prioritize this? It looks like it could be a quick one.

@SGautam_WMF could you prioritize this? It looks like it could be a quick one.

Sure

@SBisson can we create a patch with following changes.

.ext-wikistories-discover-item-cta-text-subtitle {
display: block;
white-space: normal;
color: var(#54595D);
margin-top: 0;
}
.ext-wikistories-discover-item-cta-text-title {
font-weight: bold;
font-size: 14px;
color: var(#202122);
margin-bottom: 8px;
}
.mf-font-size-clientpref-small .mw-body p, .mf-font-size-clientpref-small .content p {
font-size: 1rem;
}
Items highlighted in bold are the changes. So adding two margin properties and getting rid of font-size: 1rem.

SBisson triaged this task as Medium priority.
SBisson moved this task from Backlog to Dev on the Inuka-Team (Kanban) board.

.mf-font-size-clientpref-small .mw-body p, .mf-font-size-clientpref-small .content p {
font-size: 1rem;
}

This is mobile frontend style so we can't remove it. Also note that it includes -client-pref-small so this will vary based on the textsize preference of the reader. I'm not sure what to do here to make sure it plays well with that preference. Are you finding the CTA text too big?

.mf-font-size-clientpref-small .mw-body p, .mf-font-size-clientpref-small .content p {
font-size: 1rem;
}

This is mobile frontend style so we can't remove it. Also note that it includes -client-pref-small so this will vary based on the textsize preference of the reader. I'm not sure what to do here to make sure it plays well with that preference. Are you finding the CTA text too big?

Originally we set it up for 14px but it takes it as 1rem which puts it more than 14px and I guess it will vary site to site given rem will depend on default type size on the site.

Change #1038824 had a related patch set uploaded (by Sbisson; author: Sbisson):

[mediawiki/extensions/Wikistories@master] Adjust CTA margins

https://gerrit.wikimedia.org/r/1038824

Change #1038824 merged by jenkins-bot:

[mediawiki/extensions/Wikistories@master] Adjust CTA margins

https://gerrit.wikimedia.org/r/1038824