SageNB -- Change table layouts to CSS layouts

[TimDumol]

Changing the table layouts to CSS layouts will make it easier to make future edits, and will pave the path to user styling of the notebook.

CC: @williamstein @qed777

Component: notebook

Keywords: sagenb notebook

Author: Tim Dumol

Reviewer: Mitesh Patel

Merged: sagenb-0.5

Issue created by migration from https://trac.sagemath.org/ticket/7269

[TimDumol]

Reduces/replaces table layouts with css layouts. Also cleans up the top bar template to be shared among all the templates.

[TimDumol]

comment:1

Attachment: trac_7269-table-reduction.patch.gz

This should do the job.

[qed777]

comment:2

Notes from "functional tests:"

• "Report a Problem," which now appears on more pages, appears to be broken on some.
• "Toggle" seems to be broken.
• Should a "Copy of" a docbrowser worksheet include default.css? Should we strip the copy of the sidebar, header, footer, etc.?

I try to take a closer look at the patch itself tomorrow.

[qed777]

comment:3

Odds and ends:

• Should we mark notebook/user_controls.tmpl for deletion?
• Should we fold in the key parts of switch the notebook's templating system to Jinja2 #7249's Jinja2 migration patch?

Out of curiousity:

• What is backwards for?
• Has anyone seen a inheritance diagram generator for HTML templates?
• Could we unify two or more of accounts_settings.css, user_management.css, and registration.css for a common user/admin settings theme?

I'll try to look at main.css tomorrow...

[TimDumol]

comment:4

Replying to @qed777:

Odds and ends:

• Should we mark notebook/user_controls.tmpl for deletion?

Yes. I forgot to do so.

• Should we fold in the key parts of switch the notebook's templating system to Jinja2 #7249's Jinja2 migration patch?

Yes. I'll do that now.

Out of curiousity:

• What is backwards for?

I haven't an idea. I just copied that from the old code.

• Has anyone seen a inheritance diagram generator for HTML templates?

No, but that would be simply awesome.

• Could we unify two or more of accounts_settings.css, user_management.css, and registration.css for a common user/admin settings theme?

I actually planned to do a fair bit of changes to the structure (use inheritance instead of includes, etc.), but I think it would be better to put it in another ticket.

I'll try to look at main.css tomorrow...

I actually just copied the old main.css and put it through css2sass so I could edit it in SASS [1] and Compass [2]. I find it much easier to edit CSS that way -- just ask if you want to see the SASS source files. It's just a pity that SASS is Ruby-based, and the only Python alternative (CleverCSS) lacks many of the features and community support that SASS has.

[1] http://sass-lang.com/

[2] http://wiki.github.com/chriseppstein/compass

[TimDumol]

comment:5

Apparently, backwards makes links go to the parent ("../foo" instead of "foo").

[TimDumol]

Fixed the "Report a Problem" and "Toggle" links. Removed user_controls.tmpl. Added changes from #7269. Apply this patch only.

[TimDumol]

Attachment: trac_7269-table-reduction.2.patch.gz

Attachment: trac_7269-table-reduction.2.2.patch.gz

Fixed the "Report a Problem" and "Toggle" links. Removed user_controls.tmpl. Added changes from #7249. Apply this patch only.

[TimDumol]

comment:6

The Toggle link problem was caused by a changed selector. Report a problem was due to lack of the JS libraries on certain pages. Both are now fixed.

[TimDumol]

Attachment: trac_7269-table-reduction.3.patch.gz

Fixed "None" value in search box due to Jinja2 migration.

[TimDumol]

Removed an escape that was no longer needed.

[TimDumol]

Attachment: trac_7269-table-reduction.4.patch.gz

Attachment: trac_7269-table-reduction.5.patch.gz

Added parentheses to macro actions (needed for Jinja2 migration)

[TimDumol]

Work Issues: Bugs on some pages.

[qed777]

comment:8

Also:

• "Log," "Report a Problem," and "Help" don't work on the main Documentation/Help page.
• The current Account settings, Error, Sign in, and Sign up pages don't need to load any libraries, I think.
• The Sage logo on the Sign up page has a border in Firefox.
• The Upload worksheet and Upload/Create data file pages use form.submit() instead of type="submit", but these are probably not important.

Thanks for mentioning SASS and Compass! Should we add the .sass files to the repository, to make it easier update the stylesheets in the future?

Reminder to self: Rebase #4714's "jsmath_init" patch.

[qed777]

comment:9

On the JS functions (this is mainly for future reference):

• Active, Archived, and Deleted Worksheets; Published Worksheets for logged-in users; and Upload Worksheet can work with

history_window
help
bugreport
search_worksheets_enter_pressed
search_worksheets
archive_button
delete_button
stop_worksheets_button
download_worksheets_button
set_worksheet_list_checks
make_active_button
empty_trash

• Published Worksheets for anonymous users needs just

search_worksheets_enter_pressed
search_worksheets

[qed777]

comment:10

On the JS functions (continued):

• Edit, Text, Undo, Share, Publish, Upload/Create Data File appear to need

server_ping_while_alive
jmolInitialize
jmolSetCallback
history_window
help
bugreport
rename_worksheet
save_worksheet - empty
save_worksheet_and_close - empty
worksheet_discard
go_option
upload_worksheet_button
new_worksheet
download_worksheet
print_worksheet
copy_worksheet
delete_worksheet
interrupt
restart_sage
evaluate_all
hide_all
show_all
delete_all_output
slide_mode
cell_mode
handle_data_menu
go_system_select
pretty_print_check
edit_worksheet
slide_next
slide_last
slide_first
slide_prev

but I think we can drop Jmol, jsMath, TinyMCE, sage3d, etc., and any cell-related functions.

