As the days roll by, I have started writing more and more code for making changes to the front end. Week 4 started with changes to my previous work to bring in perfection.
First, the browse courses page. I had already implemented real time search in the page. However, the search options were taking up too much space. Alex suggested that it should be something like this-
Search: |==============| o Advanced
Making that wasn't too tough, and that saved up a lot of space in the page.
Unfortunately, I spent the rest of the week suffering from viral fever, with the antibiotics refusing to work (yes, I remember my Biology lessons). That is why I decided that I should work at the end of the week rather than putting up a blog post. Meanwhile, there were flash floods in Toronto (home to Alex and a chunk of the ATutor team) but thankfully, everyone was okay and that didn't affect our communication.
As soon as I got well, I started making changes to the help page of ATutor. I first came up with a very theme specific view, integrating the elements with the theme in the process, but Alex gave me some more freedom to try some other things in the page. Taking some inspiration from Mozilla, I decided to put anchors at the top, and integrate all help elements in the same page.
The next change that I made was to the search area of ATutor. Currently, it is a link on the top of the page which takes you to the Search page. Changing it, I put a text box at the top, where you could perform a basic search and an Advanced link adjacent to it, which took you to the search page. In the search page, I changed the filter area to look similar to the browse courses page. That meant there was a single search text box and an advanced link to show the options.
I also removed the search buttons, adding a tooltip telling you to press enter to search. Thankfully, the tooltip was accessible both to keyboard-only users and readable by screen readers.
The next part of the work involved changes to the a11yAccordeon. The first part involved adding color schemes and a color override to it. Currently, there are light and dark color schemes, and you can add an override passing three colors as arguments (color scheme takes priority).
Another addition to the a11yAccordeon was the search option. If you enable showSearch to true, a text box is added above the rows which searches inside the content.
In general, although the viral fever brought down my productivity and I was reduced to watching Firefly and Serenity, I believe I did enough to make that up in the weekends.
Links to code:
Browse Courses- https://github.com/sdaityari/ATutor/pull/4/files
Color Schemes (Accordion)- https://github.com/anvk/a11yAccordeon/pull/2/files
Search Option (Accordion)- https://github.com/anvk/a11yAccordeon/pull/6/files
0 responses:
Post a Comment