replaced bootstrap2 by bootstrap3

This commit is contained in:
fonfon 2014-11-11 19:06:47 +01:00
parent 9a88174ab4
commit f0582e7a94
19 changed files with 144 additions and 169 deletions

View File

@ -5,7 +5,7 @@
On a Debian based system, run:
$ sudo apt-get install libjs-jquery libjs-modernizr \
libjs-twitter-bootstrap make pandoc python3 python3-cherrypy3 \
libjs-bootstrap make pandoc python3 python3-cherrypy3 \
python3-django python3-bootstrapform python3-setuptools
2. Install Plinth:

View File

@ -6,7 +6,7 @@ from plinth import cfg
def init():
"""Initailize the apps module"""
cfg.main_menu.add_urlname("Apps", "icon-download-alt", "apps:index", 80)
cfg.main_menu.add_urlname("Apps", "glyphicon-download-alt", "apps:index", 80)
def index(request):

View File

@ -95,7 +95,7 @@ and must not be greater than 63 characters in length.'),
def init():
"""Initialize the module"""
menu = cfg.main_menu.get('system:index')
menu.add_urlname(_('Configure'), 'icon-cog', 'config:index', 10)
menu.add_urlname(_('Configure'), 'glyphicon-cog', 'config:index', 10)
@login_required

View File

@ -31,7 +31,7 @@ from plinth.errors import ActionError
def init():
"""Initialize the module"""
menu = cfg.main_menu.get('system:index')
menu.add_urlname("Diagnostics", "icon-screenshot", "diagnostics:index", 30)
menu.add_urlname("Diagnostics", "glyphicon-screenshot", "diagnostics:index", 30)
@login_required

View File

@ -17,7 +17,7 @@ class ExpertsForm(forms.Form): # pylint: disable-msg=W0232
def init():
"""Initialize the module"""
menu = cfg.main_menu.get('system:index')
menu.add_urlname(_('Expert Mode'), 'icon-cog', 'expert_mode:index', 10)
menu.add_urlname(_('Expert Mode'), 'glyphicon-wrench', 'expert_mode:index', 10)
@login_required

View File

@ -36,7 +36,7 @@ LOGGER = logging.getLogger(__name__)
def init():
"""Initailze firewall module"""
menu = cfg.main_menu.get('system:index')
menu.add_urlname(_('Firewall'), 'icon-flag', 'firewall:index', 50)
menu.add_urlname(_('Firewall'), 'glyphicon-flag', 'firewall:index', 50)
service_enabled.connect(on_service_enabled)

View File

