GSoC Pencils Down

Google Summer of Code 2015 has come to an end. And yes I am satisfactory to a certain level that I have produced something tangible and all of you are able to access it which is deployed in Openshift. And here is the link: http://askbotfedoratest-anuradhaw.rhcloud.com. The github repository which contains the code is here: https://github.com/anuradha1992/askbotfedoratest. We are planning to merge the code with the repo at https://github.com/fedoradesign/askbot-test so that others can also use it and build upon it.

GSoC Updates for the past week

For the past week I have been testing the website whether it functions properly and identified some bugs and managed to fix them. One of the major issues I had was with the sidr menu which was supposed to pop up in the mobile view. It was giving the following error and was not appearing.

Uncaught TypeError: $(...).sidr is not a function

I identified that the problem was that I was using a newer jquery version which is 1.11.2 and the existing Askbot using jquery version 1.7.2. I found out that sidr also works with version 1.7.2 of jquery and used it instead. And below are the screenshots of the sidr menu which is working now.

Sidr menu when accessing the website as an anonymous user

Sidr menu when accessing the website as a logged in user

I have also met up with cross browser compatibility issues and small issues with the styling and I have handled them one by one. One of the significant issues with regard to cross browser compatibility was that the CSS property box-sizing: border box was not working with versions of Firefox. There is a simple trick to make it work which is including the property -moz-boz-sizing: padding-box. Other wise the width of the elements will be calculated excluding the padding which is applied on those elements.

And my mentor Suchakra also reported some bugs regarding the styles which you will be able to view here: https://github.com/anuradha1992/askbotfedoratest/issues. These issues are also solved during the past few days and you will now be able to see a cross browser compatible, stable version of the web site by going to the project link mentioned at the top of this blog post. And you are also free to report any bugs and issues related to the functionality of the website so that I will attend to those issues.

Progress with the entire project AskFedora UX/UI and functionality overhaul

The github repo which contains the code can be accessed here https://github.com/anuradha1992/askbotfedoratest and we are planning to merge the code with https://github.com/fedoradesign/askbot-test and make it releasable. I have tested the website for responsiveness and cross browser compatibility through https://www.browserstack.com and it has worked okay. However I have discovered some bugs with the already existing Askbot instance by which the current AskFedora website is powered. The following are those bugs which my mentors and I agreed to look into after the GSoC pencils down by contacting the original designers of Askbot. 

• When going to post an answer anonymously in the Q/A page, the option [hide preview] is not working hence the preview does not disappear when [hide preview] link is clicked.
• When accessed the Q/A page as a logged in user and entered some text in the wmd-container of the Add answer section, the Add answer link which is not supposed to be there appear when the Q/A page is loaded again. An image of the above mentioned bug is denoted below.

• And one of the critical bugs is that in the User profile page under Followed questions section, the pagination which is there to navigate back and forth in the list of followed questions does not work.
• The question search Javascript functionality is not working in all the static pages excluding Tags, People and Badges pages and also in pages Sign in, Sign up, User network, Edit profile and Manage user login.
• Also there is an inconsistency in the between the Tags and People pages because of its search functionality. In the Tags page, the search dynamically updates the pages after each key stroke that we type in the search bar but in the People page we need to type in the name of the person whom we want to search and enter it to view the results. 

These are the drawbacks which are left to be solved and they are with regard to the Askbot functionality. Before making a stable release it is better to attend to these issues beforehand.

And finally the following are screenshots of the mobile and desktop views of the main page of AskFedora as it is at the pencils down of GSoC.

Main page mobile view

Main page desktop view

Words about GSoC and The Fedora Project

Although it is Google SUMMER of code, being in a tropical country it's always like summer in Sri Lanka. Hence we do not get any special holidays for summer and I have gone through this competition while attending the university and doing various university assignments as well. With the limited time I have had I am happy that I was successful in managing the time to get this project up to this state and feel contended about it. The journey up to now has not been easy because I had to learn a bunch of new technologies and have met up with a number of issues during coding and integration. With the help of my mentors Sarup Banskota and Suchakra Suchakra I was able to manage these issues and I want to mention Ahmed Fathy Hussein (IRC nick: TheMonster) and Patrick Uiterwijk (IRC nick: Puiterwijk) as well for helping me out in tackling some of such issues. And also not to forget Kushal Das (IRC nick: kushal) and Kevin Fenzi (IRC nick: nirik) for providing guidance for the GSoC students over the past few months. Thank you everyone for your support!

Even though GSoC has come to a pencils down, my contributions to The Fedora Project will not halt. And here onwards I will start contributing to The Fedora Project as a member of the Fedora design team and I look forward to the day that AskFedora gets released with its brand new look. :)

Read More

GSoC Updates

During past week I have proceeded more with integration and I have worked on the Ask page, Edit question page, Tags, People, Badges and User profile and related pages. As said in the last blog post I needed to work more on the mobile view of the footer and after many experiments I thought the following look of the footer will serve right in the mobile view. However any criticism about the styling of the footer is welcome as always :)

Footer mobile view

And also as there are many links in the user profile page for overview, inbox, network, karma, followed questions, activity, votes, subscriptions and moderation when it narrows down to the mobile view the links overlapped on each other. Hence I had to figure out a way to prevent this and structure the links in a possible nice manner so that they will not overlap. I changes the arrangement of those links at 2 breakpoints one at 600px and the other at 1200px so that they have 3 different arrangements. The following screenshots shoes the 3 arrangements.

Mobile view

Intermediate view

Desktop view

I also styled the pagination so that the page numbers are enclosed in a circle shaped div as depicted in the image below.

Pagination

And earlier when my mockups were reviewed by the people who were present at FUDCon, they have mentioned that making the badges just like the tags with a pointed front does not make the badges distinguishable from the tags. Hence when integrating I removed that pointed part from the styling of the badges and now the badges look like the following.

Badges page mobile view

Badges page desktop view

Furthermore I have worked more on the Sign in page, Edit question page, Tags, People pages and all the static pages including Help, Faq etc. I have also worked on the User profile page and related sub pages including the Subscription, Moderation, karma and followed questions. Some of the integrations with regard to those pages are included below.

Sign in page mobile view

Sign in page desktop view

Edit question page mobile view

Edit question page desktop view

Identified bugs

During integration I have come up with the following bugs which needs to be fixed.

• The sidr side menu which is supposed to appear when the hamburger icon is clicked does not appear after Askbot's javascript files are imported via the collectstatic command.
• In the main page as soon as the user adds new interesting tags and ignored tags, the tags appear just fine with the delete option just after each tag. Yet when the page is loaded again the delete section of the already added interesting and ignored tags does not appear the way they should. This problem is shown through the screen shots included below.

This is what appears when tags are newly added through the text boxes.

 Yet when the page is loaded again this is what they look like.

•  In some of the pages the main header which consists of the search bar overlaps with the header above it. This also happens after typing in the collectstatic command where more stylesheets and javascripts files are fetched with that command which overrides the existing files.
• In some of the pages the javascript search functionality with regard to the search bar seems not to be working.

Moreover my mentor Suchakra will be reporting bugs in the github tracker about the integration I have done so far so that it will also help me out in tracking the bugs. I hope to get these bugs resolved as soon as possible and continue with the integration.

Read More

Progress with integration

Okay this week I have done some integration with the following pages. I have included some screen shots of the pages also.

Main page desktop view

Footer

 Q/A Page mobile view

Q/A Page desktop view

Sign in page

Sign up page

I have also done bit of integration in the User page but need to further work on the right aside of the user menu to include the sliding accordion. And as you can see in the above screenshots I have modified the footer of the page so that it is similar to the footer used in the getfedora.org website.

Problems I have encountered while integration

1) I have included the sliding menu which appears in the desktop view in my testing instance setup at Openshift. The sliding menu make use of sidr jquery library to get the accelerating effect of the sliding menu and it works correctly when I run the testing instance without getting the default javascript from the orginal Askbot to my application by typing in the collectstatic command. But after I type in the collectstatic command the sliding menu does not appear when I click on the hamburger icon on the header.

2) Some of the javascript seems not be working in few of the pages. I have seen the errors that have risen up through the console and it may be due to something I have done when overriding the templates. 

I am going to look into those troubles within the next work and proceed with the integration. By considering the options given by my mentor Suchakra I am going to implement the links of ALL, UNANSWERED and FOLLOWED links in the header containing the no. of questions. And I am going to implement them as options which would clearly indicate which one is currently selected. I am going to experiment with that also during the next week.

Read More