This might seem like too much, but I think it's useful to optimize the JS (and make it modular) just as you've done and are doing for HTML and CSS. Remote embeds (cf. #6855), in particular, may only need a streamlined library.

[TimDumol]

comment:11

Replying to @qed777:

Also:

• "Log," "Report a Problem," and "Help" don't work on the main Documentation/Help page.
• The current Account settings, Error, Sign in, and Sign up pages don't need to load any libraries, I think.
• The Sage logo on the Sign up page has a border in Firefox.
• The Upload worksheet and Upload/Create data file pages use form.submit() instead of type="submit", but these are probably not important.

Thanks for mentioning SASS and Compass! Should we add the .sass files to the repository, to make it easier update the stylesheets in the future?

Reminder to self: Rebase #4714's "jsmath_init" patch.

I can do so. I'll also put instructions on using SASS + Compass.

[qed777]

comment:12

Sphinx generates the CSS directives "scraped directly from Pygments" (i.e., pygments.css) when the docs are built. If we use a different HTML theme (via pygments_style in conf.py or in theme.conf, cf. #6673), we'll need to regenerate the CSS. I'm not sure about the best way to do this with SASS.

[TimDumol]

comment:13

How often/when will the HTML theme be changed? Does main.css have to be regenerated on the user-end, or during development?

If it is to be changed on the user-end, @importing pygments.css on main.css would be the best choice. Otherwise, using css2sass on pygments.css and @importing it on main.sass would be more efficient.

[TimDumol]

Attachment: trac_7269-table-reduction.10.patch.gz

Aligns the username, removes the Jinja2 migration, deletes some obsolete files.

[qed777]

Changed work issues from Bugs on some pages. to none

[qed777]

comment:25

To note, ws_list.js is the default js include, and so was already included in the Help and Log pages.

Oops. I apologize for this. I'm about to attach V11, which

• May make the top bar display better in narrow windows or those with large fonts.
• ttile --> title in top_bar.html.
• Adds a tr to worksheet_listing.html (WebKit error).
• Fixes failed doctests in template.py:
• Restores the previous template.py doctests.
• Adds '# not tested' to the Jinja2 tests.
• Fixes a failed doctest in notebook.py.

[qed777]

Top bar tweaks and doctest fixes. Replaces previous.

[qed777]

Attachment: trac_7269-table-reduction.11.patch.gz

Attachment: trac_7269-table-reduction.12.patch.gz

Input cell tweaks. Include jQuery just once. Replaces previous.

[qed777]

Reviewer: Mitesh Patel

[qed777]

comment:26

V12:

• Removes the jQuery include from a few pages, since it's now included in base.html. Including it twice sometimes caused a "mod-2" problem in Firefox --- the browser would claim that (and act as if) the resource jquery-1.3.2.min.js was missing.

• Tweaks input cell padding so that text does not move by a pixel on focus or blur (I hope). Text is still very likely to move when a cell is focused for the first time after reloading a page, since the sizing algorithms in cell.py and notebook_lib.js are different.

Someone should review my changes, of course, and perhaps also comment on the slightly changed layouts. I think the button/toolbars wrap differently than before, e.g., when the browser width is narrow and/or the font size is large. Does this cause problems on mobiles or when giving presentations?

Positive review! This is great work! I'm still quite new to SASS and Compass, but it seems that they'll make it much easier to edit and manage SageNB stylesheets.

By the way, can we use SASS, Compass, and/or another tool to find unused CSS directives?

[qed777]

Attachment: trac_7269-table-reduction.13.patch.gz

Apply #7811 to ws_list.js. Replaces previous.

[qed777]

comment:27

V13 just applies #7811 to ws_list.js. I believe we still use notebook_lib.js for logged in users, but I've made the change, for the sake of completeness. If it's OK, I'd like to postpone "subtracting" ws_list.js from notebook_lib.js until after published interacts (cf. #6855) are enabled.

[qed777]

Rebase vs. #7811 v2. Replaces previous.

[williamstein]

comment:28

Attachment: trac_7269-table-reduction.14.patch.gz

I can't merge this into sagenb-0.4.8 (which I'm about to release). Please rebase it once sage-4.3.1.alpha0 comes out with this new sagenb. Thanks!

applying trac_7269-table-reduction.14.patch
patching file sagenb/notebook/notebook.py
Hunk #2 succeeded at 950 with fuzz 2 (offset 3 lines).
Hunk #3 FAILED at 1265
Hunk #4 succeeded at 1334 with fuzz 2 (offset 9 lines).
Hunk #5 succeeded at 1407 with fuzz 1 (offset 9 lines).
Hunk #6 succeeded at 1441 with fuzz 1 (offset 9 lines).
Hunk #7 FAILED at 1467
Hunk #8 succeeded at 1486 with fuzz 1 (offset 9 lines).
Hunk #9 succeeded at 1589 with fuzz 1 (offset 9 lines).
Hunk #10 FAILED at 1608
Hunk #11 succeeded at 1651 with fuzz 1 (offset 9 lines).
Hunk #12 FAILED at 1706
Hunk #13 succeeded at 1748 with fuzz 1 (offset 10 lines).
Hunk #14 FAILED at 1757
5 out of 14 hunks FAILED -- saving rejects to file sagenb/notebook/notebook.py.rej
patching file sagenb/notebook/twist.py
Hunk #7 succeeded at 960 with fuzz 2 (offset 2 lines).
patching file sagenb/notebook/worksheet.py
Hunk #1 FAILED at 1712
Hunk #2 FAILED at 1763
Hunk #3 FAILED at 2300
Hunk #4 succeeded at 2442 with fuzz 1 (offset 87 lines).
Hunk #5 succeeded at 2458 with fuzz 1 (offset 87 lines).
3 out of 6 hunks FAILED -- saving rejects to file sagenb/notebook/worksheet.py.rej
abort: patch failed to apply

[TimDumol]

rebased vs sagenb-0.4.9

[TimDumol]

comment:29

Attachment: trac_7269-table-reduction.15.patch.gz

Rebased version posted.

[qed777]

comment:30

Can you try applying #7650 first, then V14? That should give just one, ignorable failure and much less "fuzz". I apologize for not being more explicit about this dependency.

[qed777]

comment:31

Of course, this assumes #7650 is reviewed.

[williamstein]

comment:32

Merged into sagenb-0.5. I was able to apply trac_7269-table-reduction.15.patch just fine without merging in #7650 first. Yeah. So this is in and pushed to the official repo.

[sagetrac-mvngu]

Merged: sagenb-0.5