Context navigation

source: main/waeup.kofa/trunk/layout/theme.html @ 14563

Last change on this file since 14563 was 14563, checked in by Henrik Bettermann, 8 years ago
Replace tabs.
File size: 23.0 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/css/file-upload.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-functions.js"></script>
30
31	<!-- icons -->
32	<link rel="shortcut icon" href="static/ico/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-maintenance">
93	<div class="well">
94	<div class="maintenance-warning">
95	M A I N T E N A N C E     M O D E
96	</div> <!-- /maintenance-warning -->
97	</div> <!-- /well -->
98	</div> <!-- /kofa-maintenance -->
99	</div>
100
101	<div class="row">
102	<div class="col-md-12 container kofa-breadcrumbs-box-long">
103	<div class="well">
104	<ol class="breadcrumb kofa-breadcrumbs">
105	<li>
106	<a href="#">
107	Home
108	</a>
109	</li>
110	<li>
111	<a href="#">
112	Subtopic 1
113	</a>
114	</li>
115	<li>
116	<a href="#">
117	Subtopic 2
118	</a>
119	</li>
120	<li>
121	<a href="#">
122	Subtopic 3
123	</a>
124	</li>
125	</ol><!-- /kofa-breadcrumbs -->
126	</div> <!-- /well -->
127	</div> <!-- /kofa-breadcrumbs-box-long -->
128	</div>
129
130	<div class="row">
131	<div class="col-md-8 container kofa-breadcrumbs-box-short">
132	<div class="well">
133	<ol class="breadcrumb kofa-breadcrumbs">
134	<li>
135	<a href="#">
136	Home
137	</a>
138	</li>
139	<li>
140	<a href="#">
141	Subtopic 1
142	</a>
143	</li>
144	<li>
145	<a href="#">
146	Subtopic 2
147	</a>
148	</li>
149	<li>
150	<a href="#">
151	Subtopic 3
152	</a>
153	</li>
154	</ol><!-- /kofa-breadcrumbs -->
155	</div> <!-- /well -->
156	</div> <!-- /kofa-breadcrumbs-box-short -->
157
158	<div class="col-md-4 container kofa-student-status-box">
159	<div class="well">
160	<div class="wfstatus">
161	K1000000 • quite long student status
162	</div> <!-- /wfstatus -->
163	</div> <!-- /well -->
164	</div> <!-- /kofa-student-status-box -->
165
166	</div> <!-- /row -->
167
168	<div class="row">
169	<div class="col-md-2 kofa-sidebar">
170	<div class="sidebar-nav well">
171	<div>
172	<div class="kofa-sidebar-title">Student Name</div>
173	<ul class="nav">
174	<li><a href="#">Base Data</a></li>
175	<li><a href="#">Clearance Data</a></li>
176	<li><a href="#">Personal Data</a></li>
177	<li><a href="#">Study Course</a></li>
178	<li><a href="#">Payments</a></li>
179	<li><a href="#">Accommodation</a></li>
180	<li><a href="#">History</a></li>
181	</ul>
182	</div>
183	<div>
184	<div class="kofa-sidebar-title">Manager Name</div>
185	<ul class="nav">
186	<li><a href="#">Portal Configuration</a></li>
187	<li><a href="#">Portal Users</a></li>
188	<li><a href="#">Data Center</a></li>
189	<li><a href="#">Reports</a></li>
190	<li><a href="#">Access Codes</a></li>
191	<li><a href="#">My Preferences</a></li>
192	<li><a href="#">My Roles</a></li>
193	</ul>
194	</div>
195	</div> <!-- /well -->
196	</div> <!-- /kofa-sidebar -->
197
198	<div class="col-md-10 content kofa-content-narrow">
199	<div class="well">
200	<div class="kofa-content">
201	<div class="actionbar">
202	<a class="btn btn-default" href="">
203	<img src="static/img/actionicon_modify.png"
204	alt="Manage" />
205	Manage
206	</a>
207	<a class="btn btn-default" href="">
208	<img src="static/img/actionicon_trigtrans.png"
209	alt="Trigger transition" />
210	Trigger transition
211	</a>
212	</div>
213	<div class="alert alert-danger">
214	There were errors ...
215	</div>
216	<div class="alert alert-warning">
217	Be careful ...
218	</div>
219	<div class="alert alert-success">
220	You have successfully ...
221	</div>
222	<h1>WAeUP.Kofa Theme</h1>
223
224	<p class="kofa-content-desc">
225	A sample Diazo theme for WAeUP.Kofa
226	<br />
227	Fusce dapibus, tellus ac cursus commodo.
228	</p>
229	<p>
230	Donec id elit non mi porta gravida at eget metus. Fusce
231	dapibus, tellus ac cursus commodo, tortor mauris
232	condimentum nibh, ut fermentum massa justo sit amet
233	risus. Etiam porta sem malesuada magna mollis
234	euismod. Donec sed odio dui.
235	</p>
236	<img src="static/img/bg.png" />
237
238	<!-- Tabs... -->
239	<br /><br />
240	<h3>Sample Tabs</h3>
241	<ul id="tabs" class="tabs nav nav-tabs" data-tabs="tabs">
242	<li class="active">
243	<a href="#tab-1" data-toggle="tab">Tab 1</a>
244	</li>
245	<li class="">
246	<a href="#tab-2" data-toggle="tab">Tab 2</a>
247	</li>
248	<li class="">
249	<a href="#tab-3" data-toggle="tab">Tab 3</a>
250	</li>
251	</ul>
252	<div class="tab-content">
253	<div id="tab-1" class="tab-pane active">
254	<br />
255	<p>
256	Tab 1 content...<br /> Donec id elit non mi porta
257	gravida at eget metus. Fusce dapibus, tellus ac
258	cursus commodo.
259	</p>
260	</div>
261	<div id="tab-2" class="tab-pane">
262	<br />
263	<p>
264	Tab 2 content...<br /> Tortor mauris condimentum
265	nibh, ut fermentum massa justo sit amet
266	risus. Etiam porta sem malesuada.
267	</p>
268	</div>
269	<div id="tab-3" class="tab-pane">
270	<br />
271	<p>
272	Tab 3 content...<br /> Magna mollis euismod. Donec
273	sed odio dui.
274	</p>
275	</div>
276
277	<br>
278
279	<h3>Sample Tooltip</h3>
280	<br>Move the mouse over the button:
281	<div class="btn btn-default" data-toggle="tooltip"
282	title="This is a tooltip">Sample Tooltip
283	</div>
284
285	<br><br>
286
287	<h3>File Upload</h3>
288	<br>
289	<a href="#">Birth Certificate Scan</a>
290	<input type="submit"
291	value="Delete file"
292	class="btn btn-danger" />
293	<div class="btn btn-default btn-file">
294	Select new file…
295	<input type="file"/>
296	</div>
297	<input type="submit"
298	value="Upload selected file"
299	class="btn btn-primary" />
300	(10 kB max.)
301	<br><br>
302
303	<div class="input-group">
304	<div class="input-group-btn">
305	<div class="btn btn-default btn-file">
306	Select new file…
307	<input type="file">
308	</div>
309	</div>
310	<input type="text" class="form-control" readonly>
311	<div class="input-group-btn">
312	<input type="submit"
313	value="Upload selected file"
314	class="btn btn-primary" />
315	(10 kB max.)
316	</div>
317	</div>
318
319	<br><br>
320
321	<h3>Filtered Select Box</h3>
322	<br>
323	<input id="filterbox" class="kofa-filterbox form-control half"
324	placeholder="Enter search text, then select item below."
325	type="text" />
326	<br />
327	<select id="filteredselect" class="form-control half" size=2>
328	<option value="1">1</option>
329	<option value="1234567890">1234567890</option>
330	<option value="better">better</option>
331	<option value="world">world</option>
332	</select>
333
334	</div><!-- /tab-content -->
335	</div> <!-- /kofa-content -->
336	</div> <!-- /well -->
337	</div> <!-- /kofa-content-narrow -->
338	</div> <!-- /row -->
339
340	<div class="row">
341	<div class="col-md-12 content kofa-content-wide">
342	<div class="well kofa-content">
343	<div class="actionbar">
344	<a class="btn btn-default" href="">
345	<img src="static/img/actionicon_modify.png"
346	alt="Manage" />
347	Manage
348	</a>
349	<a class="btn btn-default" href="">
350	<img src="static/img/actionicon_trigtrans.png"
351	alt="Trigger transition" />
352	Trigger transition
353	</a>
354	</div>
355	<div class="hero-unit">
356	<h1>Hello there!</h1>
357	<p>this is...</p>
358	</div>
359	<div>...content that spans the whole page.</div>
360
361	<br><br>
362	<h3>Accordions</h3>
363	<div class="panel-group" id="accordion" role="tablist"
364	aria-multiselectable="true">
365	<div class="panel panel-default">
366	<div class="panel-heading" role="tab" id="headingTwo">
367	<h4 class="panel-title">
368	<a class="collapsed" data-toggle="collapse"
369	data-parent="#accordion" href="#collapseTwo"
370	aria-expanded="false" aria-controls="collapseTwo">
371	Collapsible Group
372	</a>
373	</h4>
374	</div>
375	<div id="collapseTwo" class="panel-collapse collapse"
376	role="tabpanel" aria-labelledby="headingTwo">
377	<div class="panel-body">
378	Anim pariatur cliche reprehenderit, enim eiusmod high life
379	terry richardson ad squid. 3 wolf moon officia aute, non
380	skateboard dolor brunch. Food truck quinoa laborum eiusmod.
381	</div>
382	</div>
383	</div>
384	</div>
385
386	<br><br>
387	<h3>A Sample Data Table</h3>
388	<div class="table-responsive">
389	<table id="#datatable" class="table table-striped dataTable">
390	<thead>
391	<tr>
392	<th>Id</th>
393	<th>Name</th>
394	<th>Portal Roles</th>
395	<th>Local Roles</th>
396	<th></th>
397	</tr>
398	</thead><tbody><tr><td>admin</td>
399	<td>John</td>
400	<td nowrap="nowrap">Portal Manager <br />
401	Academics Officer (view only)
402	</td>
403	<td>Owner</td>
404	<td class="text-right">
405	<form method="post">
406	<input type="hidden" name="userid" value="admin" />
407	<input class="btn btn-primary btn-sm" type="submit"
408	name="manage" value="Manage" />
409	<input class="btn btn-default btn-sm" type="submit"
410	name="delete" value="Remove" />
411	</form>
412	</td>
413	</tr>
414	<tr>
415	<td>tester</td>
416	<td>Vitali</td>
417	<td nowrap="nowrap">Academics Officer (view only)</td>
418	<td>Owner</td>
419	<td class="text-right">
420	<form method="post">
421	<input type="hidden" name="userid" value="your_id" />
422	<input class="btn btn-sm btn-primary" type="submit"
423	name="manage" value="Manage" />
424	<input class="btn btn-sm btn-default" type="submit"
425	name="delete" value="Remove" />
426	</form>
427	</td>
428	</tr>
429	</tbody>
430	</table>
431	</div>
432
433	<br><br>
434	<h3>A Sample Inline Form</h3>
435	<form method="POST" class="form-inline">
436	<br />
437	<div class="form-group">
438	<input class="btn btn-primary" type="submit" name="search"
439	value="Find student(s)" />
440	</div>
441	<div class="form-group">
442	<select name="searchtype" class="form-control">
443	<option value="student_id">with id</option>
444	<option value="fullname">with name</option>
445	<option value="reg_number">with registration number</option>
446	<option value="matric_number">with matric number</option>
447	<option value="current_session">in session</option>
448	<option value="depcode">in department</option>
449	<option value="current_mode">in study mode</option>
450	<option value="suspended">
451	with deactivated account (search term omitted)
452	</option>
453	<option value="transcript">
454	who requested transcript (search term omitted)
455	</option>
456	</select>
457	</div>
458	<div class="form-group">
459	<input type="text" class="form-control" name="searchterm" />
460	</div>
461	</form>
462
463	<br><br>
464	<h3>A Sample Display Form Table</h3>
465	<table class="form-table">
466	<tbody>
467	<tr>
468	<td class="fieldname">Code:</td>
469	<td>app2012</td>
470	</tr>
471	<tr>
472	<td class="fieldname">Application Target:</td>
473	<td>General Studies</td>
474	</tr>
475	<tr>
476	<td class="fieldname">
477	Application Mode (Donec id elit non mi porta gravida.):
478	</td>
479	<td>Create Application Records</td>
480	</tr>
481	</tbody>
482	</table>
483
484	<br><br>
485	<h3>A Sample Edit/Manage Form Table</h3>
486	<table class="form-table">
487	<tbody>
488	<tr>
489	<td class="fieldname">Code:</td>
490	<td>app2012</td>
491	</tr>
492	<tr>
493	<td class="fieldname">* Title:</td>
494	<td>
495	<input class="textType" id="form.title" name="form.title"
496	size="20" type="text"
497	value="General Studies 2012/2013" />
498	</td>
499	</tr>
500	<tr>
501	<td class="fieldname">Any phone number:</td>
502	<td>
503	<select id="form.phone.country" name="form.phone.country"
504	size="1" class="phone-input">
505	<option value="+234">Nigeria (+234)</option>
506	<option value="+49">Germany (+49)</option>
507	<option value="+1">U.S. (+1)</option>
508	</select>-
509	<input class=" phone-input textType" id="form.phone.area"
510	name="form.phone.area" size="20" type="text"
511	value="" />-
512	<input class=" phone-input textType" id="form.phone.ext"
513	name="form.phone.ext" size="20" type="text" value="" />
514	</td>
515	</tr>
516	<tr>
517	<td class="fieldname">Any text field:</td>
518	<td>
519	<textarea id="any_id"
520	name="any_name" rows="5">Placeholder text</textarea>
521	</td>
522	</tr>
523	<tr>
524	<td class="fieldname">*
525	Application Mode
526	(A select field coming from zope.formlib):
527	</td>
528	<td>
529	<div class="value">
530	<select id="form.mode" name="form.mode" size="1">
531	<option selected="selected" value="create">
532	Create Application Records
533	</option>
534	<option value="update">Update Application Records
535	</option>
536	</select>
537	</div>
538	<input name="form.mode-empty-marker"
539	type="hidden" value="1" />
540	</td>
541	</tr>
542	<tr>
543	<td class="fieldname">A datepicker field:</td>
544	<td>
545	<input class="datepicker-le-year textType"
546	id="form.any_date" name="form.any_date"
547	size="20" type="text" value="" />
548	</td>
549	</tr>
550
551	<tr>
552	<td class="fieldname">
553	A select field in Kofa pagetemplates:
554	</td>
555	<td>
556	<select id="any_id" name="any_name" size="1"
557	class="form-control half">
558	<option selected="selected" value="create">
559	Create Application Records
560	</option>
561	<option value="update">
562	Update Application Records
563	</option>
564	</select>
565	</td>
566	</tr>
567	</tbody>
568	</table>
569	<br>
570	<div class="documentation">
571	<a href="#" target="_blank">
572	Kofa Docs for this page
573	</a>
574	</div>
575	</div> <!-- /well kofa-content-->
576	</div> <!-- /kofa-content-wide -->
577	</div> <!-- /row -->
578	<div id="bottom" class="footer">
579	<p class="credit muted text-right">
580	Kofa - Student Management System<br />
581	Copyright © WAeUP Group
582	<script type="text/javascript">
583	renderCurrentYear();
584	</script>
585	</p>
586	</div>
587	</div> <!-- /container -->
588
589	<script src="https://code.jquery.com/jquery-1.9.1.min.js"></script>
590	<script src="static/bootstrap/js/bootstrap.min.js"></script>
591	<script src="static/js/kofa-scroll.js"></script>
592	<script src="static/js/kofa-activate-tab.js"></script>
593	<script src="static/js/kofa-scrollto.js"></script>
594	<script src="static/js/file-upload.js"></script>
595	<script class="kofa-script-tooltip"
596	src="static/js/kofa-tooltip.js">
597	</script>
598	<script class="kofa-script-datatable"
599	src="static/js/jquery.dataTables.min.js">
600	</script>
601	<script class="kofa-script-datatable"
602	src="static/js/kofa-datatables.js">
603	</script>
604	<script class="jquery-ui"
605	src="static/js/jquery-ui.min.js">
606	</script>
607	<script class="kofa-script-datepicker"
608	src="static/js/kofa-datepicker.js">
609	</script>
610	<script class="kofa-filterByText"
611	src="static/js/kofa-filterByText.js">
612	</script>
613	</body>
614	</html>

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

Download in other formats: