##// END OF EJS Templates
Starting to refactor the notebook layout
Brian E. Granger -
Show More
@@ -69,6 +69,7 b' body {'
69 69 right: 0px;
70 70 top: 0px;
71 71 bottom: 0px;
72 overflow: hidden;
72 73 }
73 74
74 75 div#wrapper {
@@ -79,7 +80,7 b' div#wrapper {'
79 80
80 81 span#ipython_notebook h1 {
81 82 font-family: Verdana, "Helvetica Neue", Arial, Helvetica, Geneva, sans-serif;
82 font-size: 26pt;
83 font-size: 22pt;
83 84 padding: 10px;
84 85 margin: 10px;
85 86 }
@@ -107,13 +108,31 b' span#kernel_status {'
107 108 color: black;
108 109 }
109 110
110 div.notebook {
111 /* This is a trick from Google Docs. We set the height artificially low
112 and set overflow-y: auto to force scrolling of this dev when needed,
113 but prevent the browser window from scrolling. Crazy hack */
114 height: 15px;
111 div#notebook_app {
112 }
113
114 div#left_panel {
115 width: 200px;
115 116 overflow-y: auto;
116 overflow-x: hidden;
117 }
118
119 div#pager_splitter {
120 height: 7px;
121 }
122
123 div#left_panel_splitter {
124 width: 7px;
125 }
126
127 div#pager {
128 height: 200px;
129 overflow: auto;
130
131 }
132
133 div#notebook {
134 overflow-y: scroll;
135 overflow-x: auto;
117 136 padding: 0px 40px;
118 137 background-color: white;
119 138 font-size: 12pt;
@@ -121,7 +140,6 b' div.notebook {'
121 140
122 141 .monospace-font {
123 142 font-family: monospace;
124 /* font-family: Monaco, Consolas, "DejaVu Sans Mono", "Bitstream Vera Sans Mono", "Courier New", monospace;*/
125 143 font-size: 12pt;
126 144 }
127 145
@@ -7,7 +7,41 b''
7 7 $(document).ready(function () {
8 8
9 9 $('div#wrapper').addClass('vbox border-box-sizing')
10 $('div.notebook').addClass('box-flex1 border-box-sizing')
10 $('div#notebook_app').addClass('hbox box-flex1 border-box-sizing')
11 $('div#left_panel').addClass('vbox border-box-sizing ui-widget ui-widget-content')
12 $('div#pager_splitter').addClass('border-box-sizing ui-widget ui-widget-header')
13 $('div#notebook_panel').addClass('vbox box-flex1 border-box-sizing ui-widget ui-widget-content')
14 $('div#notebook').addClass('vbox box-flex1 border-box-sizing')
15 $('div#left_panel_splitter').addClass('border-box-sizing ui-widget ui-widget-header')
16 $('div#pager').addClass('border-box-sizing')
17
18 $('div#pager_splitter').click(function () {
19 $('div#pager').toggle('fast');
20 });
21
22 $('div#pager_splitter').hover(
23 function () {
24 $('div#pager_splitter').addClass('ui-state-hover');
25 },
26 function () {
27 $('div#pager_splitter').removeClass('ui-state-hover');
28 }
29 );
30
31 $('div#pager').hide();
32
33 $('div#left_panel_splitter').click(function () {
34 $('div#left_panel').toggle('fast');
35 });
36
37 $('div#left_panel_splitter').hover(
38 function () {
39 $('div#left_panel_splitter').addClass('ui-state-hover');
40 },
41 function () {
42 $('div#left_panel_splitter').removeClass('ui-state-hover');
43 }
44 );
11 45
12 46 MathJax.Hub.Config({
13 47 tex2jax: {
@@ -20,7 +54,7 b' $(document).ready(function () {'
20 54 }
21 55 });
22 56
23 IPython.notebook = new IPython.Notebook('div.notebook');
57 IPython.notebook = new IPython.Notebook('div#notebook');
24 58 IPython.notebook.insert_code_cell_after();
25 59
26 60 $("#menu_tabs").tabs();
@@ -32,65 +32,21 b''
32 32 <div id="wrapper">
33 33
34 34 <div id="header">
35 <span id="ipython_notebook"><h1>[I]:Python Notebook</h1></span>
35 <span id="ipython_notebook"><h1>IPython Notebook</h1></span>
36 36 </div>
37 37
38 <div id="notebook_app">
38 39
39 <div id="tools">
40
41 <div id="menu_tabs">
42 <span id="kernel_status">Idle</span>
43 <ul>
44 <li><a href="#cell_tab">Cell</a></li>
45 <li><a href="#kernel_tab">Kernel</a></li>
46 <li><a href="#help_tab">Help</a></li>
47 </ul>
48 <div id="cell_tab">
49 <span id="cell_toolbar">
50 <span id="move_cell">
51 <button id="move_up">Move up</button>
52 <button id="move_down">Move down</button>
53 </span>
54 <span id="insert_delete">
55 <button id="insert_cell_before">Before</button>
56 <button id="insert_cell_after">After</button>
57 <button id="delete_cell">Delete</button>
58 </span>
59 <span id="cell_type">
60 <button id="to_code">Code</button>
61 <button id="to_text">Text</button>
62 </span>
63 <span id="sort">
64 <button id="sort_cells">Sort</button>
65 </span>
66 <span id="toggle">
67 <button id="collapse">Collapse</button>
68 <button id="expand">Expand</button>
69 </span>
70 </span>
71 </div>
72 <div id="kernel_tab">
73 <span id="kernel_toolbar">
74 <button id="interrupt_kernel">Interrupt</button>
75 <button id="restart_kernel">Restart</button>
76 </span>
77 </div>
78 <div id="help_tab">
79 <span id="help_toolbar">
80 <button><a href="http://docs.python.org" target="_blank">Python</a></button>
81 <button><a href="http://ipython.github.com/ipython-doc/dev/index.html" target="_blank">IPython</a></button>
82 <button><a href="http://matplotlib.sourceforge.net/" target="_blank">Matplotlib</a></button>
83 <button><a href="http://docs.scipy.org/doc/numpy/reference/" target="_blank">NumPy</a></button>
84 <button><a href="http://docs.scipy.org/doc/scipy/reference/" target="_blank">SciPy</a></button>
85 <button><a href="http://docs.sympy.org/dev/index.html" target="_blank">SymPy</a></button>
86 </span>
87 </div>
40 <div id="left_panel"></div>
41 <div id="left_panel_splitter"></div>
42 <div id="notebook_panel">
43 <div id="notebook"></div>
44 <div id="pager_splitter"></div>
45 <div id="pager">This is a test</div>
88 46 </div>
89 47
90 48 </div>
91 49
92 <div class="notebook"></div>
93
94 50 </div>
95 51
96 52 <script src="static/jquery/js/jquery-1.5.1.min.js" type="text/javascript" charset="utf-8"></script>
@@ -110,3 +66,58 b''
110 66 </body>
111 67
112 68 </html>
69
70
71 <!--<div id="tools">-->
72
73 <!--<div id="menu_tabs">-->
74 <!-- <span id="kernel_status">Idle</span>-->
75 <!-- <ul>-->
76 <!-- <li><a href="#cell_tab">Cell</a></li>-->
77 <!-- <li><a href="#kernel_tab">Kernel</a></li>-->
78 <!-- <li><a href="#help_tab">Help</a></li>-->
79 <!-- </ul>-->
80 <!-- <div id="cell_tab">-->
81 <!-- <span id="cell_toolbar">-->
82 <!-- <span id="move_cell">-->
83 <!-- <button id="move_up">Move up</button>-->
84 <!-- <button id="move_down">Move down</button>-->
85 <!-- </span>-->
86 <!-- <span id="insert_delete">-->
87 <!-- <button id="insert_cell_before">Before</button>-->
88 <!-- <button id="insert_cell_after">After</button>-->
89 <!-- <button id="delete_cell">Delete</button>-->
90 <!-- </span>-->
91 <!-- <span id="cell_type">-->
92 <!-- <button id="to_code">Code</button>-->
93 <!-- <button id="to_text">Text</button>-->
94 <!-- </span>-->
95 <!-- <span id="sort">-->
96 <!-- <button id="sort_cells">Sort</button>-->
97 <!-- </span>-->
98 <!-- <span id="toggle">-->
99 <!-- <button id="collapse">Collapse</button>-->
100 <!-- <button id="expand">Expand</button>-->
101 <!-- </span>-->
102 <!-- </span>-->
103 <!-- </div>-->
104 <!-- <div id="kernel_tab">-->
105 <!-- <span id="kernel_toolbar">-->
106 <!-- <button id="interrupt_kernel">Interrupt</button>-->
107 <!-- <button id="restart_kernel">Restart</button>-->
108 <!-- </span>-->
109 <!-- </div>-->
110 <!-- <div id="help_tab">-->
111 <!-- <span id="help_toolbar">-->
112 <!-- <button><a href="http://docs.python.org" target="_blank">Python</a></button>-->
113 <!-- <button><a href="http://ipython.github.com/ipython-doc/dev/index.html" target="_blank">IPython</a></button>-->
114 <!-- <button><a href="http://matplotlib.sourceforge.net/" target="_blank">Matplotlib</a></button>-->
115 <!-- <button><a href="http://docs.scipy.org/doc/numpy/reference/" target="_blank">NumPy</a></button>-->
116 <!-- <button><a href="http://docs.scipy.org/doc/scipy/reference/" target="_blank">SciPy</a></button>-->
117 <!-- <button><a href="http://docs.sympy.org/dev/index.html" target="_blank">SymPy</a></button>-->
118 <!-- </span>-->
119 <!-- </div>-->
120 <!--</div>-->
121
122 <!--</div>-->
123
General Comments 0
You need to be logged in to leave comments. Login now