Context navigation

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

Last change on this file since 13222 was 12931, checked in by Henrik Bettermann, 10 years ago
We will use Bootstrap accordions in Kofa.
File size: 21.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">
[11558]	20	<link href="static/css/file-upload.css" rel="stylesheet">
[10917]	21
[11030]	22	<!-- HTML5 shim and Respond.js IE8 support of HTML5 elements and media queries -->
[10917]	23	<!--[if lt IE 9]>
[11030]	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>
[11031]	26	<link href="static/css/IE8.css" rel="stylesheet">
[10917]	27	<![endif]-->
	28
[11741]	29	<script src="static/js/kofa-functions.js"></script>
[11030]	30
[10917]	31	<!-- icons -->
	32	<link rel="shortcut icon" href="static/ico/favicon.ico">
	33
[10986]	34
[10917]	35	</head>
	36
	37	<body id="kofa-body">
	38
[10961]	39	<div class="navbar navbar-inverse navbar-fixed-top" role="navigation">
[10917]	40	<div class="navbar-header">
	41	<button type="button" class="navbar-toggle" data-toggle="collapse"
[10958]	42	data-target="#kofa-primary-nav">
[10917]	43	<span class="icon-bar"></span>
	44	<span class="icon-bar"></span>
	45	<span class="icon-bar"></span>
	46	</button>
[10960]	47	<a class="navbar-brand active kofa-brand-link" href="/">WAeUP.Kofa</a>
[10917]	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>
[11023]	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>
[11021]	67	</ul>
	68
	69	<ul class="nav navbar-nav navbar-right kofa-navbar-right">
[10917]	70	<li class="dropdown kofa-langselect">
	71	<a href="#" class="dropdown-toggle"
[11021]	72	data-toggle="dropdown">
	73	<img src="static/img/earth.png" />
[10917]	74	<ul class="dropdown-menu">
[11023]	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>
[10917]	81	</ul>
	82	</li>
[11064]	83	<li><a href="#">Contact</a></li>
	84	<li><a href="#">Logout</a></li>
[10958]	85	</ul>
[10917]	86	</div><!--/.nav-collapse -->
	87	</div><!-- /.navbar -->
	88
	89	<div class="container">
[11029]	90
[10917]	91	<div class="row">
[11030]	92	<div class="col-md-12 container kofa-breadcrumbs-box-long">
[10960]	93	<div class="well">
	94	<ol class="breadcrumb kofa-breadcrumbs">
[11029]	95	<li>
[10960]	96	<a href="#">
	97	Home
	98	</a>
	99	</li>
[11029]	100	<li>
[10960]	101	<a href="#">
[11030]	102	Subtopic 1
[10960]	103	</a>
	104	</li>
[11030]	105	<li>
	106	<a href="#">
	107	Subtopic 2
	108	</a>
	109	</li>
	110	<li>
	111	<a href="#">
	112	Subtopic 3
	113	</a>
	114	</li>
[10960]	115	</ol><!-- /kofa-breadcrumbs -->
	116	</div> <!-- /well -->
[11030]	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">
[11033]	151	K1000000 • quite long student status
[11030]	152	</div> <!-- /wfstatus -->
	153	</div> <!-- /well -->
	154	</div> <!-- /kofa-student-status-box -->
	155
[10960]	156	</div> <!-- /row -->
	157
	158	<div class="row">
	159	<div class="col-md-2 kofa-sidebar">
[10958]	160	<div class="sidebar-nav well">
[10969]	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>
[10995]	168	<li><a href="#">Payments</a></li>
[10969]	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>
[10917]	185	</div> <!-- /well -->
[10960]	186	</div> <!-- /kofa-sidebar -->
[10995]	187
[10962]	188	<div class="col-md-10 content kofa-content-narrow">
[10985]	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>
[10994]	203	<div class="alert alert-danger">
	204	There were errors ...
	205	</div>
[10985]	206	<div class="alert alert-warning">
	207	Be careful ...
	208	</div>
	209	<div class="alert alert-success">
	210	You have successfully ...
	211	</div>
