Permalink
Browse files

fixes to boostrap, new icons, mobile view works

  • Loading branch information...
1 parent cf5b9b9 commit 5f123c742857bb43051829502b0bab8db37dbe37 Sean O'Brien committed Mar 10, 2012
View
@@ -10,7 +10,7 @@
users_dir = os.path.join(data_dir, "users")
product_name = "Plinth"
-box_name = "Freedom Plug"
+box_name = "FreedomBox"
port = 8000
View
21 menu.py
@@ -5,11 +5,15 @@
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 @@ def __init__(self, label="", url="#", order=50):
"""
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 @@ def add_item(self, label, url, order=50, basehref=True):
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 @@ def serializable(self, render_subs=False):
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 @@ def encode(self, name="", render_subs=False):
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>')
@@ -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):
@@ -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 @@ def index(self):
@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
@@ -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):
@@ -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 @@ def hotspot(self):
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()
@@ -114,7 +114,7 @@ def index(self, *args, **kw):
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
@@ -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):
@@ -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()
@@ -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()
@@ -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
@@ -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
@@ -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" />
- <link rel="stylesheet" href="$basehref/static/theme/css/bootstrap-responsive.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 */
+ /* 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,25 +117,25 @@
<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">
<!--
main_menu(main_menu_items);
// -->
</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>
</div>
</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
@@ -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
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Oops, something went wrong.

0 comments on commit 5f123c7

Please sign in to comment.