[WIP] bootstrapify #3393

minrk · 2013-06-02T20:04:21Z

use bootstrap for menubar, dialogs and basic layout

removes our custom shipped jquery-ui checkpoint, as we no longer need a non-standard version,
and can fallback on the stable release in components.

Requires jupyter/ipython-components#3

This does not reach into the notebook cell layout at all.

Still some wonkiness to work out, but it's previewable now, I think.

things I know need fixing:

minrk · 2013-06-02T20:09:13Z

notebook list:

notebook menu:

Carreau · 2013-06-02T20:13:21Z

notebook menu: [capture]

Move Up, Move Up ?

Some other commet as I test.

BreadCrumb all caps in dashboard, annoying IMHO.
classical IPython Logo seem not centered
404s : WARNING:tornado.access:404 GET /static/base/js/dialog.js (127.0.0.1) 0.96ms
- imply kernel restart broken ...
- and cannot rename
my js extensions are broken... :-(
a few pixels of codemirror cuts at the bottom of each cell (basically just end of edittor just after the baseline)
Pager a few pixels too low, and don't take all the width of the screen... feel weird.
celltype selector blank when "code" cell selected.

Carreau · 2013-06-02T20:33:24Z

Looks nice, somme comment added on previous post not to spam the people watching the thread.
I would also personally change the font of the save widget.
I'll test that.

ellisonbg · 2013-06-02T21:42:15Z

I will try to look at this this week...still travelling...

Carreau · 2013-06-02T22:12:03Z

Only annoying point is missing base/js/dialog.js. Will go to sleep now, and hope it wil have appeared tomorrow morning when I update IPython in my lab to do data analysis :-)

Carreau · 2013-06-02T22:13:40Z

IPython/frontend/html/notebook/static/notebook/js/maintoolbar.js