[10994]	212	<h1>WAeUP.Kofa Theme</h1>
[10995]	213
	214	<p class="kofa-content-desc">
	215	A sample Diazo theme for WAeUP.Kofa
	216	<br />
	217	Fusce dapibus, tellus ac cursus commodo.
[10994]	218	</p>
[10985]	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" />
[10995]	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>
[11056]	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>
[11558]	274
[11056]	275	<br><br>
	276
[11558]	277	<h3>File Upload</h3>
	278	<br>
	279	<a href="#">Birth Certificate Scan</a>
	280	<input type="submit"
	281	value="Delete file"
	282	class="btn btn-danger" />
	283	<div class="btn btn-default btn-file">
	284	Select new file…
	285	<input type="file"/>
	286	</div>
	287	<input type="submit"
	288	value="Upload selected file"
	289	class="btn btn-primary" />
	290	(10 kB max.)
	291	<br><br>
	292
	293	<div class="input-group">
	294	<div class="input-group-btn">
	295	<div class="btn btn-default btn-file">
	296	Select new file…
	297	<input type="file">
	298	</div>
	299	</div>
	300	<input type="text" class="form-control" readonly>
	301	<div class="input-group-btn">
	302	<input type="submit"
	303	value="Upload selected file"
	304	class="btn btn-primary" />
	305	(10 kB max.)
	306	</div>
	307	</div>
	308
	309
[10995]	310	</div><!-- /tab-content -->
[10985]	311	</div> <!-- /kofa-content -->
[10960]	312	</div> <!-- /well -->
	313	</div> <!-- /kofa-content-narrow -->
	314	</div> <!-- /row -->
[10917]	315
[10960]	316	<div class="row">
[10973]	317	<div class="col-md-12 content kofa-content-wide">
	318	<div class="well kofa-content">
[10999]	319	<div class="actionbar">
	320	<a class="btn btn-default" href="">
	321	<img src="static/img/actionicon_modify.png"
	322	alt="Manage" />
	323	Manage
	324	</a>
	325	<a class="btn btn-default" href="">
	326	<img src="static/img/actionicon_trigtrans.png"
	327	alt="Trigger transition" />
	328	Trigger transition
	329	</a>
	330	</div>
[10960]	331	<div class="hero-unit">
	332	<h1>Hello there!</h1>
	333	<p>this is...</p>
	334	</div>
	335	<div>...content that spans the whole page.</div>
[12931]	336
[10986]	337	<br><br>
[12931]	338	<h3>Accordions</h3>
	339	<div class="panel-group" id="accordion" role="tablist"
	340	aria-multiselectable="true">
	341	<div class="panel panel-default">
	342	<div class="panel-heading" role="tab" id="headingTwo">
	343	<h4 class="panel-title">
	344	<a class="collapsed" data-toggle="collapse"
	345	data-parent="#accordion" href="#collapseTwo"
	346	aria-expanded="false" aria-controls="collapseTwo">
	347	Collapsible Group
	348	</a>
	349	</h4>
	350	</div>
	351	<div id="collapseTwo" class="panel-collapse collapse"
	352	role="tabpanel" aria-labelledby="headingTwo">
	353	<div class="panel-body">
	354	Anim pariatur cliche reprehenderit, enim eiusmod high life
	355	terry richardson ad squid. 3 wolf moon officia aute, non
	356	skateboard dolor brunch. Food truck quinoa laborum eiusmod.
	357	</div>
	358	</div>
	359	</div>
	360	</div>
	361
	362	<br><br>
[10986]	363	<h3>A Sample Data Table</h3>
[11031]	364	<div class="table-responsive">
[11436]	365	<table id="#datatable" class="table table-striped dataTable">
[11031]	366	<thead>
	367	<tr>
	368	<th>Id</th>
	369	<th>Name</th>
	370	<th>Portal Roles</th>
	371	<th>Local Roles</th>
	372	<th></th>
	373	</tr>
	374	</thead><tbody><tr><td>admin</td>
	375	<td>John</td>
	376	<td nowrap="nowrap">Portal Manager <br />
	377	Academics Officer (view only)
	378	</td>
	379	<td>Owner</td>
	380	<td class="text-right">
	381	<form method="post">
	382	<input type="hidden" name="userid" value="admin" />
[11558]	383	<input class="btn btn-primary btn-sm" type="submit"
[11031]	384	name="manage" value="Manage" />
[11558]	385	<input class="btn btn-default btn-sm" type="submit"
[11031]	386	name="delete" value="Remove" />
	387	</form>
	388	</td>
	389	</tr>
	390	<tr>
	391	<td>tester</td>
	392	<td>Vitali</td>
	393	<td nowrap="nowrap">Academics Officer (view only)</td>
	394	<td>Owner</td>
	395	<td class="text-right">
	396	<form method="post">
	397	<input type="hidden" name="userid" value="your_id" />
	398	<input class="btn btn-sm btn-primary" type="submit"
	399	name="manage" value="Manage" />
	400	<input class="btn btn-sm btn-default" type="submit"
	401	name="delete" value="Remove" />
	402	</form>
	403	</td>
	404	</tr>
	405	</tbody>
	406	</table>
	407	</div>
[10989]	408
	409	<br><br>
	410	<h3>A Sample Inline Form</h3>
	411	<form method="POST" class="form-inline">
	412	<br />
	413	<div class="form-group">
	414	<input class="btn btn-primary" type="submit" name="search"
	415	value="Find student(s)" />
	416	</div>
	417	<div class="form-group">
[11027]	418	<select name="searchtype" class="form-control">
[10989]	419	<option value="student_id">with id</option>
	420	<option value="fullname">with name</option>
	421	<option value="reg_number">with registration number</option>
[11027]	422	<option value="matric_number">with matric number</option>
[10989]	423	<option value="current_session">in session</option>
	424	<option value="depcode">in department</option>
	425	<option value="current_mode">in study mode</option>
	426	<option value="suspended">
	427	with deactivated account (search term omitted)
	428	</option>
	429	<option value="transcript">
	430	who requested transcript (search term omitted)
	431	</option>
	432	</select>
	433	</div>
	434	<div class="form-group">
	435	<input type="text" class="form-control" name="searchterm" />
	436	</div>
	437	</form>
	438
[10993]	439	<br><br>
	440	<h3>A Sample Display Form Table</h3>
	441	<table class="form-table">
	442	<tbody>
	443	<tr>
[11055]	444	<td class="fieldname">Code:</td>
	445	<td>app2012</td>
[10993]	446	</tr>
	447	<tr>
[11055]	448	<td class="fieldname">Application Target:</td>
	449	<td>General Studies</td>
[10993]	450	</tr>
[11055]	451	<tr>
[10993]	452	<td class="fieldname">
[11027]	453	Application Mode (Donec id elit non mi porta gravida.):
[10993]	454	</td>
[11055]	455	<td>Create Application Records</td>
[10993]	456	</tr>
	457	</tbody>
	458	</table>
[10989]	459
[10993]	460	<br><br>
	461	<h3>A Sample Edit/Manage Form Table</h3>
	462	<table class="form-table">
	463	<tbody>
	464	<tr>
[11055]	465	<td class="fieldname">Code:</td>
	466	<td>app2012</td>
[10993]	467	</tr>
	468	<tr>
[11055]	469	<td class="fieldname">* Title:</td>
[10993]	470	<td>
	471	<input class="textType" id="form.title" name="form.title"
[11027]	472	size="20" type="text"
	473	value="General Studies 2012/2013" />
[10993]	474	</td>
	475	</tr>
	476	<tr>
