new template based upon bootstrap

author: Sean O'Brien <diggity@diggmobile.(none)> 2012-02-27 17:18:41 -0500
committer: James Vasile <james@jamesvasile.com> 2012-03-12 14:39:31 -0400
commit: 638b287d1bf9e2772716cc6391a18d65ade3e18b (patch)
tree: c8f3f8d9f85cd7fec4232e6b3f25c825220478d0 /templates
parent: d2bcebf6766ef2dec4827006198296161d1b49be (diff)
1 files changed, 122 insertions, 120 deletions
diff --git a/templates/base.tmpl b/templates/base.tmpl
index 29602fd..046218a 100644
--- a/templates/base.tmpl
+++ b/templates/base.tmpl
@@ -6,70 +6,62 @@
 #end if
 #end def
 <!doctype html>
-
 <!--[if lt IE 7 ]> <html class="ie ie6 no-js" lang="en"> <![endif]-->
 <!--[if IE 7 ]>    <html class="ie ie7 no-js" lang="en"> <![endif]-->
 <!--[if IE 8 ]>    <html class="ie ie8 no-js" lang="en"> <![endif]-->
 <!--[if IE 9 ]>    <html class="ie ie9 no-js" lang="en"> <![endif]-->
-<!--[if gt IE 9]><!--><html class="no-js" lang="en"><!--<![endif]-->
-<!-- the "no-js" class is for Modernizr. -->
-
-<head id="www-sitename-com" data-template-set="html5-reset">
-
+<!--[if gt IE 9]><!--> <html class="no-js" lang="en"> <!--<![endif]-->
+<!-- the "no-js" class is for Modernizr -->
+<head>
 	<meta charset="utf-8" />
 	
-	<!-- Always force latest IE rendering engine (even in intranet) & Chrome Frame -->
+	<!-- Always force latest IE rendering engine and Chrome Frame -->
 	<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
 	
-	<title>$default($title, "Plinth Front End to the Freedom Box")</title>
-	
-	<meta name="title" content="$default($title, 'Plinth Front End to the Freedom Box')" />
-	<meta name="description" content="Plinth admin frontend for Freedom Box" />
+	<!--  Mobile Viewport Fix http://j.mp/mobileviewport & http://davidbcalhoun.com/2010/viewport-metatag 
+	device-width : Occupy full width of the screen in its current orientation
+	initial-scale = 1.0 retains dimensions instead of zooming out if page height > device height
+	maximum-scale = 1.0 retains dimensions instead of zooming in if page width < device width
+	-->
+	<meta name="viewport" content="width=device-width, initial-scale=1.0" />
 
-	<!-- I believe that robots should only have faces if they truly need them. -->
+	<!-- I believe that robots should only have faces if they truly need them -->
 	<meta name="robots" content="noindex, nofollow, noarchive" />
 	<meta name="googlebot" content="noindex, nofollow, noarchive, nosnippet, noodp, noimageindex, notranslate" />
 	<meta name="msnbot" content="noindex, nofollow, noarchive, noodp" />
 	<meta name="slurp" content="noindex, nofollow, noarchive, noodp, noydir" />
-	
-	<!--  Mobile Viewport Fix
-	j.mp/mobileviewport & davidbcalhoun.com/2010/viewport-metatag 
-	device-width : Occupy full width of the screen in its current orientation
-	initial-scale = 1.0 retains dimensions instead of zooming out if page height > device height
-	maximum-scale = 1.0 retains dimensions instead of zooming in if page width < device width
-	-->
-	<!-- Uncomment to use; use thoughtfully!
-	<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0" />
-	-->
+
+	<meta name="title" content="$default($title, 'FreedomBox Dashboard')" />
+	<meta name="description" content="Plinth administrative interface for the FreedomBox" />
+	<title>$default($title, "FreedomBox Dashboard")</title>
 
 	<link rel="shortcut icon" href="$basehref/static/theme/img/favicon.ico" />
-	<!-- This is the traditional favicon.
-		 - size: 16x16 or 32x32
-		 - transparency is OK
-		 - see wikipedia for info on browser support: http://mky.be/favicon/ -->
+	<!-- This is the traditional favicon. Size: 16x16 or 32x32, transparency is OK -->
 		 
