Got the issue resolved and back to work after exams :)

Remember that I have met up with the following problem while I was doing integration?

UndefinedError at /badges/  'django.contrib.auth.models.AnonymousUser object' has no attribute 'is_read_only'.
You will also be able to see the error by going in to the site: http://askbotfedoratest-anuradhaw.rhcloud.com/questions/

This error did not appear when I have logged into the website, yet it appeared each time when I tried to access the website as an anonymous user. With the help of puiterwijk from the #fedora-admin IRC, I got to know that it was a problem regarding the templates which I have overridden. So, the problem was in the widgets/user_navigation.html template. I have moved the following part to the bottom of that template because according to the new design the user account information of a logged in user should be displayed to the right of the header.

<span class="user-info">

{{ macros.inbox_link(request.user) }}

{{ macros.moderation_items_link(request.user, moderation_items) }}

{%- if settings.KARMA_MODE != 'hidden' or settings.BADGES_MODE != 'hidden' -%}

({{ macros.user_long_score_and_badge_summary(user) }})

{%- endif -%}

</span>

<a href="{{ request.user.get_absolute_url() }}">{{ request.user.username|escape }}</a>

This has caused the error in the website because the above mentioned code was earlier inside the {%- if request.user.is_authenticated() -%} clause. So, now you can understand the problem right? According to what I have done without noticing that the above code has come out of that if condition, the application looks for user information even when the user has not logged into the website which produced the error. So, when overriding templates it needs to be extra careful not to do such kind of mistakes which harm the application's functionality.

And according to the feedback I have received from the people present at FUDCon, it has been found that the hamburger menu needs to be removed because the old users will not directly spot that the links of 'ALL', 'FOLLOWED' and 'UNANSWERED' will be there when hovered over the hamburger icon. Most of them have not been able to understand why there is an hamburger icon on the secondary header. Hence the following mockup shows my idea on how it is going to be. I have first decided to include those 3 links in the body area so that they can get easily spotted without having to take second step. Yet secondly I have thought that those 3 links are common to most of the pages and hence they should be in an area common to most the pages which is the secondary header. And to blend with the blue colored image used in the secondary header, I have used a light blue color for the links. So, the following mockups where I have modified the desktop and mobile view of the Badges page will reflect my idea on that.

And also according to the feedback it has also been suggested to use a footer similar to the one in getfedora.org. Hence the modified design of the footer is also depicted in the mockups below. And as always feedback on these are welcome.

Badges page desktop view

Badges page mobile view

So, it has been a very busy week for me due to my mid semester exams and it is time to resume the work. As the GSoC pen down date is also near I hope to work hard on integration get some tangible product soon.

Read More

Feedback from FUDCon and progress with integration

Here are the findings of my mentors Suchakra and Sarup from the feedback they have received from the people at FUDCon. And here in my blog post I will post what I think about the things they have suggested and my ideas about incorporating them with the styles. Readers of this post are welcome to make any suggestions and ideas on what I have included here in the post so I can further get an idea about what it going to be good and what is going to be bad.

http://askfedoratest-anuradhaw.rhcloud.com/main
-----------------------------------------------------------------

1. Footer is off, the gradient does not go well with the site. A long form footer like other getfedora.org sites can be good.

I also think that the footer in the getfedora.org site will go well with AskFedora. And I was wondering where to put the links for privacy policy, get feedback and the paragraph ("Ask Fedora is community maintained and Red Hat or Fedora Project is not responsible for content. Content on this site is licensed under a CC-BY-SA 3.0 license."). Having a footer like in getfedora.org will enable us to have them also in the footer.

2. Possibly Reduce border radius of cards, make card shadow a bit lighter

For the border in question cards, how about not having a border? I just removed the border from the browser and thought it then blends well with the background. Then the background color of the questions cards need not be changes as they need some contrast from the background.

3. Tags look very prominent - make them light. Hover color on yellow tag does not seem ok.

I tried with using a color like #9E9E9E which is more lighter. Will something like that go well with it? I also had this strange feeling that the hover color is not quite okay with the yellow tags. Will something brighter like #FFA500 work on it like what it has in StackOverFlow?  

4. Fedora logo is not the standard one. Colors are off. 

Well isn't the Fedora logo the same as what they have in getfedora.org?

Hamburger menu: Probably remove it, new users were not able to identify what it was and why it was needed there. The unanswered, All and followed links could be put somewhere else - check stackoverflow for example.

Okay then the Hamburger menu needs to be removed. I was thinking about having the links All, Followed and Unanswered in the body area just about the question cards so that it will be easier to be located. I could not think of any place else to put them in according to the current design. Do you have any place better?

