fixes to boostrap, new icons, mobile view works

This commit is contained in:
Sean O'Brien 2012-03-10 11:18:49 -05:00 committed by James Vasile
parent 2f5c98dd6f
commit 5685d3f387
19 changed files with 137 additions and 90 deletions

View File

@ -10,7 +10,7 @@ access_log_file = os.path.join(data_dir, "access.log")
users_dir = os.path.join(data_dir, "users")
product_name = "Plinth"
box_name = "Freedom Plug"
box_name = "FreedomBox"
port = 8000

21
menu.py
View File

@ -5,11 +5,15 @@ import cfg
class Menu():
"""One menu item."""
def __init__(self, label="", url="#", order=50):
def __init__(self, label="", icon="", url="#", order=50):
"""label is the text that is displayed on the menu.
icon is the icon to be displayed next to the label.
Choose from the Glyphicon set:
http://twitter.github.com/bootstrap/base-css.html#icons
url is the url location that will be activated when the menu
item is selected
item is selected.
order is the numerical rank of this item within the menu.
Lower order items appear closest to the top/left of the menu.
@ -20,14 +24,15 @@ class Menu():
"""
self.label = label
self.order = order
self.icon = icon
self.url = url
self.order = order
self.items = []
def sort_items(self):
"""Sort the items in self.items by order."""
self.items = sorted(self.items, key=lambda x: x.order, reverse=False)
def add_item(self, label, url, order=50, basehref=True):
def add_item(self, label, icon, url, order=50, basehref=True):
"""This method creates a menu item with the parameters, adds
that menu item to this menu, and returns the item.
@ -36,7 +41,7 @@ class Menu():
if basehref and url.startswith("/"):
url = cfg.base_href + url
item = Menu(label=label, url=url, order=order)
item = Menu(label=label, icon=icon, url=url, order=order)
self.items.append(item)
self.sort_items()
return item
@ -61,7 +66,7 @@ class Menu():
so = []
for item in self.items:
i = { 'label':item.label, 'url':item.url}
i = { 'label':item.label, 'icon':item.icon, 'url':item.url}
if item.active_p():
i['active']=True
if item.items and render_subs:
@ -74,7 +79,7 @@ class Menu():
if render_subs is True, we render submenus too"""
return ('<SCRIPT LANGUAGE="JavaScript">\n <!--\n var %s_items=' % name
return ('<script type="text/javascript">\n <!--\n var %s_items=' % name
#+ json.dumps(self.serializable(render_subs=render_subs), separators=(',',':')) # compact
+ "\n"+ json.dumps(self.serializable(render_subs=render_subs), sort_keys=True, indent=4) # pretty print
+ ';\n // -->\n </SCRIPT>')
+ ';\n // -->\n </script>')

View File

@ -7,8 +7,8 @@ class Apps(PagePlugin):
def __init__(self, *args, **kwargs):
PagePlugin.__init__(self, *args, **kwargs)
self.register_page("apps")
self.menu = cfg.main_menu.add_item("Apps", "/apps", 80)
self.menu.add_item("Photo Gallery", "/apps/photos", 35)
self.menu = cfg.main_menu.add_item("Apps", "icon-download-alt", "/apps", 80)
self.menu.add_item("Photo Gallery", "icon-picture", "/apps/photos", 35)
@cherrypy.expose
def index(self):

View File

