Context navigation

source: main/waeup.kofa/branches/uli-diazo-themed/layout/theme.html @ 11110

Last change on this file since 11110 was 11104, checked in by Henrik Bettermann, 11 years ago
Tab activation must not depend on datatables.
File size: 19.9 KB

Rev	Line
[10917]	1	<!DOCTYPE html>
	2	<html lang="en">
	3	<head>
	4	<meta charset="utf-8">
	5	<title>Base · Twitter Bootstrap</title>
	6	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	7	<meta name="description" content="">
	8	<meta name="author" content="">
	9
	10	<!-- stylesheets -->
[11046]	11	<link href="static/bootstrap/css/bootstrap.min.css"
[10958]	12	rel="stylesheet">
[11046]	13	<link href="static/bootstrap/css/bootstrap-theme.min.css"
[10986]	14	rel="stylesheet">
	15	<link href="static/css/jquery.dataTables.css"
	16	rel="stylesheet">
[11017]	17	<link href="static/css/jquery-ui.css"
	18	rel="stylesheet">
[10917]	19	<link href="static/css/base.css" rel="stylesheet">
	20
[11030]	21	<!-- HTML5 shim and Respond.js IE8 support of HTML5 elements and media queries -->
[10917]	22	<!--[if lt IE 9]>
[11030]	23	<script src="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script>
	24	<script src="https://oss.maxcdn.com/libs/respond.js/1.4.2/respond.min.js"></script>
[11031]	25	<link href="static/css/IE8.css" rel="stylesheet">
[10917]	26	<![endif]-->
	27
[11030]	28	<script src="static/js/kofa-recaptcha_white.js"></script>
	29
[10917]	30	<!-- icons -->
	31	<link rel="shortcut icon" href="static/ico/favicon.ico">
	32
[10986]	33
[10917]	34	</head>
	35
	36	<body id="kofa-body">
	37
[10961]	38	<div class="navbar navbar-inverse navbar-fixed-top" role="navigation">
[10917]	39	<div class="navbar-header">
	40	<button type="button" class="navbar-toggle" data-toggle="collapse"
[10958]	41	data-target="#kofa-primary-nav">
[10917]	42	<span class="icon-bar"></span>
	43	<span class="icon-bar"></span>
	44	<span class="icon-bar"></span>
	45	</button>
[10960]	46	<a class="navbar-brand active kofa-brand-link" href="/">WAeUP.Kofa</a>
[10917]	47	</div>
	48	<div class="navbar-collapse collapse"
	49	id="kofa-primary-nav">
	50	<ul class="nav navbar-nav kofa-navbar-left">
	51	<li class="active"><a href="#">Academics</a></li>
	52	<li><a href="#about">Applicants</a></li>
	53	<li><a href="#contact">Students</a></li>
	54	<li><a href="#contact">Hostels</a></li>
[11023]	55	<li class="dropdown">
	56	<a href="#" class="dropdown-toggle"
	57	data-toggle="dropdown">My Data
	58	<b class="caret"></b>
	59	<ul class="dropdown-menu">
	60	<li><a href="#">Base Data</a></li>
	61	<li><a href="#">Clearance Data</a></li>
	62	<li><a href="#">Personal Data</a></li>
	63	<li><a href="#">History</a></li>
	64	</ul>
	65	</li>
[11021]	66	</ul>
	67
	68	<ul class="nav navbar-nav navbar-right kofa-navbar-right">
[10917]	69	<li class="dropdown kofa-langselect">
	70	<a href="#" class="dropdown-toggle"
[11021]	71	data-toggle="dropdown">
	72	<img src="static/img/earth.png" />
[10917]	73	<ul class="dropdown-menu">
[11023]	74	<li class="kofa-language"><a href="#">English</a></li>
	75	<li class="kofa-language"><a href="#">Français</a></li>
	76	<li class="kofa-language"><a href="#">Deutsch</a></li>
	77	<li class="kofa-language"><a href="#">Hausa</a></li>
	78	<li class="kofa-language"><a href="#">Yoruba</a></li>
	79	<li class="kofa-language"><a href="#">Igbo</a></li>
[10917]	80	</ul>
	81	</li>