http://askfedoratest-anuradhaw.rhcloud.com/qa
-----------------------------------------------------------------

1. Page looks too packed. Horizontal line spacing is very less. Proper margins and padding required

I will look into this matter while I am integrating the styles with the testing instance in Openshift. And experiment on increasing the horizontal line spacing as well as the margins and the padding.

2. Font sizes/typeface (bold, normal, light) are disproportionate in some places.

This can also be dealt while integrating. I will make the sizes, font-weights consistent throughout the page.

http://askfedoratest-anuradhaw.rhcloud.com/user 
-----------------------------------------------------------------

1. Tags != badges. They need separate designs - probably not pointed on one side as tags. Font size disproportioanate in profile overview section, also proper spacing

Yeah the badges design needs to be changed. I thought of removing the pointed section in the badges and just have them as simple rectangles with rounded edges.

2. Subscriptions and Moderations overflow from the bar on smaller screens (12 inch etc). On smaller screens these links vanish


I have made them vanish when it comes to smaller screen sizes because I thought they are not much required and also it will make the page unnecessarily cluttered. Do you still think these links of Subscriptions and Moderation are essential when it narrows down to small screen sizes?

http://askfedoratest-anuradhaw.rhcloud.com/login
-----------------------------------------------------------------

1. Some screen space is wasted for no reason. We could spread things out a bit

Actually not only on the login page, I thought that the screen space is wasted on both sides when it comes to other pages as well. So, in the integration work I have worked on I have spread things out to both sides so that much of the screen space is utilized. A screen shot of the integration I have done is also shown below. 
 .
2. Icons for services have to be uniform throughout the website.


I will be looking into this matter when doing the integration so that it would have uniform icons for services throughout the web site.

http://askfedoratest-anuradhaw.rhcloud.com/badges 
-----------------------------------------------------------------

1. Line spacing, badges design change. 

The design of the badges will be changed so that they will not having the pointed part to the left and the line spacing will also be increased.

http://askfedoratest-anuradhaw.rhcloud.com/post_question 
-----------------------------------------------------------------

1. Spacing, margin between elements


Spacing between the elements like the text boxes will be increased so that it will have a better and uncluttered look. 

2. What is box below title?


I thought that having the text area just under the title text box will be quite obvious for the user to think that it is the place where they need to type in the details of the question. I got that idea from the StackOverFlow website but if it is quite confusing, we can add some wording on the top of the box saying "Type in the details" or something like that.

3. Text overflows from sidebar. With proper margin/padding and widths this may go away.

Yeah in the Post Question page the wording in the sidebar overflows in the right aside. Thanks for pointing that out I will look into that matter.

Progress with the integration

I have done some integration work with the Main and Badges pages of AskFedora and here are some screen shots of the work I have already done.

The Main Page

The Badges Page

The pages above are currently quite a mess because I have not done with the integration completely.

Yet I have met up with the following problem in the browsers in which I have not logged into the website.

UndefinedError at /badges/  'django.contrib.auth.models.AnonymousUser object' has no attribute 'is_read_only'.
You will also be able to see the error by going in to the site: http://askbotfedoratest-anuradhaw.rhcloud.com/questions/

I do not get this error in the browser in which I have logged in to the site. I haven't changed anything regard to implementation but have only changed the styles and templates. So, I wonder why this error is coming up. I hope to find out the error during this week and proceed with some more integration work with the website :)

Read More

GSoC weekly update: How to override templates and styles in AskBot

Okay this has been giving me a lot of trouble from the beginning and I am really glad that I could sort this out :) Thank you very much Ahmed Fathy Hussein (IRC nick: TheMonster) who helped me to resolve this. And as I could also not find any clear documentation regarding overriding templates and styles in AskBot I will try to explain this here.

So, first of all the testing repository for AskFedora can be cloned from here: https://github.com/fedoradesign/askbot-test to set up our own staging instance in Openshift. I have explained how to set up an Openshift staging instance in one of my earlier posts. AskBot comes as a dependency with this staging instance and it get installed under app-root/runtime/dependencies/python/virtenv/lib/python2.7/site-packages in Openshift. 

The problem I had was how to override the default styles and templates given by AskBot. All the html templates of AskBot are placed inside the 'templates' directory and the CSS, JavaScript, image files etc. are placed inside the 'media' directory. What I tried earlier was trying to change the original AskBot files by ssh into my Openshift repository. But it was very difficult as each time when I needed to do a change I had to ssh into my instance and get the files changed by opening them with the nano editor from the terminal. So, never try that there got to be another solution ;)

So, the solution is this. What we need to do is create a new skin folder inside the repository which is uploaded to Openshift and edit the settings.py file in our repository to type in the following line of code to point to the new skins directory.

