Skip to content

HTTPS clone URL

Subversion checkout URL

You can clone with HTTPS or Subversion.

Download ZIP

Loading…

Less css #2708

Merged
merged 59 commits into from

5 participants

@Carreau
Owner

Edit : TODO

  • fix body overflow on dasboad
  • fix stderr not red
  • create a test_notebook with most css case
  • [ ] prepare nbviewer for transition
  • fix or remove print view.

Start to replace css by less.

For now, in browser compilation, kind of much better to develop and test as you don't have to restart.

Start replacing hardcoded value with variable.

(try setting @notebook_background in varaibles.less to a nice light pink, and the rest follows)

Start removing jquery-ui-class references in javascript.

Eg, instead of toggling ui-widget-content ui-corner-all on cell selection/unselection, replace by a 'selected' class and put the correct css in

.cell{
    &.selected {
        // the code.
    }
}

Browser side parsing should allow things like user only defining css variable in their .profile/static... and it should work.

(parsing time is ~+80 ms on my laptop according to less)

Just for your eyes, what you can do with variables...
Capture d e cran 2012-12-19 a 21 21 15

Current style is unchanged of course.

@Carreau Carreau referenced this pull request
Merged

UI For Metadata #2333

@bollwyvl

fantastic stuff. as a plugin writer, i would love to be able to use LESS when building new widgets.

what relationship does this have to the larger JS/HTML refactor? In that vein, it seems like picking up an existing LESS-ful framework like bootstrap could be beneficial. I have found that my code has gotten much cleaner on the JS side after dropping bootstrap jquery-ui for page basics... and the theming is much, much cleaner. of course, the jqui stuff would all still work.

@jasongrout

Are you saying it's much better after dropping jquery-ui, or after dropping bootstrap?

@Carreau
Owner

Yes, we want to move to bootstrap.
For the moment I move to less only because it is easier that going bootstrap right now, as we have css-conflict with it.

@jasongrout

From what I've seen of less (we have someone that is moving the Sage notebook to it), +1 to the idea.

@bollwyvl
@ellisonbg
Owner
@Carreau
Owner

Matthias, do you think we should start to use prefixed css class names like
ip_notebook... or ipynb_notebook. At least on our top level classes for
prevent conflicts. Also, I think it is more common to use "-" in css class
names rather than the "_". If we wanted to change, this would be a good
time. What do you think?

Is it to prevent conflict with bootstrap ?
or for Embeding ?
I already tried, and made a Pr to fix some potential conflict.

If it is for embedding/nbviewer...etc you just "namespace" the css with a nesting rule

div#ipython{
    //all the rest od the less file
}

