The primary task going into week 10 (after my last blog post) was to complete the flipswitches (keeping in mind the accessibility of course) so that it could be integrated into the ATutor system preferences page.
The problem with this was that I was going to replace radio buttons with the flipswitches and most of the ones available online were make for checkboxes, which meant catching the events via JavaScript and preventing the default actions were just not going to be enough as that would involve major changes in the back end.
The very first version of the flipswitches turned out to be hideous (yes, that's the word my mentor used to describe it!) After many changes over the weeks (along with other tasks), and in my last blog, I described what were my challenges ahead. By that time, I had removed the labels and added custom JavaScript events.
One of the things was to make it look different in the off position. I couldn't divulge into the CSS much as it was quite a big (and complex) file and that would have taken a lot of my time. One thing that struck me one night was adding a grayscale filter to the switches in the off position. True that it would not work in old browsers (without CSS3), but that is something that I had to live with. Also, if the radio switches were disabled, I added a separate opacity filter to make them look disabled.
It still didn't look so good. I finally decided to add ON and OFF labels in place of the default ones. It finally looked good. If time remains, maybe I could add some more things to it.
With all those over, I was left with something I was really looking forward to- the recoding of the CSS using SASS. Although coding a 3000 line CSS file is not easy, I am glad I took up the task because I came to know SASS is a wonderful language! More on it next week.
0 responses:
Post a Comment