-	<link rel="apple-touch-icon" href="$basehref/static/theme/img/freedombox-button-114px.png" />
-	<!-- The is the icon for iOS's Web Clip.
-		 - size: 57x57 for older iPhones, 72x72 for iPads, 114x114 for iPhone4's retina display (IMHO, just go ahead and use the biggest one)
-		 - To prevent iOS from applying its styles to the icon name it thusly: apple-touch-icon-precomposed.png
-		 - Transparency is not recommended (iOS will put a black BG behind the icon) -->
+	<link rel="apple-touch-icon" sizes="57x57" href="$basehref/static/theme/img/apple-touch-icon-57px-precomposed.png" />
+	<link rel="apple-touch-icon" sizes="72x72" href="$basehref/static/theme/img/apple-touch-icon-72px-precomposed.png" />
+	<link rel="apple-touch-icon" sizes="114x114" href="$basehref/static/theme/img/apple-touch-icon-114px-precomposed.png" />
+	<!-- The is the icon for iOS's Web Clip. Size: 57x57 for older iPhones, 72x72 for iPads, 114x114 for iPhone4
+	- To prevent iOS from applying its styles to the icon name it thusly: apple-touch-icon-precomposed.png
+	- Transparency is not recommended (iOS will put a black BG behind the icon) -->
 	
-	<!-- HTML5-Reset CSS: screen, mobile & print are all in the same file -->
-	<link rel="stylesheet" href="$basehref/static/theme/css/style-html5reset.css" />
-	
-	<!-- Original Plinth CSS, not sure if this should all be integrated into "style-html5reset.css" -->
-	<link rel="stylesheet" href="$basehref/static/theme/css/style-plinth.css" />
-	<!--<link rel="stylesheet" href="$basehref/static/theme/css/style-plinth-2col.css" />-->
+	<link rel="stylesheet/less" href="$basehref/static/theme/less/style.less" />
+	<script type="text/javascript" src="$basehref/static/theme/js/libs/less-1.2.1.min.js"></script>	
+	<!-- Use SimpLESS (Win/Linux/Mac) or LESS.app (Mac) to compile your .less files
+	to style.css, and replace the 2 lines above with this one:
+	<link rel="stylesheet/less" href="$basehref/static/theme/less/style.css">
+	-->
 	$css
-
-	<!-- Local copy of Modernizr -->
-	<script type="text/javascript" src="$basehref/static/theme/js/modernizr-1.7.min.js"></script>
-	<!-- Local copy of JQuery -->
-	<script type="text/javascript" src="$basehref/static/theme/js/jquery-1.5.1.min.js"></script>
-	<!-- HTML5-Reset functions -->
-	<script type="text/javascript" src="$basehref/static/theme/js/functions.js"></script>
-
-	<!-- JS required for Plinth menus and UI -->
+	<link rel="stylesheet" href="$basehref/static/theme/css/bootstrap.css" />
+	<style type="text/css">
+	body {
+        padding-top: 60px;
+        padding-bottom: 40px;
+        }
+        .sidebar-nav {
+        padding: 9px 0;
+        }
+        </style>
 	<script type="text/javascript" src="$basehref/static/theme/js/menu.js"></script>
 	<script type="text/javascript" src="$basehref/static/theme/js/plinth.js"></script>
 	$js
@@ -82,43 +74,49 @@
 	</script>
 </head>
 <body onload="javascript:onload_handler();">
