Week 2 and Week 3 Work - Improved the search GUI and added Search Options

At the start of the project the MoinMoin search GUI was highly unorganized and lacked information. Here is how it looked like initially -

The initial MoinMoin Search

MoinMoin search now

Firstly I added metadata info to the search results. I added the "Item Size" and "Content Type" fields in the metadata. The "contenttype" field actually stored in the database is not so user friendly, it stores values like "text/x.moin.creole;charset=utf-8", which is not so easy to understand for a normal user. So I used a dictionary to display the corresponding user-friendly content-type in the results. We had also considered adding the "ACL Rights" but that was eventually deemed to be of not much use so we did not go ahead with that. Also added here is the color coding - Yellow for search suggestions, Green for metadata, Blue for link to the search result. Also earlier the search field in the navbar on the top used to be present in the search results page along with the AJAX search field that is present on the page. I removed it by adding

{% set search_form = None %}

in "MoinMoin/templates/search.html" which is basically the base template for the search page. So search form on the navbar is made when the search_form variable is set, here the search form does not get added to the page. Also the "Login" button used to remain in its place instead of shifting to extreme right when the search form was not present. We fixed that by adding "navbar-right" bootstrap class to the button. Then you might notice the re-positioning of the suggestion terms and query time. We thought that the search terms are more relevant to the search so they must be present near to the search bar. The query time on the other hand is more relevant to the results. Also since this is a AJAX search which searches as we type we thought that the user might get confused as to how to search (earlier there was no "Search" button) so we added a "Search" button.

Finally I added the "Search Options" section to make it easy for the user to search items. The options are present in an expandable div which opens up on clicking on the "Search Options" bar. There are three types of options - 

1. Revisions - If the user selects "Latest" option, then all the searches will be carried out on the latest revisions of the items. If they select "All", the search would be carried out on all revisions of all items. By default all searches are carried out on latest revisions.

2. Sort By Time - If the user selects "Older First" the results would contain items in an order such that the items modified earlier would be present closer to the top and those modified recently would be present closer to the bottom. By default the search results are not sorted at all. This is was carried out by using a facet in the whoosh api and using it in the "sorted_by" argument in the whoosh search query.

3. Content Types - The user might want to search for an item of a particular content type or a group of them, so they can select any type they like and the search result would contain items of that type only. By default the search contains items of all types. This was carried out by the using a filter for each content type the user selected.

Also one other thing we started this week was to put all the common css class definitions in a common css file instead of triplicating it in each of the three theme css files. So the common css for the search GUI was put into the MoinMoin/static/css/common.css from where each theme picks up the definitions.

The code review for the above changes is here.