Sonali's Progress on the Free Software Directory, weeks 1-2
As a part of my project to make the Free Software Directory mobile friendly, I can add extensions, modify the code, and format the pages the way I like. I have complete freedom to experiment on their development site as much as I want. It's wonderful to be able to work on something I really enjoy under the guidance of experienced mentors.
What is the Free Software Directory?
The Free Software Directory is a project of the Free Software Foundation that catalogs free software and allows people to download free software with verified free licenses. In 2011, it was re-launched as a wiki, using MediaWiki and Semantic MediaWiki to give users greater freedom to add, use or modify its textual data.
After setting up Trisquel (a fully free operating system and GNU/Linux distribution) on my machine and getting access to the development server, I was good to go by the second day of my internship. I had already done a lot of research, so I knew what I was going for.
MediaWiki offers a simple way to make any wiki mobile-optimized. The extension
MobileFrontend provides various site transformations that make your wiki mobile-friendly. It comes with useful features like a mobile menu and section collapsing,
and has a very simple reader-oriented interface. It can be installed very
easily. People with less experience don't need to spend time learning how to understand
complex code. The CSS of the mobile theme can also be edited to achieve desired
MediaWiki:Mobile.css (which is a Web page on your wiki, a
MediaWiki:Common.css). In short, MobileFrontend can give a very
effective mobile-optimized view without much hassle. (For more information, see
the project page.)
I installed MobileFrontend from the MediaWiki extension distributor and
extracted the files locally. Then I uploaded them to the extensions directory
in the root, i.e.
Next, I had to edit
LocalSettings.php. I used Vim for that. Vim is a very
efficient and simple text editor. I was going to use Vim for the first time, so
I spent some time before that going through Vimtutor.
After ensuring that the extension was installed properly, I couldn't wait to see how the site looked on mobile. I opened its mobile view on my desktop, and that was when I realized that while MobileFrontend is able to make most of the pages mobile optimized, it doesn't necessarily make it "mobile friendly." I checked the development site for various bugs and text which was not properly aligned.
Issues I faced:
- The HeaderTabs extension is incompatible with MobileFrontend. Only the
first tab is displayed, and the rest of the tabs (and their text)
disappear. The FSD uses HeaderTabs to display various entries. It was
necessary to either fix those or disable them for mobile view. The
solution: I was able to disable HeaderTabs using MobileDetect extension.
It introduces a function called
mobiledetect(), which returns true when a mobile device is detected, and false otherwise. I added a simple if statement in
LocalSettings.phpwhich excluded HeaderTabs from loading on mobile browsers.
- The mobile menu looks incomplete; there doesn't seem to be an easy way to add important links to the mobile menu.
- Noticed by Ian (one of my mentors): 2 column view doesn't merge into a
single column during mobile view, i.e. things that appear on the right
column in a wide desktop view should come in-line in the mobile view.
This is caused by the styling of the form:
float: left; float: right, etc. Solution: I replaced those styles with
right-float. Then I defined those classes in
MediaWiki:Common.cssand used a media query to bring the 2 columns in-line for screen size lesser than 800 px.
- Suggested by Andrew (my mentor), tables appear crammed in small screens. I am currently working on this issue. With the help of flexboxes and CSS, I am trying to make long horizontal tables appear vertical during mobile view.
Things I plan to work on in the coming week:
- Add the FSD logo to the mobile site
- Theme the mobile site so that it looks more like the FSF Directory theme
- Find a way to enable mobile view on desktops of smaller sizes (less than 800 px)
- And most importantly, spend time learning, researching, and building something useful.