ASKBOT_EXTRA_SKINS_DIR = os.path.join(PROJECT_ROOT, '../static') #path to your private skin collection

The directory structure of the new skin folder (Mine is named 'askfedoratheme') should be like this:

-askfedoratheme
        -media
             -style
                  -style.css
             -js
             -images
        -templates
             -main_page.html

Only the templates and files that needs be overriden should be placed inside the new skin folder and the rest of the files will be taken from the default skins and templates provided by AskBot. Of cource the AskBot directory structure should be maintained when creating our own skin. And remember that the new skin folder should be placed inside wsgi/static folder. I have earlier placed it inside askbot_devel folder which did not work. And after that I pushed the repository to Openshift but guess what it did not work as expected :P It was giving a server error. How do we know what the error is? The best way to find a runtime error in Openshift is ssh into the instance and go to the project root of the respective repo and type in 

python manage.py runserver

After running that command the following popped up:

Add ASKBOT_EXTRA_SKINS_DIR to STATICFILES_DIR entry in your settings.py file.
NOTE: it might be necessary to move the line with ASKBOT_EXTRA_SKINS_DIR just above STATICFILES_DIR.

Then as asked I added the ASKBOT_EXTRA_SKINS_DIR under the STATICFILES_DIRS in the following manner:

ASKBOT_EXTRA_SKINS_DIR = os.path.join(PROJECT_ROOT, 'askfedoratheme')
STATICFILES_DIRS = ( 
    ('default/media', os.path.join(ASKBOT_ROOT, 'media')),
    ASKBOT_EXTRA_SKINS_DIR,
)

And after making the changes again push the repo into Openshift. And it will still not work as expected. From the website if you have not created a user account yet, you need to create a user account from the website and that will be your admin account. When you log in from the admin account there will be a link called settings displayed on the top from where you could change the default settings of the website. It is the link to the admin panel. And from there under under 'Select skin' option you will be able to see your new skins folder which in my case is 'askfedoratheme'. And select that directory from the list.

The first time I tried doing that it gave me an error saying:

Site matching query does not exist.

It can be solved by following what is in the link here: http://stackoverflow.com/questions/16068518/django-site-matching-query-does-not-exist

And after doing so again select the new skins directory under Select skin option in the admin panel and then all the styles and templates that you have included in your new skins folder will override the default templates and styles given by AskBot. :) Hope this will solve any kind of issues people ad regarding how to do override the default templates and styles in AskBot.

References

• http://askbot.org/doc/customizing-skin-in-askbot.html#what-are-skins-made-of
• https://github.com/ASKBOT/askbot-devel 

 

 

Read More

Yay passed the mid evaluations!

Yeah I have passed the mid evaluations thanks to the guidance provided by my mentors all along the way! :) The path up to know has not been a bed of roses as I started not knowing anything about responsive web design and now I think I know the basics. So, with that happiness of success in my mind, here is the update for the last week.

Basically I have coded the User page, Badges page and Login page of AskFedora and I am half way through coding the Ask Question page. The links for the above pages are given below respectively:

• http://askfedoratest-anuradhaw.rhcloud.com/user
• http://askfedoratest-anuradhaw.rhcloud.com/login
• http://askfedoratest-anuradhaw.rhcloud.com/badges
• http://askfedoratest-anuradhaw.rhcloud.com/post_question

Some of the interesting features of the above pages are that the User page has two accordians on the right aside where the users can click to see the top tags and top badges of a person. This is will also reduce the size of the User page that the users need to scroll down to see the tags and badges and it will only show you the top tags and badges rather than all the tags and badges which will result in an uncluttered interface. And also the number of up votes and down votes section is also taken to the part which contain user profile information reducing the page height. And also I have tried to make an AskUbuntu style Badges page and an Ask question page by incorporating the arrangement of components in the corresponding pages of AskUbuntu.

I also have fixed some of the drawbacks that the mentors have pointed out in our last skype call, which are:

• Making the up votes and down votes arrows smaller along with the text showing the number of votes.
• Making the other buttons other than the ASK button more button like.
• Making the hr used in Q/A page lesser in color.
• Increasing the height of the footer.
• Making the text areas for posting and previewing an answer, consistent with the search bar.

And also I feel that the User page needs some more polishing to be done and I will be working on it in the next few days and also on the Ask Question page. Basically the next big leap that I need to jump is how to integrate the styles into the testing instance of AskFedora which is set up in Openshift. I have done some research on that and tried many things which people have spoken on forums, blogs etc. but nothing seemed to work correctly for askbot. My mentors are willing to help me on that and let's see how I am going to resolve this within the next couple of weeks :)

Read More