Context navigation

source: main/waeup.kofa/branches/uli-diazo-themed/layout/theme.html @ 11032

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

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

Download in other formats: