Page MenuHomePhabricator

Page Forms: Checkboxes should be farther apart
Closed, ResolvedPublic

Description

Right now, the "checkboxes" display looks a little ugly - labels are actually closer to the checkbox ahead of them than to their own checkbox. There needs to be more space between each checkbox + label pair and the next - ideally defined in the file PageForms.css.

Event Timeline

Gopavasanth added a subscriber: Gopavasanth.
Yaron_Koren added a subscriber: DrishyaR.

Change 497766 had a related patch set uploaded (by Drishya Ramesh; owner: Drishya Ramesh):
[mediawiki/extensions/PageForms@master] Page Forms: Checkboxes should be farther apart

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

Hello @Yaron_Koren is this still an Issue? which check boxes are referred to here? the ones on Special:CreateClass?

Yes, this is still an issue. This refers to checkboxes in user-defined forms, defined with "input type=checkboxes".

Hello @Yaron_Koren I understand this task, but how can i check it out myself?

@Rexsteroxy - you need to set up MediaWiki and install Page Forms on it, if I understand the question correctly...

Hello @Yaron_Koren I have succeeded in setting up MediaWiki and as well installed the Page Forms Extensions.

pageforms.png (372×1 px, 32 KB)

Above is the screen shot of the page form extension.
On which of the above links can i see the stipulated error.("checkboxes" display looks a little ugly ).

Great! Now you need to create a form that includes an input with type "checkboxes". Look at the Page Forms documentation for how to do that:

https://www.mediawiki.org/wiki/Extension:Page_Forms

Hi @Yaron_Koren
I've contacted you through G-Mail and you guided me to this Microtasks.
I've installed Media Wiki, PageForms and Cargo, but I faced a problem to generate a "Checkbox". Using the Special Pages (Special:Createform, Special:CreateTemplate, Special:CreateClass and Special:CreateCategory) didn't lead me to generate it.
On the Other hand, I partly familiarized myself with the jQuery Code in extensions/PageForms/libs/PF_CreateTemplate.js

So I hope you may guide me to the lost item to reach the Checkbox.
Thanks.

@AmrEl-Absy - did you read the Page Forms documentation? Everything with checkboxes is explained there...

image.png (447×413 px, 5 KB)

Hi @Yaron_Koren
I think I completed it. I had a problem to to know that boolean datatype leads to CheckBox.
I have changed a little bit in extensions/PageForms/skins/PageForms.css Line 135
It was

#pfForm select,
#pfForm input[type="checkbox"] {
    min-width: 0;
    max-width: 100%;
    width: auto !important;
}

So I changed The min-width to 30px and added new property margin-top: 6px.
I think I did this microtask, but I don't know how to submit it or even claim it ti myself. So, I hope you would help me through submitting it.
Thanks.

Hi @AmrEl-Absy - that's not quite it. There are two different input types, "checkbox" and "checkboxes" - this issue is about "checkboxes". Sorry for the confusion.

Hi @Yaron_Koren
Never mind, I think I fixed it.

This is Before

tttt.png (76×637 px, 3 KB)

And this is After

image.png (62×927 px, 5 KB)

This Microtask was a little tricky because of the direction but I noticed that <body> has a class .ltr, so I used it in the CSS Selector.
The Change would be in the same file, extensions/PageForms/skins/PageForms.css, and I think it goes on Line 143.

The Selector should consider using all the checkboxes but the first one, so it goes in the following way

body.ltr #pfForm label.checkboxLabel:not(:first-child) input[type="checkbox"] {
	margin-left: 40px;
}

body.rtl #pfForm label.checkboxLabel:not(:first-child) input[type="checkbox"] {
	margin-right: 40px;
}

I hope it's right that time, and hope you will help me through submitting it, and tell me the next suitable step, whether going to another microtask, or something else.
Thanks.

Hi @Yaron_Koren
Never mind, I think I fixed it.

This is Before

tttt.png (76×637 px, 3 KB)

And this is After

image.png (62×927 px, 5 KB)

This Microtask was a little tricky because of the direction but I noticed that <body> has a class .ltr, so I used it in the CSS Selector.
The Change would be in the same file, extensions/PageForms/skins/PageForms.css, and I think it goes on Line 143.

The Selector should consider using all the checkboxes but the first one, so it goes in the following way

body.ltr #pfForm label.checkboxLabel:not(:first-child) input[type="checkbox"] {
	margin-left: 40px;
}

body.rtl #pfForm label.checkboxLabel:not(:first-child) input[type="checkbox"] {
	margin-right: 40px;
}

I hope it's right that time, and hope you will help me through submitting it, and tell me the next suitable step, whether going to another microtask, or something else.
Thanks.

Hello @AmrEl-Absy I am guessing you are interested in GSoC, with wikimedia, if So you have to get used to making code contributions yourself. I am sure with some trial and error you will be able to do it! here is a link on making contributions to mediawiki, you should look out for the Gerrit Tutorial here. If you have any issues you can ask questions here or on the support channel, Best of luck.

Hello @AmrEl-Absy I am guessing you are interested in GSoC, with wikimedia, if So you have to get used to making code contributions yourself. I am sure with some trial and error you will be able to do it! here is a link on making contributions to mediawiki, you should look out for the Gerrit Tutorial here. If you have any issues you can ask questions here or on the support channel, Best of luck.

Thanks a million. I have followed the instructions, and submitted the changes to Gerrit. Is that only what I am asked to finish this Microtask?! and what should I do now for getting deeper in GSoC Proposal Requirements or what is the next step?!
Thanks

What is the URL for the Gerrit patch?

What is the URL for the Gerrit patch?

It's here.

Change 579694 had a related patch set uploaded (by Amr El-Absy; owner: Amr El-Absy):
[mediawiki/extensions/PageForms@master] Fix The Appearance of Checkboxes

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

Change 579694 merged by jenkins-bot:
[mediawiki/extensions/PageForms@master] Fix The Appearance of Checkboxes

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

Yaron_Koren claimed this task.

Fixed now! @AmrEl-Absy - thank you!