@@ -71,7 +71,7 @@ var IPython = (function (IPython) {
                {
                    id : 'move_down_b',
                    label : 'Move Cell Down',
-                    icon : 'ui-icon-arrowthick-1-s',
+                    icon : 'icon-arrow-up',


minrk · 2013-06-02T22:46:45Z

I would also personally change the font of the save widget.

yup - there are still quite a few things styled by jquery-ui that shouldn't be. I haven't gotten to the save or notification widgets yet

minrk · 2013-06-02T22:54:32Z

classical IPython Logo seem not centered

what does this mean?

my js extensions are broken... :-(

broken is unhelpful, what changed?

a few pixels of codemirror cuts at the bottom of each cell (basically just end of edittor just after the baseline)

what does this mean? I haven't changed any vertical styling inside the cells

celltype selector blank when "code" cell selected.

I've noticed this - it's weird because I don't think I have touched any of the relevant code.

minrk · 2013-06-03T03:12:54Z

Should be a couple of weirdnesses addressed

Carreau · 2013-06-03T06:55:19Z

Haven't repull (don't want to restart sever yet) so here are more descriptive answers:

classical IPython Logo seem not centered

But that'as actully the all page that is scrolled a few pixels.

my js extensions are broken... :-(

No worry, they just don't find the jQuery icon so buttons are only 4px by 4px

what does this mean? I haven't changed any vertical styling inside the cells

Due to codemirror-scroll -38 pixel, I may have missed it before because of stale cache, so not this PR.

celltype selector blank when "code" cell selected.
I've noticed this - it's weird because I don't think I have touched any of the relevant code.

I can see the word "Code" while loading, could it be that when cell change to code it fires an event that have a typo and set the drop down menu to an non-exiting value ?

Carreau · 2013-06-03T07:48:36Z

Yep, codecell.js is missing a this.cell_type = 'code', I guess without bootstrap select ' undefined ' is the first value, wherease with bootstrap it defaults to empty.

Carreau · 2013-06-03T11:56:52Z

~~Cannot scroll with the mouse if the pointer is outside of the container, in on left or right.~~

[Edit] : fixed

Carreau · 2013-06-03T12:23:52Z

In Prompt eaten if window not wide enough.

[Edit] Fixed

Carreau · 2013-06-03T14:49:58Z

Cannot scroll with the mouse if the pointer is outside of the container, in on left or right.

And there is a beautiful toolbar at the edge of the container when using FF+Windows at least.

Carreau · 2013-06-03T15:04:35Z

Toolbar icon not centered vertically in FF.

Carreau · 2013-06-03T20:57:36Z

Don't know if you had really a lot of time to actually use it, but I did my data analysis with it today, and the UI felt more fluid. No scientific measurement of the feeling though.

minrk · 2013-06-03T21:06:31Z

there's still a lot to fiddle with before it's acceptable, but for the most part I find it cleaner. I don't intend to redo the Cell layout in this PR, but I expect it will be really nice to layout individual cells with fluid containers.

Carreau · 2013-06-04T12:08:30Z

there's still a lot to fiddle with before it's acceptable, but for the most part I find it cleaner.

Hope you don't mind, I update the PR message at the beginning instead of just posting new messages.

I don't intend to redo the Cell layout in this PR, but I expect it will be really nice to layout individual cells with fluid containers.

I hope nbconvert could be merge before that so that we keep the html in sync.

Carreau · 2013-06-04T12:58:26Z

Hum, can't delete notebook anymore from dashboard, but don't know if it is this branch.
Can't restart now so leaving a message here.

Carreau · 2013-06-05T12:20:14Z

Hum, can't delete notebook anymore from dashboard, but don't know if it is this branch.
Can't restart now so leaving a message here.

Was able to delete on master.

Also, this need rebase.

ellisonbg · 2013-06-16T00:44:55Z

After a bit of playing I came up with this. A few points:

I have removed some of the padding on the menu items. I am not completely happy with this, but this shows that we can do this pretty easily. If we start modifying things like this, we should do so in a non-bootstrap-global manner.
I simply removed the border and corner rounding at the top of the menu area.
In these branches, the height of the heading area is compressed. Also the auto layout calculations are messed up as the pager is having problems. I can't wait to get rid of that logic...

ellisonbg · 2013-06-16T01:18:13Z

My vertical compression of the menu causes problems with the current heigh of the notification area. It would have to be compressed as well if we go this route.

ellisonbg · 2013-06-16T01:18:46Z

I also think that the border at the bottom of the toolbar should be the mirror image of the one at the top of the menubar.

minrk · 2013-06-16T02:43:39Z

I like what you have there - I think I can finish it up with your other comments, if you want to PR against my branch, or just push your own branch and I can cherry pick.

ellisonbg · 2013-06-16T02:44:25Z

I just did all my changes in browser with the dev tools...

On Sat, Jun 15, 2013 at 7:43 PM, Min RK notifications@github.com wrote:

I like what you have there - I think I can finish it up with your other
comments, if you want to PR against my branch, or just push your own branch
and I can cherry pick.

—
Reply to this email directly or view it on GitHubhttps://github.com//pull/3393#issuecomment-19506959
.

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

ellisonbg · 2013-06-16T03:00:39Z

I will be back online in a bit - if you want I can work on this at that
point - just let me know if you are going to go ahead and do it...

On Sat, Jun 15, 2013 at 7:44 PM, Brian Granger ellisonbg@gmail.com wrote:

I just did all my changes in browser with the dev tools...

On Sat, Jun 15, 2013 at 7:43 PM, Min RK notifications@github.com wrote:

I like what you have there - I think I can finish it up with your other
comments, if you want to PR against my branch, or just push your own branch
and I can cherry pick.

—
Reply to this email directly or view it on GitHubhttps://github.com//pull/3393#issuecomment-19506959
.

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

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

minrk · 2013-06-16T16:40:15Z

Looks easy enough, I'll give it a go.

let it hang from the header match inner shadow on menubar container for symmetry

minrk · 2013-06-16T16:49:16Z

See how that feels now.

ellisonbg · 2013-06-16T17:36:15Z

Great - I am at graduation today and it is Father's Day so I probably won't look at it until later

Sent from my iPhone

On Jun 16, 2013, at 9:49 AM, Min RK notifications@github.com wrote:

See how that feels now.

—
Reply to this email directly or view it on GitHub.

minrk · 2013-06-16T20:13:35Z

sounds good. And happy Father's Day!

ellisonbg · 2013-06-17T04:40:50Z

I like this design a lot. It feels very balanced and looks good with either the header or toolbar hidden. I was going to play with a few fine tweaks, but am having trouble finding myself around the css. One question. Right below the border between the header area and the menubar, there is a subtle gradient. Where is that gradient defined? What element is it attached to? I wanted to try and add that gradient, inverted to the border below the toolbar.

ellisonbg · 2013-06-17T05:48:47Z

Hmm, I found the css, but to my surprise you already implemented that gradient at the bottom border. On my screen the top gradient is easy to see, the bottom almost impossible even though they have the same parameters. We can tweak this later.

Carreau · 2013-06-17T08:09:25Z

Hum, when one hide both the toolbar and header, menubar look weird. and I like to hide the header and menubar (keep only menubar with my custom button) and it is ugly and uncentered vertically.

In dashboard notebook names are not center vertically.

Why is the 'toolbar' in the 'menubar-container' ?

From a personal POV, I prefer when the menubar was taking the all width of notebook.

minrk · 2013-06-17T12:56:18Z

it may make sense for the menubar to be full-width when the the header is hidden.

And yes, the menubar and toolbar are both in the menubar-container on purpose, I just didn't want to call it menubar-and-toolbar-container. If you have a better name for the area containing the menubar and it's relatives (header is the obvious choice, but taken).

ellisonbg · 2013-06-17T19:18:27Z

I know there are still things to do on this branch, but I think we should merge it now, get flatten in and then fine tune the UI. Are people OK with me merging this?

Carreau · 2013-06-17T19:55:17Z

You know I have been ok for at leak a week.
Did used it for the full day (again) without problem.

Le lundi 17 juin 2013, Brian E. Granger a écrit :

I know there are still things to do on this branch, but I think we should
merge it now, get flatten in and then fine tune the UI. Are people OK with
me merging this?

—
Reply to this email directly or view it on GitHubhttps://github.com//pull/3393#issuecomment-19567911
.

ellisonbg · 2013-06-17T19:57:40Z

OK I am going to merge it. Thanks Min!

[WIP] bootstrapify

Faraazali · 2013-06-25T14:06:52Z

Hello I am new to iPython, clearly this is a developers' forum, but this was the best google-hit I got for the error message I was getting. I installed iPython on my mac OSX 10.7.4 using the following guide:

http://gureckislab.org/courses/spring12/modeling/ipythonhints.html

I installed all the components and it all complete without errors.

When I try sudo ipython notebook --pylab inline, I get the following output:

Serving notebooks from local directory: /Library/Python/2.7
2013-06-25 09:49:06.837 [NotebookApp] The IPython Notebook is running at: http://127.0.0.1:8888/
2013-06-25 09:49:06.837 [NotebookApp] Use Control-C to stop this server and shut down all kernels.
2013-06-25 09:49:07.715 [tornado.access] WARNING | 404 GET /static/components/jquery-ui/themes/smoothness/jquery-ui.min.css (127.0.0.1) 0.60ms
WARNING:tornado.access:404 GET /static/components/jquery-ui/themes/smoothness/jquery-ui.min.css ...
2013-06-25 09:49:07.759 [tornado.access] WARNING | 404 GET /static/components/jquery/jquery.min.js ...
WARNING:tornado.access:404 GET /static/components/jquery/jquery.min.js (127.0.0.1) 0.58ms
2013-06-25 09:49:07.764 [tornado.access] WARNING | 404 GET /static/components/requirejs/require.js ...
WARNING:tornado.access:404 GET /static/components/requirejs/require.js ...
[tornado.access] WARNING | 404 GET /static/components/jquery-ui/ui/minified/jquery-ui.min.js ...
WARNING:tornado.access:404 GET /static/components/jquery-ui/ui/minified/jquery-ui.min.js ...
[tornado.access] WARNING | 404 GET /static/components/bootstrap/bootstrap/js/bootstrap.min.js
WARNING:tornado.access:404 GET /static/components/bootstrap/bootstrap/js/bootstrap.min.js

When I check the root there was no static folder, so I downloaded the jQuery theme, created the static and components folders, and placed the theme in the appropriate folders, tried sudo ipython notebook --pylab inline, still no cigar, I get the exact same error. I was gonna download bootstrap do deal with the other error further down but it seems that create this folders is not fixing the problem.

What shall I do now?

minrk · 2013-06-25T21:13:40Z

Try git submodule init && git submodule update

Faraazali · 2013-06-26T03:14:01Z

Thanks minrk, actually I used the anaconda installer :)

Carreau · 2013-06-26T06:11:46Z

actually, 1) you shouldn't sudo or the server and kernel will run as root, it is true with any program, unless you really know what you are doing.
2) You should contact continuum for anaconda they have better experience with it than we do, there are probably custom patches to IPython we are not aware of...
3) /Library/Python/2.7 is strange, you should be in a anaconda directory somewhere no ?

Bakuriu · 2013-08-13T19:16:54Z

I have the same problem as Faraazali. Installed IPython1.0 downloading the zip from githup, then python setup.py build + install.
Everything works fine except the notebook shows a completely white page with those warnings. Trying iptest doesn't show any failure. I have no idea what minrk mean with "git submodule init && git submodule update" since I get only a "fatal: Not a git repository" error(as I expected).

Is this issue known? How can I solve it?

minrk · 2013-08-13T19:28:32Z

You cannot install IPython from a GitHub zipfile, it doesn't include submodules. By far the easiest way to get IPython dev is:

pip install -e git+https://github.com/ipython/ipython#egg=ipython

[WIP] bootstrapify

Carreau reviewed Jun 2, 2013
View reviewed changes

minrk added 10 commits June 9, 2013 14:48

start using bootstrap

2f8f8b4

bootstrap base, auth

6adb9f5

overriding baseLineHeight is not a good idea

e14ee7b

jquery-ui.custom has been renamed

b88c841

bootstrap menubar

69b99ab

bootstrap toolbar

1b9fe34

shrink login button

7bc0eff

bootstrap tree

cd4af66

remove unused jquery-ui checkpoint

de5cd00

don't use $(document).append (it's wrong and broken)

4761f8e

minrk added 2 commits June 16, 2013 12:40

