mirror of
https://github.com/jupyter/notebook.git
synced 2025-01-12 11:45:38 +08:00
Starting to refactor the notebook layout
This commit is contained in:
Brian E. Granger
parent
861a481f29
commit
d99e820c94
@ -69,6 +69,7 @@ body {
|
||||
right: 0px;
|
||||
top: 0px;
|
||||
bottom: 0px;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
div#wrapper {
|
||||
@ -79,7 +80,7 @@ div#wrapper {
|
||||
|
||||
span#ipython_notebook h1 {
|
||||
font-family: Verdana, "Helvetica Neue", Arial, Helvetica, Geneva, sans-serif;
|
||||
font-size: 26pt;
|
||||
font-size: 22pt;
|
||||
padding: 10px;
|
||||
margin: 10px;
|
||||
}
|
||||
@ -107,13 +108,31 @@ span#kernel_status {
|
||||
color: black;
|
||||
}
|
||||
|
||||
div.notebook {
|
||||
/* This is a trick from Google Docs. We set the height artificially low
|
||||
and set overflow-y: auto to force scrolling of this dev when needed,
|
||||
but prevent the browser window from scrolling. Crazy hack */
|
||||
height: 15px;
|
||||
div#notebook_app {
|
||||
}
|
||||
|
||||
div#left_panel {
|
||||
width: 200px;
|
||||
overflow-y: auto;
|
||||
overflow-x: hidden;
|
||||
}
|
||||
|
||||
div#pager_splitter {
|
||||
height: 7px;
|
||||
}
|
||||
|
||||
div#left_panel_splitter {
|
||||
width: 7px;
|
||||
}
|
||||
|
||||
div#pager {
|
||||
height: 200px;
|
||||
overflow: auto;
|
||||
|
||||
}
|
||||
|
||||
div#notebook {
|
||||
overflow-y: scroll;
|
||||
overflow-x: auto;
|
||||
padding: 0px 40px;
|
||||
background-color: white;
|
||||
font-size: 12pt;
|
||||
@ -121,7 +140,6 @@ div.notebook {
|
||||
|
||||
.monospace-font {
|
||||
font-family: monospace;
|
||||
/* font-family: Monaco, Consolas, "DejaVu Sans Mono", "Bitstream Vera Sans Mono", "Courier New", monospace;*/
|
||||
font-size: 12pt;
|
||||
}
|
||||
|
||||
|
||||
@ -7,7 +7,41 @@
|
||||
$(document).ready(function () {
|
||||
|
||||
$('div#wrapper').addClass('vbox border-box-sizing')
|
||||
$('div.notebook').addClass('box-flex1 border-box-sizing')
|
||||
$('div#notebook_app').addClass('hbox box-flex1 border-box-sizing')
|
||||
$('div#left_panel').addClass('vbox border-box-sizing ui-widget ui-widget-content')
|
||||
$('div#pager_splitter').addClass('border-box-sizing ui-widget ui-widget-header')
|
||||
$('div#notebook_panel').addClass('vbox box-flex1 border-box-sizing ui-widget ui-widget-content')
|
||||
$('div#notebook').addClass('vbox box-flex1 border-box-sizing')
|
||||
$('div#left_panel_splitter').addClass('border-box-sizing ui-widget ui-widget-header')
|
||||
$('div#pager').addClass('border-box-sizing')
|
||||
|
||||
$('div#pager_splitter').click(function () {
|
||||
$('div#pager').toggle('fast');
|
||||
});
|
||||
|
||||
$('div#pager_splitter').hover(
|
||||
function () {
|
||||
$('div#pager_splitter').addClass('ui-state-hover');
|
||||
},
|
||||
function () {
|
||||
$('div#pager_splitter').removeClass('ui-state-hover');
|
||||
}
|
||||
);
|
||||
|
||||
$('div#pager').hide();
|
||||
|
||||
$('div#left_panel_splitter').click(function () {
|
||||
$('div#left_panel').toggle('fast');
|
||||
});
|
||||
|
||||
$('div#left_panel_splitter').hover(
|
||||
function () {
|
||||
$('div#left_panel_splitter').addClass('ui-state-hover');
|
||||
},
|
||||
function () {
|
||||
$('div#left_panel_splitter').removeClass('ui-state-hover');
|
||||
}
|
||||
);
|
||||
|
||||
MathJax.Hub.Config({
|
||||
tex2jax: {
|
||||
@ -20,7 +54,7 @@ $(document).ready(function () {
|
||||
}
|
||||
});
|
||||
|
||||
IPython.notebook = new IPython.Notebook('div.notebook');
|
||||
IPython.notebook = new IPython.Notebook('div#notebook');
|
||||
IPython.notebook.insert_code_cell_after();
|
||||
|
||||
$("#menu_tabs").tabs();
|
||||
|
||||
@ -32,65 +32,21 @@
|
||||
<div id="wrapper">
|
||||
|
||||
<div id="header">
|
||||
<span id="ipython_notebook"><h1>[I]:Python Notebook</h1></span>
|
||||
<span id="ipython_notebook"><h1>IPython Notebook</h1></span>
|
||||
</div>
|
||||
|
||||
<div id="notebook_app">
|
||||
|
||||
<div id="tools">
|
||||
|
||||
<div id="menu_tabs">
|
||||
<span id="kernel_status">Idle</span>
|
||||
<ul>
|
||||
<li><a href="#cell_tab">Cell</a></li>
|
||||
<li><a href="#kernel_tab">Kernel</a></li>
|
||||
<li><a href="#help_tab">Help</a></li>
|
||||
</ul>
|
||||
<div id="cell_tab">
|
||||
<span id="cell_toolbar">
|
||||
<span id="move_cell">
|
||||
<button id="move_up">Move up</button>
|
||||
<button id="move_down">Move down</button>
|
||||
</span>
|
||||
<span id="insert_delete">
|
||||
<button id="insert_cell_before">Before</button>
|
||||
<button id="insert_cell_after">After</button>
|
||||
<button id="delete_cell">Delete</button>
|
||||
</span>
|
||||
<span id="cell_type">
|
||||
<button id="to_code">Code</button>
|
||||
<button id="to_text">Text</button>
|
||||
</span>
|
||||
<span id="sort">
|
||||
<button id="sort_cells">Sort</button>
|
||||
</span>
|
||||
<span id="toggle">
|
||||
<button id="collapse">Collapse</button>
|
||||
<button id="expand">Expand</button>
|
||||
</span>
|
||||
</span>
|
||||
<div id="left_panel"></div>
|
||||
<div id="left_panel_splitter"></div>
|
||||
<div id="notebook_panel">
|
||||
<div id="notebook"></div>
|
||||
<div id="pager_splitter"></div>
|
||||
<div id="pager">This is a test</div>
|
||||
</div>
|
||||
<div id="kernel_tab">
|
||||
<span id="kernel_toolbar">
|
||||
<button id="interrupt_kernel">Interrupt</button>
|
||||
<button id="restart_kernel">Restart</button>
|
||||
</span>
|
||||
</div>
|
||||
<div id="help_tab">
|
||||
<span id="help_toolbar">
|
||||
<button><a href="http://docs.python.org" target="_blank">Python</a></button>
|
||||
<button><a href="http://ipython.github.com/ipython-doc/dev/index.html" target="_blank">IPython</a></button>
|
||||
<button><a href="http://matplotlib.sourceforge.net/" target="_blank">Matplotlib</a></button>
|
||||
<button><a href="http://docs.scipy.org/doc/numpy/reference/" target="_blank">NumPy</a></button>
|
||||
<button><a href="http://docs.scipy.org/doc/scipy/reference/" target="_blank">SciPy</a></button>
|
||||
<button><a href="http://docs.sympy.org/dev/index.html" target="_blank">SymPy</a></button>
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
<div class="notebook"></div>
|
||||
|
||||
</div>
|
||||
|
||||
<script src="static/jquery/js/jquery-1.5.1.min.js" type="text/javascript" charset="utf-8"></script>
|
||||
@ -110,3 +66,58 @@
|
||||
</body>
|
||||
|
||||
</html>
|
||||
|
||||
|
||||
<!--<div id="tools">-->
|
||||
|
||||
<!--<div id="menu_tabs">-->
|
||||
<!-- <span id="kernel_status">Idle</span>-->
|
||||
<!-- <ul>-->
|
||||
<!-- <li><a href="#cell_tab">Cell</a></li>-->
|
||||
<!-- <li><a href="#kernel_tab">Kernel</a></li>-->
|
||||
<!-- <li><a href="#help_tab">Help</a></li>-->
|
||||
<!-- </ul>-->
|
||||
<!-- <div id="cell_tab">-->
|
||||
<!-- <span id="cell_toolbar">-->
|
||||
<!-- <span id="move_cell">-->
|
||||
<!-- <button id="move_up">Move up</button>-->
|
||||
<!-- <button id="move_down">Move down</button>-->
|
||||
<!-- </span>-->
|
||||
<!-- <span id="insert_delete">-->
|
||||
<!-- <button id="insert_cell_before">Before</button>-->
|
||||
<!-- <button id="insert_cell_after">After</button>-->
|
||||
<!-- <button id="delete_cell">Delete</button>-->
|
||||
<!-- </span>-->
|
||||
<!-- <span id="cell_type">-->
|
||||
<!-- <button id="to_code">Code</button>-->
|
||||
<!-- <button id="to_text">Text</button>-->
|
||||
<!-- </span>-->
|
||||
<!-- <span id="sort">-->
|
||||
<!-- <button id="sort_cells">Sort</button>-->
|
||||
<!-- </span>-->
|
||||
<!-- <span id="toggle">-->
|
||||
<!-- <button id="collapse">Collapse</button>-->
|
||||
<!-- <button id="expand">Expand</button>-->
|
||||
<!-- </span>-->
|
||||
<!-- </span>-->
|
||||
<!-- </div>-->
|
||||
<!-- <div id="kernel_tab">-->
|
||||
<!-- <span id="kernel_toolbar">-->
|
||||
<!-- <button id="interrupt_kernel">Interrupt</button>-->
|
||||
<!-- <button id="restart_kernel">Restart</button>-->
|
||||
<!-- </span>-->
|
||||
<!-- </div>-->
|
||||
<!-- <div id="help_tab">-->
|
||||
<!-- <span id="help_toolbar">-->
|
||||
<!-- <button><a href="http://docs.python.org" target="_blank">Python</a></button>-->
|
||||
<!-- <button><a href="http://ipython.github.com/ipython-doc/dev/index.html" target="_blank">IPython</a></button>-->
|
||||
<!-- <button><a href="http://matplotlib.sourceforge.net/" target="_blank">Matplotlib</a></button>-->
|
||||
<!-- <button><a href="http://docs.scipy.org/doc/numpy/reference/" target="_blank">NumPy</a></button>-->
|
||||
<!-- <button><a href="http://docs.scipy.org/doc/scipy/reference/" target="_blank">SciPy</a></button>-->
|
||||
<!-- <button><a href="http://docs.sympy.org/dev/index.html" target="_blank">SymPy</a></button>-->
|
||||
<!-- </span>-->
|
||||
<!-- </div>-->
|
||||
<!--</div>-->
|
||||
|
||||
<!--</div>-->
|
||||
|
||||
|
||||
Loading…
Reference in New Issue
Block a user