Refactoring templates and top level js/css organization.

IPython/frontend/html/notebook/static/css/login.css

@@ -0,0 +1,6 b''
+
+#main_app {
+    height: 100px;
+    width: 350px;
+    margin: 50px auto;
+}

IPython/frontend/html/notebook/static/css/logout.css

@@ -0,0 +1,7 b''
+
+#main_app {
+    height: 100px;
+    width: 200px;
+    margin: 50px auto;
+}
+

IPython/frontend/html/notebook/static/js/logoutmain.js

@@ -0,0 +1,20 b''
+//----------------------------------------------------------------------------
+//  Copyright (C) 2008-2011  The IPython Development Team
+//
+//  Distributed under the terms of the BSD License.  The full license is in
+//  the file COPYING, distributed as part of this software.
+//----------------------------------------------------------------------------
+
+//============================================================================
+// On document ready
+//============================================================================
+
+
+$(document).ready(function () {
+
+    IPython.page = new IPython.Page();
+    $('div#main_app').addClass('border-box-sizing ui-widget');
+    IPython.page.show();
+
+});
+

IPython/frontend/html/notebook/static/js/page.js

@@ -0,0 +1,44 b''
+//----------------------------------------------------------------------------
+//  Copyright (C) 2008-2011  The IPython Development Team
+//
+//  Distributed under the terms of the BSD License.  The full license is in
+//  the file COPYING, distributed as part of this software.
+//----------------------------------------------------------------------------
+
+//============================================================================
+// Global header/site setup.
+//============================================================================
+
+var IPython = (function (IPython) {
+
+    var Page = function () {
+        this.style();
+        this.bind_events();
+    };
+
+    Page.prototype.style = function () {
+        $('div#header').addClass('border-box-sizing').
+            addClass('ui-widget ui-widget-content').
+            css('border-top-style','none').
+            css('border-left-style','none').
+            css('border-right-style','none');
+        $('div#site').addClass('border-box-sizing')
+    };
+
+
+    Page.prototype.bind_events = function () {
+    };
+
+
+    Page.prototype.show = function () {
+        // The header and site divs start out hidden to prevent FLOUC.
+        // Main scripts should call this method after styling everything.
+        $('div#header').css('display','block');
+        $('div#site').css('display','block');
+    };
+
+    IPython.Page = Page;
+
+    return IPython;
+
+}(IPython));

IPython/frontend/html/notebook/static/js/pagemain.js

@@ -0,0 +1,19 b''
+//----------------------------------------------------------------------------
+//  Copyright (C) 2008-2011  The IPython Development Team
+//
+//  Distributed under the terms of the BSD License.  The full license is in
+//  the file COPYING, distributed as part of this software.
+//----------------------------------------------------------------------------
+
+//============================================================================
+// On document ready
+//============================================================================
+
+
+$(document).ready(function () {
+
+    IPython.page = new IPython.Page();
+    IPython.page.show();
+
+});
+

IPython/frontend/html/notebook/handlers.py

@@ -211,6 +211,7 b' class LoginHandler(AuthenticatedHandler):'
                 read_only=self.read_only,
                 logged_in=self.logged_in,
                 login_available=self.login_available,
+                base_project_url=self.application.ipython_app.base_project_url,
                 message=message
         )
 
@@ -246,6 +247,7 b' class LogoutHandler(AuthenticatedHandler):'
                     read_only=self.read_only,
                     logged_in=self.logged_in,
                     login_available=self.login_available,
+                    base_project_url=self.application.ipython_app.base_project_url,
                     message=message)
 
 

IPython/frontend/html/notebook/static/css/fbm.css

@@ -1,10 +1,4 b''
 
-.border-box-sizing {
-    box-sizing: border-box;
-    -moz-box-sizing: border-box;
-    -webkit-box-sizing: border-box;
-}
-
 /* Flexible box model classes */
 /* Taken from Alex Russell http://infrequently.org/2009/08/css-3-progress/ */
  
@@ -101,30 +95,3 b''
 	-moz-box-pack: center;
 	box-pack: center;
 }
-
-.message {
-    border-width: 1px;
-    border-style: solid;
-    text-align: center;
-    padding: 0.5em;
-    margin: 0.5em 0;
-}
-
-.message.error {
-    background-color: #FFD3D1;
-    border-color: red;
-}
-
-.message.warning {
-    background-color: #FFD09E;
-    border-color: orange;
-}
-
-.message.info {
-    background-color: #CBFFBA;
-    border-color: green;
-}
-
-#content_panel {
-    margin: 0.5em;
-}
  No newline at end of file

IPython/frontend/html/notebook/static/css/notebook.css

@@ -78,6 +78,14 b' span#notebook_name {'
     font-size: 85%;
 }
 
+
+div#main_app {
+    /* Initially hidden to prevent FLOUC */
+    display: none;
+    width: 100%;
+    position: relative;
+}
+
 span#quick_help_area {
     position: static;
     padding: 5px 0px;

IPython/frontend/html/notebook/static/css/page.css

@@ -14,7 +14,7 b' body {'
     right: 0px;
     top: 0px;
     bottom: 0px;
-    overflow: hidden;
+    overflow: visible;
 }
 
 
@@ -41,11 +41,9 b' span#ipython_notebook h1 img {'
     color: black;
 }
 
-div#main_app {
-    /* Initially hidden to prevent FLOUC */
+#site {
+    width: 100%
     display: none;
-    width: 100%;
-    position: relative;
 }
 
 /* We set the fonts by hand here to override the values in the theme */
@@ -63,11 +61,17 b' div#main_app {'
     font-size: 77%;
 }
 
+input.ui-button {
+    padding: 0.3em 0.9em;
+}
+
 span#login_widget {
     float: right;
 }
 
