Context navigation

source: main/kofacustom.udss/trunk/layout/theme.html @ 17724

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

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

Download in other formats: