Added HTML5-Reset code http://html5reset.org

Removed robots.txt (we have "noindex,nofollow" in the template meta tags, do we need this?)
Added meta noindex,nofollow,noarchive tags for specific robots (googlebot etc.)
Removed extraneous meta tags useful only for indexing
Removed HTML5-Reset "_" directory.  Not sure why it's useful to add an ambiguous folder to the directory tree.
Made sure no Google-y code wasn't included (analytics, remote copy of JQuery, etc.)
Fixed symbolic link docs/style.css
New favicon and iOS "web clip" button
This commit is contained in:
Sean O'Brien 2012-02-24 17:18:33 -05:00 committed by James Vasile
parent 88a8dee485
commit 575aeb7b98
9 changed files with 172 additions and 201 deletions

View File

@ -68,7 +68,7 @@ def load_modules():
cfg.log("skipping %s" % name) cfg.log("skipping %s" % name)
def parse_arguments(): def parse_arguments():
parser = argparse.ArgumentParser(description='Plinht web interface for the FreedomBox.') parser = argparse.ArgumentParser(description='Plinth web interface for the FreedomBox.')
parser.add_argument('--pidfile', default="", parser.add_argument('--pidfile', default="",
help='specify a file in which the server may write its pid') help='specify a file in which the server may write its pid')
args=parser.parse_args() args=parser.parse_args()

View File

@ -5,55 +5,119 @@
$default $default
#end if #end if
#end def #end def
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <!doctype html>
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en-GB">
<head> <!--[if lt IE 7 ]> <html class="ie ie6 no-js" lang="en"> <![endif]-->
<title>$default($title, "Plinth Front End to the Freedom Box") <!--[if IE 7 ]> <html class="ie ie7 no-js" lang="en"> <![endif]-->
</title> <!--[if IE 8 ]> <html class="ie ie8 no-js" lang="en"> <![endif]-->
<meta http-equiv="Content-Type" content="application/xhtml+xml; charset=utf-8" /> <!--[if IE 9 ]> <html class="ie ie9 no-js" lang="en"> <![endif]-->
<meta name="description" content="Plint admin frontend for Freedom Box" /> <!--[if gt IE 9]><!--><html class="no-js" lang="en"><!--<![endif]-->
<meta name="robots" content="noindex, nofollow" /> <!-- the "no-js" class is for Modernizr. -->
<link rel="shortcut icon" href="$basehref/favicon.ico" type="image/x-icon" />
<link rel="stylesheet" type="text/css" href="$basehref/static/theme/style.tiny.css" media="screen" /> <head id="www-sitename-com" data-template-set="html5-reset">
<meta charset="utf-8" />
<!-- Always force latest IE rendering engine (even in intranet) & 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" />
<!-- 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" />
-->
<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/ -->
<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) -->
<!-- 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" />-->
$css $css
<script type="text/javascript" src="$basehref/static/theme/menu.js"></script>
<script type="text/javascript" src="$basehref/static/theme/plinth.js"></script> <!-- 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 -->
<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 $js
$main_menu_js $main_menu_js
$sub_menu_js $sub_menu_js
<script LANGUAGE="JavaScript"> <script type="text/javascript">
<!-- <!--
$onload $onload
// --> // -->
</script> </script>
</head> </head>
<body onLoad="javascript:onload_handler();"> <body onload="javascript:onload_handler();">
<div id="header"> <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"> <div id="headerleft">
<a href="$basehref/"><img src="$basehref/static/theme/images/freedombox.png" /></a> <a href="$basehref/"><img src="$basehref/static/theme/img/freedombox.png" /></a>
</div> </div> <!-- End headerleft -->
<div id="headerright"> <div id="headerright">
<br /><br /><br /> <br /><br /><br />
<h1><a href="$basehref/"><img src="$basehref/static/theme/images/freedombox-logotype.png" /></a></h1> <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> <h2><a href="$basehref/">Plinth Administration Control Panel</a></h2>
<SCRIPT LANGUAGE="JavaScript"> <nav>
<script>
<!-- <!--
main_menu(main_menu_items); main_menu(main_menu_items);
// --> // -->
</SCRIPT> </script>
</div> </nav> <!-- End main menu -->
</div> <!-- End headerright -->
#if $username #if $username
<p id="layoutdims">Logged in as $username. <a href="$basehref/auth/logout" title="Log out">Logout.</a></p> <p id="layoutdims">Logged in as $username. <a href="$basehref/auth/logout" title="Log out">Logout.</a></p>
#else #else
<p id="layoutdims">Not logged in. <a href="$basehref/auth/login" title="Log in">Log in.</a></p> <p id="layoutdims">Not logged in. <a href="$basehref/auth/login" title="Log in">Log in.</a></p>
#end if #end if
</div> <!-- should be replaced by </header> for HTML5 transition -->
</header> <!-- End header -->
</div>
<div class="colmask threecol"> <div class="colmask threecol">
<div class="colmid"> <div class="colmid">
<div class="colleft"> <div class="colleft">
<article>
<div class="col1"> <div class="col1">
<!-- Column 1 start -->
<h2> <h2>
#block title_block #block title_block
$title $title
@ -62,20 +126,21 @@
#block main_block #block main_block
$main $main
#end block main_block #end block main_block
<!-- Column 1 end -->
</div> </div>
</article> <!-- End column 1 -->
<div class="col2"> <div class="col2">
<!-- Column 2 start -->
#block nav_block #block nav_block
$nav $nav
#end block nav_block #end block nav_block
#block sidebar_left_block #block sidebar_left_block
$sidebar_left $sidebar_left
#end block sidebar_left_block #end block sidebar_left_block
<!-- Column 2 end -->
</div> </div> <!-- End column 2 -->
<aside>
<div class="col3"> <div class="col3">
<!-- Column 3 start -->
<div id="ads"> <div id="ads">
<!--<a href="http://matthewjamestaylor.com"> <!--<a href="http://matthewjamestaylor.com">
<img src="mjt-125x125.gif" width="125" border="0" height="125" alt="Art and Design by Matthew James Taylor" /> <img src="mjt-125x125.gif" width="125" border="0" height="125" alt="Art and Design by Matthew James Taylor" />
@ -85,28 +150,34 @@
#block sidebar_right_block #block sidebar_right_block
$sidebar_right $sidebar_right
#end block sidebar_right_block #end block sidebar_right_block
<!-- Column 3 end --> </div>
</aside> <!-- End column 3 -->
</div> </div>
</div> </div>
</div> </div>
</div>
<div id="footer"> <footer>
<div id="footer"> <!-- should be replaced by <footer> for HTML5 transition -->
#block footer_block #block footer_block
<p> <p>
Plinth is copyright 2011 <a href="http://hackervisions.org">James Vasile</a>. It is 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 free software offered to you under the terms of
the <a href="http://www.gnu.org/licenses/agpl.html">GNU Affero General Public 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.
</p> </p>
<!--<p>Current page: $current_url</p>--> <!--<p>Current page: $current_url</p>-->
<p> <p>
This page uses This page uses
the <a href="http://matthewjamestaylor.com/blog/perfect-3-column.htm">Perfect the <a href="http://matthewjamestaylor.com/blog/perfect-3-column.htm" target="_blank">Perfect
'Holy Grail' 3 Column Liquid Layout</a> 'Holy Grail' 3 Column Liquid Layout</a>
by <a href="http://matthewjamestaylor.com">Matthew James Taylor</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> </p>
#end block footer_block #end block footer_block
</div> </div> <!-- should be replaced by </footer> for HTML5 transition -->
</footer>
</div> <!-- End wrapper -->
</body> </body>
</html> </html>

View File

@ -1,5 +1,5 @@
#extends templates.base #extends templates.base
#def css #def css
<link rel="stylesheet" type="text/css" href="$basehref/static/theme/2col.tiny.css" media="screen" /> <link rel="stylesheet" href="$basehref/static/theme/style-plinth-2col.css" />
#end def #end def

View File

@ -1,30 +0,0 @@
/* 2 Column settings */
.colright {
float:left;
width:0%; /* width of page */
position:relative;
}
.threecol .colmid {
right:5%; /* width of the right column */
}
.threecol .colleft {
right:70%; /* width of the middle column */
}
.threecol .col1 {
width:66%; /* width of center column content (column width minus padding on either side) */
left:102%; /* 100% plus left padding of center column */
}
.threecol .col2 {
width:21%; /* Width of left column content (column width minus padding on either side) */
left:11%; /* width of (right column) plus (center column left and right padding) plus (left column left padding) */
}
.threecol .col3 {
width:21%; /* Width of right column content (column width minus padding on either side) */
/* Note this used to be 85%, but I subtracted 1% for padding to pull stuff closer to the margin */
left:84%; /* Please make note of the brackets here:
(100% - left column width) plus (center column left and right padding) plus (left column left and right padding) plus (right column left padding) */
}

Binary file not shown.

Before

Width:  |  Height:  |  Size: 4.6 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 10 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 22 KiB

View File

@ -1,54 +0,0 @@
function main_menu(items) {
output = "<ul>"
for (item in items) {
i = items[item];
// Handle active page
if (i["active"]) {
active = 'class = "active"';
} else {
active = '';
}
// Line break labels
label = i["label"];
if (label.search(" ") != -1) {
label = label.replace(" ", "<br />");
} else {
label = "&nbsp;<br />" + label;
}
output = output +'<li><a href="' + i["url"] + '" ' + active + '>' + label + "</a></li>";
}
output = output + "</ul>";
document.write(output);
}
function render_items(items) {
output = "<ul>";
for (item in items) {
i = items[item];
// Handle active page
if (i["active"]) {
active = 'class = "active"';
} else {
active = '';
}
output = output +'<li><a href="' + i["url"] + '" ' + active + '>' + i['label'] + "</a></li>";
if (i['subs']) {
output += render_items(i['subs']);
}
}
output = output + "</ul>";
return output
}
function side_menu(items) {
if (items.length == 0) {
return 0;
}
output = "<h2>Menu</h2>" + render_items(items);
document.write(output);
}

View File

@ -1,16 +0,0 @@
function toggle_visibility(id) {
var d = document.getElementById(id);
if(d.style.display == 'block')
d.style.display = 'none';
else
d.style.display = 'block';
}
function show(id) {
var d = document.getElementById(id);
d.style.display = 'block';
}
function hide(id) {
document.getElementById(id).style.display = 'none';
}