menubar not full-width

3d07434

let it hang from the header match inner shadow on menubar container for symmetry

compress menubar a few pixels vertically

d114724

ellisonbg added a commit that referenced this pull request Jun 17, 2013

Merge pull request #3393 from minrk/bootstrap

20c70fc

[WIP] bootstrapify

ellisonbg merged commit 20c70fc into ipython:master Jun 17, 2013

ellisonbg mentioned this pull request Jun 17, 2013

Flatten frontend #3395

Closed

4 tasks

minrk deleted the bootstrap branch August 13, 2013 19:28

mattvonrocketstein pushed a commit to mattvonrocketstein/ipython that referenced this pull request Nov 3, 2014

Merge pull request ipython#3393 from minrk/bootstrap

7b0c71f

[WIP] bootstrapify

[WIP] bootstrapify #3393

[WIP] bootstrapify #3393

Conversation

minrk commented Jun 2, 2013

minrk commented Jun 2, 2013

Carreau commented Jun 2, 2013

Carreau commented Jun 2, 2013

ellisonbg commented Jun 2, 2013

Carreau commented Jun 2, 2013

Carreau Jun 2, 2013

Choose a reason for hiding this comment

minrk commented Jun 2, 2013

minrk commented Jun 2, 2013

minrk commented Jun 3, 2013

Carreau commented Jun 3, 2013

Carreau commented Jun 3, 2013

Carreau commented Jun 3, 2013

Carreau commented Jun 3, 2013

Carreau commented Jun 3, 2013

Carreau commented Jun 3, 2013

Carreau commented Jun 3, 2013

minrk commented Jun 3, 2013

Carreau commented Jun 4, 2013

Carreau commented Jun 4, 2013

Carreau commented Jun 5, 2013

ellisonbg commented Jun 16, 2013

ellisonbg commented Jun 16, 2013

ellisonbg commented Jun 16, 2013

minrk commented Jun 16, 2013

ellisonbg commented Jun 16, 2013

ellisonbg commented Jun 16, 2013

minrk commented Jun 16, 2013

minrk commented Jun 16, 2013

ellisonbg commented Jun 16, 2013

minrk commented Jun 16, 2013

ellisonbg commented Jun 17, 2013

ellisonbg commented Jun 17, 2013

Carreau commented Jun 17, 2013

minrk commented Jun 17, 2013

ellisonbg commented Jun 17, 2013

Carreau commented Jun 17, 2013

ellisonbg commented Jun 17, 2013

Faraazali commented Jun 25, 2013

minrk commented Jun 25, 2013

Faraazali commented Jun 26, 2013

Carreau commented Jun 26, 2013

Bakuriu commented Aug 13, 2013

minrk commented Aug 13, 2013