@ -8,12 +8,12 @@ class Help(PagePlugin):
def __init__(self, *args, **kwargs):
PagePlugin.__init__(self, *args, **kwargs)
self.register_page("help")
self.menu = cfg.main_menu.add_item(_("Documentation"), "/help", 101)
self.menu.add_item(_("Where to Get Help"), "/help/index", 5)
self.menu.add_item(_("Developer's Manual"), "/help/view/plinth", 10)
self.menu.add_item(_("FAQ"), "/help/view/faq", 20)
self.menu.add_item(_("%s Wiki" % cfg.box_name), "http://wiki.debian.org/FreedomBox", 30)
self.menu.add_item(_("About"), "/help/about", 100)
self.menu = cfg.main_menu.add_item(_("Documentation"), "icon-book", "/help", 101)
self.menu.add_item(_("Where to Get Help"), "icon-search", "/help/index", 5)
self.menu.add_item(_("Developer's Manual"), "icon-info-sign", "/help/view/plinth", 10)
self.menu.add_item(_("FAQ"), "icon-question-sign", "/help/view/faq", 20)
self.menu.add_item(_("%s Wiki" % cfg.box_name), "icon-pencil", "http://wiki.debian.org/FreedomBox", 30)
self.menu.add_item(_("About"), "icon-star", "/help/about", 100)
@cherrypy.expose
def index(self):
@ -48,7 +48,7 @@ class Help(PagePlugin):
@cherrypy.expose
def about(self):
return self.fill_template(title=_("About the %s" % cfg.box_name), main="""
<img src="/static/theme/img/freedombox-logo-200px.png" style="float:right;padding:25px;" />
<img src="/static/theme/img/freedombox-logo-250px.png" class="main-graphic" />
<p>We live in a world where our use of the network is
mediated by those who often do not have our best
interests at heart. By building software that does not rely on

View File

@ -9,11 +9,11 @@ class Privacy(PagePlugin):
def __init__(self, *args, **kwargs):
PagePlugin.__init__(self, *args, **kwargs)
self.register_page("privacy")
self.menu = cfg.main_menu.add_item("Privacy", "/privacy", 12)
self.menu.add_item("General Config", "/privacy/config", 10)
self.menu.add_item("Ad Blocking", "/privacy/adblock", 20)
self.menu.add_item("TOR", "/privacy/TOR", 30)
self.menu.add_item("HTTPS Everywhere", "/privacy/https_everywhere", 30)
self.menu = cfg.main_menu.add_item("Privacy", "icon-eye-open", "/privacy", 12)
self.menu.add_item("General Config", "icon-asterisk", "/privacy/config", 10)
self.menu.add_item("Ad Blocking", "icon-ban-circle", "/privacy/adblock", 20)
self.menu.add_item("TOR", "icon-eye-close", "/privacy/TOR", 30)
self.menu.add_item("HTTPS Everywhere", "icon-lock", "/privacy/https_everywhere", 30)
@cherrypy.expose
def index(self):

View File

@ -11,11 +11,11 @@ class router(PagePlugin):
order = 9 # order of running init in PagePlugins
def __init__(self, *args, **kwargs):
self.register_page("router")
self.menu = cfg.main_menu.add_item("Router", "/router", 10)
self.menu.add_item("Wireless", "/router/wireless", 12)
self.menu.add_item("Firewall", "/router/firewall", 18)
self.menu.add_item("Hotspot and Mesh", "/router/hotspot")
self.menu.add_item("Info", "/router/info", 100)
self.menu = cfg.main_menu.add_item("Router", "icon-retweet", "/router", 10)
self.menu.add_item("Wireless", "icon-signal", "/router/wireless", 12)
self.menu.add_item("Firewall", "icon-fire", "/router/firewall", 18)
self.menu.add_item("Hotspot and Mesh", "icon-map-marker", "/router/hotspot")
self.menu.add_item("Info", "icon-list-alt", "/router/info", 100)
@cherrypy.expose
def index(self):
@ -45,9 +45,9 @@ class router(PagePlugin):
class setup(PagePlugin):
def __init__(self, *args, **kwargs):
self.register_page("router.setup")
self.menu = cfg.html_root.router.menu.add_item("General Setup", "/router/setup", 10)
self.menu.add_item("Dynamic DNS", "/router/setup/ddns", 20)
self.menu.add_item("MAC Address Clone", "/router/setup/mac_address", 30)
self.menu = cfg.html_root.router.menu.add_item("General Setup", "icon-cog", "/router/setup", 10)
self.menu.add_item("Dynamic DNS", "icon-flag", "/router/setup/ddns", 20)
self.menu.add_item("MAC Address Clone", "icon-barcode", "/router/setup/mac_address", 30)
@cherrypy.expose
@require()

View File

@ -114,7 +114,7 @@ class Santiago(PagePlugin):
class santiago(PagePlugin):
def __init__(self, *args, **kwargs):
PagePlugin.__init__(self, *args, **kwargs)
self.menu = cfg.html_root.privacy.menu.add_item("Santiago", "/privacy/santiago", 10)
self.menu = cfg.html_root.privacy.menu.add_item("Santiago", "icon-leaf", "/privacy/santiago", 10)
self.register_page("privacy.santiago")
@cherrypy.expose

View File

@ -8,8 +8,8 @@ class Services(PagePlugin):
def __init__(self, *args, **kwargs):
PagePlugin.__init__(self, *args, **kwargs)
self.register_page("services")
self.menu = cfg.main_menu.add_item("Services", "/services", 90)
self.menu.add_item("Open ID", "/services/openid", 35)
self.menu = cfg.main_menu.add_item("Services", "icon-list", "/services", 90)
self.menu.add_item("Open ID", "icon-user", "/services/openid", 35)
@cherrypy.expose
def index(self):

View File

@ -7,7 +7,7 @@ class FileExplorer(PagePlugin):
def __init__(self, *args, **kwargs):
PagePlugin.__init__(self, *args, **kwargs)
self.register_page("sharing.explorer")
cfg.html_root.sharing.menu.add_item("File Explorer", "/sharing/explorer", 30)
cfg.html_root.sharing.menu.add_item("File Explorer", "icon-folder-open", "/sharing/explorer", 30)
@cherrypy.expose
@require()

View File

@ -10,8 +10,8 @@ class Sharing(PagePlugin):
def __init__(self, *args, **kwargs):
PagePlugin.__init__(self, *args, **kwargs)
self.register_page("sharing")
self.menu = cfg.main_menu.add_item("Sharing", "/sharing", 35)
self.menu.add_item("File Server", "/sharing/files", 10)
self.menu = cfg.main_menu.add_item("Sharing", "icon-share-alt", "/sharing", 35)
self.menu.add_item("File Server", "icon-inbox", "/sharing/files", 10)
@cherrypy.expose
def index(self):
@ -37,7 +37,7 @@ class PrinterSharing(PagePlugin):
def __init__(self, *args, **kwargs):
PagePlugin.__init__(self, *args, **kwargs)
self.register_page("sharing.printer")
cfg.html_root.sharing.menu.add_item("Printer Sharing", "/sharing/printer", 35)
cfg.html_root.sharing.menu.add_item("Printer Sharing", "icon-print", "/sharing/printer", 35)
@cherrypy.expose
@require()

View File

@ -18,10 +18,10 @@ class Sys(PagePlugin):
def __init__(self, *args, **kwargs):
PagePlugin.__init__(self, *args, **kwargs)
self.register_page("sys")
self.menu = cfg.main_menu.add_item(_("System"), "/sys", 100)
self.menu.add_item(_("Configure"), "/sys/config", 10)
self.menu.add_item(_("Package Manager"), "/sys/packages", 20)
self.menu.add_item(_("Users and Groups"), "/sys/users", 15)
self.menu = cfg.main_menu.add_item(_("System"), "icon-cog", "/sys", 100)
self.menu.add_item(_("Configure"), "icon-cog", "/sys/config", 10)
self.menu.add_item(_("Package Manager"), "icon-gift", "/sys/packages", 20)
self.menu.add_item(_("Users and Groups"), "icon-user", "/sys/users", 15)
@cherrypy.expose
def index(self):

View File

@ -40,7 +40,7 @@ def error_page_500(status, message, traceback, version):
cfg.log.error("500 Internal Server Error. Trackback is above.")
more="""<p>This is an internal error and not something you caused
or can fix. Please report the error on the <a
href="https://github.com/jvasile/Plinth/issues">bug tracker</a> so
href="https://github.com/seandiggity/Plinth/issues">bug tracker</a> so
we can fix it.</p>"""
return error_page(status, message, "<p>%s</p><pre>%s</pre>" % (more, "\n".join(traceback.split("\n"))))

View File

@ -45,14 +45,22 @@
<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" />
<!-- CSS from previous template, not sure what to keep yet -->
$css
<!-- Bootstrap CSS -->
<!-- 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">
<style type="text/css">
/* custom styles */
/* custom styles, load after all bootstrap styles */
.super-hero {
margin-top:25px;
}
@ -63,31 +71,28 @@
.brand {
padding-top:8px;
}
.icon-top {
margin:0 5px 0 8px;
}
.icon-top-right {
margin:0 5px 0 10px;
}
.white {
color:#fff;
}
.nav-top-right {
color:#999;
.error-large {
font-size:1.2em;
padding:10px;
}
.nav-top-right a:link {
color:#999;
text-decoration:none;
.main-graphic {
float:right;
padding:25px;
}
.nav-top-right a:hover {
color:#fff;
text-decoration:none;
.nav-icon {
margin-right:8px;
}
.nav-top-right a:active {
color:#fff;
text-decoration:none;
.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>
@ -112,7 +117,7 @@
<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</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>
<div class="nav-collapse">
<script type="text/javascript">
<!--
@ -120,9 +125,9 @@
// -->
</script>
#if $username
<p class="navbar-text pull-right"><i class="icon-user icon-white icon-top-right"></i>Logged in as <a href="$username">$username</a>. <a href="$basehref/auth/logout" title="Log out">Log out</a>.</p>
<p class="navbar-text pull-right"><i class="icon-user icon-white nav-icon"></i>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. <i class="icon-user icon-white icon-top-right"></i><a href="$basehref/auth/login" title="Log in">Log in</a>.</p>
<p class="navbar-text pull-right">Not logged in. <i class="icon-user icon-white nav-icon"></i><a href="$basehref/auth/login" title="Log in">Log in</a>.</p>
#end if
</div><!--/.nav-collapse -->
</div>
@ -130,7 +135,7 @@
</div>
<div class="container-fluid">
<div class="row-fluid super-hero">
<div class="row-fluid">
<div class="span3">
<div class="well sidebar-nav">
#block nav_block
@ -152,6 +157,7 @@
$main
#end block main_block
</div>
<div class="row-fluid">
<div class="span8 alert alert-info">
#block sidebar_right_block
@ -191,22 +197,22 @@
<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, commented out until we know what we need -->
<!--<script type="text/javascript" src="js/bootstrap/bootstrap-transition.js"></script>-->
<!--<script type="text/javascript" src="js/bootstrap/bootstrap-alert.js"></script>-->
<!--<script type="text/javascript" src="js/bootstrap/bootstrap-modal.js"></script>-->
<!--<script type="text/javascript" src="js/bootstrap/bootstrap-dropdown.js"></script>-->
<!--<script type="text/javascript" src="js/bootstrap/bootstrap-scrollspy.js"></script>-->
<!--<script type="text/javascript" src="js/bootstrap/bootstrap-tab.js"></script>-->
<!--<script type="text/javascript" src="js/bootstrap/bootstrap-tooltip.js"></script>-->
<!--<script type="text/javascript" src="js/bootstrap/bootstrap-popover.js"></script>-->
<!--<script type="text/javascript" src="js/bootstrap/bootstrap-button.js"></script>-->
<!--<script type="text/javascript" src="js/bootstrap/bootstrap-collapse.js"></script>-->
<!--<script type="text/javascript" src="js/bootstrap/bootstrap-carousel.js"></script>-->
<!--<script type="text/javascript" src="js/bootstrap/bootstrap-typeahead.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>
<!-- Additional JS -->
<script type="text/javascript" src="$basehref/static/theme/js/functions.js"></script>
</body>
</html>

View File

@ -1,7 +1,7 @@
#extends templates.two_col
#def title_block
<span class="label label-important">Error: $title</span>
<span class="label label-important error-large">Error: $title</span>
<br />
<br />
#end def

Binary file not shown.

After

Width:  |  Height:  |  Size: 14 KiB

View File

@ -11,12 +11,16 @@ function main_menu(items) {
}
// Line break labels
label = i["label"];
/*label = i["label"];
if (label.search(" ") != -1) {
label = label.replace(" ", "<br />");
} else {
label = "&nbsp;<br />" + label;
}
}*/
// Add icon before labels
icon = '<i class="' + i["icon"] + ' icon-white nav-icon"></i>';
label = icon + i["label"];
output = output +'<li' + active + '><a href="' + i["url"] + '"' + active + '>' + label + "</a></li>";
}
@ -32,11 +36,20 @@ function render_items(items) {
// Handle active page
if (i["active"]) {
active = ' class="active"';
// Add icon before labels
icon = '<i class="' + i["icon"] + ' icon-white sidenav-icon"></i>';
label = icon + i["label"];
} else {
active = '';
// Add icon before labels
icon = '<i class="' + i["icon"] + ' sidenav-icon"></i>';
label = icon + i["label"];
}
output = output +'<li' + active + '><a href="' + i["url"] + '"' + active + '>' + i['label'] + "</a></li>";
output = output +'<li' + active + '><a href="' + i["url"] + '"' + active + '>' + label + "</a></li>";
if (i['subs']) {
output += render_items(i['subs']);
}

View File

@ -9,3 +9,26 @@ window.log = function f(){ log.history = log.history || []; log.history.push(arg
// place any jQuery/helper plugins in here, instead of separate, slower script files.
// remap jQuery to $
(function($){})(window.jQuery);
/* trigger when page is ready */
$(document).ready(function (){
// your functions go here
});
/* optional triggers
$(window).load(function() {
});
$(window).resize(function() {
});
*/

Binary file not shown.

Before

Width:  |  Height:  |  Size: 115 KiB

After

Width:  |  Height:  |  Size: 116 KiB

View File

@ -79,11 +79,11 @@ def page_template(template='base', **kwargs):
kwargs['current_url'] = cherrypy.url()
kwargs['username'] = cherrypy.session.get(cfg.session_key)
if not kwargs['nav']: kwargs['nav'] = """ <SCRIPT LANGUAGE="JavaScript">
if not kwargs['nav']: kwargs['nav'] = """ <script type="text/javascript">
<!--
side_menu(sub_menu_items);
// -->
</SCRIPT>"""
</script>"""
return str(template(searchList=[kwargs]))