ben/status-board
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Added bootstrap tabs JS and tabbified content on settings page using JS

Browse Source 
Signed-off-by: Nathan Booth <nath.booth@gmail.com>
This commit is contained in:
Nathan Booth
2011-12-20 11:23:24 +00:00
parent 11fc706ee1
commit 3481e1c7d6
4 changed files with 132 additions and 42 deletions
Download Patch File Download Diff File Expand all files Collapse all files

80
public/scripts/3rdparty/bootstrap-tabs.js vendored Normal file
View File

@@ -0,0 +1,80 @@
/* ========================================================
* bootstrap-tabs.js v1.4.0
* http://twitter.github.com/bootstrap/javascript.html#tabs
* ========================================================
* Copyright 2011 Twitter, Inc.
*
* Licensed under the Apache License, Version 2.0 (the "License");
* you may not use this file except in compliance with the License.
* You may obtain a copy of the License at
*
* http://www.apache.org/licenses/LICENSE-2.0
*
* Unless required by applicable law or agreed to in writing, software
* distributed under the License is distributed on an "AS IS" BASIS,
* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
* See the License for the specific language governing permissions and
* limitations under the License.
* ======================================================== */
!function( $ ){
"use strict"
function activate ( element, container ) {
container
.find('> .active')
.removeClass('active')
.find('> .dropdown-menu > .active')
.removeClass('active')
element.addClass('active')
if ( element.parent('.dropdown-menu') ) {
element.closest('li.dropdown').addClass('active')
}
}
function tab( e ) {
var $this = $(this)
, $ul = $this.closest('ul:not(.dropdown-menu)')
, href = $this.attr('href')
, previous
, $href
if ( /^#\w+/.test(href) ) {
e.preventDefault()
if ( $this.parent('li').hasClass('active') ) {
return
}
previous = $ul.find('.active a').last()[0]
$href = $(href)
activate($this.parent('li'), $ul)
activate($href, $href.parent())
$this.trigger({
type: 'change'
, relatedTarget: previous
})
}
}
/* TABS/PILLS PLUGIN DEFINITION
* ============================ */
$.fn.tabs = $.fn.pills = function ( selector ) {
return this.each(function () {
$(this).delegate(selector || '.tabs li > a, .pills > li > a', 'click', tab)
})
}
$(document).ready(function () {
$('body').tabs('ul[data-tabs] li > a, ul[data-pills] > li > a')
})
}( window.jQuery || window.ender );

22
public/scripts/main.js
View File

@@ -8,6 +8,16 @@ var sb = {
init: function() {
$('.alert-data').alert();
$('.tabs').tabs()
$("a[rel=popover]")
.popover({
offset: 10
})
.click(function(e) {
e.preventDefault()
})
})
},
usercp: {
@@ -37,15 +47,3 @@ var sb = {
}
};
$('document').ready(sb.init);
$(function () {
$("a[rel=popover]")
.popover({
offset: 10
})
.click(function(e) {
e.preventDefault()
})
})

71
source/webui/templates/admin.tpl
View File

@@ -1,36 +1,42 @@
<div class="page-header">
<h1>Admin Control Panel</h1>
<ul class="tabs">
<li class="active"><a href="#">Admin</a></li>
<li><a href="#">Services</a></li>
<li><a href="#">User Management</a></li>
<li><a href="#">Settings</a></li>
<ul class="tabs" data-tabs="tabs">
<li class="active"><a href="#Admin">Admin</a></li>
<li><a href="#Services">Services</a></li>
<li><a href="#UserManagement">User Management</a></li>
<li><a href="#Settings">Settings</a></li>
</ul>
</div>
<h1>Services</h1>
<p>
Click on a Service to edit its properties, or access any of the sites defined under it.
</p>
<div id="my-tab-content" class="tab-content">
<div class="tab-pane active" id="Admin">
<p>TODO</p>
</div>
<div class="tab-pane" id="Services">
<h1>Services</h1>
<p>Click on a Service to edit its properties, or access any of the sites defined under it.</p>
{if $services}
<dl>
{foreach from=$services item=service}
<dt><a href="{$base_uri}admin/service/id/{$service->id}/" title="Edit site {$service->name|escape:html}">{$service->name|escape:html}</a></dt>
<dd>{$service->description|escape:html}</dd>
{/foreach}
</dl>
{else}
You haven't created any services yet. Create some with the button below.
{/if}
{if $services}
<dl>
{foreach from=$services item=service}
<dt><a href="{$base_uri}admin/service/id/{$service->id}/" title="Edit site {$service->name|escape:html}">{$service->name|escape:html}</a></dt>
<dd>{$service->description|escape:html}</dd>
{/foreach}
</dl>
{else}
You haven't created any services yet. Create some with the button below.
{/if}
<form id="admin_addservice" method="post" action="{$base_uri}admin/add-service/">
<input type="button" class="btn success" name="addservice" value="Add Service" />
</form>
<form id="admin_addservice" method="post" action="{$base_uri}admin/add-service/">
<input type="button" class="btn success" name="addservice" value="Add Service" />
</form>
<h1>Users and Permissions</h1>
</div>
<div class="tab-pane" id="UserManagement">
<h1>Users and Permissions</h1>
<p>
Click on a User to edit its properties.
@@ -46,16 +52,17 @@
<input type="button" class="btn success" name="adduser" value="Add User" />
</form>
<h1>Settings<h1>
</div>
<div class="tab-pane" id="Settings">
<h1>Settings<h1>
<p>
Quick access to important settings. Please use the <a href="{$base_uri}admin/settings/" title="Full settings">full settings</a>
page to configure more advanced settings.
</p>
<div class="container">
<div class="row">
<div class="span16">
<form id="admin_quicksettings" method="post" action="{$base_uri}admin/settings/do/">
<fieldset>
<legend>Quick Settings</legend>
@@ -88,6 +95,10 @@
</div>
</fieldset>
</form>
</div><!-- /span16 -->
</div><!-- /row -->
</div><!-- /container -->
</div>
</div>

1
source/webui/templates/index.tpl
View File

@@ -22,6 +22,7 @@
<script type="text/javascript" src="{$base_uri}scripts/3rdparty/bootstrap-twipsy.js"></script>
<script type="text/javascript" src="{$base_uri}scripts/3rdparty/bootstrap-popover.js"></script>
<script type="text/javascript" src="{$base_uri}scripts/3rdparty/bootstrap-dropdown.js"></script>
<script type="text/javascript" src="{$base_uri}scripts/3rdparty/bootstrap-tabs.js"></script>
</head>
<body>