@ -8,17 +8,17 @@ from plinth import cfg
def init():
"""Initialize the Help module"""
menu = cfg.main_menu.add_urlname(_('Documentation'), 'icon-book',
menu = cfg.main_menu.add_urlname(_('Documentation'), 'glyphicon-book',
'help:index', 101)
menu.add_urlname(_('Where to Get Help'), 'icon-search',
menu.add_urlname(_('Where to Get Help'), 'glyphicon-search',
'help:index_explicit', 5)
menu.add_urlname(_('Developer\'s Manual'), 'icon-info-sign',
menu.add_urlname(_('Developer\'s Manual'), 'glyphicon-info-sign',
'help:helppage', 10, url_args=('plinth',))
menu.add_urlname(_('FAQ'), 'icon-question-sign', 'help:helppage', 20,
menu.add_urlname(_('FAQ'), 'glyphicon-question-sign', 'help:helppage', 20,
url_args=('faq',))
menu.add_item(_('%s Wiki' % cfg.box_name), 'icon-pencil',
menu.add_item(_('%s Wiki' % cfg.box_name), 'glyphicon-pencil',
'http://wiki.debian.org/FreedomBox', 30)
menu.add_urlname(_('About'), 'icon-star', 'help:about', 100)
menu.add_urlname(_('About'), 'glyphicon-star', 'help:about', 100)
def index(request):

View File

@ -20,7 +20,7 @@ class OwnCloudForm(forms.Form): # pylint: disable-msg=W0232
def init():
"""Initialize the ownCloud module"""
menu = cfg.main_menu.get('apps:index')
menu.add_urlname('Owncloud', 'icon-picture', 'owncloud:index', 35)
menu.add_urlname('Owncloud', 'glyphicon-picture', 'owncloud:index', 35)
status = get_status()

View File

@ -40,7 +40,7 @@ class PackagesForm(forms.Form):
def init():
"""Initialize the Packages module"""
menu = cfg.main_menu.get('system:index')
menu.add_urlname('Package Manager', 'icon-gift', 'packages:index', 20)
menu.add_urlname('Package Manager', 'glyphicon-gift', 'packages:index', 20)
@login_required

View File

@ -40,7 +40,7 @@ LOGGER = logging.getLogger(__name__)
def init():
"""Intialize the PageKite module"""
menu = cfg.main_menu.get('apps:index')
menu.add_urlname(_('Public Visibility (PageKite)'), 'icon-flag',
menu.add_urlname(_('Public Visibility (PageKite)'), 'glyphicon-flag',
'pagekite:index', 50)

View File

@ -6,7 +6,7 @@ from plinth import cfg
def init():
"""Initialize the system module"""
cfg.main_menu.add_urlname(_('System'), 'icon-cog', 'system:index', 100)
cfg.main_menu.add_urlname(_('System'), 'glyphicon-cog', 'system:index', 100)
def index(request):

View File

@ -39,7 +39,7 @@ class TorForm(forms.Form): # pylint: disable=W0232
def init():
"""Initialize the Tor module"""
menu = cfg.main_menu.get('apps:index')
menu.add_urlname('Tor', 'icon-eye-close', 'tor:index', 30)
menu.add_urlname('Tor', 'glyphicon-eye-close', 'tor:index', 30)
@login_required

View File

@ -20,7 +20,7 @@ LOGGER = logging.getLogger(__name__)
def init():
"""Intialize the module"""
menu = cfg.main_menu.get('system:index')
menu.add_urlname(_('Users and Groups'), 'icon-user', 'users:index', 15)
menu.add_urlname(_('Users and Groups'), 'glyphicon-user', 'users:index', 15)
@login_required

View File

@ -33,8 +33,8 @@ SIDE_MENU = {
def init():
"""Initialize the XMPP module"""
menu = cfg.main_menu.get('apps:index')
menu.add_item('Chat', 'icon-comment', '/../jwchat', 20)
menu.add_urlname('XMPP', 'icon-comment', 'xmpp:index', 40)
menu.add_item('Chat', 'glyphicon-comment', '/../jwchat', 20)
menu.add_urlname('XMPP', 'glyphicon-comment', 'xmpp:index', 40)
service.Service(
'xmpp-client', _('Chat Server - client connections'),

View File

@ -24,8 +24,6 @@
<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="{% if title %} {{ title }} {% else %} FreedomBox {% endif %}" />
<meta name="description" content="Plinth administrative interface for the FreedomBox" />
<title>{% if title %} {{ title }} {% else %} FreedomBox {% endif %}</title>
@ -40,75 +38,72 @@
<link rel="apple-touch-icon" sizes="114x114" href="{% static 'theme/img/apple-touch-icon-114px-precomposed.png' %}"/>
<!-- Bootstrap base CSS -->
<link rel="stylesheet" href="{% static 'theme/css/bootstrap.min.css' %}"/>
<!-- Bootstrap responsive CSS -->
<link rel="stylesheet" href="{% static 'theme/css/bootstrap-responsive.min.css' %}"/>
<link rel="stylesheet" href="{% static 'theme/bootstrap/css/bootstrap.min.css' %}"/>
<link rel="stylesheet" href="{% static 'theme/css/plinth.css' %}"/>
<!-- CSS from previous Plinth template, not sure what to keep yet -->
{{ css|safe }}
<!-- End Plinth CSS -->
{% block app_head %}<!-- placeholder for app/module-specific head files -->{% endblock %}
{% block page_head %}<!-- placeholder for page-specific head files -->{% endblock %}
</head>
<body>
<!--[if lt IE 7]><p class=chromeframe>Your browser is <em>ancient!</em> <a href="http://mozilla.org/firefox">Upgrade to a modern version of Firefox</a> to experience this site.</p><![endif]-->
<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="{% url 'index' %}" class="logo-top">
<img src="{% static 'theme/img/freedombox-logo-32px.png' %}"
alt="FreedomBox" />
</a>
<a class="brand" href="{% url 'index' %}">FreedomBox</a>
{% block add_nav_and_login %}
<div class="nav-collapse">
<ul class="nav">
{% for item in cfg.main_menu.items %}
{% if item.url in active_menu_urls %}
<li class="active">
<a href="{{ item.url }}" class="active">
{% else %}
<li>
<a href="{{ item.url }}">
{% endif %}
<span class="{{ item.icon }} icon-white nav-icon"></span>
{{ item.label }}
</a>
</li>
{% endfor %}
</ul>
<div class="navbar navbar-fixed-top navbar-inverse" role="navigation">
<div class="container">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse"
data-target=".navbar-collapse">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a href="{% url 'index' %}" class="navbar-brand">
<img src="{% static 'theme/img/freedombox-logo-32px.png' %}"
alt="FreedomBox" />
FreedomBox
</a>
</div>
<div class="collapse navbar-collapse">
{% block add_nav_and_login %}
<ul class="nav navbar-nav">
{% for item in cfg.main_menu.items %}
{% if item.url in active_menu_urls %}
<li class="active">
<a href="{{ item.url }}" class="active">
{% else %}
<li>
<a href="{{ item.url }}">
{% endif %}
{% if user.is_authenticated %}
<p class="navbar-text pull-right">
<i class="icon-user icon-white nav-icon"></i>
Logged in as <a href="#">{{ user.username }}</a>.
<a href="{% url 'lib:logout' %}" title="Log out">
Log out</a>.
</p>
{% else %}
<p class="navbar-text pull-right">
Not logged in.
<i class="icon-user icon-white nav-icon"></i>
<a href="{% url 'lib:login' %}" title="Log in">
Log in</a>.
</p>
{% endif %}
{% endblock %}
</div><!--/.nav-collapse -->
</div>
<span class="{{ item.icon }} glyphicon glyphicon-white nav-icon"></span>
{{ item.label }}
</a>
</li>
{% endfor %}
</ul>
{% if user.is_authenticated %}
<p class="navbar-text pull-right">
<i class="glyphicon glyphicon-user glyphicon-white nav-icon"></i>
Logged in as <a href="#">{{ user.username }}</a>.
<a href="{% url 'lib:logout' %}" title="Log out">
Log out</a>.
</p>
{% else %}
<p class="navbar-text pull-right">
Not logged in.
<i class="glyphicon glyphicon-user glyphicon-white nav-icon"></i>
<a href="{% url 'lib:login' %}" title="Log in">
Log in</a>.
</p>
{% endif %}
{% endblock %}
</div>
</div>
</div>
<div class="container-fluid">
<div class="row-fluid">
{% if submenu or sidebar_right or sidebar_left %}
<div class="span3">
<div class="container-fluid">
<div class="row">
{% if submenu or sidebar_right or sidebar_left %}
<div class="col-md-3">
{% if submenu %}
<div class="well sidebar-nav">
{% include "menu.html" with menu=submenu %}
@ -116,9 +111,9 @@
{% endif %}
{% if sidebar_left %}
<div class="well sidebar-nav">
{{ sidebar_left|safe }}
{{ sidebar_left|safe }}
</div><!--/.well -->
{% endif %}
{% endif %}
{% block sidebar_right_block %}
{% if sidebar_right %}
<div class="well sidebar-nav">
@ -127,51 +122,51 @@
{% endif %}
{% endblock %}
</div>
{% endif %}
<div class="span9">
<div class="hero-unit" class="pull-left">
<h2>
{% block title_block %}
{{ title }}
{% endblock %}
</h2>
{% endif %}
<div class="col-md-9">
<div class="well">
<h2>
{% block title_block %}
{{ title }}
{% endblock %}
</h2>
{% include 'messages.html' %}
{% include 'messages.html' %}
{% block main_block %}
{{ main|safe }}
{% endblock %}
</div>
</div><!--/span-->
</div><!--/row-->
{% block main_block %}
{{ main|safe }}
{% endblock %}
</div>
</div><!--/col-->
</div><!--/row-->
<hr>
<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>
{% endblock %}</p>
</footer>
<footer>
{% 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>
{% endblock %}
</footer>
</div><!--/.fluid-container-->
</div><!--/.fluid-container-->
<!-- JavaScript <script> tags are placed at the end of the document to speed up initial page loads-->
<!-- Local link to system Modernizr (includes HTML5 Shiv) -->
<script type="text/javascript" src="{% static 'theme/js/libs/modernizr.min.js' %}"></script>
<!-- Local link to system jQuery -->
<script type="text/javascript" src="{% static 'theme/js/libs/jquery.min.js' %}"></script>
<!-- Local link to system Bootstrap JS -->
<script type="text/javascript" src="{% static 'theme/js/libs/bootstrap.min.js' %}"></script>
<!-- JavaScript <script> tags are placed at the end of the document to speed up initial page loads-->
<!-- Local link to system Modernizr (includes HTML5 Shiv) -->
<script type="text/javascript" src="{% static 'theme/js/libs/modernizr.min.js' %}"></script>
<!-- Local link to system jQuery -->
<script type="text/javascript" src="{% static 'theme/js/libs/jquery.min.js' %}"></script>
<!-- Local link to system Bootstrap JS -->
<script type="text/javascript" src="{% static 'theme/bootstrap-3.2.0/js/bootstrap.min.js' %}"></script>
{% block js_block %}
{{ js|safe }}
{% endblock %}
{% block app_js %}<!-- placeholder for app-specific js files -->{% endblock %}
{% block page_js %}<!-- placeholder for page-specific js files -->{% endblock %}
{% block js_block %}
{{ js|safe }}
{% endblock %}
{% block app_js %}<!-- placeholder for app-specific js files -->{% endblock %}
{% block page_js %}<!-- placeholder for page-specific js files -->{% endblock %}
</body>
</html>

View File

@ -17,18 +17,18 @@
#
{% endcomment %}
<ul class="nav nav-list">
<ul class="nav nav-pills nav-stacked">
<li class="nav-header">Menu</li>
{% for item in menu.items %}
{% if item.url in active_menu_urls %}
<li class="active">
<a href="{{ item.url }}" class="active">
<span class="{{ item.icon }} icon-white sidenav-icon"></span>
<span class="{{ item.icon }} glyphicon glyphicon-white sidenav-icon"></span>
{% else %}
<li>
<a href="{{ item.url }}">
<span class="{{ item.icon }} sidenav-icon"></span>
<span class="{{ item.icon }} glyphicon sidenav-icon"></span>
{% endif %}
{{ item.label }}
</a>

View File

@ -97,7 +97,8 @@ setuptools.setup(
install_requires=[
'cherrypy >= 3.0',
'django >= 1.7.0',
'django-bootstrap-form'
'django-bootstrap-form',
'libjs-bootstrap >= 3.2.0',
],
include_package_data=True,
package_data={'plinth': ['templates/*',

View File

@ -0,0 +1 @@
/usr/share/javascript/bootstrap/

View File

@ -1,59 +1,37 @@
@media (min-width: 979px) {
body {
padding-top: 60px;
}
}
body {
padding-bottom: 40px;
padding-top: 60px;
padding-bottom: 20px;
}
.sidebar-nav {
padding: 9px 0;
.sidebar-nav .nav li a {
padding: 2px 15px;
}
.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-header is deprecated in bootstrap 3.x, so replicate it here */
.nav-header {
text-transform: uppercase;
font-weight: bold;
font-size: 11px;
display: block;
color: #999;
}
.nav-icon {
margin-right: 8px;
margin-right: 8px;
}
.navbar .container {
width: 100%;
}
.sidenav-icon {
margin-right: 8px;
padding-right: 5px;
margin-right: 8px;
padding-right: 5px;
}
.table-autowidth {
width: auto;
}
.table td.cell-indented {
padding-left: 3em;
.navbar-brand img {
float: left;
margin-top: -14px;
padding: 8px;
}
.running-status {