Possible notebook design

[Carreau]

Cf https://github.com/ipython/ipython/issues/6856, Quantopian have made some custom design and we might want to get some things from what they are doing and they would be happy to help.

[ellisonbg]

Some repeated from other PR, but new comments as well...

• I like getting page specific content out of the site header.
• The notebook name on the L and menus on the R is OK, but would like to see what it looks like with them swapped. This is where the idea of UI prototypicality is important - users have never seen menus on the R and will find it confusing...the menus and toolbar buttons go together conceptually so to have them split L and R is a bit odd.
• Like the grey L+R borders on the notebook to make it look more like a document. Have wondered how that would look for a long and and I like it!
• Like the toolbar changes.

[ellisonbg]

Worth comparing with how other document focused sites are handling this. Here is Google Docs:

They have:

• Super minimal site header on L of top row.
• Combined the document name and menu row into one row.

[Carreau]

I've played around with our css (not the document structure at all) and i achieved below screenshot.

I use a watch make css equivalent + this in js console :+1:

setInterval( 
  function(){
    $('head>link:nth(4)').attr('href',"/static/style/style.min.css?v="+Date()); console.log(Date())}
  , 1000)

To have the css that live update in notebooks.

[damianavila]

I like it... you probably need more margin on the right of the document... Also, we have a lot of things concentrated on the left side: header, menu, toolbar... we need to probably arrange that in a more compensated way...

[wikiped]

Fully appreciating the reasons for grey background in ipython 3.0, I wounder what is the best way to restore the old look of previous version without grey background for those who need to reclaim limited screen space.

[ellisonbg]

The geometry of the page hasn't changed any. That area that is now grey used to be white, but was the same exact size.

On Thu, Mar 5, 2015 at 11:15 PM, wikiped notifications@github.com wrote:

Fully appreciating the reasons for grey background in ipython 3.0, I wounder what is the best way to restore the old look of previous version without grey background for those who need to reclaim limited screen space.

— Reply to this email directly or view it on GitHub https://github.com/jupyter/design/issues/6#issuecomment-77516917.

Brian E. Granger Cal Poly State University, San Luis Obispo @ellisonbg on Twitter and GitHub bgranger@calpoly.edu and ellisonbg@gmail.com

[wikiped]

Geometry (i.e. proportions) might not have changed but what I see on the screen has changed. Here is side-by-side of what I see on my screen. I see that new layout leaves less "useful" space both horizontally and vertically (both screenshots have the same size of 1600 x 370 pixels)

Perhaps I am missing something with regards to the new layout to make it take the same space as before.

[Carreau]

Brian comment was that you will actually not get more space, but anyway . In custom.css:

div#notebook {
    background: white;
}

div#notebook-container {
    box-shadow: none;
    // or browser specific -moz -webkit -o prefixes
}

[VelizarVESSELINOV]

If you can work on minimap (or a quick navigation preview of all the cells) for a long Jupyter page it will be great, there are issues already listed: jupyter/notebook#594

In general, if you can build a plugin system like Atom to add UX plugins like minimap, themes, icons, code code analysis, etc. will be even better.