[11055]	477	<td class="fieldname">Any phone number:</td>
[10993]	478	<td>
[11055]	479	<select id="form.phone.country" name="form.phone.country"
	480	size="1" class="phone-input">
	481	<option value="+234">Nigeria (+234)</option>
	482	<option value="+49">Germany (+49)</option>
	483	<option value="+1">U.S. (+1)</option>
	484	</select>-
	485	<input class=" phone-input textType" id="form.phone.area"
	486	name="form.phone.area" size="20" type="text"
	487	value="" />-
	488	<input class=" phone-input textType" id="form.phone.ext"
	489	name="form.phone.ext" size="20" type="text" value="" />
[10993]	490	</td>
	491	</tr>
	492	<tr>
[11055]	493	<td class="fieldname">Any text field:</td>
[10993]	494	<td>
[11055]	495	<textarea id="any_id"
	496	name="any_name" rows="5">Placeholder text</textarea>
[10993]	497	</td>
	498	</tr>
	499	<tr>
[11055]	500	<td class="fieldname">*
[11027]	501	Application Mode
[11055]	502	(A select field coming from zope.formlib):
[10993]	503	</td>
	504	<td>
	505	<div class="value">
[11027]	506	<select id="form.mode" name="form.mode" size="1">
	507	<option selected="selected" value="create">
	508	Create Application Records
	509	</option>
	510	<option value="update">Update Application Records
	511	</option>
	512	</select>
	513	</div>
	514	<input name="form.mode-empty-marker"
	515	type="hidden" value="1" />
[10993]	516	</td>
	517	</tr>
[11019]	518	<tr>
[11055]	519	<td class="fieldname">A datepicker field:</td>
[11019]	520	<td>
	521	<input class="datepicker-le-year textType"
[11020]	522	id="form.any_date" name="form.any_date"
[11019]	523	size="20" type="text" value="" />
	524	</td>
	525	</tr>
	526
[11027]	527	<tr>
	528	<td class="fieldname">
	529	A select field in Kofa pagetemplates:
	530	</td>
	531	<td>
	532	<select id="any_id" name="any_name" size="1"
	533	class="form-control half">
	534	<option selected="selected" value="create">
	535	Create Application Records
	536	</option>
	537	<option value="update">
	538	Update Application Records
	539	</option>
	540	</select>
	541	</td>
	542	</tr>
[10993]	543	</tbody>
	544	</table>
[12901]	545	<br>
	546	<div class="documentation">
	547	<a href="#" target="_blank">
	548	Kofa Docs for this page
	549	</a>
	550	</div>
[10993]	551	</div> <!-- /well kofa-content-->
[10960]	552	</div> <!-- /kofa-content-wide -->
	553	</div> <!-- /row -->
[11463]	554	<div id="bottom" class="footer">
[10977]	555	<p class="credit muted text-right">
	556	Kofa - Student Management System<br />
[11741]	557	Copyright © WAeUP Group
	558	<script type="text/javascript">
	559	renderCurrentYear();
	560	</script>
[10977]	561	</p>
	562	</div>
[10960]	563	</div> <!-- /container -->
[10917]	564
[11430]	565	<script src="https://code.jquery.com/jquery-1.9.1.min.js"></script>
[11046]	566	<script src="static/bootstrap/js/bootstrap.min.js"></script>
[11463]	567	<script src="static/js/kofa-scroll.js"></script>
[11104]	568	<script src="static/js/kofa-activate-tab.js"></script>
[11494]	569	<script src="static/js/kofa-scrollto.js"></script>
[11558]	570	<script src="static/js/file-upload.js"></script>
[11436]	571	<script class="kofa-script-tooltip"
	572	src="static/js/kofa-tooltip.js">
	573	</script>
[11041]	574	<script class="kofa-script-datatable"
	575	src="static/js/jquery.dataTables.min.js">
	576	</script>
	577	<script class="kofa-script-datatable"
	578	src="static/js/kofa-datatables.js">
	579	</script>
[11436]	580	<script class="jquery-ui"
[11041]	581	src="static/js/jquery-ui.min.js">
	582	</script>
	583	<script class="kofa-script-datepicker"
	584	src="static/js/kofa-datepicker.js">
	585	</script>
[10917]	586	</body>
	587	</html>

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

Download in other formats: