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

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

Use special styles for IE8.
File size: 19.9 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    <!-- HTML5 shim and Respond.js IE8 support of HTML5 elements and media queries -->
22    <!--[if lt IE 9]>
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>
25      <link href="static/css/IE8.css" rel="stylesheet">
26    <![endif]-->
27
28    <script src="static/js/kofa-recaptcha_white.js"></script>
29
30    <!-- icons -->
31    <link rel="shortcut icon" href="static/ico/favicon.ico">
32
33
34  </head>
35
36  <body id="kofa-body">
37
38    <div class="navbar navbar-inverse navbar-fixed-top" role="navigation">
39      <div class="navbar-header">
40        <button type="button" class="navbar-toggle" data-toggle="collapse"
41                  data-target="#kofa-primary-nav">
42          <span class="icon-bar"></span>
43          <span class="icon-bar"></span>
44          <span class="icon-bar"></span>
45        </button>
46        <a class="navbar-brand active kofa-brand-link" href="/">WAeUP.Kofa</a>
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>
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>
66        </ul>
67
68        <ul class="nav navbar-nav navbar-right kofa-navbar-right">
69          <li><a href="#">Contact</a></li>
70          <li><a href="#">Logout</a></li>
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        </ul>
85      </div><!--/.nav-collapse -->
86    </div><!-- /.navbar -->
87
88    <div class="container">
89
90      <div class="row">
91        <div class="col-md-12 container kofa-breadcrumbs-box-long">
92          <div class="well">
93            <ol class="breadcrumb kofa-breadcrumbs">
94              <li>
95                <a href="#">
96                  Home
97                </a>
98              </li>
99              <li>
100                <a href="#">
101                  Subtopic 1
102                </a>
103              </li>
104              <li>
105                <a href="#">
106                  Subtopic 2
107                </a>
108              </li>
109              <li>
110                <a href="#">
111                  Subtopic 3
112                </a>
113              </li>
114            </ol><!-- /kofa-breadcrumbs -->
115          </div> <!-- /well -->
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
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              </div><!-- /tab-content -->
268            </div> <!-- /kofa-content -->
269          </div> <!-- /well -->
270        </div> <!-- /kofa-content-narrow -->
271      </div> <!-- /row -->
272
273      <div class="row">
274        <div class="col-md-12 content kofa-content-wide">
275          <div class="well kofa-content">
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>
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>
293            <br><br>
294            <div id="#sampleform">
295              <form method="post">
296                <fieldset id="form-fieldset">
297                  <legend>A Sample Form</legend>
298                  <div class="form-group variable-form">
299                    <label>Some Label</label>
300                    <input type="text" class="textType"
301                           name="myinput[]" placeholder="A name..." />
302                  </div>
303                  <button type="submit" class="btn rowadd btn-default">
304                    Add row
305                  </button>
306                  <br />
307                  <button type="submit" class="btn btn-primary">Save</button>
308                </fieldset>
309              </form>
310            </div> <!-- /sampleform -->
311            <br><br>
312            <h3>A Sample Data Table</h3>
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>
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">
367                <select name="searchtype" class="form-control">
368                  <option value="student_id">with id</option>
369                  <option value="fullname">with name</option>
370                  <option value="reg_number">with registration number</option>
371                  <option value="matric_number">with matric number</option>
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
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">
418                    Application Mode (Donec id elit non mi porta gravida.):
419                  </td>
420                  <td>
421                    Create Application Records
422                  </td>
423                </tr>
424              </tbody>
425            </table>
426
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"
446                           size="20" type="text"
447                           value="General Studies 2012/2013" />
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>
469                    <span>
470                      Application Mode
471                      (A select field coming from zope.formlib:)
472                    </span>:
473                  </td>
474                  <td>
475                    <div class="value">
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" />
486                  </td>
487                </tr>
488                <tr>
489                  <td class="fieldname">
490                      <span>A datepicker field</span>:
491                  </td>
492                  <td>
493                    <input class="datepicker-le-year textType"
494                                 id="form.any_date" name="form.any_date"
495                                 size="20" type="text" value="" />
496                  </td>
497                </tr>
498
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>
515              </tbody>
516            </table>
517          </div> <!-- /well kofa-content-->
518        </div> <!-- /kofa-content-wide -->
519      </div> <!-- /row -->
520      <div class="footer">
521        <p class="credit muted text-right">
522          Kofa - Student Management System<br />
523          Copyright &copy; WAeUP Group 2014
524        </p>
525      </div>
526    </div> <!-- /container -->
527
528    <script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
529    <script src="bootstrap/js/bootstrap.min.js"></script>
530
531    <script type="text/javascript" class="kofa-script kofa-script-tooltip">
532      $(function () {
533        $("[data-toggle=tooltip]").tooltip();
534      });
535    </script>
536
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... */
542         $(".variable-form:last").after($(".variable-form:first").clone().hide().fadeIn());
543      });
544    </script>
545
546    <script src="static/js/jquery.dataTables.min.js"></script>
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>
550    <script src="static/js/kofa-toggleall.js"></script>
551
552  </body>
553</html>
Note: See TracBrowser for help on using the repository browser.