CodeConnect/SourceBrowser — pull request #62 by AmadeusW (2014-12-26 23:23:21+00:00)
Title: New layout for code browsing. Fixes #39, #52, #50

Introducing new layout for code browsing
![sourcebrowser](https://cloud.githubusercontent.com/assets/1673956/5559843/95916fa2-8d12-11e4-9dca-0195dd7e0d71.png)
Features:
* wide screen support
* search results have hover background the same as the treeview
* adjustable width of the treeview/search results pane
* introduces logo and favicon (couldn't test, see below)
![logo](https://cloud.githubusercontent.com/assets/1673956/5559856/1ea4bef2-8d13-11e4-98a0-fa813dc46743.png)

Changes from the current layout:
* On narrow screens, Browse and Upload buttons are gone - there is no use case for them. User can always go to the home page and upload/browse from there.
* adds search button
* The navbar is no longer using the metro layout. It's custom now, with most of the css recreated for uniform look
* Contents of the navbar are no longer centered

This is as much as I could do to my knowledge.

Known bugs: When window is resized after dragging to resize the search results pane, the layout is broken (until refresh or restoring original size)
Ideally, we would have code like this:

// Drag-to-resize fix
$(window).resize(function () {
var device_width = (window.innerWidth > 0) ? window.innerWidth : screen.width;
$('#main-content').width(device_width * 0.7);
$('#drag-handle').offset().left = device_width * 0.7;
$('#browser').offset().left = $('#drag-handle').offset().left + $('#browse').outerWidth();
$('#browser').width(device_width * 0.3 - $('#drag-handle').outerWidth());
});

where 0.7 is replaced by fraction of the screen that the user allocated to the content pane. Note, the code above doesn't work, too.

Also, on local machine I couldn't test assets (favicon.ico, Content/logo.png, Content/search.png) probably due to the IIS settings (I'm getting 404s, even though images in Content directory are set to Copy to output directory: Always. I've spend 2 days researching it and I couldn't figure it out)