Which will effectively apply the css only to the element that are inside the `#ipython' div...

@jasongrout

But if the parent page has the same classnames, some of its styles could be erroneously applied to the IPython part.

@Carreau
Owner

And if the embedding page use a bootstrap theme that conflict with our, we are also screwed, the same with jQuery UI.
Also our css does overwrite some of the jquery-ui classes.

The other risk of embedding will be that boilerplate might not be applied and you will have some inheritances you dont want.

We can be careful while creating new css-classes, but I'm not sure it is worth it for now, we will encounter collision elsewhere.

I also would really like if jQuery UI classes where not manipulated with javascript.

@ellisonbg
Owner
@ellisonbg
Owner
@Carreau
Owner
@Carreau
Owner

If we go this way.

  • do we do all the changes in one shot ?
  • do we stay on browser compilation ?
  • do we do this for 0.14 or 0.15 ?

I'm + 1 on staying on browser side compilation,
To do it step by step, but maybe keep that for 0.15.

@bollwyvl
@Carreau
Owner
@Carreau
Owner

new --NotebookApp.use_less flag.

Either use style.min.css if set to false (which need to me generateed by running make in static dir)
Or load and parse the less files on the fly in the browser if set to True.
Css probably broken in in login/logout.html

@Carreau
Owner

Need to be rebased.

@Carreau Carreau was assigned
@Carreau
Owner

Ok, should merge cleanly again.

@Carreau
Owner

Bootstrap css added (not the Js plugins/ images)
And css recompiled.

There are a few glitches here and there, but nothing serious, just ugly.

I replace the "project folder" in dashboard with a breadcrumb not clickable yet, but it might be a way to "Navigate" the folder structure.

@Carreau
Owner

rebased on top of master to avoid the few conflict.

@ellisonbg
Owner
@Carreau
Owner

Css still need some tweaks with the current merge of celltoolbar.
also I would like to know if we want to include full bootstrap with it's Js plugin, or only css...

@bollwyvl

Just hacked up an inventory of existing notebook elements that could (not saying should, as it means more work!) use bootstrap javascript components, with some notes on where future components could use these.

further, the dev community seems to be picking up speed on building stuff "the bootstrap way," but the jquery ui ecosystem still strictly dominates in terms of available components. actually, one of the items from that post includes a less-ful theme of jq.ui to make it more bootstrap-like... this could be great for getting consistent visuals, while keeping the goodness that is jq.ui, and would tie in nicely to the effort on this ticket

Legend

:+1: useful
:8ball: not sure if it is useful

Transitions: :8ball:

  • not really used anywhere

Modal: :+1:

  • some of these are already used with ui
  • bootstrap modals are functionally equivalent to UI ones, but can be defined more easily in markup

Dropdown: :+1: :+1:

  • menubar.js
  • again, more markup-based

Scrollspy: :8ball:

  • nothing is currently like this
  • this would could be good if there was a powerpoint-like cell thumbnail navigator

Tab: :8ball:

  • currently no tabs? who likes tabs anyway?

Tooltip: :+1:

  • used in codecell, and is heavily customized: haven't dug into what the customizations do
  • bootstrap tooltips are a little fiddly: there is no direct markup mechanism, and modifying the text after initiation requires some undocumented API digging

Popover: :+1:

  • these are great... nice for things that don't need a whole modal, but are bigger than a tooltip

Alert: :+1:

  • luckily, alerts are rare in the codebase... just a WebSocket warning in kernel.js
  • might replace some modals
  • nice, consistent styling, would be responsive to themes

Button: :+1: :+1:

  • used all over
  • somewhat simpler than the jq.ui buttons... icons are just markup (not magic)

Collapse: :+1:

  • used in codecells
  • might be simpler... there is a lot of stuff that talks about collapsing

Carousel: :8ball:

  • not used anywhere
  • probably not that useful, as any of the presentation viewers would already have this

Typeahead: :8ball:

  • handled by codemirror, predominantly
  • might be useful for add-ons

Affix: :8ball:

  • nothing like this used
  • not sure how this would play
@Carreau
Owner

Thanks for the comprehensive review !

With some comment though.
Notebook format does allow worksheet. Tabs maybe...

Tooltip are written fully from scratch. I didn't found anything even close from what we have now.

Scrollspy could be use to keep current focused cell in focus when new output arrives above.

I would like for the "celltoolbar" a kind of affix, where it stick up the screen when the cell bleed above
the top edge of the window but which would be pushed up when the next cell arrives.
A little like the alphabetic delimiters on iOS when you scroll fast or the mail header on gmail app on android phones

See what I mean ?

@bollwyvl
@Carreau
Owner

just checked out the less-css branch: jinja2 is now called for, only
reference is in notebookapp.py. I <3 jinja, is this permanent?

we'll need it for the ipynb > * converter.

will this become another line in the pip install/easy_install pyzmq
tornado jinja2
extra installation instructions? Case for breaking out
notebook as separate installable becoming stronger...

We'll see.

Notebook format does allow worksheet. Tabs maybe...
Ah. Just hadn't seen them visually represented. It looks like (according to
notebook.js@1159 on the PR branch) this is not supported, yet! this would
be a fun thing to work on :) Do the different sheets share the same running
kernel?

Not supported yet on master, but it is on Emacs client.
Yes they will share the same kernel, nothing prevent from doing otherwise
but then it is just 2 notebook...

does the message format already account for this? haven't sniffed much of
the on-the-wire notebook stuff.

This is purely frontend specific.kernel is agnostic that it runs from a notebook.

I have found BS tabs a bit easier and more semantically-sound than jq.ui
ones... may be worth investigating. However, some of the behaviors (like
drag-drop reorderable tabs) are not built in to BS, but is already in
jq.ui... it seems like this behavior would be required vs. some clunkly
"move sheet right" or "move sheet left": i'm looking at you, google docs!
however, it could be just a matter of adding jq.ui.sortable to the BS
tabs :)

look in "closed PR" someone had a draft.

Tooltip are written fully from scratch. I didn't found anything even close
from what we have now.
Yeah, couldn't evaluate that with my level of understanding. Is this a
candidate for extraction, or are they extremely tied into the "guts" of the
notebook?

It shouldn't be 'that' much entangled.
If you wish to extract it into a component, that would be great !

Scrollspy could be use to keep current focused cell in focus when new
output arrives above.
Can't visualize what you are suggesting, but i have had good success with
using scrollspy to do nifty things in long scrolling documents. One I liked
was pretty much exactly what you describe below: basically, we have a
big-ol-page of django models from a "parent" starting point, and visually
represent the "health" (i.e. filled-in status, semantic validation) of all
child instances.

we used d3/svg for this... is there a targeted browser that supports
websockets that doesn't support SVG? could probably redo the code for DIVs.

I could envision a notebook add-on which, in exchange for 20px of
horizontal space, as you add more cells, you would see:

I do not get everything, but you could try.
we also have (maybe) a plan for a search/command line bar

@minrk
Owner
@bollwyvl

@Carreau sorry to take this off-topic... only tangentially related to javascript and css at this point

I could envision a notebook add-on which, in exchange for 20px of
horizontal space, as you add more cells, you would see:

I do not get everything, but you could try.

Here's a mockup... had this done earlier, but forgot to post it/annotate it:
http://bl.ocks.org/4611602
sorry, looks a bit wonky, but all the key things are there!

@ellisonbg
Owner

OK this is encouraging and I am excited about this.

  • The less JS library should be static/less not static/js/less.
  • Let's not use make for managing things like the less files/minimization/etc. We should use fabric instead. It is pure python and will be much more flexible than make. Let's create notebook/fabfile.py for all of this type of stuff.
  • We should create a static/bootstrap folder to and put all of bootstrap there (css+js). I want to keep all of our IPython assets well separated from everything else.
  • Do you really think we want to ship the bootstrap less? It is more flexible, but alot of files.
  • We should always create and version control a minified bootstrap.css and style.css. The default mode for the notebook should be use_less=False - it should just use the minified versions of things.
  • I don't think we want to do it in this PR, but I think we should create static/ipython and put all of our IPython specific assets there in subfolders (css, js, less, coffee). But we should think about moving towards this.

This PR doesn't have to be perfect, but I want to make sure that:

  1. We get the overall structure and organization of code right.
  2. There are no regressions.

Once this is merged, we can try to go through and start converting to bootstrap and cleaning up our css.

@Carreau
Owner

@bollwyvl, look nice, you forgot the (6).

@ellisonbg

The less JS library should be static/less not static/js/less.

Yes, this was not intended to be final

Let's not use make for managing things like the less files/minimization/etc. We should use fabric instead. It is pure python and will be much more flexible than make. Let's create notebook/fabfile.py for all of this type of stuff.
We should create a static/bootstrap folder to and put all of bootstrap there (css+js). I want to keep all of our IPython assets well separated from everything else.

Sure, I don't know fabric but I agree on automatizing.

Do you really think we want to ship the bootstrap less? It is more flexible, but alot of files.

The less we modify the bootstrap folder, the easier it will be to upgrade.
Minify only is IIUC unacceptable as we ship on debian, and to generate your own min files you need bootstrap .less one. especially if you want to say in less that .foo class inherit from this and this on bootstrap

We should always create and version control a minified bootstrap.css and style.css. The default mode for the notebook should be use_less=False - it should just use the minified versions of things.

I just don't think we need to keep bootstrap and notebook css separate.
the point of bootstrap mixins is that you can say that .savedialog extend .modal but has background:red.
Then you put your .savedialog to the div that needs it. That's it. So you need the bootstrap .less files to do so
and compiles in one style.min.css you should avoid as much as possible to have multiple class in dom.

That's how I understand less and bootstrap.

I don't think we want to do it in this PR, but I think we should create static/ipython and put all of our IPython specific assets there in subfolders (css, js, less, coffee). But we should think about moving towards this.

Actually I think we should make static/ipython/[component]/css and static/ipython/[component]/js ...

@ellisonbg
Owner

Definitely check out fabric. It makes me very happy when I use it - I don't know why the Python community doesn't use it more...

I agree that we should try to run an unmodified version of bootstrap.

I also understand better now how the less minimization works and I see how we will need to have a single style.less and style.css that includes our own less code as well as that of bootstrap.

Please see IPEP 5 for more of a description of how I see us organizing our code.

I at still thinking about how we should organize our JS code, but I think that the type of organization you are thinking of makes sense. We just have to figure out the level of granularity.

@Carreau
Owner

Bower have quite change since the last time I saw it.
It works quite better. So I moved bootstrap to bower in componenent.json.

@Carreau
Owner

Ok, all css is fixed. Notebook shouldn't look too different than before.
I haven't add the fabric.py file yet. Should I do I as part of this PR or not ?

Bootstrap less files are not included, as it is not needed.
Neither is 'less.js' that came as an optional component with bower if you want to use
the --use_less flag.

@ellisonbg
Owner

Can you explain what you mean by the bootstrap less files not being included. I see that bootstrap and less.js are not in the repo, but do you have to run bower install to grab those before the notebook is run? What is the bootstrap-custom.less file? I see it references the bootstrap less file. How/when are the less files compiled? Can you still change the bootstrap variables to change the look of the site?

@ellisonbg
Owner

Because css is also valid less, let's move the rest of our plain css files over to the less directory and give them .less extensions.

@Carreau
Owner

Can you explain what you mean by the bootstrap less files not being included. I see that bootstrap and less.js are not in the repo, but do you have to run bower install to grab those before the notebook is run?

No, bootstrap is neeeded only if you want to recompile style.min.css
less is needed only if you use the --NotebookApp.use_less=True Flag.

What is the bootstrap-custom.less file?

Same as bootstrap/bootstrap.less with the include code.less commented and use relative path to ../../custom/bootstrap prepended to each file.

I see it references the bootstrap less file. How/when are the less files compiled?

When you do make (for now) in /static/ it generate the style.min.css. Or with the use_less flag on each page load, browser side.

Can you still change the bootstrap variables to change the look of the site?

Yes, you copy and past bootstrap variable.less in less folder and change included file from ../custom/bootstrapless/variables.less to ./variable.

Because css is also valid less, let's move the rest of our plain css files over to the less directory and give them .less extensions.

I would like to do it one at a time, once I've re-read it and put variable in the right place and remove references from the template.

I would like to be extra carefull with this one as if you include the file in the wrong place it will break the css priority order at compile time.

Also right now stderr is not red anymore.
and merging this will break nbconvert and will break nbviewer on next deploy (as they extract css from IPython repo, and nbviewer extract it from laster master)

I'm writting a notebook where I put all the HTML of notebook I think of to do my tests and potentially make a phantomJS capture/ diff as a test.

@Carreau
Owner

@ellisonbg
Brian, I think I am almost done, could you have a look at the appearance of the test notebook I have put in the testing folder, it should give you a quick overview of the style of most element and is a good reference point.

What do we do about the print view ? Directly printing works fine as with the media query we can hide the unnecessary element like toolbar pager ... etc should I remove the link from the menu ? replacing it by a direct call to print ?

You seem to know fabric better than I, do you want to write the fabric.py file that does the compilation step ?

IPython/frontend/html/notebook/handlers.py
@@ -185,6 +185,11 @@ def read_only(self):
return self.application.read_only
@property
+ def use_less(self):
+ """Use less instead of css in templates"""
+ return self.application.use_less
@minrk Owner
minrk added a note

tabs

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
IPython/frontend/html/notebook/static/less/tooltip.less
((24 lines not shown))
+@import "variables" ;
+
+.dropshadow(){
+ -moz-box-shadow: 0px 6px 10px -1px #adadad;
+ -webkit-box-shadow: 0px 6px 10px -1px #adadad;
+ box-shadow: 0px 6px 10px -1px #adadad;
+}
+
+// smoth height adaptation
+.smoothheight(@t:1s) {
+ -webkit-transition-property: height;
+ -webkit-transition-duration: 1s;
+ -moz-transition-property: height;
+ -moz-transition-duration: 1s;
+ transition-property: height;
+ transition-duration: 1s;
@minrk Owner
minrk added a note

can we make these faster? Probably 0.5s at most

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
IPython/frontend/html/notebook/static/less/tooltip.less
((94 lines not shown))
+
+.tooltiptext
+{
+ /*avoid the button to overlap on some docstring*/
+ padding-right:30px
+}
+
+.ipython_tooltip {
+ max-width:700px;
+ /*fade-in animation when inserted*/
+ -webkit-animation: fadeOut 800ms;
+ -moz-animation: fadeOut 800ms;
+ animation: fadeOut 800ms;
+ -webkit-animation: fadeIn 800ms;
+ -moz-animation: fadeIn 800ms;
+ animation: fadeIn 800ms;
@minrk Owner
minrk added a note

as above - probably 100-500ms

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
@minrk
Owner

I made a few comments in-line. I like this a whole lot.

Personally, I think if it's nontrivial for print view back to pseudo-working order, we should kill it until nbviewer comes in, since that's how it will ultimately work anyway.

Carreau added some commits
@Carreau Carreau start introducing less 62f440f
@Carreau Carreau start to migrate to variables 95a4d0a
@Carreau Carreau start mixins 11491c9
@Carreau Carreau Revert "remove less.css"
This reverts commit 076a0fa.
c7fcdf6
@Carreau Carreau use less for tooltip facecd7
@Carreau Carreau remove useless classes f8b7b64
@Carreau Carreau main_app -> ipython-main-app 45c3a2e
@Carreau Carreau add less flag 721d47a
@Carreau Carreau generate style.css 9e8b9fa
@Carreau Carreau less flag in templates c2d9690
@Carreau Carreau fix print css less ead267f
@Carreau Carreau make file and other less 6b3ae4c
@Carreau Carreau readd flexible-box-model 3359192
@Carreau Carreau Add and remove boostra squashed commit
To reduce branch size as bootstrap is huge

add default bootstrap theme
does not import code in bootstrap
remove bootstrap
a33e42a
@Carreau Carreau recompile css 0251c6b
@Carreau Carreau fix cell type selector css 580f4ca
@Carreau Carreau Fix project path url in dashbord
Use Bootstrap breadcrumbs for later navigation purpouse
96abb72
@Carreau Carreau slight typography changes 39a1a59
@Carreau Carreau clean css.
remove some Ui-widget where unnecessary,

Don't show toolbar on media-print
3a70b9d
@Carreau Carreau regenerate minified css 60b39ac
@Carreau Carreau use varaible for background color 1e1d3c3
@Carreau Carreau fix css toolbar 03bd8e7
@Carreau Carreau regenerate css 503c803
@Carreau Carreau use bootstrap as component with bower 5bc82b2
@Carreau Carreau remove codemirror as it picked the folder not the git repo a2edd87
@Carreau Carreau remove trailing whitespace 7c4b99e
@Carreau Carreau fix a few css rules
especially since the introduction of celltoolbar
3282c4a
@Carreau Carreau add less.js in component.json 5c55f6b
@Carreau Carreau use less as a component 18850f6
@Carreau Carreau change to cluster list
fix css and make engine input of type number
3db4e89
@Carreau Carreau min and default for engine number 00a4257
@Carreau Carreau fix body overflow on dashboard 19e9401
@Carreau Carreau fix stdr background ddb4001
@Carreau Carreau use nested rule in rendered_html less file 70eb848
@Carreau Carreau condense rendered_html css 61a1fe3
@Carreau Carreau add css reference notebook 58e3fb9
@Carreau Carreau fix select width in toolbar cc728f5
@Carreau Carreau replace tab by space comment print view action 8be4742
@Carreau Carreau speedup transition adn use class instead of id 80a4049
@Carreau Carreau speedup tooltip 8ac8ab1
@Carreau
Owner

@minrk, I speeded up the transition by a factor of 2 and removed the tabs (sorry about that)

I also rebased the branch and shuffle/squashed a few commit around not to have the full bootstrap files in the history.

@Carreau
Owner

@ellisonbg Do you see more to be done ? Once this is landed I can progressively refactor the css/html classes.

@ellisonbg
Owner
@ellisonbg
Owner

OK i have started to go over this one. My first observation is that the styling of a number of elements has changed on both the notebook page and the dashboard. I will try to compile a list of the changes i observed shortly, but my goal for this PR is for it to not change any styles. Obviously we may want to change things later, but let's use this one only for the transition to less.

@ellisonbg
Owner

OK here is a list of css styling that is different in this branch:

Dashboard:

  • Border at the bottom of the page header is missing.
  • Font size is bigger.
  • Formatting of notebook dir include spaces between "/" and path elements.
  • Notebook links not underlined.
  • Border colors are lighter, fill colors darker.

Notebook:

  • Font sizes too big in some cases.
  • Font colors off.
  • Selected cell is filled, not just bordered.
  • Borders too light.
  • select elements (in main toolbar and slideshow tb) have custom styles that look way off.
  • Tooltip styles seem messed up in sample notebook.

The sample notebook should not be in the code base, but should be put into /examples/tests and named using the new convention in /examples/notebooks.

I guess I hadn't noticed that this PR is not just introducing less into our code base. It is starting to use bootstrap to style things. I think that is trying to do too much in a single PR and I am sorry I hadn't noticed that sooner. Here are the problems I see with this approach:

  • Right now our css styles are not well encapsulated, so when we put bootstrap on the page, things get styled. Because of this, lots of style settings have changed and we have little recourse, but to start hacking css on individual elements to fix it.
  • Our htmlboilerplate base styles conflict with bootstrap.

I was hoping that using less for our own styles could help us start to build well abstracted css that would more easily allow the transition to bootstrap. Instead this PR sort of takes of us half way towards using less (many of our css files have not been transitioned) and half way towards using bootstrap.

What about the following plan for css/less sanity:

  • Back boostrap out of this PR.
  • Focus on moving to less in this PR.
  • Then start to refactor our less code:
    • Start to use proper-css-class-names.
    • Start to add an "ip" prefix to our class names.
    • Split our less into files that only style one thing. We should have a less file for each javascript class.
  • Then introduce bootstrap onto the page. The first bootstrap PR would only put it onto the page and make css changes to keep the styles the same as before. In this PR we would not actually start to style things using bootstrap.
  • Then issue a sequence of PRs where we transition different parts of the page to start using bootstrap.

The reason that I think this approach is important is that it allows us to separate two completely different activities:

  1. Refactoring our css/less to be more modular and robust.
  2. Starting to make actual stylistic changes on the page that are driven from a UI/design perspective.

The current PR combines these two things in a way that makes is very difficult to see how/why the stylistic things are being changed.

@ellisonbg
Owner

I want to understand better how this works...

In this PR there are two modes of running:

  1. The default mode is use_less=False, in which case the notebook just loads the saved style.min.css.
  2. The use_less=True mode requires the bootstrap and less components to be installed and then we use style.less.

Is this a correct view? Once we start to use the bootstrap js files we are going to have to check in the bootstrap component - but I still think we should manage that component and its updates using bower.

@Carreau
Owner

OK here is a list of css styling that is different in this branch:
You probably have a better screen/eyes than me, I can't even see some differences.

I guess I hadn't noticed that this PR is not just introducing less into our code base. It is starting to use bootstrap to style things.

Except from the 'breadcrumbs' on dashboard, I did introduce boostrap because it does bring default styling to element. I'll see If I can prevent bootstrap from adding default style, but I think it is the point of bootstrap and that it rely on this fact for cross-browser compatibility.

Trying to move to less, then adding bootstrap will duplicate all the work as you will have to adjust css consequently in any case.

Then introduce bootstrap onto the page. The first bootstrap PR would only put it onto the page and make css changes to keep the styles the same as before. In this PR we would not actually start to style things using bootstrap.

That basically what I wanted to do with this PR. I don't introduce any bootstrap classes, only "fix" the css.

Also dooing things in step will most likely be difficult because of jQuery-ui base theming

Anyway, I'll respond more later, I have a pretty dense day today.

@Carreau
Owner

OK here is a list of css styling that is different in this branch:

Dashboard:

  • Border at the bottom of the page header is missing.
  • Font size is bigger.
  • Formatting of notebook dir include spaces between "/" and path elements.
  • Notebook links not underlined.
  • Border colors are lighter, fill colors darker.

Notebook:

  • Font sizes too big in some cases.
  • Font colors off.
  • Selected cell is filled, not just bordered.
  • Borders too light.
  • select elements (in main toolbar and slideshow tb) have custom styles that look way off.
  • Tooltip styles seem messed up in sample notebook.

will try to fix

The sample notebook should not be in the code base, but should be put into /examples/tests and named using the new convention in /examples/notebooks.

ok.

I guess I hadn't noticed that this PR is not just introducing less into our
code base. It is starting to use bootstrap to style things. I think that is
trying to do too much in a single PR and I am sorry I hadn't noticed that
sooner. Here are the problems I see with this approach:

  • Right now our css styles are not well encapsulated, so when we put
    bootstrap on the page, things get styled. Because of this, lots of style
    settings have changed and we have little recourse, but to start hacking css
    on individual elements to fix it.

  • Our htmlboilerplate base styles conflict with bootstrap.

I agree with that, but the bootstrap one use less so you could actually
reset css in .renderd_html with is a huge plus for bootstrap one.

I was hoping that using less for our own styles could help us start to build well abstracted css that would more easily allow the transition to bootstrap. Instead this PR sort of takes of us half way towards using less (many of our css files have not been transitioned) and half way towards using bootstrap.

The problem right now is that the style is half defined by jquery-UI and you absolutely need to get rid of that if you want to :

  • use less
  • use bootstrap

IMHO You cannot decouple having independant less files for each component before using bootstrap.
The point of bootstrap is to first have a common stylesheet that is governed by variable and deviate from it
at least as possible overwriting on a per component basis what need to be, and potentially using previously defined variable.

What about the following plan for css/less sanity:

  • Back boostrap out of this PR.
  • Focus on moving to less in this PR.
  • Then start to refactor our less code:
    • Start to use proper-css-class-names.
    • Start to add an "ip" prefix to our class names.
    • Split our less into files that only style one thing. We should have a less file for each javascript class.

Assuming we acchieve this point,

  • Then introduce bootstrap onto the page. The first bootstrap PR would only put it onto the page and make css changes to keep the styles the same as before. In this PR we would not actually start to style things using bootstrap.

This cannot be separated from the following step, and the following step will mean to change a huge amount of what we did in the following one.

  • Then issue a sequence of PRs where we transition different parts of the page to start using bootstrap.

The reason that I think this approach is important is that it allows us to separate two completely different activities:

  1. Refactoring our css/less to be more modular and robust.
  2. Starting to make actual stylistic changes on the page that are driven from a UI/design perspective.

The current PR combines these two things in a way that makes is very difficult to see how/why the stylistic things are being changed.

I understand you point, and that what I wanted to do first, but in this order we are reinventing the wheel,
I saw that at the beginning of this PR when factoring code, I reinvented the corner-all variable and the background-color
one. Without introducing bootstrap first you expose yourself to variable name conflict, and invent something that is already part of bootstrap.

Also I do agree and will try my best to keep the style as close as possible than before, but I think this partially fighting
against the fact of using variable and reusing css.

I want to understand better how this works...

In this PR there are two modes of running:

  1. The default mode is use_less=False, in which case the notebook just loads the saved style.min.css.

Yes

  1. The use_less=True mode requires the bootstrap and less components to be installed and then we use style.less.

Yes

Is this a correct view? Once we start to use the bootstrap js files we are going to have to check in the bootstrap component - but I still think we should manage that component and its updates using bower.

Agree, we can also minify the js file and ship it minified.

@Carreau
Owner

Dashboard:

  • Border at the bottom of the page header is missing.
  • Font size is bigger.
  • Formatting of notebook dir include spaces between "/" and path elements.
  • Notebook links not underlined.
  • Border colors are lighter, fill colors darker.

Notebook:

  • Font sizes too big in some cases.
  • Font colors off.
  • Selected cell is filled, not just bordered.
  • Borders too light.
  • select elements (in main toolbar and slideshow tb) have custom styles that look way off.
  • Tooltip styles seem messed up in sample notebook.

note to myself : notebook-pannel -> ui-widget
cell border color != toolbar border-color

@ellisonbg
Owner
@ellisonbg
Owner

OK I have gone through the header and things are looking better. Just a few more things:

  • I am still not seeing the this grey border between the header and the read of the page. But you have that clicked off in your list - makes me think we are talking about different things.
  • The line-height of the text in the "Notebooks" and "Clusters" tabs is larger in your version of the notebook. But let's leave this because we will want to transition to bootstrap styled tabs.

You are still using the breadcrumbs, but that is a minor point and shouldn't hold this up.

@ellisonbg
Owner

The notebook page is also much closer. A few more things:

  • The cell toolbar is off: slightly darker borders than the rest of the input area. It is slightly taller than before - it takes up too much vertical space now. And the slideshow select box is off: too wide and the label is the wrong color.
  • It is sort of a separate issue, but our pager is no longer monospaced (in master even).

Later tonight i will try to finish looking through your css sample notebook, but this is getting closer.

@Carreau
Owner

The default mode is use_less=False, in which case the notebook just loads the saved style.min.css.

Yes

Quick note to myself, does it apply to other pages like dashboard ?

@ellisonbg
Owner
@Carreau
Owner

Not sure if you are asking me a question

No, I just need to check that the use_less flag also have an effect on other pages, I might have forgot some templates modifications.

@Carreau
Owner

grey border between the header and the read of the page.

Done

The line-height of the text in the "Notebooks" and "Clusters" tabs is larger in your version of the notebook. But let's leave this because we will want to transition to bootstrap styled tabs.

Not changed.

You are still using the breadcrumbs, but that is a minor point and shouldn't hold this up.

Will make sens when you'll have to make them clickable to browse folders...

A few more things:

The cell toolbar is off: slightly darker borders than the rest of the input area.

Should be fixed

It is slightly taller than before

Also fixed... this one was hard.

And the slideshow select box is off: too wide and the label is the wrong color.

I can't differentiate myself...

It is sort of a separate issue, but our pager is no longer monospaced (in master even).

Hum, strage, font-type is set to monospace still..

Later tonight i will try to finish looking through your css sample notebook, but this is getting closer.

moved in examples/tests

@Carreau
Owner

Quick note to myself, does it apply to other pages like dashboard ?

Now it does.

@Carreau
Owner

Ok, I guess I fixed everything.

@ellisonbg
Owner

Things are really looking good.

  • I looked and there is something a bit wierd going on with the pager. It is now wrapped in .output_area and .output_stream css classes. I don't remember that. I too am confused though as it looks like it should be monospace.
  • The only styling thing I found on the notebook page is that the border around markdown cell's input area is darker while editing the cell.
@ellisonbg
Owner

While the printnotebook view is disabled, I see that all of its files, its its tornado handler are still there. Do you mean to remove them? Any reason to keep them around?

@ellisonbg
Owner

So the only things I see are:

  • Fix border of markdown/text cells when editing.
  • Decide what to do about fully removing printnotebook view.
@Carreau
Owner

I looked and there is something a bit wierd going on with the pager. It is now wrapped in .output_area and .output_stream css classes. I don't remember that. I too am confused though as it looks like it should be monospace.

it seem to have been for quite a while

commit 0c51946afcf388c6f7515846d9bb85cff12c90a8
Author: Brian E. Granger <ellisonbg@gmail.com>
Date:   Fri Jul 22 17:07:35 2011 -0700

    Updating font-sizing to use the YUI protocol.

diff --git a/IPython/frontend/html/notebook/static/js/pager.js b/IPython/frontend/html/notebook/static/js/pager.js
index a6ce743..707e666 100644
--- a/IPython/frontend/html/notebook/static/js/pager.js
+++ b/IPython/frontend/html/notebook/static/js/pager.js
@@ -81,9 +81,8 @@ var IPython = (function (IPython) {


     Pager.prototype.append_text = function (text) {
-        var toinsert = $("<div/>").addClass("output_area output_stream monospace-font");
-        toinsert.append($("<pre/>").addClass("monospace-font").
-            html(utils.fixConsole(text)));
+        var toinsert = $("<div/>").addClass("output_area output_stream");
+        toinsert.append($('<pre/>').html(utils.fixConsole(text)));
         this.pager_element.append(toinsert);
     };

but indeed, removing it bring back monospace font.

The only styling thing I found on the notebook page is that the border around markdown cell's input area is darker while editing the cell.

Do you mean background ? I always have #ababab for border ... the background was different still

While the printnotebook view is disabled, I see that all of its files, its its tornado handler are still there. Do you mean to remove them? Any reason to keep them around?

It will probably be easier to reenable the print view. and I would prefer to remove in a separate PR to undo more easily if needed. Also one can still access it by adding /print manually

@ellisonbg
Owner

I do mean the border. Let me try to describe a bit more. When you are editing a markdown/text cell, it shades in the input area and adds a border to it. The fill color looks fine to the eye, but the border is darker than the border around the code cell input area. It is most noticeable when you have the celltoolbar open, as the ctb has the correct lighter border compared to the input area..

Let's worry about the pager formatting in a later PR.

I am fine with you plan for the printview, I just wanted to make sure it wasn't a mistake to leave that stuff there for now.

@ellisonbg
Owner
@ellisonbg
Owner

I think this is ready, great work!

@ellisonbg ellisonbg merged commit ec14a41 into from
@Carreau Carreau referenced this pull request in ipython/nbconvert
Merged

Jinja Templates #77

14 of 21 tasks complete
@Carreau Carreau deleted the branch
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Commits on Jan 26, 2013
  1. @Carreau

    start introducing less

    Carreau authored
  2. @Carreau

    start to migrate to variables

    Carreau authored
  3. @Carreau

    start mixins

    Carreau authored
  4. @Carreau

    Revert "remove less.css"

    Carreau authored
    This reverts commit 076a0fa.
  5. @Carreau

    use less for tooltip

    Carreau authored
  6. @Carreau

    remove useless classes

    Carreau authored
  7. @Carreau

    main_app -> ipython-main-app

    Carreau authored
  8. @Carreau

    add less flag

    Carreau authored
  9. @Carreau

    generate style.css

    Carreau authored
  10. @Carreau

    less flag in templates

    Carreau authored
  11. @Carreau

    fix print css less

    Carreau authored
  12. @Carreau

    make file and other less

    Carreau authored
  13. @Carreau

    readd flexible-box-model

    Carreau authored
  14. @Carreau

    Add and remove boostra squashed commit

    Carreau authored
    To reduce branch size as bootstrap is huge
    
    add default bootstrap theme
    does not import code in bootstrap
    remove bootstrap
  15. @Carreau

    recompile css

    Carreau authored
  16. @Carreau

    fix cell type selector css

    Carreau authored
  17. @Carreau

    Fix project path url in dashbord

    Carreau authored
    Use Bootstrap breadcrumbs for later navigation purpouse
  18. @Carreau

    slight typography changes

    Carreau authored
  19. @Carreau

    clean css.

    Carreau authored
    remove some Ui-widget where unnecessary,
    
    Don't show toolbar on media-print
  20. @Carreau

    regenerate minified css

    Carreau authored
  21. @Carreau
  22. @Carreau

    fix css toolbar

    Carreau authored
  23. @Carreau

    regenerate css

    Carreau authored
  24. @Carreau
  25. @Carreau
  26. @Carreau

    remove trailing whitespace

    Carreau authored
  27. @Carreau

    fix a few css rules

    Carreau authored
    especially since the introduction of celltoolbar
  28. @Carreau

    add less.js in component.json

    Carreau authored
  29. @Carreau

    use less as a component

    Carreau authored
  30. @Carreau

    change to cluster list

    Carreau authored
    fix css and make engine input of type number
  31. @Carreau
  32. @Carreau

    fix body overflow on dashboard

    Carreau authored
  33. @Carreau

    fix stdr background

    Carreau authored
  34. @Carreau
  35. @Carreau

    condense rendered_html css

    Carreau authored
  36. @Carreau

    add css reference notebook

    Carreau authored
  37. @Carreau

    fix select width in toolbar

    Carreau authored
  38. @Carreau
  39. @Carreau
  40. @Carreau

    speedup tooltip

    Carreau authored
  41. @Carreau

    migrate from make to fabric

    Carreau authored
  42. @Carreau

    not minify option

    Carreau authored
Commits on Jan 29, 2013
  1. @Carreau

    duplicate bootstrap variable and start tweek

    Carreau authored
    set default font size to 13
  2. @Carreau
  3. @Carreau

    fix tooltip

    Carreau authored
  4. @Carreau

    fix color

    Carreau authored
  5. @Carreau

    fix alignemtn

    Carreau authored
Commits on Jan 30, 2013
  1. @Carreau

    some css fixes

    Carreau authored
  2. @Carreau

    fix celltoolbar css

    Carreau authored
  3. @Carreau

    fix global font size

    Carreau authored
  4. @Carreau

    regenerate css

    Carreau authored
  5. @Carreau

    fix line below header

    Carreau authored
  6. @Carreau

    move ref css ipynb

    Carreau authored
  7. @Carreau
  8. @Carreau

    regen css

    Carreau authored
  9. @Carreau

    re-fix cluster list

    Carreau authored
  10. @Carreau

    use super in templates

    Carreau authored
Commits on Jan 31, 2013
  1. @Carreau
  2. @Carreau

    fix mdcell background color

    Carreau authored
Something went wrong with that request. Please try again.