summaryrefslogtreecommitdiff
path: root/templates/base.tmpl
blob: 08443b0bcc01b958ed966cd082a189424a0a9abb (plain)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
#def default($text, $default)
#if $text
   $text
#else
   $default
#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>
	<meta charset="utf-8" />
	
	<!-- Always force latest IE rendering engine and Chrome Frame -->
	<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
	
	<!--  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" />

	<!-- R2D2, you know better than to trust a strange computer! -->
	<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" />

	<meta name="title" content="$default($title, 'FreedomBox Dashboard')" />
	<meta name="description" content="Plinth administrative interface for the FreedomBox" />
	<title>$default($title, "FreedomBox Dashboard")</title>

	<!-- This is the traditional favicon. Size: 16x16 or 32x32, transparency is OK -->
	<link rel="shortcut icon" href="$basehref/static/theme/img/favicon.ico" />
	
	<!-- 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) -->
	<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" />

	<!-- Bootstrap base CSS -->
	<link rel="stylesheet" href="$basehref/static/theme/css/bootstrap.css" />
	<style type="text/css">
	/* custom styles, load before bootstrap responsive styles */
	body {
        padding-top:60px;
        padding-bottom:40px;
      	}
	.sidebar-nav {
	padding: 9px 0;
	}
	</style>
	<!-- Bootstrap responsive CSS -->
	<link rel="stylesheet" href="$basehref/static/theme/css/bootstrap-responsive.css" />
	<style type="text/css">
	/* custom styles, load after all bootstrap styles */
	.super-hero {
	margin-top:25px;
	}
	.logo-top {
	float:left;
	padding-right:5px;
	}
	.brand {
	padding-top:8px;
	}
	.white {
	color:#fff;
	}
	.error-large {
	font-size:1.2em;
	padding:10px;
	}
	.main-graphic {
	float:right;
	padding:25px;
	}
	.nav-icon {
	margin-right:8px;
	}
	.sidenav-icon {
	margin-right:8px;
	padding-right:5px;
	}
	</style>
	<!-- CSS from previous Plinth template, not sure what to keep yet -->
	$css
	<!-- End Plinth CSS -->
	<!-- JS from previous Plinth template, not sure what to keep yet -->
	<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
	$main_menu_js
	$sub_menu_js
	<script type="text/javascript">
	  <!--
	    $onload
	  // --> 
	</script>
</head>
<body onload="javascript:onload_handler();">
<!--[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/" class="logo-top"><img src="$basehref/static/theme/img/freedombox-logo-32px.png" alt="FreedomBox" /></a><a class="brand" href="$basehref/">FreedomBox Dashboard</a>
	  #block add_nav_and_login
	  #end block add_nav_and_login
          </div><!--/.nav-collapse -->
        </div>
      </div>
    </div>

    <div class="container-fluid">
      <div class="row-fluid">
        #if $nav or $sidebar_right or $sidebar_left
        <div class="span3">
        #if $nav
          <div class="well sidebar-nav">
          </div><!--/.well -->
	#end if
        #if $sidebar_left
          <div class="well sidebar-nav">
		left $sidebar_left
          </div><!--/.well -->
	#end if
        #if $sidebar_right
          <div class="well sidebar-nav">
		$sidebar_right
          </div><!--/.well -->
	#end if
        </div>
	#end if
        <div class="span9">
          <div class="hero-unit" class="pull-left">
  		<h2>
		#block title_block
		$title
		#end block title_block
		</h2>
		#block main_block
		$main
		#end block main_block
          </div>
        </div><!--/span-->
      </div><!--/row-->

      <hr>

      <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.  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>
		
		</p>
		#end block footer_block</p>
      </footer>

    </div><!--/.fluid-container-->

<!-- 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, most files commented out until we know what we need -->
	<!--<script type="text/javascript" src="$basehref/static/theme/js/libs/bootstrap/bootstrap.js"></script>-->
	<script type="text/javascript" src="$basehref/static/theme/js/libs/bootstrap/bootstrap-min.js"></script>
	<script type="text/javascript" src="$basehref/static/theme/js/libs/bootstrap/button.js"></script>
	<script type="text/javascript" src="$basehref/static/theme/js/libs/bootstrap/dropdown.js"></script>
	<script type="text/javascript" src="$basehref/static/theme/js/libs/bootstrap/collapse.js"></script>
	<!--<script type="text/javascript" src="$basehref/static/theme/js/libs/bootstrap/transition.js"></script>-->
	<!--<script type="text/javascript" src="$basehref/static/theme/js/libs/bootstrap/alert.js"></script>-->
	<!--<script type="text/javascript" src="$basehref/static/theme/js/libs/bootstrap/modal.js"></script>-->
	<!--<script type="text/javascript" src="$basehref/static/theme/js/libs/bootstrap/scrollspy.js"></script>-->
	<!--<script type="text/javascript" src="$basehref/static/theme/js/libs/bootstrap/tab.js"></script>-->
	<!--<script type="text/javascript" src="$basehref/static/theme/js/libs/bootstrap/tooltip.js"></script>-->
	<!--<script type="text/javascript" src="$basehref/static/theme/js/libs/bootstrap/popover.js"></script>-->
	<!--<script type="text/javascript" src="$basehref/static/theme/js/libs/bootstrap/carousel.js"></script>-->
	<!--<script type="text/javascript" src="$basehref/static/theme/js/libs/bootstrap/typeahead.js"></script>-->
	<!-- JS plugins -->
	<script type="text/javascript" src="$basehref/static/theme/js/plugins.js"></script>
</body>
</html>