Work on CSS and navigation.

docs/TODO.rst

@@ -13,7 +13,7 @@ Things To-Do
 * Fix up navigation with dynamic elements for various apps...
 
 * Add in translation strings.
-* Add in special JSON string responses for Flask: http://flask.pocoo.org/snippets/83/
+
 * Try out using xhtml2pdf with Flask when we need PDF reports: http://flask.pocoo.org/snippets/68/
 * Look into using Mozilla Persona for authentication: https://www.mozilla.org/en-US/persona/
 * Consider switching to Flask-Login: https://flask-login.readthedocs.org/en/latest/ , if issues with auth happen.
@@ -21,8 +21,7 @@ Things To-Do
 * Add in reCaptcha support: https://pypi.python.org/pypi/recaptcha-client
 
 * Add in LESS for parts of CSS with common colours, etc.: http://lesscss.org/
-* Add in switchable CSS themes: http://www.thesitewizard.com/css/switch-alternate-css-styles.shtml
+* Look into distributing web fonts as part of client package.
-* Add in switchable CSS themes: http://www.thesitewizard.com/javascripts/change-style-sheets.shtml
 
 Things Done
 -----------
@@ -31,3 +30,5 @@ Things Done
 * *2013 June 11*    --- Built out setup.py and make it easy to distribute on PyPI.
 * *2013 June 28*    --- Using enums for some parts.  See enum34 and SQLAlchemy's Enums.
 * *2013 June 30*    --- Built out user account management and registration.
+* *2013 July 03*    --- Added special JSON string responses for Flask: http://flask.pocoo.org/snippets/83/
+* *2013 July 04*    --- Added switchable CSS themes.

rookeries_webclient/css/penguin-common-theme.css

@@ -36,7 +36,8 @@ div.ice-floe {
     padding: 15px 30px 15px 30px;
 }
 
-.navigation-bar {
+/*** Navigation overrides. ***/
+.nav {
     text-align: center;
     font-weight: bold;
     font-family: "Raleway", sans-serif;

rookeries_webclient/css/penguin-evening-theme.css

@@ -70,23 +70,7 @@ article > hr {
     border-color: #111111;
 }
 
-/*** Navigation menu ***/
+/*** Navigation overrides ***/
-/* Refer to: https://leavesofcode.wordpress.com/2012/08/30/more-pure-css-menus/ */
-ul.navigation {
-    text-align: center;
-    font-weight: bold;
-    font-family: "Raleway", sans-serif;
-    font-size: 18px;
-
-    border-radius: 25px;
-    border-style: solid;
-    border-width: 1px;
-    background-color: #777777;
-    border-color: #111111;
-    box-shadow: 5px 5px #111111;
-
-    margin-top: 12pt;
-}
 
 nav > ul > li {
     /*display: inline-block;*/
@@ -99,26 +83,31 @@ nav > ul > li {
     /*width: 150px;*/
 }
 
-nav > ul > li > a {
+a {
     color: #FFC200;
     text-decoration: none;
 }
 
-nav > ul > li:hover {
+a:hover {
     background-color: #FFC200;
     border-radius: 5px;
+    /*color: #6932ff;*/
+    color: #292929;
+    padding: 5px;
 }
 
-nav > ul > li:hover > a {
+/** TODO Move over some of concepts to common CSS.
-    color: #6932ff;
-}
 
+
+
+/** TODO Remove if no longer used. **/
 /*Hide the submenu.*/
-nav > ul > li > ul {
+/* nav > ul > li > ul {
     display: none;
-}
+} */
 
 /*Show the submenu on hover.*/
+/*
 nav > ul > li:hover > ul {
     display: inline-block;
     list-style: none;
@@ -158,3 +147,4 @@ nav > ul > li > ul > li:hover {
 nav > ul > li > ul > li:hover > a {
     color: #6932ff;
 }
+*/

rookeries_webclient/index.html

@@ -8,12 +8,10 @@
     <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" />
 
-
     <!-- Switch between themes seamlessly. -->
     <link rel="stylesheet" type="text/css" media="screen" href="css/penguin-common-theme.css" />
     <link rel="stylesheet" type="text/css" media="screen" ng-href="css/penguin-{{ user_pref_theme }}-theme.css" />
 
-    <!-- TODO: See if we can include and distribute these fonts. -->
     <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" />
 </head>

rookeries_webclient/js/rookeries-application-0.2.0.js

@@ -8,6 +8,8 @@
  * Created with PyCharm.  Date: 2013-June-30 @ 23:58
  */
 
+
+
 // The location of the API server.
 var rookeriesApiPath = "http://localhost\\:5000";
 

rookeries_webclient/js/rookeries-controllers-0.2.0.js

@@ -66,25 +66,25 @@ function SwitchThemeCtrl($scope) {
 
     // TODO Consider having an array of themes and switching to the next with a faux-pointer?
     // TODO Turn the user preferences into a nice model.
-//    $scope.user_pref_theme = "daytime"
+//    $scope.user_pref_theme = "daytime";
-//    $scope.user_pref_alternative_theme = "evening"
+//    $scope.user_pref_alternative_theme = "evening";
-//    $scope.user_pref_theme_icon_colour = " "
+//    $scope.user_pref_theme_icon_colour = " ";
 
-    $scope.user_pref_theme = "evening"
+    $scope.user_pref_theme = "evening";
-    $scope.user_pref_alternative_theme = "daytime"
+    $scope.user_pref_alternative_theme = "daytime";
-    $scope.user_pref_theme_icon_colour = "icon-white"
+    $scope.user_pref_theme_icon_colour = "icon-white";
 
     // Toggle between themes.
     $scope.switchTheme = function() {
 
         if ($scope.user_pref_theme === "daytime") {
-            $scope.user_pref_theme = "evening"
+            $scope.user_pref_theme = "evening";
-            $scope.user_pref_alternative_theme = "daytime"
+            $scope.user_pref_alternative_theme = "daytime";
-            $scope.user_pref_theme_icon_colour = "icon-white"
+            $scope.user_pref_theme_icon_colour = "icon-white";
         } else {
-            $scope.user_pref_theme = "daytime"
+            $scope.user_pref_theme = "daytime";
-            $scope.user_pref_alternative_theme = "evening"
+            $scope.user_pref_alternative_theme = "evening";
-            $scope.user_pref_theme_icon_colour = " "
+            $scope.user_pref_theme_icon_colour = " ";
         }
 
     }

rookeries_webclient/js/rookeries-services.0.2.0.js

@@ -23,6 +23,6 @@ angular.module('rookeries.service', ['ngResource'])
     .factory('DocPage', function($resource) {
 
         return $resource(rookeriesApiPath + '/docs/:page', {}, {
-            get: {method:'GET', params:{"page": "faq"}}
+            get: {method:'GET', params:{"page": "page.id"}}
         });
     });

rookeries_webclient/partials/landing.html

@@ -1,4 +1,4 @@
-<h1>Welcome to Rooker.ies</h1>
+<h1>Welcome to Rookeri.es</h1>
 
 <!-- if session.logged_in -->
     <p>Welcome back {{ username }}!</p>

rookeries_webclient/partials/nav-menu.html

@@ -1,4 +1,4 @@
-<ul class="nav nav-pills nav-stacked navigation-bar">
+<ul class="nav nav-pills nav-stacked">
     <li class="active">
         <a href="#">Home</a>
     </li>
@@ -12,9 +12,11 @@
         <a href="#/experimental">Experimental</a>
     </li>
     <li>
-        <a href="#/docs/faq">FAQ</a>
+        <a ng-href="#/docs/faq">FAQ</a>
     </li>
     <li>
         <a href="#/docs/license">License (AGPL v3)</a>
     </li>
 </ul>
+
+<!-- TODO Add in repeating content items???  Or another way to pass in details of menu items...