Organize the JS and less files by component. #3325

ellisonbg · 2013-05-16T01:10:54Z

This PR does the client side re-org that parallels the server side work in #3321. I have created subdirectories in static for each part of the client. Roughly speaking there is one subdir for each page, web service or component.

Todo:

Override bootstraps styling of the code and pre elements so it doesn't conflict with that of CodeMirror
Figure out how custom.js and custom.css should work. The top level js and css directories they were in are now gone.
Update the fabfile.py to build all of the different style.min.css for each page.
Test, test, test. ( tester, look at the new pager)
Get the favicon working again.

minrk · 2013-05-16T01:59:32Z

Is there really any reason to have a separate style for each component? Wouldn't that be significantly less efficient than a single style.min.css that's slightly larger, but only needs to be downloaded / cached once?

minrk · 2013-05-16T02:00:56Z

the vast majority of CSS is shared, so if we minify to separate style.min.css, we are essentially multiplying the amount of traffic / requests involved in fetching CSS by the number of pages, which is the opposite of the goal.

Carreau · 2013-05-16T07:51:03Z

Agree with the 2 comments of @minrk .
we can have a per-directory this-component-style.less that define per-componenent local style, but it seem that
bundeling up everything in one file make more sens.

Carreau · 2013-05-16T07:57:13Z

Also, this can be part of another PR, but could the login form be pure JS.
So you can actually catch a 403 and just prompt to re-login on the same page ?
Bonus point if we figure out a way to do it that also works with emacs client among other.

I have to re-dive into notebook-list and cluster-list, but something along the same would be great, to for example have a quick access list in the notebook file-open menu.

minrk · 2013-05-17T02:06:29Z

IPython.core.tests.test_display.test_image_filename_defaults uses the ipynb logo image, and needs to be updated for the new path.

minrk · 2013-05-17T02:08:40Z

@ellisonbg did you want to do the same separation of restful services and human on the js side that you did on the Python side?

minrk · 2013-05-17T02:09:51Z

Also, was I wrong that you were going to put the IPython stuff in a single 'ipython' tree, rather than unpacking each subcomponent at the highest level?

ellisonbg · 2013-05-17T02:34:58Z

I do but we don't really have those cleanly separated in the js code right now.

Sent from my iPhone

On May 16, 2013, at 7:08 PM, Min RK notifications@github.com wrote:

@ellisonbg did you want to do the same separation of restful services and human on the js side that you did on the Python side?

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

minrk · 2013-05-17T03:29:27Z

I do but we don't really have those cleanly separated in the js code right now.

Okay, that's for another PR, then?

Carreau · 2013-05-19T16:32:10Z

If #3321 has beed merged, shouldn't lots of those commits not even show up ?

minrk · 2013-05-19T17:38:29Z

Probably just needs a rebase for them to not show up, which should actually proceed cleanly since those commits are in master.

Carreau · 2013-05-22T05:44:12Z

Short from my phone.

Are the Line number back in the right place?

Le mercredi 22 mai 2013, Brian E. Granger a écrit :

OK so I think I have found all known style problems. But there is a lot of
styles to check and I very well could have missed some. We might want to
make other changes to the org of the files, but let's start discussing this
version to work towards a merge.

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

ellisonbg · 2013-05-22T16:05:13Z

Ahh, good catch I will do that this morning.

Carreau · 2013-05-22T20:53:42Z

I think I already commented on te faulty commit. IIRC notebook.less
CodeMirror-lines , padding to 0.4 em should be set only to padding-top and
bottom, not left and right.

Le mercredi 22 mai 2013, Brian E. Granger a écrit :

Ahh, good catch I will do that this morning.

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

ellisonbg · 2013-05-23T05:34:58Z

OK I have fixed line numbers. Only one other change I might make: create a services directory in static.

fperez · 2013-05-23T23:52:46Z

Here, for the record: this breaks @Carreau's little slideshow mode button, but that's non-official so I wouldn't worry about it. I figure Matthias can update it once the merge goes in.

Otherwise I can't see any problems after running a bunch of stuff.

Given we have no testing of JS, our only recourse is to put this in front of trained monkeys (aka our users and devs), and dog-food it as fast as possible. That will at least give us a fighting chance of catching any serious problems before 1.0.

My vote is to merge it now-ish.

ellisonbg · 2013-05-24T00:17:12Z

Let me fix the custom.JS stuff first.

Sent from my iPhone

On May 23, 2013, at 4:52 PM, Fernando Perez notifications@github.com wrote:

Here, for the record: this breaks @Carreau's little slideshow mode button, but that's non-official so I wouldn't worry about it. I figure Matthias can update it once the merge goes in.

Otherwise I can't see any problems after running a bunch of stuff.

Given we have no testing of JS, our only recourse is to put this in front of trained monkeys (aka our users and devs), and dog-food it as fast as possible. That will at least give us a fighting chance of catching any serious problems before 1.0.

My vote is to merge it now-ish.

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