-<div class="wrapper"><!-- may not be necessary: http://camendesign.com/code/developpeurs_sans_frontieres -->
-
-	<header>
-	<div id="header"> <!-- should be replaced by <header> for HTML5 transition -->
-
-	<div id="headerleft">
-		<a href="$basehref/"><img src="$basehref/static/theme/img/freedombox.png" /></a>
-	</div> <!-- End headerleft -->
-
-	<div id="headerright">
-		<br /><br /><br />
-		<h1><a href="$basehref/"><img src="$basehref/static/theme/img/freedombox-logotype.png" /></a></h1>
-		<h2><a href="$basehref/">Plinth Administration Control Panel</a></h2>
-		<nav>
-		<script> 
+<!--[if lt IE 7]><p class=chromeframe>Your browser is <em>ancient!</em> <a href="http://browsehappy.com/">Upgrade to a different browser</a> or <a href="http://www.google.com/chromeframe/?redirect=true">install Google Chrome Frame</a> to experience this site.</p><![endif]-->
+<!-- ^ Freedombox needs a better version of "Browse Happy", with freedom and privacy-respecting browsers only -->
+
+    <div class="navbar navbar-fixed-top">
+      <div class="navbar-inner">
+        <div class="container-fluid">
+          <a class="btn btn-navbar" data-toggle="collapse" data-target=".nav-collapse">
+            <span class="icon-bar"></span>
+            <span class="icon-bar"></span>
+            <span class="icon-bar"></span>
+          </a>
+          <a href="$basehref/" style="float:left;padding-right:5px;"><img src="$basehref/static/theme/img/freedombox-logo-32px.png" /></a><a class="brand" href="$basehref/" style="padding-top:8px">FreedomBox Dashboard</a>
+          <div class="nav-collapse">
+		<script type="text/javascript"> 
 		<!--
 		   main_menu(main_menu_items); 
 		// --> 
 		</script>
-		</nav> <!-- End main menu -->
-	</div> <!-- End headerright -->
-
-		#if $username
-		<p id="layoutdims">Logged in as $username. <a href="$basehref/auth/logout" title="Log out">Logout.</a></p>
-		#else
-		<p id="layoutdims">Not logged in. <a href="$basehref/auth/login" title="Log in">Log in.</a></p>
-		#end if
-	</div> <!-- should be replaced by </header> for HTML5 transition -->
-	</header> <!-- End header -->
-
-	<div class="colmask threecol">
-	<div class="colmid">
-	<div class="colleft">
-
-	<article>
-	<div class="col1">
-		<h2>
+            #if $username
+            <p class="navbar-text pull-right">Logged in as <a href="$username">$username</a>. <a href="$basehref/auth/logout" title="Log out">Log out</a>.</p>
+            #else
+            <p class="navbar-text pull-right">Not logged in. <a href="$basehref/auth/login" title="Log in">Log in</a>.</p>
+            #end if
+          </div><!--/.nav-collapse -->
+        </div>
+      </div>
+    </div>
+
+    <div class="container-fluid">
+      <div class="row-fluid" style="padding-top:25px;">
+        <div class="span3">
+          <div class="well sidebar-nav">
+		#block nav_block
+		$nav
+		#end block nav_block
+		#block sidebar_left_block
+		$sidebar_left
+		#end block sidebar_left_block
+          </div><!--/.well -->
+        </div><!--/span-->
+        <div class="span9">
+          <div class="hero-unit">
+  		<h2>
 		#block title_block
 		$title
 		#end block title_block
@@ -126,58 +124,62 @@
 		#block main_block
 		$main
 		#end block main_block
-	</div>
-	</article> <!-- End column 1 -->
-
-	<div class="col2">
-		#block nav_block
-		$nav
-		#end block nav_block
-		#block sidebar_left_block
-		$sidebar_left
-		#end block sidebar_left_block
-
-	</div> <!-- End column 2 -->
-
-	<aside>
-	<div class="col3">
-		<div id="ads">
-		<!--<a href="http://matthewjamestaylor.com">
-		<img src="mjt-125x125.gif" width="125" border="0" height="125" alt="Art and Design by Matthew James Taylor" />
-		</a>
-		-->
-		</div>
-		#block sidebar_right_block
+          </div>
+          <div class="row-fluid">
+            <div class="span8 alert alert-info">
+              	#block sidebar_right_block
 		$sidebar_right
 		#end block sidebar_right_block
-	</div>
-	</aside> <!-- End column 3 -->
+            </div><!--/span-->
+          </div><!--/row-->
+
+        </div><!--/span-->
+      </div><!--/row-->
 
-	</div>
-	</div>
-	</div>
+      <hr>
 
-	<footer>
-	<div id="footer">  <!-- should be replaced by <footer> for HTML5 transition -->
-		#block footer_block
+      <footer>
+        <p>#block footer_block
 		<p>
 		Plinth is &copy; Copyright 2012 <a href="http://hackervisions.org" target="_blank">James Vasile</a>.  It is
 		free software offered to you under the terms of
 		the <a href="http://www.gnu.org/licenses/agpl.html" target="_blank">GNU Affero General Public
-		License</a>, Version 3 or later.
+		License</a>, Version 3 or later.  This Plinth theme was built by <a href="http://seandiggity.com" target="_blank">Sean &quot;Diggity&quot; O&apos;Brien</a>.
 		</p>
-		<!--<p>Current page: $current_url</p>-->
+		<p>Current page: $current_url</p>
 		<p>
-		This page uses
-		the <a href="http://matthewjamestaylor.com/blog/perfect-3-column.htm" target="_blank">Perfect
-		'Holy Grail' 3 Column Liquid Layout</a>
-		by <a href="http://matthewjamestaylor.com" target="_blank">Matthew James Taylor</a>.
-		And the <a href="http://html5reset.org" target="_blank">HTML5-Reset</a> boilerplate template.
+		
 		</p>
-		#end block footer_block
-	</div> <!-- should be replaced by </footer> for HTML5 transition -->
-	</footer>
+		#end block footer_block</p>
+      </footer>
+
+    </div><!--/.fluid-container-->
 
-</div> <!-- End wrapper -->
+<!-- JavaScript <script> tags are placed at the end of the document to speed up initial page loads-->
+	<!-- Local copy of HTML5 shim, for IE6-8 support of HTML5 elements -->
+	<!--[if lt IE 9]>
+	<script type="text/javascript" src="$basehref/static/theme/js/libs/html5.js"></script>
+	<![endif]-->
+	<!-- Local copy of Modernizr -->
+	<script type="text/javascript" src="$basehref/static/theme/js/libs/modernizr-2.5.3-respond-1.1.0.min.js"></script>
+	<!-- Local copy of jQuery -->
+	<script type="text/javascript" src="$basehref/static/theme/js/libs/jquery-1.7.1.min.js"></script>
+	<!-- Bootstrap JS -->
+	<script type="text/javascript" src="$basehref/static/theme/js/libs/bootstrap/bootstrap-transition.js"></script>
+	<script type="text/javascript" src="$basehref/static/theme/js/libs/bootstrap/bootstrap-alert.js"></script>
+	<script type="text/javascript" src="$basehref/static/theme/js/libs/bootstrap/bootstrap-modal.js"></script>
+	<script type="text/javascript" src="$basehref/static/theme/js/libs/bootstrap/bootstrap-dropdown.js"></script>
+	<script type="text/javascript" src="$basehref/static/theme/js/libs/bootstrap/bootstrap-scrollspy.js"></script>
+	<script type="text/javascript" src="$basehref/static/theme/js/libs/bootstrap/bootstrap-tab.js"></script>
+	<script type="text/javascript" src="$basehref/static/theme/js/libs/bootstrap/bootstrap-tooltip.js"></script>
+	<script type="text/javascript" src="$basehref/static/theme/js/libs/bootstrap/bootstrap-popover.js"></script>
+	<script type="text/javascript" src="$basehref/static/theme/js/libs/bootstrap/bootstrap-button.js"></script>
+	<script type="text/javascript" src="$basehref/static/theme/js/libs/bootstrap/bootstrap-collapse.js"></script>
+	<script type="text/javascript" src="$basehref/static/theme/js/libs/bootstrap/bootstrap-carousel.js"></script>
+	<script type="text/javascript" src="$basehref/static/theme/js/libs/bootstrap/bootstrap-typeahead.js"></script>
+	<!-- JS plugins -->
+	<script type="text/javascript" src="$basehref/static/theme/js/plugins.js"></script>
+	<!-- Additional JS -->
+	<script type="text/javascript" src="$basehref/static/theme/js/functions.js"></script>
 </body>
 </html>
author	Sean O'Brien <diggity@diggmobile.(none)>	2012-02-27 17:18:41 -0500
committer	James Vasile <james@jamesvasile.com>	2012-03-12 14:39:31 -0400
commit	638b287d1bf9e2772716cc6391a18d65ade3e18b (patch)
tree	c8f3f8d9f85cd7fec4232e6b3f25c825220478d0 /templates
parent	d2bcebf6766ef2dec4827006198296161d1b49be (diff)