| Gopavasanth | |
| Sep 22 2018, 5:50 AM |
| F26149591: skin.png | |
| Sep 22 2018, 5:50 AM |
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.
This task is imported in Google-Code-in-2018 https://codein.withgoogle.com/dashboard/tasks/6010343974240256/
I will mentor this task in Google-Code-in-2018
@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 :-)
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
@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
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 [[https://www.mediawiki.org/wiki/Manual:$wgResourceModuleSkinStyles|$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.
@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.
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
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
@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
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
Change 500804 merged by jenkins-bot:
[mediawiki/skins/Bouquet@master] Move special.preferences.styles.css from resources to resources/skinStyles
Change 472515 merged by jenkins-bot:
[mediawiki/skins/Bouquet@master] search-types: Fix overlapping of bullets points in advanced search