Skip to content

[WIP] bootstrapify#3393

Merged
ellisonbg merged 55 commits into
ipython:masterfrom
minrk:bootstrap
Jun 17, 2013
Merged

[WIP] bootstrapify#3393
ellisonbg merged 55 commits into
ipython:masterfrom
minrk:bootstrap

Conversation

@minrk

@minrk minrk commented Jun 2, 2013

Copy link
Copy Markdown
Member

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:

  • raw input broken
  • can't delete notebook in dashboard
  • header alignment
  • cell toolbar
  • layout app_height is off (pager handle is pushed off the screen)
  • top of the header sometimes sits outside the page
  • cell type selector empty when value is 'code'
  • click events a little weird in the menu if no action is ultimately taken
  • modify url hash when switching tabs in tree view
  • de-ui-widget save widget
  • de-ui-widget notification widget
  • de-ui-widget help keyboard-shortcut
  • pager handle full-width
  • scrollbar pulled to the edge of the page
  • no more white space below the last cell at the bottom of the screenn
  • think of positionning / styling "wrong password on login screen"
  • bootstrapify dashboard delete dialog.
  • Dashbord, the "container" scoll horizontally
  • Dashbord, center text vertically in each row.
  • Breadcrumb css weird.

@minrk

minrk commented Jun 2, 2013

Copy link
Copy Markdown
Member Author

notebook list:

screen shot 2013-06-02 at 13 05 44

notebook menu:

screen shot 2013-06-02 at 13 06 58

@Carreau

Carreau commented Jun 2, 2013

Copy link
Copy Markdown
Member

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

Carreau commented Jun 2, 2013

Copy link
Copy Markdown
Member

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

Copy link
Copy Markdown
Member

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

@Carreau

Carreau commented Jun 2, 2013

Copy link
Copy Markdown
Member

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 :-)

Copy link
Copy Markdown
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Down.

@minrk

minrk commented Jun 2, 2013

Copy link
Copy Markdown
Member Author

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

minrk commented Jun 2, 2013

Copy link
Copy Markdown
Member Author

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

minrk commented Jun 3, 2013

Copy link
Copy Markdown
Member Author

Should be a couple of weirdnesses addressed

@Carreau

Carreau commented Jun 3, 2013

Copy link
Copy Markdown
Member

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

classical IPython Logo seem not centered

capture decran 2013-06-03 a 08 47 00
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
capture decran 2013-06-03 a 08 47 21

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

Carreau commented Jun 3, 2013

Copy link
Copy Markdown
Member

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

Carreau commented Jun 3, 2013

Copy link
Copy Markdown
Member

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

[Edit] : fixed

@Carreau

Carreau commented Jun 3, 2013

Copy link
Copy Markdown
Member

capture decran 2013-06-03 a 14 25 34

In Prompt eaten if window not wide enough.

[Edit] Fixed

@Carreau

Carreau commented Jun 3, 2013

Copy link
Copy Markdown
Member

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

Carreau commented Jun 3, 2013

Copy link
Copy Markdown
Member

Toolbar icon not centered vertically in FF.
capture decran 2013-06-03 a 17 05 50

@Carreau

Carreau commented Jun 3, 2013

Copy link
Copy Markdown
Member

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

minrk commented Jun 3, 2013

Copy link
Copy Markdown
Member Author

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

Carreau commented Jun 4, 2013

Copy link
Copy Markdown
Member

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

Carreau commented Jun 4, 2013

Copy link
Copy Markdown
Member

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

Carreau commented Jun 5, 2013

Copy link
Copy Markdown
Member

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

Copy link
Copy Markdown
Member

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...

screen shot 2013-06-15 at 5 42 05 pm

@ellisonbg

Copy link
Copy Markdown
Member

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

Copy link
Copy Markdown
Member

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

minrk commented Jun 16, 2013

Copy link
Copy Markdown
Member Author

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

Copy link
Copy Markdown
Member

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

Copy link
Copy Markdown
Member

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

minrk commented Jun 16, 2013

Copy link
Copy Markdown
Member Author

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

minrk added 2 commits June 16, 2013 12:40
let it hang from the header

match inner shadow on menubar container for symmetry
@minrk

minrk commented Jun 16, 2013

Copy link
Copy Markdown
Member Author

See how that feels now.

@ellisonbg

Copy link
Copy Markdown
Member

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

minrk commented Jun 16, 2013

Copy link
Copy Markdown
Member Author

sounds good. And happy Father's Day!

@ellisonbg

Copy link
Copy Markdown
Member

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

Copy link
Copy Markdown
Member

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

Carreau commented Jun 17, 2013

Copy link
Copy Markdown
Member

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

minrk commented Jun 17, 2013

Copy link
Copy Markdown
Member Author

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

Copy link
Copy Markdown
Member

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

Carreau commented Jun 17, 2013

Copy link
Copy Markdown
Member

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

Copy link
Copy Markdown
Member

OK I am going to merge it. Thanks Min!

ellisonbg added a commit that referenced this pull request Jun 17, 2013
@ellisonbg ellisonbg merged commit 20c70fc into ipython:master Jun 17, 2013
@ellisonbg ellisonbg mentioned this pull request Jun 17, 2013
4 tasks
@Faraazali

Copy link
Copy Markdown

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

minrk commented Jun 25, 2013

Copy link
Copy Markdown
Member Author

Try git submodule init && git submodule update

@Faraazali

Copy link
Copy Markdown

Thanks minrk, actually I used the anaconda installer :)

@Carreau

Carreau commented Jun 26, 2013

Copy link
Copy Markdown
Member

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

Bakuriu commented Aug 13, 2013

Copy link
Copy Markdown

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

minrk commented Aug 13, 2013

Copy link
Copy Markdown
Member Author

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

@minrk 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
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

5 participants