[11064]	82	<li><a href="#">Contact</a></li>
	83	<li><a href="#">Logout</a></li>
[10958]	84	</ul>
[10917]	85	</div><!--/.nav-collapse -->
	86	</div><!-- /.navbar -->
	87
	88	<div class="container">
[11029]	89
[10917]	90	<div class="row">
[11030]	91	<div class="col-md-12 container kofa-breadcrumbs-box-long">
[10960]	92	<div class="well">
	93	<ol class="breadcrumb kofa-breadcrumbs">
[11029]	94	<li>
[10960]	95	<a href="#">
	96	Home
	97	</a>
	98	</li>
[11029]	99	<li>
[10960]	100	<a href="#">
[11030]	101	Subtopic 1
[10960]	102	</a>
	103	</li>
[11030]	104	<li>
	105	<a href="#">
	106	Subtopic 2
	107	</a>
	108	</li>
	109	<li>
	110	<a href="#">
	111	Subtopic 3
	112	</a>
	113	</li>
[10960]	114	</ol><!-- /kofa-breadcrumbs -->
	115	</div> <!-- /well -->
[11030]	116	</div> <!-- /kofa-breadcrumbs-box-short -->
	117	</div>
	118
	119	<div class="row">
	120	<div class="col-md-8 container kofa-breadcrumbs-box-short">
	121	<div class="well">
	122	<ol class="breadcrumb kofa-breadcrumbs">
	123	<li>
	124	<a href="#">
	125	Home
	126	</a>
	127	</li>
	128	<li>
	129	<a href="#">
	130	Subtopic 1
	131	</a>
	132	</li>
	133	<li>
	134	<a href="#">
	135	Subtopic 2
	136	</a>
	137	</li>
	138	<li>
	139	<a href="#">
	140	Subtopic 3
	141	</a>
	142	</li>
	143	</ol><!-- /kofa-breadcrumbs -->
	144	</div> <!-- /well -->
	145	</div> <!-- /kofa-breadcrumbs-box-short -->
	146
	147	<div class="col-md-4 container kofa-student-status-box">
	148	<div class="well">
	149	<div class="wfstatus">
[11033]	150	K1000000 • quite long student status
[11030]	151	</div> <!-- /wfstatus -->
	152	</div> <!-- /well -->
	153	</div> <!-- /kofa-student-status-box -->
	154
[10960]	155	</div> <!-- /row -->
	156
	157	<div class="row">
	158	<div class="col-md-2 kofa-sidebar">
[10958]	159	<div class="sidebar-nav well">
[10969]	160	<div>
	161	<div class="kofa-sidebar-title">Student Name</div>
	162	<ul class="nav">
	163	<li><a href="#">Base Data</a></li>
	164	<li><a href="#">Clearance Data</a></li>
	165	<li><a href="#">Personal Data</a></li>
	166	<li><a href="#">Study Course</a></li>
[10995]	167	<li><a href="#">Payments</a></li>
[10969]	168	<li><a href="#">Accommodation</a></li>
	169	<li><a href="#">History</a></li>
	170	</ul>
	171	</div>
	172	<div>
	173	<div class="kofa-sidebar-title">Manager Name</div>
	174	<ul class="nav">
	175	<li><a href="#">Portal Configuration</a></li>
	176	<li><a href="#">Portal Users</a></li>
	177	<li><a href="#">Data Center</a></li>
	178	<li><a href="#">Reports</a></li>
	179	<li><a href="#">Access Codes</a></li>
	180	<li><a href="#">My Preferences</a></li>
	181	<li><a href="#">My Roles</a></li>
	182	</ul>
	183	</div>
[10917]	184	</div> <!-- /well -->
[10960]	185	</div> <!-- /kofa-sidebar -->
[10995]	186
[10962]	187	<div class="col-md-10 content kofa-content-narrow">
[10985]	188	<div class="well">
	189	<div class="kofa-content">
	190	<div class="actionbar">
	191	<a class="btn btn-default" href="">
	192	<img src="static/img/actionicon_modify.png"
	193	alt="Manage" />
	194	Manage
	195	</a>
	196	<a class="btn btn-default" href="">
	197	<img src="static/img/actionicon_trigtrans.png"
	198	alt="Trigger transition" />
	199	Trigger transition
	200	</a>
	201	</div>
[10994]	202	<div class="alert alert-danger">
	203	There were errors ...
	204	</div>
[10985]	205	<div class="alert alert-warning">
	206	Be careful ...
	207	</div>
	208	<div class="alert alert-success">
	209	You have successfully ...
	210	</div>
[10994]	211	<h1>WAeUP.Kofa Theme</h1>
[10995]	212
	213	<p class="kofa-content-desc">
	214	A sample Diazo theme for WAeUP.Kofa
	215	<br />
	216	Fusce dapibus, tellus ac cursus commodo.
[10994]	217	</p>
[10985]	218	<p>
	219	Donec id elit non mi porta gravida at eget metus. Fusce
	220	dapibus, tellus ac cursus commodo, tortor mauris
	221	condimentum nibh, ut fermentum massa justo sit amet
	222	risus. Etiam porta sem malesuada magna mollis
	223	euismod. Donec sed odio dui.
	224	</p>
	225	<img src="static/img/bg.png" />
[10995]	226
	227	<!-- Tabs... -->
	228	<br /><br />
	229	<h3>Sample Tabs</h3>
	230	<ul id="tabs" class="tabs nav nav-tabs" data-tabs="tabs">
	231	<li class="active">
	232	<a href="#tab-1" data-toggle="tab">Tab 1</a>
	233	</li>
	234	<li class="">
	235	<a href="#tab-2" data-toggle="tab">Tab 2</a>
	236	</li>
	237	<li class="">
	238	<a href="#tab-3" data-toggle="tab">Tab 3</a>
	239	</li>
	240	</ul>
	241	<div class="tab-content">
	242	<div id="tab-1" class="tab-pane active">
	243	<br />
	244	<p>
	245	Tab 1 content...<br /> Donec id elit non mi porta
	246	gravida at eget metus. Fusce dapibus, tellus ac
	247	cursus commodo.
	248	</p>
	249	</div>
	250	<div id="tab-2" class="tab-pane">
	251	<br />
	252	<p>
	253	Tab 2 content...<br /> Tortor mauris condimentum
	254	nibh, ut fermentum massa justo sit amet
	255	risus. Etiam porta sem malesuada.
	256	</p>
	257	</div>
	258	<div id="tab-3" class="tab-pane">
	259	<br />
	260	<p>
	261	Tab 3 content...<br /> Magna mollis euismod. Donec
	262	sed odio dui.
	263	</p>
	264	</div>
[11056]	265
	266	<br>
	267
	268	<h3>Sample Tooltip</h3>
	269	<br>Move the mouse over the button:
	270	<div class="btn btn-default" data-toggle="tooltip"
	271	title="This is a tooltip">Sample Tooltip
	272	</div>
	273	<br><br>
	274
[10995]	275	</div><!-- /tab-content -->
[10985]	276	</div> <!-- /kofa-content -->
[10960]	277	</div> <!-- /well -->
	278	</div> <!-- /kofa-content-narrow -->
	279	</div> <!-- /row -->
[10917]	280
[10960]	281	<div class="row">
[10973]	282	<div class="col-md-12 content kofa-content-wide">
	283	<div class="well kofa-content">
[10999]	284	<div class="actionbar">
	285	<a class="btn btn-default" href="">
	286	<img src="static/img/actionicon_modify.png"
	287	alt="Manage" />
	288	Manage
	289	</a>
	290	<a class="btn btn-default" href="">
	291	<img src="static/img/actionicon_trigtrans.png"
	292	alt="Trigger transition" />
	293	Trigger transition
	294	</a>
	295	</div>
[10960]	296	<div class="hero-unit">
	297	<h1>Hello there!</h1>
	298	<p>this is...</p>
	299	</div>
	300	<div>...content that spans the whole page.</div>
[10986]	301	<br><br>
[10960]	302	<div id="#sampleform">
	303	<form method="post">
	304	<fieldset id="form-fieldset">
	305	<legend>A Sample Form</legend>
[10989]	306	<div class="form-group variable-form">
[10960]	307	<label>Some Label</label>
	308	<input type="text" class="textType"
	309	name="myinput[]" placeholder="A name..." />
	310	</div>
[10986]	311	<button type="submit" class="btn rowadd btn-default">
[10960]	312	Add row
	313	</button>
	314	<br />
	315	<button type="submit" class="btn btn-primary">Save</button>
	316	</fieldset>
	317	</form>
	318	</div> <!-- /sampleform -->
[10986]	319	<br><br>
	320	<h3>A Sample Data Table</h3>
[11031]	321	<div class="table-responsive">
	322	<table id="#dadatable" class="table table-striped dataTable">
	323	<thead>
	324	<tr>
	325	<th>Id</th>
	326	<th>Name</th>
	327	<th>Portal Roles</th>
	328	<th>Local Roles</th>
	329	<th></th>
	330	</tr>
	331	</thead><tbody><tr><td>admin</td>
	332	<td>John</td>
	333	<td nowrap="nowrap">Portal Manager <br />
	334	Academics Officer (view only)
	335	</td>
	336	<td>Owner</td>
	337	<td class="text-right">
	338	<form method="post">
	339	<input type="hidden" name="userid" value="admin" />
	340	<input class="btn btn-sm btn-primary" type="submit"
	341	name="manage" value="Manage" />
	342	<input class="btn btn-sm btn-default" type="submit"
	343	name="delete" value="Remove" />
	344	</form>
	345	</td>
	346	</tr>
	347	<tr>
	348	<td>tester</td>
	349	<td>Vitali</td>
	350	<td nowrap="nowrap">Academics Officer (view only)</td>
	351	<td>Owner</td>
	352	<td class="text-right">
	353	<form method="post">
	354	<input type="hidden" name="userid" value="your_id" />
	355	<input class="btn btn-sm btn-primary" type="submit"
	356	name="manage" value="Manage" />
	357	<input class="btn btn-sm btn-default" type="submit"
	358	name="delete" value="Remove" />
	359	</form>
	360	</td>
	361	</tr>
	362	</tbody>
	363	</table>
	364	</div>
[10989]	365
	366	<br><br>
	367	<h3>A Sample Inline Form</h3>
	368	<form method="POST" class="form-inline">
	369	<br />
	370	<div class="form-group">
	371	<input class="btn btn-primary" type="submit" name="search"
	372	value="Find student(s)" />
	373	</div>
	374	<div class="form-group">
[11027]	375	<select name="searchtype" class="form-control">
[10989]	376	<option value="student_id">with id</option>
	377	<option value="fullname">with name</option>
	378	<option value="reg_number">with registration number</option>
[11027]	379	<option value="matric_number">with matric number</option>
[10989]	380	<option value="current_session">in session</option>
	381	<option value="depcode">in department</option>
	382	<option value="current_mode">in study mode</option>
	383	<option value="suspended">
	384	with deactivated account (search term omitted)
	385	</option>
	386	<option value="transcript">
	387	who requested transcript (search term omitted)
	388	</option>
	389	</select>
	390	</div>
	391	<div class="form-group">
	392	<input type="text" class="form-control" name="searchterm" />
	393	</div>
	394	</form>
	395
[10993]	396	<br><br>
	397	<h3>A Sample Display Form Table</h3>
	398	<table class="form-table">
	399	<tbody>
	400	<tr>
[11055]	401	<td class="fieldname">Code:</td>
	402	<td>app2012</td>
[10993]	403	</tr>
	404	<tr>
[11055]	405	<td class="fieldname">Application Target:</td>
	406	<td>General Studies</td>
[10993]	407	</tr>
[11055]	408	<tr>
[10993]	409	<td class="fieldname">
[11027]	410	Application Mode (Donec id elit non mi porta gravida.):
[10993]	411	</td>
[11055]	412	<td>Create Application Records</td>
[10993]	413	</tr>
	414	</tbody>
	415	</table>
[10989]	416
[10993]	417	<br><br>
	418	<h3>A Sample Edit/Manage Form Table</h3>
	419	<table class="form-table">
	420	<tbody>
	421	<tr>
[11055]	422	<td class="fieldname">Code:</td>
	423	<td>app2012</td>
[10993]	424	</tr>
	425	<tr>
[11055]	426	<td class="fieldname">* Title:</td>
[10993]	427	<td>
	428	<input class="textType" id="form.title" name="form.title"
[11027]	429	size="20" type="text"
	430	value="General Studies 2012/2013" />
[10993]	431	</td>
	432	</tr>
	433	<tr>
[11055]	434	<td class="fieldname">Any phone number:</td>
[10993]	435	<td>
[11055]	436	<select id="form.phone.country" name="form.phone.country"
	437	size="1" class="phone-input">
	438	<option value="+234">Nigeria (+234)</option>
	439	<option value="+49">Germany (+49)</option>
	440	<option value="+1">U.S. (+1)</option>
	441	</select>-
	442	<input class=" phone-input textType" id="form.phone.area"
	443	name="form.phone.area" size="20" type="text"
	444	value="" />-
	445	<input class=" phone-input textType" id="form.phone.ext"
	446	name="form.phone.ext" size="20" type="text" value="" />
[10993]	447	</td>
	448	</tr>
	449	<tr>
[11055]	450	<td class="fieldname">Any text field:</td>
[10993]	451	<td>
[11055]	452	<textarea id="any_id"
	453	name="any_name" rows="5">Placeholder text</textarea>
[10993]	454	</td>
	455	</tr>
	456	<tr>
[11055]	457	<td class="fieldname">*
[11027]	458	Application Mode
[11055]	459	(A select field coming from zope.formlib):
[10993]	460	</td>
	461	<td>
	462	<div class="value">
[11027]	463	<select id="form.mode" name="form.mode" size="1">
	464	<option selected="selected" value="create">
	465	Create Application Records
	466	</option>
	467	<option value="update">Update Application Records
	468	</option>
	469	</select>
	470	</div>
	471	<input name="form.mode-empty-marker"
	472	type="hidden" value="1" />
[10993]	473	</td>
	474	</tr>
[11019]	475	<tr>
[11055]	476	<td class="fieldname">A datepicker field:</td>
[11019]	477	<td>
	478	<input class="datepicker-le-year textType"
[11020]	479	id="form.any_date" name="form.any_date"
[11019]	480	size="20" type="text" value="" />
	481	</td>
	482	</tr>
	483
[11027]	484	<tr>
	485	<td class="fieldname">
	486	A select field in Kofa pagetemplates:
	487	</td>
	488	<td>
	489	<select id="any_id" name="any_name" size="1"
	490	class="form-control half">
	491	<option selected="selected" value="create">
	492	Create Application Records
	493	</option>
	494	<option value="update">
	495	Update Application Records
	496	</option>
	497	</select>
	498	</td>
	499	</tr>
[10993]	500	</tbody>
	501	</table>
	502	</div> <!-- /well kofa-content-->
[10960]	503	</div> <!-- /kofa-content-wide -->
	504	</div> <!-- /row -->
[10977]	505	<div class="footer">
	506	<p class="credit muted text-right">
	507	Kofa - Student Management System<br />
	508	Copyright © WAeUP Group 2014
	509	</p>
	510	</div>
[10960]	511	</div> <!-- /container -->
[10917]	512
	513	<script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
[11046]	514	<script src="static/bootstrap/js/bootstrap.min.js"></script>
[11052]	515	<script src="static/js/kofa-tooltip.js"></script>
	516	<script src="static/js/kofa-button-rowadd.js"></script>
	517	<script src="static/js/kofa-toggleall.js"></script>
[11104]	518	<script src="static/js/kofa-activate-tab.js"></script>
[11041]	519	<script class="kofa-script-datatable"
	520	src="static/js/jquery.dataTables.min.js">
	521	</script>
	522	<script class="kofa-script-datatable"
	523	src="static/js/kofa-datatables.js">
	524	</script>
	525	<script class="kofa-script-datepicker"
	526	src="static/js/jquery-ui.min.js">
	527	</script>
	528	<script class="kofa-script-datepicker"
	529	src="static/js/kofa-datepicker.js">
	530	</script>
[10986]	531
[10917]	532	</body>
	533	</html>

Note: See TracBrowser for help on using the repository browser.

Download in other formats: