Context navigation

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

Last change on this file since 14422 was 14422, checked in by Henrik Bettermann, 8 years ago
Implement Filtered Select Box.
File size: 23.0 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">
[13513]	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">
[11030]	102	<div class="col-md-12 container kofa-breadcrumbs-box-long">
[10960]	103	<div class="well">
	104	<ol class="breadcrumb kofa-breadcrumbs">
[11029]	105	<li>
[10960]	106	<a href="#">
	107	Home
	108	</a>
	109	</li>
[11029]	110	<li>
[10960]	111	<a href="#">
[11030]	112	Subtopic 1
[10960]	113	</a>
	114	</li>
[11030]	115	<li>
	116	<a href="#">
	117	Subtopic 2
	118	</a>
	119	</li>
	120	<li>
	121	<a href="#">
	122	Subtopic 3
	123	</a>
	124	</li>
[10960]	125	</ol><!-- /kofa-breadcrumbs -->
	126	</div> <!-- /well -->
[13513]	127	</div> <!-- /kofa-breadcrumbs-box-long -->
[11030]	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">
[11033]	161	K1000000 • quite long student status
[11030]	162	</div> <!-- /wfstatus -->
	163	</div> <!-- /well -->
	164	</div> <!-- /kofa-student-status-box -->
	165
[10960]	166	</div> <!-- /row -->
	167
	168	<div class="row">
	169	<div class="col-md-2 kofa-sidebar">
[10958]	170	<div class="sidebar-nav well">
[10969]	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>
[10995]	178	<li><a href="#">Payments</a></li>
[10969]	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>
[10917]	195	</div> <!-- /well -->
[10960]	196	</div> <!-- /kofa-sidebar -->
[10995]	197
[10962]	198	<div class="col-md-10 content kofa-content-narrow">
[10985]	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>
[10994]	213	<div class="alert alert-danger">
	214	There were errors ...
	215	</div>
[10985]	216	<div class="alert alert-warning">
	217	Be careful ...
	218	</div>
	219	<div class="alert alert-success">
	220	You have successfully ...
	221	</div>
[10994]	222	<h1>WAeUP.Kofa Theme</h1>
[10995]	223
	224	<p class="kofa-content-desc">
	225	A sample Diazo theme for WAeUP.Kofa
	226	<br />
	227	Fusce dapibus, tellus ac cursus commodo.
[10994]	228	</p>
[10985]	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" />
[10995]	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>
[11056]	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>
[11558]	284
[11056]	285	<br><br>
	286
[11558]	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
[14422]	319	<br><br>
[11558]	320
[14422]	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
[10995]	334	</div><!-- /tab-content -->
[10985]	335	</div> <!-- /kofa-content -->
[10960]	336	</div> <!-- /well -->
	337	</div> <!-- /kofa-content-narrow -->
	338	</div> <!-- /row -->
[10917]	339
[10960]	340	<div class="row">
[10973]	341	<div class="col-md-12 content kofa-content-wide">
	342	<div class="well kofa-content">
[10999]	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>
[10960]	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>
[12931]	360
[10986]	361	<br><br>
[12931]	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>
[10986]	387	<h3>A Sample Data Table</h3>
[11031]	388	<div class="table-responsive">
[11436]	389	<table id="#datatable" class="table table-striped dataTable">
[11031]	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" />
[11558]	407	<input class="btn btn-primary btn-sm" type="submit"
[11031]	408	name="manage" value="Manage" />
[11558]	409	<input class="btn btn-default btn-sm" type="submit"
[11031]	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>
[10989]	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">
[11027]	442	<select name="searchtype" class="form-control">
[10989]	443	<option value="student_id">with id</option>
	444	<option value="fullname">with name</option>
	445	<option value="reg_number">with registration number</option>
[11027]	446	<option value="matric_number">with matric number</option>
[10989]	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
[10993]	463	<br><br>
	464	<h3>A Sample Display Form Table</h3>
	465	<table class="form-table">
	466	<tbody>
	467	<tr>
[11055]	468	<td class="fieldname">Code:</td>
	469	<td>app2012</td>
[10993]	470	</tr>
	471	<tr>
[11055]	472	<td class="fieldname">Application Target:</td>
	473	<td>General Studies</td>
[10993]	474	</tr>
[11055]	475	<tr>
[10993]	476	<td class="fieldname">
[11027]	477	Application Mode (Donec id elit non mi porta gravida.):
[10993]	478	</td>
[11055]	479	<td>Create Application Records</td>
[10993]	480	</tr>
	481	</tbody>
	482	</table>
[10989]	483
[10993]	484	<br><br>
	485	<h3>A Sample Edit/Manage Form Table</h3>
	486	<table class="form-table">
	487	<tbody>
	488	<tr>
[11055]	489	<td class="fieldname">Code:</td>
	490	<td>app2012</td>
[10993]	491	</tr>
	492	<tr>
[11055]	493	<td class="fieldname">* Title:</td>
[10993]	494	<td>
	495	<input class="textType" id="form.title" name="form.title"
[11027]	496	size="20" type="text"
	497	value="General Studies 2012/2013" />
[10993]	498	</td>
	499	</tr>
	500	<tr>
[11055]	501	<td class="fieldname">Any phone number:</td>
[10993]	502	<td>
[11055]	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="" />
[10993]	514	</td>
	515	</tr>
	516	<tr>
[11055]	517	<td class="fieldname">Any text field:</td>
[10993]	518	<td>
[11055]	519	<textarea id="any_id"
	520	name="any_name" rows="5">Placeholder text</textarea>
[10993]	521	</td>
	522	</tr>
	523	<tr>
[11055]	524	<td class="fieldname">*
[11027]	525	Application Mode
[11055]	526	(A select field coming from zope.formlib):
[10993]	527	</td>
	528	<td>
	529	<div class="value">
[11027]	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" />
[10993]	540	</td>
	541	</tr>
[11019]	542	<tr>
[11055]	543	<td class="fieldname">A datepicker field:</td>
[11019]	544	<td>
	545	<input class="datepicker-le-year textType"
[11020]	546	id="form.any_date" name="form.any_date"
[11019]	547	size="20" type="text" value="" />
	548	</td>
	549	</tr>
	550
[11027]	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>
[10993]	567	</tbody>
	568	</table>
[12901]	569	<br>
	570	<div class="documentation">
	571	<a href="#" target="_blank">
	572	Kofa Docs for this page
	573	</a>
	574	</div>
[10993]	575	</div> <!-- /well kofa-content-->
[10960]	576	</div> <!-- /kofa-content-wide -->
	577	</div> <!-- /row -->
[11463]	578	<div id="bottom" class="footer">
[10977]	579	<p class="credit muted text-right">
	580	Kofa - Student Management System<br />
[11741]	581	Copyright © WAeUP Group
	582	<script type="text/javascript">
	583	renderCurrentYear();
	584	</script>
[10977]	585	</p>
	586	</div>
[10960]	587	</div> <!-- /container -->
[10917]	588
[11430]	589	<script src="https://code.jquery.com/jquery-1.9.1.min.js"></script>
[11046]	590	<script src="static/bootstrap/js/bootstrap.min.js"></script>
[11463]	591	<script src="static/js/kofa-scroll.js"></script>
[11104]	592	<script src="static/js/kofa-activate-tab.js"></script>
[11494]	593	<script src="static/js/kofa-scrollto.js"></script>
[11558]	594	<script src="static/js/file-upload.js"></script>
[11436]	595	<script class="kofa-script-tooltip"
	596	src="static/js/kofa-tooltip.js">
	597	</script>
[11041]	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>
[11436]	604	<script class="jquery-ui"
[11041]	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>
[14422]	610	<script class="kofa-filterByText"
	611	src="static/js/kofa-filterByText.js">
	612	</script>
[10917]	613	</body>
	614	</html>

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

Download in other formats: