Monday, June 15, 2015

Progress with the coding of Question and Answer Page of AskFedora

10:11 AM Posted by Anuradha Welivita 2 comments
In the past week I started working on the Question and Answer page of AskFedora according to my mockups. I followed a mobile first approach in coding the web page and you can view it here at my Openshift instance - http://askfedoratest-anuradhaw.rhcloud.com/

I further have got to do the following tasks regarding the Answer page:

1. Coding the desktop hamburger menu.
2. I have discovered a bug in the current interface I have created for the Answer page. That is in the mobile view after I click on view comments and then again on hide comments and expand the screen of the browser then the comments that should appear in the desktop view do not appear. I have used the following code of javascript to view/hide comments:

$('#comment-text-1').click(function() {
                   jQuery(this).text('view comments');
                if($('#collapsible-comment-1').is(':visible')){
                      jQuery(this).text('view comments');
                }else{
                      jQuery(this).text('hide comments');
                }
                $('#collapsible-comment-1').slideToggle("fast");
                return false;
});

3. Code the elements that appear when I click the "add comment" option.
4. Put two up and down arrow icons to click for up voting and down voting of questions.

And also I faced some cross browser compatibility issues such as the Sass mixin I used for vertical alignment of content seems not to work correctly in Firefox and Internet Explorer browsers. The Sass mixin I used is:

@include vertical-align()

which is:

-webkit-tansform: translate Y(-50%);
-ms-transform: translate Y(-50%);
transform: translate Y(-50%);

And also there are issues in responsiveness when it comes to web browsers such as Internet Explorer. I am going to look into these matters and discuss with the mentors on how to deal with such issues.

And for the ASK button I used a lesser green color which is: #42a500, and for its border I used a darker green color which is: #128c1e, because the color I used in my mockups did not went well with Fedora blue. 

And further your views on this are welcome as this is a UX based project and all the design work I do depends on user feedback.

I have also developed a sliding menu in the mobile view of the web page which is built using Sidr which is a jQuery plugin to create side menus and making it responsive. 



2 comments:

  1. Just a small unrelated suggestion: instead of the traditional lorem ipsum text, perhaps you could try using the text from a real question from the current Ask Fedora website, to make everything more realistic.

    ReplyDelete
    Replies
    1. Thanks for the suggestion and yeah I will replace the lorem ipsum with text from a real question in my next update and state here.

      Delete

Labels