Context navigation

source: main/kofacustom.ekodisco/trunk/layout/theme.html @ 11467

Last change on this file since 11467 was 11467, checked in by Henrik Bettermann, 11 years ago
Back-to links replaced by animated jQuery plugins.
File size: 20.1 KB

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

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

Download in other formats: