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

Last change on this file since 11029 was 11029, checked in by Henrik Bettermann, 11 years ago

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