Week 4 work - Index GUI and Pygments CSS classes

Currently the Index section in the Basic theme is completely broken. The options are in the form of an unordered list, making it hard for even to believe at first look that they were actually links to the actions and not just plain list items. The list of items is also quite confusing and does not have checkboxes, so the user can select a particular item to perform a specific action on it like "Download", "Delete", "Destroy". Also the section that should come up as a popup when a user tries make a new item is already present on the page and is completely jumbled up. The buttons are really in a mess. Here is what it looks like :

The Index UI top with the list of actions

Index UI bottom with all the messy buttons

The Index UI with my patch (Content Section is collapsed)

The Content Section expanded 

I converted the actions section from a list to a bootstrap navbar to make it easy for the user to understand the actions being carried out. Also now we have checkboxes for each selected item and as such the user can know which item they selected. I tried to organize all the options as cleanly as possible. Also now the New Item popup acts as a popup when "New Item" option is clicked, instead of constantly being present on the page.

The New Item popup

The Basic theme also was earlier not showing smileys even though they are defined in the markup, due to missing smiley images. I added the smileys to the basic theme static files so now the basic theme shows smileys too :D

Also to add was the css definitions for the pygments classes used to highlight various items like python code, etc in both the "Show Item" and "Syntax Highlighter" section. The wiki was not being able to highlight items due to lack of css class definitions even though the html for both sections used the css classes. I had added the definitions manually to the code, but Roger pointed out very well that it should be done at the time of install by the python code itself.

The code review for the above works can be found here :

1. Index GUI

2. Syntax Highlighting