Started building out UI properly.

rookeries/templates/layout.html

@@ -21,7 +21,7 @@
     <script src="{{ url_for('static', filename='js/jquery-1.8.2.js') }}"></script>
     <script src="{{ url_for('static', filename='js/handlebars-1.0.0-rc.4.js') }}"></script>
     <script src="{{ url_for('static', filename='js/ember-1.0.0-rc.6.js') }}"></script>
-    <script src="{{ url_for('static', filename='js/application.js') }}"></script>
+    <script src="{{ url_for('static', filename='js/rookeries_application.js') }}"></script>
 
 
 {#    <script src="{{ url_for('static', filename='js/bootstrap.js') }}"></script>#}

rookeries_web_ui/css/bootstrap-responsive.css

@@ -1,5 +1,5 @@
 /*!
- * Bootstrap Responsive v2.1.1
+ * Bootstrap Responsive v2.3.2
  *
  * Copyright 2012 Twitter, Inc
  * Licensed under the Apache License v2.0
@@ -40,6 +40,10 @@
           box-sizing: border-box;
 }
 
+@-ms-viewport {
+  width: device-width;
+}
+
 .hidden {
   display: none;
   visibility: hidden;
@@ -91,6 +95,19 @@
   }
 }
 
+.visible-print {
+  display: none !important;
+}
+
+@media print {
+  .visible-print {
+    display: inherit !important;
+  }
+  .hidden-print {
+    display: none !important;
+  }
+}
+
 @media (min-width: 1200px) {
   .row {
     margin-left: -30px;
@@ -215,6 +232,9 @@
   .row-fluid [class*="span"]:first-child {
     margin-left: 0;
   }
+  .row-fluid .controls-row [class*="span"] + [class*="span"] {
+    margin-left: 2.564102564102564%;
+  }
   .row-fluid .span12 {
     width: 100%;
     *width: 99.94680851063829%;
@@ -562,6 +582,9 @@
   .row-fluid [class*="span"]:first-child {
     margin-left: 0;
   }
+  .row-fluid .controls-row [class*="span"] + [class*="span"] {
+    margin-left: 2.7624309392265194%;
+  }
   .row-fluid .span12 {
     width: 100%;
     *width: 99.94680851063829%;
@@ -814,6 +837,7 @@
     margin-left: 0;
   }
   [class*="span"],
+  .uneditable-input[class*="span"],
   .row-fluid [class*="span"] {
     display: block;
     float: none;
@@ -830,6 +854,9 @@
        -moz-box-sizing: border-box;
             box-sizing: border-box;
   }
+  .row-fluid [class*="offset"]:first-child {
+    margin-left: 0;
+  }
   .input-large,
   .input-xlarge,
   .input-xxlarge,
@@ -862,8 +889,11 @@
     width: auto;
     margin: 0;
   }
+  .modal.fade {
+    top: -100px;
+  }
   .modal.fade.in {
-    top: auto;
+    top: 20px;
   }
 }
 
@@ -895,6 +925,16 @@
     padding-right: 10px;
     padding-left: 10px;
   }
+  .media .pull-left,
+  .media .pull-right {
+    display: block;
+    float: none;
+    margin-bottom: 10px;
+  }
+  .media-object {
+    margin-right: 0;
+    margin-left: 0;
+  }
   .modal {
     top: 10px;
     right: 10px;
@@ -976,11 +1016,19 @@
     margin-bottom: 2px;
   }
   .nav-collapse .nav > li > a:hover,
-  .nav-collapse .dropdown-menu a:hover {
+  .nav-collapse .nav > li > a:focus,
+  .nav-collapse .dropdown-menu a:hover,
+  .nav-collapse .dropdown-menu a:focus {
     background-color: #f2f2f2;
   }
+  .navbar-inverse .nav-collapse .nav > li > a,
+  .navbar-inverse .nav-collapse .dropdown-menu a {
+    color: #999999;
+  }
   .navbar-inverse .nav-collapse .nav > li > a:hover,
-  .navbar-inverse .nav-collapse .dropdown-menu a:hover {
+  .navbar-inverse .nav-collapse .nav > li > a:focus,
+  .navbar-inverse .nav-collapse .dropdown-menu a:hover,
+  .navbar-inverse .nav-collapse .dropdown-menu a:focus {
     background-color: #111111;
   }
   .nav-collapse.in .btn-group {
@@ -991,7 +1039,7 @@
     position: static;
     top: auto;
     left: auto;
-    display: block;
+    display: none;
     float: none;
     max-width: none;
     padding: 0;
@@ -1005,6 +1053,9 @@
        -moz-box-shadow: none;
             box-shadow: none;
   }
+  .nav-collapse .open > .dropdown-menu {
+    display: block;
+  }
   .nav-collapse .dropdown-menu:before,
   .nav-collapse .dropdown-menu:after {
     display: none;

rookeries_web_ui/css/penguin-common-theme.css

@@ -1,12 +1,33 @@
 /*
- * Penguin Evening
+ * Penguin Common Theme
  * 
  * @author: Dorian Pula
  * @company: Amber Penguin Software
- * @note: A soothing grey and amber theme.
- * @version: 0.7
+ * @note: The common elements of both the Penguin Daytime and Evening CSS themes.
+ * @version: 0.8
  */
 
+/*** Header setup ***/
+img.header_logo {
+    height: 128px;
+}
+
+h1.header_title {
+    vertical-align: middle;
+    text-align: center;
+
+    font-family: "Lavoir";
+    font-size: 20pt;
+    font-weight: normal;
+    font-style: normal;
+}
+
+h2.header_tagline {
+    font-size: 12pt;
+    font-family: "Consola Mono", monospace;
+    text-align: center;
+}
+
 /* TODO Comment and clean up. */
 
 /*** Messages ***/

rookeries_web_ui/index.html

@@ -5,13 +5,14 @@
     <link rel="icon" type="image/icon" href="mr-penguin-amber-favicon.ico" />
 
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <link rel="stylesheet" type="text/css" media="screen" href="css/bootstrap.css" />
     <link rel="stylesheet" type="text/css" media="screen" href="css/bootstrap-responsive.css" />
 
      <!-- TODO: Add in ability to switch between themes seamlessly. -->
 
     <link rel="stylesheet" title="evening" type="text/css" media="screen" href="css/penguin-common-theme.css" />
-    <link rel="stylesheet" title="evening" type="text/css" media="screen" href="css/penguin-evening-theme.css" />
-    <link rel="stylesheet" title="daytime" type="text/css" media="screen" href="css/penguin-daytime-theme.css" />
+    <!-- link rel="stylesheet" title="evening" type="text/css" media="screen" href="css/penguin-evening-theme.css" />
+    <link rel="stylesheet" title="daytime" type="text/css" media="screen" href="css/penguin-daytime-theme.css" /-->
 
     <link rel="stylesheet" type="text/css" media="screen" href="http://openfontlibrary.org/face/Lavoir" />
     <link rel="stylesheet" type="text/css" href="http://fonts.googleapis.com/css?family=Raleway" />
@@ -21,38 +22,73 @@
     <script src="js/jquery-1.8.2.js"></script>
     <script src="js/handlebars-1.0.0-rc.4.js"></script>
     <script src="js/ember-1.0.0-rc.6.js"></script>
-    <script src="js/application.js"></script>
+    <script src="js/rookeries_application.js"></script>
     <script src="js/bootstrap.js"></script>
 
     <!-- Everything is nested inside Bootstrap's theme setup. -->
     <!-- Header content -->
     <div class="row-fluid">
         <div class="span6 offset3">
-            <header>
-                <img src="images/mr-penguin-amber.svg" alt="rookeri.es logo" />
-                <h1 class="header_title">rookeri.es</h1>
-                <h2 class="tagline">Build out your Dreams, One Task at a Time</h2>
-            </header>
+            <div class="row">
+                <div class="span4">
+                    <img class="header_logo" src="images/mr-penguin-amber.svg" alt="rookeri.es logo" />
+                </div>
+                <div class="span8">
+                    <h1 class="header_title">rookeri.es</h1>
+                    <h2 class="header_tagline">Build out your Dreams, One Task at a Time</h2>
+                </div>
+            </div>
         </div>
     </div>
 
-    <!--Sidebar navigation content-->
+    <!-- Entire body and navigation sidebar. -->
     <div class="row-fluid">
+
+        <!--Sidebar navigation content-->
         <div class="span2 offset1">
-            <nav>
-                <ul>
-                {% block navigation_map %}
-                    {% for link in navigation %}
-                        <li><a href="{{ link.target_url }}">{{ link.title }}</a></li>
-                    {% endfor %}
-                {% endblock %}
-                </ul>
-            </nav>
+            <ul class="nav nav-pills nav-stacked">
+                <li class="active"><a href="#">Home</a></li>
+                <li><a href="#">Link</a></li>
+                <li><a href="#">Link</a></li>
+            </ul>
         </div>
 
         <!--Body content-->
         <div class="span8">
-            <article>{% block body_content %}{{ body_content }}{% endblock %}</article>
+            <article>
+
+                <h1>Tasks</h1>
+
+    <p>[+] Add New Project</p>
+
+        <h2>Project Name - [ Edit ] - Edit [ x ] - Delete</h2>
+        <p>[+] Add New Task</p>
+        <table>
+            <thead>
+                <tr>
+                    <th scope="col">State</th>
+                    <th scope="col">Task</th>
+                    <th scope="col">Priority</th>
+                    <th scope="col">Due Date</th>
+                </tr>
+            </thead>
+            <tbody>
+                <tr>
+                    <td>[@]</td>
+                    <td>Build out basic ui layout for tasks.</td>
+                    <td>Normal</td>
+                    <td>2013 July 05</td>
+                </tr>
+                <tr>
+                    <td>[ ]</td>
+                    <td>Add Ember JS application for tasks.</td>
+                    <td>Normal</td>
+                    <td>2013 July 05</td>
+                </tr>
+            </tbody>
+        </table>
+
+            </article>
         </div>
     </div>
 

rookeries_web_ui/js/rookeries_application.js

@@ -2,7 +2,7 @@
  * EmberJS application.
  *
  * Created with PyCharm.
- * User: Dorian Pula <dorian.pula@amber-penguin-software.ca>
+ * User: Dorian Pula [dorian.pula@amber-penguin-software.ca]
  * Date: 2013-June-30 @ 23:58
  */