-/* generic class for hidden objects */
-.hidden {
-    display: none;
+.border-box-sizing {
+    box-sizing: border-box;
+    -moz-box-sizing: border-box;
+    -webkit-box-sizing: border-box;
 }
+

IPython/frontend/html/notebook/static/css/projectdashboard.css

@@ -5,46 +5,17 b''
  * Author: IPython Development Team
  */
 
-
-body {
-    background-color: white;
-    /* 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;
-    left: 0px;
-    right: 0px;
-    top: 0px;
-    bottom: 0px;
-    overflow: auto;
-}
-
-#left_panel {
+#main_app {
+    width: 920px;
+    margin: auto;
 }
 
-#drop_zone {
-    height: 200px;
-    width: 200px
-}
-
-#content_panel {
-    width: 600px;
-}
-
-#content_toolbar {
+#notebooks_toolbar {
     padding: 5px;
     height: 25px;
     line-height: 25px;
 }
 
-#header_border {
-    width: 100%;
-    height: 2px;
-}
-
-#app_hbox {
-    width: 100%;
-}
-
 #drag_info {
     float: left;
 }

IPython/frontend/html/notebook/static/js/loginmain.js

@@ -12,19 +12,11 b''
 
 $(document).ready(function () {
 
-    $('div#header').addClass('border-box-sizing');
-    $('div#header_border').addClass('border-box-sizing ui-widget ui-widget-content');
-
+    IPython.page = new IPython.Page();
+    $('input#login_submit').button();
     $('div#main_app').addClass('border-box-sizing ui-widget');
-    $('div#app_hbox').addClass('hbox');
-
-    $('div#left_panel').addClass('box-flex');
-    $('div#right_panel').addClass('box-flex');
-    $('input#signin').button();
-
-    // These have display: none in the css file and are made visible here to prevent FLOUC.
-    $('div#header').css('display','block');
-    $('div#main_app').css('display','block');
+    IPython.page.show();
+    $('input#password_input').focus();
 
 });
 

IPython/frontend/html/notebook/static/js/loginwidget.js

@@ -24,6 +24,8 b' var IPython = (function (IPython) {'
         this.element.find('button#logout').button();
         this.element.find('button#login').button();
     };
+
+
     LoginWidget.prototype.bind_events = function () {
         var that = this;
         this.element.find("button#logout").click(function () {

IPython/frontend/html/notebook/static/js/notebooklist.js

@@ -21,7 +21,6 b' var IPython = (function (IPython) {'
     };
 
     NotebookList.prototype.style = function () {
-        this.element.addClass('ui-widget ui-widget-content');
         $('div#project_name').addClass('ui-widget ui-widget-header');
     };
 

IPython/frontend/html/notebook/static/js/notebookmain.js

@@ -99,7 +99,6 b' $(document).ready(function () {'
         // hide various elements from read-only view
         $('div#pager').remove();
         $('div#pager_splitter').remove();
-        $('span#login_widget').removeClass('hidden');
 
         // set the notebook name field as not modifiable
         $('#notebook_name').attr('disabled','disabled')

IPython/frontend/html/notebook/static/js/projectdashboardmain.js

@@ -12,31 +12,21 b''
 
 $(document).ready(function () {
 
-    $('div#header').addClass('border-box-sizing');
-    $('div#header_border').addClass('border-box-sizing ui-widget ui-widget-content');
+    IPython.page = new IPython.Page();
 
     $('div#main_app').addClass('border-box-sizing ui-widget');
-    $('div#app_hbox').addClass('hbox');
-
-    $('div#content_toolbar').addClass('ui-widget ui-helper-clearfix');    
-
+    $('div#notebooks_toolbar').addClass('ui-widget ui-helper-clearfix');    
     $('#new_notebook').button().click(function (e) {
         window.open($('body').data('baseProjectUrl')+'new');
     });
 
-    $('div#left_panel').addClass('box-flex');
-    $('div#right_panel').addClass('box-flex');
-
-    IPython.read_only = $('meta[name=read_only]').attr("content") == 'True';
+    IPython.read_only = $('body').data('readOnly') === 'True';
     IPython.notebook_list = new IPython.NotebookList('div#notebook_list');
     IPython.login_widget = new IPython.LoginWidget('span#login_widget');
 
     IPython.notebook_list.load_list();
 
-    // These have display: none in the css file and are made visible here to prevent FLOUC.
-    $('div#header').css('display','block');
-    $('div#main_app').css('display','block');
-
+    IPython.page.show();
 
 });
 

IPython/frontend/html/notebook/templates/login.html

@@ -1,26 +1,42 b''
-{% extends layout.html %}
+{% extends page.html %}
 
-{% block content_panel %}
+{% block stylesheet %}
 
-    {% if login_available %}
+<link rel="stylesheet" href="{{static_url("css/login.css") }}" type="text/css"/>
+
+{% end %}
+
+
+{% block login_widget %}
+{% end %}
+
+
+{% block site %}
 
+<div id="main_app">
+
+    {% if login_available %}
     <form action="/login?next={{url_escape(next)}}" method="post">
-        Password: <input type="password" name="password" id="focus">
-        <input type="submit" value="Sign in" id="signin">
+        Password: <input type="password" name="password" id="password_input">
+        <input type="submit" value="Log in" id="login_submit">
     </form>
+    {% end %}
 
+    {% if message %}
+      {% for key in message %}
+        <div class="message {{key}}">
+           {{message[key]}}
+        </div>
+      {% end %}
     {% end %}
 
-{% end %}
+<div/>
 
-{% block login_widget %}
 {% end %}
 
+
 {% block script %}
-<script type="text/javascript">
-  $(document).ready(function() {
-    IPython.login_widget = new IPython.LoginWidget('span#login_widget');
-    $('#focus').focus();
-  });
-</script>
+
+<script src="{{static_url("js/loginmain.js") }}" type="text/javascript" charset="utf-8"></script>
+
 {% end %}

IPython/frontend/html/notebook/templates/logout.html

@@ -1,28 +1,40 b''
-{% extends layout.html %}
+{% extends page.html %}
 
-{% block content_panel %}
-  <ul>
-    {% if read_only or not login_available %}
+{% block stylesheet %}
 
-    Proceed to the <a href="/">list of notebooks</a>.</li>
+<link rel="stylesheet" href="{{static_url("css/logout.css") }}" type="text/css"/>
 
-    {% else %}
+{% end %}
+
+
+{% block login_widget %}
+{% end %}
+
+{% block site %}
 
-    Proceed to the <a href="/login">login page</a>.</li>
+<div id="main_app">
 
+    {% if message %}
+      {% for key in message %}
+        <div class="message {{key}}">
+           {{message[key]}}
+        </div>
+      {% end %}
     {% end %}
 
-  </ul>
+    {% if read_only or not login_available %}
+    Proceed to the <a href="/">dashboard</a>.
+    {% else %}
+    Proceed to the <a href="/login">login page</a>.
+    {% end %}
 
-{% end %}
 
-{% block login_widget %}
+<div/>
+
 {% end %}
 
 {% block script %}
-<script type="text/javascript">
-  $(document).ready(function() {
-    IPython.login_widget = new IPython.LoginWidget('span#login_widget');
-  });
-</script>
+
+<script src="{{static_url("js/logoutmain.js") }}" type="text/javascript" charset="utf-8"></script>
+
 {% end %}

IPython/frontend/html/notebook/templates/page.html

@@ -8,8 +8,8 b''
 
     <link rel="stylesheet" href="{{static_url("jquery/css/themes/base/jquery-ui.min.css") }}" type="text/css" />
     <link rel="stylesheet" href="{{static_url("css/boilerplate.css") }}" type="text/css" />
-    <link rel="stylesheet" href="{{static_url("css/layout.css") }}" type="text/css" />
-    <link rel="stylesheet" href="{{static_url("css/base.css") }}" type="text/css"/>
+    <link rel="stylesheet" href="{{static_url("css/fbm.css") }}" type="text/css" />
+    <link rel="stylesheet" href="{{static_url("css/page.css") }}" type="text/css"/>
     {% block stylesheet %}
     {% end %}
 
@@ -21,7 +21,7 b''
 <body {% block params %}{% end %}>
 
 <div id="header">
-    <span id="ipython_notebook"><h1><img src='{{static_url("ipynblogo.png") }}' alt='IPython Notebook'/></h1></span>
+    <span id="ipython_notebook"><h1><a href={{base_project_url}} alt='dashboard'><img src='{{static_url("ipynblogo.png") }}' alt='IPython Notebook'/></a></h1></span>
 
     {% block login_widget %}
 
@@ -39,43 +39,15 b''
     {% end %}
 </div>
 
-<div id="header_border"></div>
-
-<div id="main_app">
-
-    <div id="app_hbox">
-
-    <div id="left_panel">
-    {% block left_panel %}
-    {% end %}
-    </div>
-
-    <div id="content_panel">
-        {% if message %}
-
-          {% for key in message %}
-            <div class="message {{key}}">
-               {{message[key]}}
-            </div>
-          {% end %}
-        {% end %}
-
-        {% block content_panel %}
-        {% end %}
-    </div>
-    <div id="right_panel">
-    {% block right_panel %}
-    {% end %}
-    </div>
-
-    </div>
-
+<div id="site">
+{% block site %}
+{% end %}
 </div>
 
 <script src="{{static_url("jquery/js/jquery-1.7.1.min.js") }}" type="text/javascript" charset="utf-8"></script>
 <script src="{{static_url("jquery/js/jquery-ui.min.js") }}" type="text/javascript" charset="utf-8"></script>
 <script src="{{static_url("js/namespace.js") }}" type="text/javascript" charset="utf-8"></script>
-<script src="{{static_url("js/loginmain.js") }}" type="text/javascript" charset="utf-8"></script>
+<script src="{{static_url("js/page.js") }}" type="text/javascript" charset="utf-8"></script>
 <script src="{{static_url("js/loginwidget.js") }}" type="text/javascript" charset="utf-8"></script>
 
 {% block script %}

IPython/frontend/html/notebook/templates/projectdashboard.html

@@ -1,27 +1,26 b''
-{% extends layout.html %}
+{% extends page.html %}
 
-{% block title %}
-IPython Dashboard
-{% end %}
+{% block title %}IPython Dashboard{% end %}
 
 {% block stylesheet %}
     <link rel="stylesheet" href="{{static_url("css/projectdashboard.css") }}" type="text/css" />
 {% end %}
 
-{% block meta %}
-    <meta name="read_only" content="{{read_only}}"/>
-{% end %}
 
 {% block params %}
 data-project={{project}}
 data-base-project-url={{base_project_url}}
 data-base-kernel-url={{base_kernel_url}}
+data-read-only={{read_only}}
 {% end %}
 
-{% block content_panel %}
+{% block site %}
+
+<div id="main_app">
+
     {% if logged_in or not read_only %}
 
-    <div id="content_toolbar">
+    <div id="notebooks_toolbar">
         <span id="drag_info">Drag files onto the list to import
         notebooks.</span>
 
@@ -35,6 +34,9 b' data-base-kernel-url={{base_kernel_url}}'
     <div id="notebook_list">
         <div id="project_name"><h2>{{project}}</h2></div>
     </div>
+
+</div>
+
 {% end %}
 
 {% block script %}