From cda53215bace9bc546a6a1be755dcea29f765980 Mon Sep 17 00:00:00 2001 From: Jonathan Frederic Date: Wed, 17 Dec 2014 14:00:28 -0800 Subject: [PATCH] Improve edit app --- IPython/html/static/base/less/page.less | 2 +- IPython/html/static/base/less/variables.less | 8 ++++- IPython/html/static/edit/less/edit.less | 31 +++++++++++++++++-- IPython/html/static/edit/less/menubar.less | 18 ++++++++++- .../html/static/notebook/less/notebook.less | 15 +++++---- .../html/static/notebook/less/variables.less | 1 - IPython/html/templates/edit.html | 6 +++- IPython/html/templates/page.html | 1 + 8 files changed, 66 insertions(+), 16 deletions(-) diff --git a/IPython/html/static/base/less/page.less b/IPython/html/static/base/less/page.less index a383a3cc0..f5b1b1b6d 100644 --- a/IPython/html/static/base/less/page.less +++ b/IPython/html/static/base/less/page.less @@ -6,7 +6,7 @@ body { - background-color: white; + background-color: @body-bg; /* This makes sure that the body covers the entire window and needs to be in a different element than the display: box in wrapper below */ position: absolute; diff --git a/IPython/html/static/base/less/variables.less b/IPython/html/static/base/less/variables.less index d5a8f7785..578a10afb 100644 --- a/IPython/html/static/base/less/variables.less +++ b/IPython/html/static/base/less/variables.less @@ -43,4 +43,10 @@ label { @global-shadow: 0px 0px 12px 1px rgba(87, 87, 87, 0.2); @global-shadow-dark: 0px 0px 12px 1px rgba(87, 87, 87, 0.4); @page-header-padding: 20px; - +/* Make the page background atleast 100% the height of the view port */ +@page-backdrop-height: 100vh; +/* Make the page itself atleast 70% the height of the view port */ +@page-min-height: 70vh; +@page-backdrop-color: #EEE; +@page-color: @body-bg; +@page-padding: 15px; \ No newline at end of file diff --git a/IPython/html/static/edit/less/edit.less b/IPython/html/static/edit/less/edit.less index 072ffd5d4..73f56e102 100644 --- a/IPython/html/static/edit/less/edit.less +++ b/IPython/html/static/edit/less/edit.less @@ -1,9 +1,34 @@ -#texteditor-container { - border-bottom: 1px solid #ccc; -} #filename { font-size: 16pt; display: table; padding: 0px 5px; } + +#texteditor-backdrop { + padding-top: @page-header-padding; + padding-bottom: @page-header-padding; + + @media not print{ + min-height: @page-backdrop-height; + background-color: @page-backdrop-color; + } + + #texteditor-container { + .CodeMirror-gutter { + @media print { + background-color: @body-bg; + } + @media not print { + background-color: @page-color; + } + } + + @media not print{ + padding: @page-padding; + background-color : @page-color; + min-height: @page-min-height; + .box-shadow(@global-shadow); + } + } +} diff --git a/IPython/html/static/edit/less/menubar.less b/IPython/html/static/edit/less/menubar.less index f709333c5..ae21c34d4 100644 --- a/IPython/html/static/edit/less/menubar.less +++ b/IPython/html/static/edit/less/menubar.less @@ -11,4 +11,20 @@ // truncate mode-menu, so it doesn't get longer than the screen overflow: auto; max-height: 20em; -} \ No newline at end of file +} + +#current-mode { + margin-right: @padding-large-horizontal; +} + +.edit_app { + #header { + .box-shadow(@global-shadow); + } + + #menubar .navbar { + /* Use a negative 1 bottom margin, so the border overlaps the border of the + header */ + margin-bottom: -1px; + } +} diff --git a/IPython/html/static/notebook/less/notebook.less b/IPython/html/static/notebook/less/notebook.less index 91e96fb8d..c18710813 100644 --- a/IPython/html/static/notebook/less/notebook.less +++ b/IPython/html/static/notebook/less/notebook.less @@ -14,9 +14,10 @@ div#notebook_panel { margin: 0px; padding: 0px; .border-box-sizing(); - background-color: @notebook_dark_background; - /* Make the page background atleast 100% the height of the view port */ - min-height: 100vh; + @media not print { + background-color: @page-backdrop-color; + min-height: @page-backdrop-height; + } } div#notebook { font-size: @notebook_font_size; @@ -34,11 +35,9 @@ div#notebook { #notebook-container{ @media not print{ - padding: 15px; - border-color: @body-bg; - background-color : @body-bg; - /* Make the page itself atleast 70% the height of the view port */ - min-height: 70vh; + padding: @page-padding; + background-color : @page-color; + min-height: @page-min-height; .box-shadow(@global-shadow); } } diff --git a/IPython/html/static/notebook/less/variables.less b/IPython/html/static/notebook/less/variables.less index 67a0e7ea2..76d56398f 100644 --- a/IPython/html/static/notebook/less/variables.less +++ b/IPython/html/static/notebook/less/variables.less @@ -7,7 +7,6 @@ @light_border_color: darken(@cell_selected_background, 17%); @border_width: 1px; @notebook_font_size: 14px; -@notebook_dark_background: #EEE; @notebook_line_height: 20px; @code_line_height: 1.21429em; // changed from 1.231 to get 17px even @code_padding: 0.4em; // 5.6 px diff --git a/IPython/html/templates/edit.html b/IPython/html/templates/edit.html index fdf30ca0f..b4fbf31eb 100644 --- a/IPython/html/templates/edit.html +++ b/IPython/html/templates/edit.html @@ -10,6 +10,7 @@ {% block params %} +class="edit_app" data-base-url="{{base_url}}" data-file-path="{{file_path}}" @@ -75,12 +76,15 @@ data-file-path="{{file_path}}" +
+ {% endblock %} {% block site %} - +
+
{% endblock %} diff --git a/IPython/html/templates/page.html b/IPython/html/templates/page.html index 8e2ee8b09..53932cae7 100644 --- a/IPython/html/templates/page.html +++ b/IPython/html/templates/page.html @@ -105,6 +105,7 @@ {% block header %} {% endblock %} +