source: main/waeup.imostate/trunk/layout/theme.html @ 17102

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

Adjust theme to changes made in base package.
File size: 20.7 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_custom/custom.css" rel="stylesheet">
21    <link href="static/css/file-upload.css" rel="stylesheet">
22
23    <!-- HTML5 shim and Respond.js IE8 support of HTML5 elements and media queries -->
24    <!--[if lt IE 9]>
25      <script src="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script>
26      <script src="https://oss.maxcdn.com/libs/respond.js/1.4.2/respond.min.js"></script>
27      <link href="static/css/IE8.css" rel="stylesheet">
28    <![endif]-->
29
30    <script src="static/js/kofa-functions.js"></script>
31
32    <!-- icons -->
33    <link rel="shortcut icon" href="static_custom/favicon.ico">
34
35
36  </head>
37
38  <body id="kofa-body">
39
40    <div class="navbar navbar-inverse navbar-fixed-top" role="navigation">
41      <div class="navbar-header">
42        <button type="button" class="navbar-toggle" data-toggle="collapse"
43                  data-target="#kofa-primary-nav">
44          <span class="icon-bar"></span>
45          <span class="icon-bar"></span>
46          <span class="icon-bar"></span>
47        </button>
48        <a class="navbar-brand active kofa-brand-link" href="/">WAeUP.Kofa</a>
49      </div>
50      <div class="navbar-collapse collapse"
51           id="kofa-primary-nav">
52        <ul class="nav navbar-nav kofa-navbar-left">
53          <li class="active"><a href="#">Academics</a></li>
54          <li><a href="#about">Applicants</a></li>
55          <li><a href="#contact">Students</a></li>
56          <li><a href="#contact">Hostels</a></li>
57          <li class="dropdown">
58            <a href="#" class="dropdown-toggle"
59               data-toggle="dropdown">My Data
60               <b class="caret"></b>
61            <ul class="dropdown-menu">
62              <li><a href="#">Base Data</a></li>
63              <li><a href="#">Clearance Data</a></li>
64              <li><a href="#">Personal Data</a></li>
65              <li><a href="#">History</a></li>
66            </ul>
67          </li>
68        </ul>
69
70        <ul class="nav navbar-nav navbar-right kofa-navbar-right">
71          <li class="dropdown kofa-langselect">
72            <a href="#" class="dropdown-toggle"
73               data-toggle="dropdown">
74               <img src="static/img/earth.png" />
75            <ul class="dropdown-menu">
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>
82            </ul>
83          </li>
84          <li><a href="#">Contact</a></li>
85          <li><a href="#">Logout</a></li>
86        </ul>
87      </div><!--/.nav-collapse -->
88    </div><!-- /.navbar -->
89
90    <div class="container">
91
92      <div class="row">
93        <div class="col-md-12 container kofa-breadcrumbs-box-long">
94          <div class="well">
95            <ol class="breadcrumb kofa-breadcrumbs">
96              <li>
97                <a href="#">
98                  Home
99                </a>
100              </li>
101              <li>
102                <a href="#">
103                  Subtopic 1
104                </a>
105              </li>
106              <li>
107                <a href="#">
108                  Subtopic 2
109                </a>
110              </li>
111              <li>
112                <a href="#">
113                  Subtopic 3
114                </a>
115              </li>
116            </ol><!-- /kofa-breadcrumbs -->
117          </div> <!-- /well -->
118        </div> <!-- /kofa-breadcrumbs-box-short -->
119      </div>
120
121      <div class="row">
122        <div class="col-md-8 container kofa-breadcrumbs-box-short">
123          <div class="well">
124            <ol class="breadcrumb kofa-breadcrumbs">
125              <li>
126                <a href="#">
127                  Home
128                </a>
129              </li>
130              <li>
131                <a href="#">
132                  Subtopic 1
133                </a>
134              </li>
135              <li>
136                <a href="#">
137                  Subtopic 2
138                </a>
139              </li>
140              <li>
141                <a href="#">
142                  Subtopic 3
143                </a>
144              </li>
145            </ol><!-- /kofa-breadcrumbs -->
146          </div> <!-- /well -->
147        </div> <!-- /kofa-breadcrumbs-box-short -->
148
149        <div class="col-md-4 container kofa-student-status-box">
150          <div class="well">
151            <div class="wfstatus">
152                K1000000 &bull; quite long student status
153            </div> <!-- /wfstatus -->
154          </div> <!-- /well -->
155        </div> <!-- /kofa-student-status-box -->
156
157      </div> <!-- /row -->
158
159      <div class="row">
160        <div class="col-md-2 kofa-sidebar">
161          <div class="sidebar-nav well">
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>
169                <li><a href="#">Payments</a></li>
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>
186          </div> <!-- /well -->
187        </div> <!-- /kofa-sidebar -->
188
189        <div class="col-md-10 content kofa-content-narrow">
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>
204              <div class="alert alert-danger">
205                  There were errors ...
206              </div>
207              <div class="alert alert-warning">
208                  Be careful ...
209              </div>
210              <div class="alert alert-success">
211                  You have successfully ...
212              </div>
213              <h1>WAeUP.Kofa Theme</h1>
214
215              <p class="kofa-content-desc">
216                A sample Diazo theme for WAeUP.Kofa
217                <br />
218                Fusce dapibus, tellus ac cursus commodo.
219              </p>
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" />
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
268                <br>
269
270                <h3>Sample Tooltip</h3>
271                <br>Move the mouse over the button:
272                <div class="btn btn-default" data-toggle="tooltip"
273                     title="This is a tooltip">Sample Tooltip
274                </div>
275
276                <br><br>
277
278                <h3>File Upload</h3>
279                <br>
280                <a href="#">Birth Certificate Scan</a>
281                <input type="submit"
282                       value="Delete file"
283                       class="btn btn-danger" />
284                <div class="btn btn-default btn-file">
285                  Select new file&hellip;
286                  <input type="file"/>
287                </div>
288                <input type="submit"
289                       value="Upload selected file"
290                       class="btn btn-primary" />
291                (10 kB max.)
292                <br><br>
293
294                                        <div class="input-group">
295                                                <div class="input-group-btn">
296                                                        <div class="btn btn-default btn-file">
297                      Select new file&hellip;
298                      <input type="file">
299                    </div>
300                                                </div>
301                                                <input type="text" class="form-control" readonly>
302                  <div class="input-group-btn">
303                    <input type="submit"
304                           value="Upload selected file"
305                           class="btn btn-primary" />
306                    (10 kB max.)
307                  </div>
308                </div>
309
310
311              </div><!-- /tab-content -->
312            </div> <!-- /kofa-content -->
313          </div> <!-- /well -->
314        </div> <!-- /kofa-content-narrow -->
315      </div> <!-- /row -->
316
317      <div class="row">
318        <div class="col-md-12 content kofa-content-wide">
319          <div class="well kofa-content">
320            <div class="actionbar">
321              <a class="btn btn-default" href="">
322                <img src="static/img/actionicon_modify.png"
323                     alt="Manage" />
324                     Manage
325              </a>
326              <a class="btn btn-default" href="">
327                <img src="static/img/actionicon_trigtrans.png"
328                     alt="Trigger transition" />
329                     Trigger transition
330              </a>
331            </div>
332            <div class="hero-unit">
333              <h1>Hello there!</h1>
334              <p>this is...</p>
335            </div>
336            <div>...content that spans the whole page.</div>
337            <br><br>
338            <h3>A Sample Data Table</h3>
339            <div class="table-responsive">
340              <table id="#datatable" class="table table-striped dataTable">
341                <thead>
342                  <tr>
343                    <th>Id</th>
344                    <th>Name</th>
345                    <th>Portal Roles</th>
346                    <th>Local Roles</th>
347                    <th></th>
348                  </tr>
349                </thead><tbody><tr><td>admin</td>
350                    <td>John</td>
351                    <td nowrap="nowrap">Portal Manager <br />
352                      Academics Officer (view only)
353                    </td>
354                    <td>Owner</td>
355                    <td class="text-right">
356                      <form method="post">
357                        <input type="hidden" name="userid" value="admin" />
358                        <input class="btn btn-primary btn-sm" type="submit"
359                               name="manage" value="Manage" />
360                        <input class="btn btn-default btn-sm" type="submit"
361                               name="delete" value="Remove" />
362                      </form>
363                    </td>
364                  </tr>
365                  <tr>
366                    <td>tester</td>
367                    <td>Vitali</td>
368                    <td nowrap="nowrap">Academics Officer (view only)</td>
369                    <td>Owner</td>
370                    <td class="text-right">
371                      <form method="post">
372                        <input type="hidden" name="userid" value="your_id" />
373                        <input class="btn btn-sm btn-primary" type="submit"
374                               name="manage" value="Manage" />
375                        <input class="btn btn-sm btn-default" type="submit"
376                               name="delete" value="Remove" />
377                      </form>
378                    </td>
379                  </tr>
380                </tbody>
381              </table>
382            </div>
383
384            <br><br>
385            <h3>A Sample Inline Form</h3>
386            <form method="POST" class="form-inline">
387            <br />
388              <div class="form-group">
389                <input class="btn btn-primary" type="submit" name="search"
390                  value="Find student(s)" />
391              </div>
392              <div class="form-group">
393                <select name="searchtype" class="form-control">
394                  <option value="student_id">with id</option>
395                  <option value="fullname">with name</option>
396                  <option value="reg_number">with registration number</option>
397                  <option value="matric_number">with matric number</option>
398                  <option value="current_session">in session</option>
399                  <option value="depcode">in department</option>
400                  <option value="current_mode">in study mode</option>
401                  <option value="suspended">
402                    with deactivated account (search term omitted)
403                  </option>
404                  <option value="transcript">
405                    who requested transcript (search term omitted)
406                  </option>
407                </select>
408              </div>
409              <div class="form-group">
410                <input type="text" class="form-control" name="searchterm" />
411              </div>
412            </form>
413
414            <br><br>
415            <h3>A Sample Display Form Table</h3>
416            <table class="form-table">
417              <tbody>
418                <tr>
419                  <td class="fieldname">Code:</td>
420                  <td>app2012</td>
421                </tr>
422                <tr>
423                 <td class="fieldname">Application Target:</td>
424                  <td>General Studies</td>
425                </tr>
426                 <tr>
427                  <td class="fieldname">
428                    Application Mode (Donec id elit non mi porta gravida.):
429                  </td>
430                  <td>Create Application Records</td>
431                </tr>
432              </tbody>
433            </table>
434
435            <br><br>
436            <h3>A Sample Edit/Manage Form Table</h3>
437            <table class="form-table">
438              <tbody>
439                <tr>
440                  <td class="fieldname">Code:</td>
441                  <td>app2012</td>
442                </tr>
443                <tr>
444                  <td class="fieldname">* Title:</td>
445                  <td>
446                    <input class="textType" id="form.title" name="form.title"
447                           size="20" type="text"
448                           value="General Studies 2012/2013" />
449                  </td>
450                </tr>
451                <tr>
452                  <td class="fieldname">Any phone number:</td>
453                  <td>
454                    <select id="form.phone.country" name="form.phone.country"
455                              size="1" class="phone-input">
456                      <option value="+234">Nigeria (+234)</option>
457                      <option value="+49">Germany (+49)</option>
458                      <option value="+1">U.S. (+1)</option>
459                    </select>-
460                    <input class=" phone-input textType" id="form.phone.area"
461                           name="form.phone.area" size="20" type="text"
462                           value="" />-
463                    <input class=" phone-input textType" id="form.phone.ext"
464                           name="form.phone.ext" size="20" type="text" value="" />
465                  </td>
466                </tr>
467                <tr>
468                  <td class="fieldname">Any text field:</td>
469                  <td>
470                      <textarea id="any_id"
471                          name="any_name" rows="5">Placeholder text</textarea>
472                  </td>
473                </tr>
474                <tr>
475                  <td class="fieldname">*
476                      Application Mode
477                      (A select field coming from zope.formlib):
478                  </td>
479                  <td>
480                    <div class="value">
481                      <select id="form.mode" name="form.mode" size="1">
482                        <option selected="selected" value="create">
483                          Create Application Records
484                        </option>
485                        <option value="update">Update Application Records
486                        </option>
487                      </select>
488                    </div>
489                    <input name="form.mode-empty-marker"
490                           type="hidden" value="1" />
491                  </td>
492                </tr>
493                <tr>
494                  <td class="fieldname">A datepicker field:</td>
495                  <td>
496                    <input class="datepicker-le-year textType"
497                                 id="form.any_date" name="form.any_date"
498                                 size="20" type="text" value="" />
499                  </td>
500                </tr>
501
502                <tr>
503                  <td class="fieldname">
504                      A select field in Kofa pagetemplates:
505                  </td>
506                  <td>
507                      <select id="any_id" name="any_name" size="1"
508                              class="form-control half">
509                        <option selected="selected" value="create">
510                            Create Application Records
511                        </option>
512                        <option value="update">
513                            Update Application Records
514                        </option>
515                      </select>
516                  </td>
517                </tr>
518              </tbody>
519            </table>
520          </div> <!-- /well kofa-content-->
521        </div> <!-- /kofa-content-wide -->
522      </div> <!-- /row -->
523      <div id="bottom" class="footer">
524        <p class="credit muted text-right">
525          Kofa - Student Management System<br />
526          Copyright &copy; WAeUP Group
527          <script type="text/javascript">
528          renderCurrentYear();
529          </script>
530        </p>
531      </div>
532    </div> <!-- /container -->
533
534    <script src="https://code.jquery.com/jquery-1.9.1.min.js"></script>
535    <script src="static/bootstrap/js/bootstrap.min.js"></script>
536    <script src="static/js/kofa-scroll.js"></script>
537    <script src="static/js/kofa-activate-tab.js"></script>
538    <script src="static/js/kofa-scrollto.js"></script>
539    <script src="static/js/file-upload.js"></script>
540    <script class="kofa-script-tooltip"
541        src="static/js/kofa-tooltip.js">
542    </script>
543    <script class="kofa-script-datatable"
544        src="static/js/jquery.dataTables.min.js">
545    </script>
546    <script class="kofa-script-datatable"
547        src="static/js/kofa-datatables.js">
548    </script>
549    <script class="jquery-ui"
550        src="static/js/jquery-ui.min.js">
551    </script>
552    <script class="kofa-script-datepicker"
553        src="static/js/kofa-datepicker.js">
554    </script>
555  </body>
556</html>
Note: See TracBrowser for help on using the repository browser.