Page MenuHomePhabricator

Overlapping of bullet points with the text in Advanced Search
Closed, ResolvedPublic

Description

In the MediaWiki skin Bouquet, in the "Advanced Search" menu, the text is overlapping with the bullet points as shown in Image below:

The bullets should be shifted to the right closer to the text or the text shifted to the left towards the bullet points, so this should be a CSS fix (some padding to the respective elements) and can be a good task for Google-Code-in-2018.

Event Timeline

Restricted Application added a subscriber: Aklapper. · View Herald TranscriptSep 22 2018, 5:50 AM
Gopavasanth updated the task description. (Show Details)Sep 22 2018, 5:52 AM
D3r1ck01 renamed this task from Operlaping of Bullet points with the text in Advanced Search to Overlapping of bullet points with the text in Advanced Search.Sep 22 2018, 1:36 PM
D3r1ck01 updated the task description. (Show Details)
D3r1ck01 added a project: CSS.
D3r1ck01 updated the task description. (Show Details)
D3r1ck01 updated the task description. (Show Details)Sep 22 2018, 1:39 PM
D3r1ck01 updated the task description. (Show Details)
Aklapper updated the task description. (Show Details)Oct 4 2018, 10:31 AM

@Puneethchanda This is the Google Code-in Task, So only the students from the Google-Code-in-2018 Should work on it, so I'm Removing you from the assign, Sorry Hope you understand :-)

Gopavasanth removed Puneethchanda as the assignee of this task.Nov 5 2018, 6:15 AM
Gopavasanth added a subscriber: Puneethchanda.

Change 472515 had a related patch set uploaded (by Takidelfin; owner: Takidelfin):
[mediawiki/skins/Bouquet@master] search-types: Fix overlapping of bullets points in advanced search

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

takidelfin closed this task as Resolved.Dec 10 2018, 6:49 PM

@Gopavasanth hmm, any problems with https://gerrit.wikimedia.org/r/c/mediawiki/skins/Bouquet/+/472515 ? Because it is still 'floating' on Gerrit.
I can help with merging conflicts! :D

takidelfin reopened this task as Open.Dec 10 2018, 6:50 PM

If this task is still unresolved then I would like to work on this. Can this be assigned to me?

ashley reassigned this task from takidelfin to Nikitrain.Mar 29 2019, 10:30 PM
ashley added subscribers: takidelfin, ashley.

If this task is still unresolved then I would like to work on this. Can this be assigned to me?

Sure! Whenever you have a patch ready, please feel free to add me as a reviewer to it.

The previous patch, which I'm stumbling upon now for the very first time, might be correct from a CSS point of view (I didn't install the AdvancedSearch extension to test out the bug nor the fix), but adding such extension-specific CSS to the skin's main CSS file is not ideal and you'll want to look into leveraging $wgResourceModuleSkinStyles instead.

If you're wondering why there are styles specific to various social tools, like the Comments extension, SocialProfile and more in Bouquet's style.css and why those aren't implemented via $wgResourceModuleSkinStyles, the answer is simple: Technical-Debt. The skin will be five years old this August or so, and $wgResourceModuleSkinStyles was a brand new feature back in the day; years have passed since but neither I nor anyone else has refactored Bouquet to leverage it more so that we can optimize the CSS file further.

Let me know if you need any help with this.

Nikitrain added a comment.EditedMar 30 2019, 2:16 PM

@ashley Sorry, I'm confused, if it isn't ideal to edit the CSS file of the skin then how am I supposed to fix this. I don't have any experience with resource loader, although I do have some experience with CSS. Where am I supposed to edit the CSS file? Can you please guide me a bit more? Thanks! :)

@Nikitrain: Please see the previous patch above and investigate.

Nikitrain added a comment.EditedMar 30 2019, 2:58 PM

@Nikitrain: Please see the previous patch above and investigate.

@Aklapper I did see the previous patch. The previous patch is wrong that's what @ashley said in the comment. The patch is provided for the wrong file and now I can't figure out where to provide the new patch.

@ashley Sorry, I'm confused, if it isn't ideal to edit the CSS file of the skin then how am I supposed to fix this. I don't have any experience with resource loader, although I do have some experience with CSS. Where am I supposed to edit the CSS file? Can you please guide me a bit more? Thanks! :)

You may want to look at this or this commit on the Refreshed repository for a practical example.

Basically instead of editing the existing style.css file, you'll want to add a new file with the correct name (you'll need to take a look at AdvancedSearch's code to find that out) and then add this new file to the existing ResourceModuleSkinStyles definition in skin.json. Thus the new CSS will be loaded only when needed (=when AdvancedSearch is installed) instead of on all pages.

Nikitrain added a comment.EditedApr 1 2019, 5:21 AM

Thanks! for the detailed explanation, working with it :)
in skin Refreshed it contains refreshed/refreshed/extensions so I need to make a new folder for extension in Bouquet which will contain style file for AdvancedSearch

Thanks! for the detailed explanation, working with it :)

Awesome!

in skin Refreshed it contains refreshed/refreshed/extensions so I need to make a new folder for extension in Bouquet which will contain style file for AdvancedSearch

You could make a generic skinStyles folder (for consistency with Vector as well as many other skins) in /skins/Bouquet/resources and put your new CSS file there (and maybe move the existing mediawiki.special.styles.css there as well, either in the same or different patch, for consistency).

For legacy reasons, some older skins or newer skins following old practises contain a folder like <skinname> (e.g. refreshed for Refreshed, nimbus for Nimbus, etc.) which contains a bunch of their CSS, JS and image assets. The reason for this is because a long, long time ago, skins consisted of one main file (Skinname.php) and the folder which contained CSS, JS and images; to "install" a skin back in the day, you'd just drop the folder and the PHP file into $IP/skins and the skin would automatically show up. That's why e.g. Nimbus has the nimbus folder which contains its main CSS stylesheet, a necessary JS file and some images; meanwhile its resources folder contains more organized, newer stylesheets (many of which are written in LESS instead of pure CSS).

Change 500556 had a related patch set uploaded (by Nikitrain; owner: Nikitrain):
[mediawiki/skins/Bouquet@master] Correct the overlapping of bullet points in AdvancedSearch menu

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

@ashley Bouquet doesn't contain any file named mediawiki.special.styles.css, although it does contain special.preferences.styles.css. Should I move special.preferences.styles.css to resources/skinStyles .

Change 500556 merged by jenkins-bot:
[mediawiki/skins/Bouquet@master] Correct the overlapping of bullet points in AdvancedSearch menu

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

ashley closed this task as Resolved.Apr 2 2019, 6:14 PM

@ashley Bouquet doesn't contain any file named mediawiki.special.styles.css, although it does contain special.preferences.styles.css. Should I move special.preferences.styles.css to resources/skinStyles .

Right, that was a typo on my part; please do that in a follow-up patch (and add me as a reviewer)!

I'm closing this ticket since your patch, which resolves this issue, is now merged.

Change 500804 had a related patch set uploaded (by Nikitrain; owner: Nikitrain):
[mediawiki/skins/Bouquet@master] Moved special.preferences.styles.css from resources/ to resorces/skinStyles

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

Volker_E removed a subscriber: Volker_E.Apr 3 2019, 5:04 AM

Change 500804 merged by jenkins-bot:
[mediawiki/skins/Bouquet@master] Move special.preferences.styles.css from resources to resources/skinStyles

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