Context navigation

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

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

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

Download in other formats: