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: On a Debian based system, run:
$ sudo apt-get install libjs-jquery libjs-modernizr \ $ 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 python3-django python3-bootstrapform python3-setuptools
2. Install Plinth: 2. Install Plinth:

View File

@ -6,7 +6,7 @@ from plinth import cfg
def init(): def init():
"""Initailize the apps module""" """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): def index(request):

View File

@ -95,7 +95,7 @@ and must not be greater than 63 characters in length.'),
def init(): def init():
"""Initialize the module""" """Initialize the module"""
menu = cfg.main_menu.get('system:index') 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 @login_required

View File

@ -31,7 +31,7 @@ from plinth.errors import ActionError
def init(): def init():
"""Initialize the module""" """Initialize the module"""
menu = cfg.main_menu.get('system:index') 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 @login_required

View File

@ -17,7 +17,7 @@ class ExpertsForm(forms.Form): # pylint: disable-msg=W0232
def init(): def init():
"""Initialize the module""" """Initialize the module"""
menu = cfg.main_menu.get('system:index') 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 @login_required

View File

@ -36,7 +36,7 @@ LOGGER = logging.getLogger(__name__)
def init(): def init():
"""Initailze firewall module""" """Initailze firewall module"""
menu = cfg.main_menu.get('system:index') 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) service_enabled.connect(on_service_enabled)

View File

@ -8,17 +8,17 @@ from plinth import cfg
def init(): def init():
"""Initialize the Help module""" """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) '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) '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',)) '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',)) 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) '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): def index(request):

View File

@ -20,7 +20,7 @@ class OwnCloudForm(forms.Form): # pylint: disable-msg=W0232
def init(): def init():
"""Initialize the ownCloud module""" """Initialize the ownCloud module"""
menu = cfg.main_menu.get('apps:index') 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() status = get_status()

View File

@ -40,7 +40,7 @@ class PackagesForm(forms.Form):
def init(): def init():
"""Initialize the Packages module""" """Initialize the Packages module"""
menu = cfg.main_menu.get('system:index') 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 @login_required

View File

@ -40,7 +40,7 @@ LOGGER = logging.getLogger(__name__)
def init(): def init():
"""Intialize the PageKite module""" """Intialize the PageKite module"""
menu = cfg.main_menu.get('apps:index') 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) 'pagekite:index', 50)

View File

@ -6,7 +6,7 @@ from plinth import cfg
def init(): def init():
"""Initialize the system module""" """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): def index(request):

View File

@ -39,7 +39,7 @@ class TorForm(forms.Form): # pylint: disable=W0232
def init(): def init():
"""Initialize the Tor module""" """Initialize the Tor module"""
menu = cfg.main_menu.get('apps:index') 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 @login_required

View File

@ -20,7 +20,7 @@ LOGGER = logging.getLogger(__name__)
def init(): def init():
"""Intialize the module""" """Intialize the module"""
menu = cfg.main_menu.get('system:index') 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 @login_required

View File

@ -33,8 +33,8 @@ SIDE_MENU = {
def init(): def init():
"""Initialize the XMPP module""" """Initialize the XMPP module"""
menu = cfg.main_menu.get('apps:index') menu = cfg.main_menu.get('apps:index')
menu.add_item('Chat', 'icon-comment', '/../jwchat', 20) menu.add_item('Chat', 'glyphicon-comment', '/../jwchat', 20)
menu.add_urlname('XMPP', 'icon-comment', 'xmpp:index', 40) menu.add_urlname('XMPP', 'glyphicon-comment', 'xmpp:index', 40)
service.Service( service.Service(
'xmpp-client', _('Chat Server - client connections'), '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="googlebot" content="noindex, nofollow, noarchive, nosnippet, noodp, noimageindex, notranslate" />
<meta name="msnbot" content="noindex, nofollow, noarchive, noodp" /> <meta name="msnbot" content="noindex, nofollow, noarchive, noodp" />
<meta name="slurp" content="noindex, nofollow, noarchive, noodp, noydir" /> <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" /> <meta name="description" content="Plinth administrative interface for the FreedomBox" />
<title>{% if title %} {{ title }} {% else %} FreedomBox {% endif %}</title> <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' %}"/> <link rel="apple-touch-icon" sizes="114x114" href="{% static 'theme/img/apple-touch-icon-114px-precomposed.png' %}"/>
<!-- Bootstrap base CSS --> <!-- Bootstrap base CSS -->
<link rel="stylesheet" href="{% static 'theme/css/bootstrap.min.css' %}"/> <link rel="stylesheet" href="{% static 'theme/bootstrap/css/bootstrap.min.css' %}"/>
<!-- Bootstrap responsive CSS -->
<link rel="stylesheet" href="{% static 'theme/css/bootstrap-responsive.min.css' %}"/>
<link rel="stylesheet" href="{% static 'theme/css/plinth.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 app_head %}<!-- placeholder for app/module-specific head files -->{% endblock %}
{% block page_head %}<!-- placeholder for page-specific head files -->{% endblock %} {% block page_head %}<!-- placeholder for page-specific head files -->{% endblock %}
</head> </head>
<body> <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]--> <!--[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 navbar-fixed-top navbar-inverse" role="navigation">
<div class="navbar-inner"> <div class="container">
<div class="container-fluid"> <div class="navbar-header">
<a class="btn btn-navbar" data-toggle="collapse" <button type="button" class="navbar-toggle" data-toggle="collapse"
data-target=".nav-collapse"> data-target=".navbar-collapse">
<span class="icon-bar"></span> <span class="icon-bar"></span>
<span class="icon-bar"></span> <span class="icon-bar"></span>
<span class="icon-bar"></span> <span class="icon-bar"></span>
</a> </button>
<a href="{% url 'index' %}" class="logo-top"> <a href="{% url 'index' %}" class="navbar-brand">
<img src="{% static 'theme/img/freedombox-logo-32px.png' %}" <img src="{% static 'theme/img/freedombox-logo-32px.png' %}"
alt="FreedomBox" /> alt="FreedomBox" />
</a> FreedomBox
<a class="brand" href="{% url 'index' %}">FreedomBox</a> </a>
{% block add_nav_and_login %} </div>
<div class="nav-collapse"> <div class="collapse navbar-collapse">
<ul class="nav"> {% block add_nav_and_login %}
{% for item in cfg.main_menu.items %} <ul class="nav navbar-nav">
{% if item.url in active_menu_urls %} {% for item in cfg.main_menu.items %}
<li class="active"> {% if item.url in active_menu_urls %}
<a href="{{ item.url }}" class="active"> <li class="active">
{% else %} <a href="{{ item.url }}" class="active">
<li> {% else %}
<a href="{{ item.url }}"> <li>
{% endif %} <a href="{{ item.url }}">
<span class="{{ item.icon }} icon-white nav-icon"></span> {% endif %}
{{ item.label }}
</a>
</li>
{% endfor %}
</ul>
{% if user.is_authenticated %} <span class="{{ item.icon }} glyphicon glyphicon-white nav-icon"></span>
<p class="navbar-text pull-right"> {{ item.label }}
<i class="icon-user icon-white nav-icon"></i> </a>
Logged in as <a href="#">{{ user.username }}</a>. </li>
<a href="{% url 'lib:logout' %}" title="Log out"> {% endfor %}
Log out</a>. </ul>
</p>
{% else %} {% if user.is_authenticated %}
<p class="navbar-text pull-right"> <p class="navbar-text pull-right">
Not logged in. <i class="glyphicon glyphicon-user glyphicon-white nav-icon"></i>
<i class="icon-user icon-white nav-icon"></i> Logged in as <a href="#">{{ user.username }}</a>.
<a href="{% url 'lib:login' %}" title="Log in"> <a href="{% url 'lib:logout' %}" title="Log out">
Log in</a>. Log out</a>.
</p> </p>
{% endif %} {% else %}
{% endblock %} <p class="navbar-text pull-right">
</div><!--/.nav-collapse --> Not logged in.
</div> <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>
</div>
<div class="container-fluid"> <div class="container-fluid">
<div class="row-fluid"> <div class="row">
{% if submenu or sidebar_right or sidebar_left %} {% if submenu or sidebar_right or sidebar_left %}
<div class="span3"> <div class="col-md-3">
{% if submenu %} {% if submenu %}
<div class="well sidebar-nav"> <div class="well sidebar-nav">
{% include "menu.html" with menu=submenu %} {% include "menu.html" with menu=submenu %}
@ -116,9 +111,9 @@
{% endif %} {% endif %}
{% if sidebar_left %} {% if sidebar_left %}
<div class="well sidebar-nav"> <div class="well sidebar-nav">
{{ sidebar_left|safe }} {{ sidebar_left|safe }}
</div><!--/.well --> </div><!--/.well -->
{% endif %} {% endif %}
{% block sidebar_right_block %} {% block sidebar_right_block %}
{% if sidebar_right %} {% if sidebar_right %}
<div class="well sidebar-nav"> <div class="well sidebar-nav">
@ -127,51 +122,51 @@
{% endif %} {% endif %}
{% endblock %} {% endblock %}
</div> </div>
{% endif %} {% endif %}
<div class="span9"> <div class="col-md-9">
<div class="hero-unit" class="pull-left"> <div class="well">
<h2> <h2>
{% block title_block %} {% block title_block %}
{{ title }} {{ title }}
{% endblock %} {% endblock %}
</h2> </h2>
{% include 'messages.html' %} {% include 'messages.html' %}
{% block main_block %} {% block main_block %}
{{ main|safe }} {{ main|safe }}
{% endblock %} {% endblock %}
</div> </div>
</div><!--/span--> </div><!--/col-->
</div><!--/row--> </div><!--/row-->
<hr> <hr>
<footer> <footer>
<p>{% block footer_block %} {% block footer_block %}
<p> <p>
Plinth is &copy; Copyright 2012 <a href="http://hackervisions.org" target="_blank">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" target="_blank">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. This Plinth theme was built by <a href="http://seandiggity.com" target="_blank">Sean &quot;Diggity&quot; O&apos;Brien</a>. 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>
{% endblock %}</p> {% endblock %}
</footer> </footer>
</div><!--/.fluid-container--> </div><!--/.fluid-container-->
<!-- JavaScript <script> tags are placed at the end of the document to speed up initial page loads--> <!-- 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) --> <!-- Local link to system Modernizr (includes HTML5 Shiv) -->
<script type="text/javascript" src="{% static 'theme/js/libs/modernizr.min.js' %}"></script> <script type="text/javascript" src="{% static 'theme/js/libs/modernizr.min.js' %}"></script>
<!-- Local link to system jQuery --> <!-- Local link to system jQuery -->
<script type="text/javascript" src="{% static 'theme/js/libs/jquery.min.js' %}"></script> <script type="text/javascript" src="{% static 'theme/js/libs/jquery.min.js' %}"></script>
<!-- Local link to system Bootstrap JS --> <!-- Local link to system Bootstrap JS -->
<script type="text/javascript" src="{% static 'theme/js/libs/bootstrap.min.js' %}"></script> <script type="text/javascript" src="{% static 'theme/bootstrap-3.2.0/js/bootstrap.min.js' %}"></script>
{% block js_block %} {% block js_block %}
{{ js|safe }} {{ js|safe }}
{% endblock %} {% endblock %}
{% block app_js %}<!-- placeholder for app-specific js files -->{% endblock %} {% block app_js %}<!-- placeholder for app-specific js files -->{% endblock %}
{% block page_js %}<!-- placeholder for page-specific js files -->{% endblock %} {% block page_js %}<!-- placeholder for page-specific js files -->{% endblock %}
</body> </body>
</html> </html>

View File

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

View File

@ -97,7 +97,8 @@ setuptools.setup(
install_requires=[ install_requires=[
'cherrypy >= 3.0', 'cherrypy >= 3.0',
'django >= 1.7.0', 'django >= 1.7.0',
'django-bootstrap-form' 'django-bootstrap-form',
'libjs-bootstrap >= 3.2.0',
], ],
include_package_data=True, include_package_data=True,
package_data={'plinth': ['templates/*', 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 { body {
padding-bottom: 40px; padding-top: 60px;
padding-bottom: 20px;
} }
.sidebar-nav { .sidebar-nav .nav li a {
padding: 9px 0; padding: 2px 15px;
} }
.super-hero { /* nav-header is deprecated in bootstrap 3.x, so replicate it here */
margin-top: 25px; .nav-header {
} text-transform: uppercase;
font-weight: bold;
.logo-top { font-size: 11px;
float: left; display: block;
padding-right: 5px; color: #999;
}
.brand {
padding-top: 8px;
}
.white {
color: #fff;
}
.error-large {
font-size: 1.2em;
padding: 10px;
}
.main-graphic {
float: right;
padding: 25px;
} }
.nav-icon { .nav-icon {
margin-right: 8px; margin-right: 8px;
} }
.navbar .container {
width: 100%;
}
.sidenav-icon { .sidenav-icon {
margin-right: 8px; margin-right: 8px;
padding-right: 5px; padding-right: 5px;
} }
.table-autowidth { .navbar-brand img {
width: auto; float: left;
} margin-top: -14px;
padding: 8px;
.table td.cell-indented {
padding-left: 3em;
} }
.running-status { .running-status {