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

Last change on this file since 12901 was 12901, checked in by Henrik Bettermann, 10 years ago

Add link ‘Kofa Docs for this page’ at the end of the content box which refers to the corresponding section of the Kofa Documentation.
File size: 20.8 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="static/bootstrap/css/bootstrap.min.css"
12          rel="stylesheet">
13    <link href="static/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    <link href="static/css/file-upload.css" rel="stylesheet">
21
22    <!-- HTML5 shim and Respond.js IE8 support of HTML5 elements and media queries -->
23    <!--[if lt IE 9]>
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>
26      <link href="static/css/IE8.css" rel="stylesheet">
27    <![endif]-->
28
29    <script src="static/js/kofa-functions.js"></script>
30
31    <!-- icons -->
32    <link rel="shortcut icon" href="static/ico/favicon.ico">
33
34
35  </head>
36
37  <body id="kofa-body">
38
39    <div class="navbar navbar-inverse navbar-fixed-top" role="navigation">
40      <div class="navbar-header">
41        <button type="button" class="navbar-toggle" data-toggle="collapse"
42                  data-target="#kofa-primary-nav">
43          <span class="icon-bar"></span>
44          <span class="icon-bar"></span>
45          <span class="icon-bar"></span>
46        </button>
47        <a class="navbar-brand active kofa-brand-link" href="/">WAeUP.Kofa</a>
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>
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>
67        </ul>
68
69        <ul class="nav navbar-nav navbar-right kofa-navbar-right">
70          <li class="dropdown kofa-langselect">
71            <a href="#" class="dropdown-toggle"
72               data-toggle="dropdown">
73               <img src="static/img/earth.png" />
74            <ul class="dropdown-menu">
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>
81            </ul>
82          </li>
83          <li><a href="#">Contact</a></li>
84          <li><a href="#">Logout</a></li>
85        </ul>
86      </div><!--/.nav-collapse -->
87    </div><!-- /.navbar -->
88
89    <div class="container">
90
91      <div class="row">
92        <div class="col-md-12 container kofa-breadcrumbs-box-long">
93          <div class="well">
94            <ol class="breadcrumb kofa-breadcrumbs">
95              <li>
96                <a href="#">
97                  Home
98                </a>
99              </li>
100              <li>
101                <a href="#">
102                  Subtopic 1
103                </a>
104              </li>
105              <li>
106                <a href="#">
107                  Subtopic 2
108                </a>
109              </li>
110              <li>
111                <a href="#">
112                  Subtopic 3
113                </a>
114              </li>
115            </ol><!-- /kofa-breadcrumbs -->
116          </div> <!-- /well -->
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">
151                K1000000 &bull; quite long student status
152            </div> <!-- /wfstatus -->
153          </div> <!-- /well -->
154        </div> <!-- /kofa-student-status-box -->
155
156      </div> <!-- /row -->
157
158      <div class="row">
159        <div class="col-md-2 kofa-sidebar">
160          <div class="sidebar-nav well">
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>
168                <li><a href="#">Payments</a></li>
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>
185          </div> <!-- /well -->
186        </div> <!-- /kofa-sidebar -->
187
188        <div class="col-md-10 content kofa-content-narrow">
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>
203              <div class="alert alert-danger">
204                  There were errors ...
205              </div>
206              <div class="alert alert-warning">
207                  Be careful ...
208              </div>
209              <div class="alert alert-success">
210                  You have successfully ...
211              </div>
212              <h1>WAeUP.Kofa Theme</h1>
213
214              <p class="kofa-content-desc">
215                A sample Diazo theme for WAeUP.Kofa
216                <br />
217                Fusce dapibus, tellus ac cursus commodo.
218              </p>
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" />
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>
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>
274
275                <br><br>
276
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&hellip;
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&hellip;
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
310              </div><!-- /tab-content -->
311            </div> <!-- /kofa-content -->
312          </div> <!-- /well -->
313        </div> <!-- /kofa-content-narrow -->
314      </div> <!-- /row -->
315
316      <div class="row">
317        <div class="col-md-12 content kofa-content-wide">
318          <div class="well kofa-content">
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>
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>
336            <br><br>
337            <h3>A Sample Data Table</h3>
338            <div class="table-responsive">
339              <table id="#datatable" class="table table-striped dataTable">
340                <thead>
341                  <tr>
342                    <th>Id</th>
343                    <th>Name</th>
344                    <th>Portal Roles</th>
345                    <th>Local Roles</th>
346                    <th></th>
347                  </tr>
348                </thead><tbody><tr><td>admin</td>
349                    <td>John</td>
350                    <td nowrap="nowrap">Portal Manager <br />
351                      Academics Officer (view only)
352                    </td>
353                    <td>Owner</td>
354                    <td class="text-right">
355                      <form method="post">
356                        <input type="hidden" name="userid" value="admin" />
357                        <input class="btn btn-primary btn-sm" type="submit"
358                               name="manage" value="Manage" />
359                        <input class="btn btn-default btn-sm" type="submit"
360                               name="delete" value="Remove" />
361                      </form>
362                    </td>
363                  </tr>
364                  <tr>
365                    <td>tester</td>
366                    <td>Vitali</td>
367                    <td nowrap="nowrap">Academics Officer (view only)</td>
368                    <td>Owner</td>
369                    <td class="text-right">
370                      <form method="post">
371                        <input type="hidden" name="userid" value="your_id" />
372                        <input class="btn btn-sm btn-primary" type="submit"
373                               name="manage" value="Manage" />
374                        <input class="btn btn-sm btn-default" type="submit"
375                               name="delete" value="Remove" />
376                      </form>
377                    </td>
378                  </tr>
379                </tbody>
380              </table>
381            </div>
382
383            <br><br>
384            <h3>A Sample Inline Form</h3>
385            <form method="POST" class="form-inline">
386            <br />
387              <div class="form-group">
388                <input class="btn btn-primary" type="submit" name="search"
389                  value="Find student(s)" />
390              </div>
391              <div class="form-group">
392                <select name="searchtype" class="form-control">
393                  <option value="student_id">with id</option>
394                  <option value="fullname">with name</option>
395                  <option value="reg_number">with registration number</option>
396                  <option value="matric_number">with matric number</option>
397                  <option value="current_session">in session</option>
398                  <option value="depcode">in department</option>
399                  <option value="current_mode">in study mode</option>
400                  <option value="suspended">
401                    with deactivated account (search term omitted)
402                  </option>
403                  <option value="transcript">
404                    who requested transcript (search term omitted)
405                  </option>
406                </select>
407              </div>
408              <div class="form-group">
409                <input type="text" class="form-control" name="searchterm" />
410              </div>
411            </form>
412
413            <br><br>
414            <h3>A Sample Display Form Table</h3>
415            <table class="form-table">
416              <tbody>
417                <tr>
418                  <td class="fieldname">Code:</td>
419                  <td>app2012</td>
420                </tr>
421                <tr>
422                 <td class="fieldname">Application Target:</td>
423                  <td>General Studies</td>
424                </tr>
425                 <tr>
426                  <td class="fieldname">
427                    Application Mode (Donec id elit non mi porta gravida.):
428                  </td>
429                  <td>Create Application Records</td>
430                </tr>
431              </tbody>
432            </table>
433
434            <br><br>
435            <h3>A Sample Edit/Manage Form Table</h3>
436            <table class="form-table">
437              <tbody>
438                <tr>
439                  <td class="fieldname">Code:</td>
440                  <td>app2012</td>
441                </tr>
442                <tr>
443                  <td class="fieldname">* Title:</td>
444                  <td>
445                    <input class="textType" id="form.title" name="form.title"
446                           size="20" type="text"
447                           value="General Studies 2012/2013" />
448                  </td>
449                </tr>
450                <tr>
451                  <td class="fieldname">Any phone number:</td>
452                  <td>
453                    <select id="form.phone.country" name="form.phone.country"
454                              size="1" class="phone-input">
455                      <option value="+234">Nigeria (+234)</option>
456                      <option value="+49">Germany (+49)</option>
457                      <option value="+1">U.S. (+1)</option>
458                    </select>-
459                    <input class=" phone-input textType" id="form.phone.area"
460                           name="form.phone.area" size="20" type="text"
461                           value="" />-
462                    <input class=" phone-input textType" id="form.phone.ext"
463                           name="form.phone.ext" size="20" type="text" value="" />
464                  </td>
465                </tr>
466                <tr>
467                  <td class="fieldname">Any text field:</td>
468                  <td>
469                      <textarea id="any_id"
470                          name="any_name" rows="5">Placeholder text</textarea>
471                  </td>
472                </tr>
473                <tr>
474                  <td class="fieldname">*
475                      Application Mode
476                      (A select field coming from zope.formlib):
477                  </td>
478                  <td>
479                    <div class="value">
480                      <select id="form.mode" name="form.mode" size="1">
481                        <option selected="selected" value="create">
482                          Create Application Records
483                        </option>
484                        <option value="update">Update Application Records
485                        </option>
486                      </select>
487                    </div>
488                    <input name="form.mode-empty-marker"
489                           type="hidden" value="1" />
490                  </td>
491                </tr>
492                <tr>
493                  <td class="fieldname">A datepicker field:</td>
494                  <td>
495                    <input class="datepicker-le-year textType"
496                                 id="form.any_date" name="form.any_date"
497                                 size="20" type="text" value="" />
498                  </td>
499                </tr>
500
501                <tr>
502                  <td class="fieldname">
503                      A select field in Kofa pagetemplates:
504                  </td>
505                  <td>
506                      <select id="any_id" name="any_name" size="1"
507                              class="form-control half">
508                        <option selected="selected" value="create">
509                            Create Application Records
510                        </option>
511                        <option value="update">
512                            Update Application Records
513                        </option>
514                      </select>
515                  </td>
516                </tr>
517              </tbody>
518            </table>
519            <br>
520            <div class="documentation">
521              <a href="#" target="_blank">
522                Kofa Docs for this page
523              </a>
524            </div>
525          </div> <!-- /well kofa-content-->
526        </div> <!-- /kofa-content-wide -->
527      </div> <!-- /row -->
528      <div id="bottom" class="footer">
529        <p class="credit muted text-right">
530          Kofa - Student Management System<br />
531          Copyright &copy; WAeUP Group
532          <script type="text/javascript">
533          renderCurrentYear();
534          </script>
535        </p>
536      </div>
537    </div> <!-- /container -->
538
539    <script src="https://code.jquery.com/jquery-1.9.1.min.js"></script>
540    <script src="static/bootstrap/js/bootstrap.min.js"></script>
541    <script src="static/js/kofa-scroll.js"></script>
542    <script src="static/js/kofa-activate-tab.js"></script>
543    <script src="static/js/kofa-scrollto.js"></script>
544    <script src="static/js/file-upload.js"></script>
545    <script class="kofa-script-tooltip"
546        src="static/js/kofa-tooltip.js">
547    </script>
548    <script class="kofa-script-datatable"
549        src="static/js/jquery.dataTables.min.js">
550    </script>
551    <script class="kofa-script-datatable"
552        src="static/js/kofa-datatables.js">
553    </script>
554    <script class="jquery-ui"
555        src="static/js/jquery-ui.min.js">
556    </script>
557    <script class="kofa-script-datepicker"
558        src="static/js/kofa-datepicker.js">
559    </script>
560  </body>
561</html>
Note: See TracBrowser for help on using the repository browser.