Refactoring templates and top level js/css organization.

IPython/frontend/html/notebook/handlers.py

@@ -211,6 +211,7 @@ 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 @@ 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/login.css

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

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

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

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

@@ -78,6 +78,14 @@ 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 @@ body {
     right: 0px;
     top: 0px;
     bottom: 0px;
-    overflow: hidden;
+    overflow: visible;
 }
 
 
@@ -41,11 +41,9 @@ 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 @@ 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 @@
  * 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;
+#main_app {
+    width: 920px;
+    margin: auto;
 }
 
-#left_panel {
-}
-
-#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 @@
 
 $(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 @@ 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/logoutmain.js

@@ -0,0 +1,20 @@
+//----------------------------------------------------------------------------
+//  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/notebooklist.js

@@ -21,7 +21,6 @@ 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 @@ $(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/page.js

@@ -0,0 +1,44 @@
+//----------------------------------------------------------------------------
+//  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 @@
+//----------------------------------------------------------------------------
+//  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/static/js/projectdashboardmain.js

@@ -12,31 +12,21 @@
 
 $(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 @@
-{% extends layout.html %}
+{% extends page.html %}
 
-{% block content_panel %}
+{% block stylesheet %}
 
-    {% 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">
-    </form>
-
-    {% end %}
+<link rel="stylesheet" href="{{static_url("css/login.css") }}" type="text/css"/>
 
 {% end %}
 
+
 {% 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>
+
+{% 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="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 %}
+
+<div/>
+
+{% end %}
+
+
+{% block 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 @@
-{% 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>
-
-    {% else %}
-
-    Proceed to the <a href="/login">login page</a>.</li>
-
-    {% end %}
-
-  </ul>
+<link rel="stylesheet" href="{{static_url("css/logout.css") }}" type="text/css"/>
 
 {% end %}
 
+
 {% block login_widget %}
 {% end %}
 
-{% block script %}
-<script type="text/javascript">
-  $(document).ready(function() {
-    IPython.login_widget = new IPython.LoginWidget('span#login_widget');
-  });
-</script>
+{% block site %}
+
+<div id="main_app">
+
+    {% if message %}
+      {% for key in message %}
+        <div class="message {{key}}">
+           {{message[key]}}
+        </div>
+      {% end %}
+    {% end %}
+
+    {% 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 %}
+
+
+<div/>
+
+{% end %}
+
+{% block 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 @@
 
     <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 @@
 <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 @@
     {% 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 @@
-{% 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 @@ data-base-kernel-url={{base_kernel_url}}
     <div id="notebook_list">
         <div id="project_name"><h2>{{project}}</h2></div>
     </div>
+
+</div>
+
 {% end %}
 
 {% block script %}