ellisonbg · 2013-05-24T04:47:49Z

OK I have fixed the custom js/css stuff and have also styled the code/pre elements in rendered_html back to their pre bootstrap versions. As far as I know, this PR is ready to be merged. We can continue to test and fix the css styles in master - the main thing is that the re-org work doesn't seem to have broken anything.

Carreau · 2013-05-24T07:35:38Z

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

@@ -3,14 +3,14 @@
 *
 *
 * Placeholder for custom user javascript
- * mainly to be overridden in profile/static/js/custom.js
+ * mainly to be overridden in profile/static/custom/custom.js


If you move it back, thoses sentences shoudl be fixed here and there.

Carreau · 2013-05-24T07:41:18Z

FYI, I need to look at requie.js, but I intend to write a small ext where you say:
IPython.loadJsExt('foo') and it will look in static: for foo/main.js and inject it in notebook, so that you could have separated folder for plugins. So I indeed find that the user or custom folder is one level too deep for users. But it doesn't prevent us from advising using subdirectories...

Carreau · 2013-05-24T14:30:39Z

Comments as I use it, I'll modify as long as I discover things.

login form weird with button on new line.
~~Prepare an hidden Username field ?~~
Line number gutters rounded on top-right, shouldn't.
stderr not any more in red ( 2 other styles overwrites background).
heading-x got blue halo when clicked

minrk · 2013-05-24T17:11:25Z

FYI, I need to look at requie.js, but I intend to write a small ext where you say:
IPython.loadJsExt('foo') and it will look in static: for foo/main.js and inject it in notebook, so that you could have separated folder for plugins. So I indeed find that the user or custom folder is one level too deep for users. But it doesn't prevent us from advising using subdirectories...

This should probably be inside the custom dir, to clearly distinguish it as something not shipped with IPython. So loadJSExt('foo') would load static/custom/foo/main.js.

just centers form, rather than allowing it to wrap weirdly

set it to transparent, thus inheriting from the parent div.

CSS tweaks

minrk · 2013-05-24T21:29:24Z

everything I am aware of has been addressed now.

fperez · 2013-05-24T22:13:03Z

Merging now...

Organize the JS and less files by component, in the `static` directory of the notebook. This PR does the client side re-org that parallels the server side work in #3321. There are now subdirectories in `static/` for each part of the client; roughly speaking there is one subdir for each page, web service or component.

Organize the JS and less files by component, in the `static` directory of the notebook. This PR does the client side re-org that parallels the server side work in ipython#3321. There are now subdirectories in `static/` for each part of the client; roughly speaking there is one subdir for each page, web service or component.

ellisonbg added 19 commits May 21, 2013 15:35

Reorg of the js/less/css files.

2862247

More renaming of less files.

2bca338

Renaming.

4097972

Working on cleaning up our less files.

de4c504

Moving files inside js folder.

b0e170f

Moving js files into subdirs.

da9b03d

More movign around of things in notebook and js/less.

a39ff10

Changes to templates.

8ca495d

Moving js/less/css dirs up one level. Too much nesting.

b31ccdc

More work on the less setup.

e8d547d

Cleaning up less/css.

cb50a0a

Wrok on static/tree

254c7b9

Adding link to new location of favicon.ico.

703d5c3

Putting custom.css/custom.js in static/user.

2e4d403

Renaming main JS files.

72e8441

Fixing fabfile to compile all of the page's style.less.

a751c25

Adding files that I mised in the last commit.

6cb67bb

Going back to a single style.less and style.min.css.

7b3ad88

Fixing less variable names to use_the_right_convention.

75145ac

Splitting notebook.less into separate files.

9816572

Fixing image path in IPython.core.tests.

c21ea2a

Fixing CM3 line numbers for cells.

92e8082

Creating services directory under static for kernels and friends.

057141f

ellisonbg added 2 commits May 23, 2013 21:36

Removing one level uf subdirs in static/custom.

ffc2cb9

Fixing code/pre styles in rendered HTML/

66f74cb

Carreau reviewed May 24, 2013
View reviewed changes

Fixing path to custom.css in comment.

b0af278

fix login page override css

805e6e7

just centers form, rather than allowing it to wrap weirdly

minrk mentioned this pull request May 24, 2013

CSS tweaks ellisonbg/ipython#8

Merged

minrk and others added 4 commits May 24, 2013 11:27

only round CM-gutter corners on outer (left) edge

59692bf

don't hardcode output_area pre background

8f0ea25

set it to transparent, thus inheriting from the parent div.

remove outline from heading-anchor links

ccc6c8c

Merge pull request #8 from minrk/jsreorg

02876cc

CSS tweaks

fperez merged commit f166c75 into ipython:master May 24, 2013

ellisonbg deleted the jsreorg branch January 28, 2014 17:48

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Organize the JS and less files by component. #3325

Organize the JS and less files by component. #3325

Organize the JS and less files by component. #3325

Organize the JS and less files by component. #3325

Conversation

Choose a reason for hiding this comment