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

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

Beautify student status box.

Remove Bootsrap 1 trash from pagetemplates.
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 &bull; quite long student status
151            </div> <!-- /wfstatus -->
152          </div> <!-- /well -->
153        </div> <!-- /kofa-student-status-box -->
154
155      </div> <!-- /row -->
156
157      <div class="row">
158        <div class="col-md-2 kofa-sidebar">
159          <div class="sidebar-nav well">
160            <div>
161              <div class="kofa-sidebar-title">Student Name</div>
162              <ul class="nav">
163                <li><a href="#">Base Data</a></li>
164                <li><a href="#">Clearance Data</a></li>
165                <li><a href="#">Personal Data</a></li>
166                <li><a href="#">Study Course</a></li>
167                <li><a href="#">Payments</a></li>
168                <li><a href="#">Accommodation</a></li>
169                <li><a href="#">History</a></li>
170              </ul>
171            </div>
172            <div>
173              <div class="kofa-sidebar-title">Manager Name</div>
174              <ul class="nav">
175                <li><a href="#">Portal Configuration</a></li>
176                <li><a href="#">Portal Users</a></li>
177                <li><a href="#">Data Center</a></li>
178                <li><a href="#">Reports</a></li>
179                <li><a href="#">Access Codes</a></li>
180                <li><a href="#">My Preferences</a></li>
181                <li><a href="#">My Roles</a></li>
182              </ul>
183            </div>
184          </div> <!-- /well -->
185        </div> <!-- /kofa-sidebar -->
186
187        <div class="col-md-10 content kofa-content-narrow">
188          <div class="well">
189            <div class="kofa-content">
190              <div class="actionbar">
191                <a class="btn btn-default" href="">
192                  <img src="static/img/actionicon_modify.png"
193                       alt="Manage" />
194                       Manage
195                </a>
196                <a class="btn btn-default" href="">
197                  <img src="static/img/actionicon_trigtrans.png"
198                       alt="Trigger transition" />
199                       Trigger transition
200                </a>
201              </div>
202              <div class="alert alert-danger">
203                  There were errors ...
204              </div>
205              <div class="alert alert-warning">
206                  Be careful ...
207              </div>
208              <div class="alert alert-success">
209                  You have successfully ...
210              </div>
211              <h1>WAeUP.Kofa Theme</h1>
212
213              <p class="kofa-content-desc">
214                A sample Diazo theme for WAeUP.Kofa
215                <br />
216                Fusce dapibus, tellus ac cursus commodo.
217              </p>
218              <p>
219                Donec id elit non mi porta gravida at eget metus. Fusce
220                dapibus, tellus ac cursus commodo, tortor mauris
221                condimentum nibh, ut fermentum massa justo sit amet
222                risus. Etiam porta sem malesuada magna mollis
223                euismod. Donec sed odio dui.
224              </p>
225              <img src="static/img/bg.png" />
226
227              <!-- Tabs... -->
228              <br /><br />
229              <h3>Sample Tabs</h3>
230              <ul id="tabs" class="tabs nav nav-tabs" data-tabs="tabs">
231                <li class="active">
232                  <a href="#tab-1" data-toggle="tab">Tab 1</a>
233                </li>
234                <li class="">
235                  <a href="#tab-2" data-toggle="tab">Tab 2</a>
236                </li>
237                <li class="">
238                  <a href="#tab-3" data-toggle="tab">Tab 3</a>
239                </li>
240              </ul>
241              <div class="tab-content">
242                <div id="tab-1" class="tab-pane active">
243                  <br />
244                  <p>
245                    Tab 1 content...<br />  Donec id elit non mi porta
246                    gravida at eget metus. Fusce dapibus, tellus ac
247                    cursus commodo.
248                  </p>
249                </div>
250                <div id="tab-2" class="tab-pane">
251                  <br />
252                  <p>
253                    Tab 2 content...<br />  Tortor mauris condimentum
254                    nibh, ut fermentum massa justo sit amet
255                    risus. Etiam porta sem malesuada.
256                  </p>
257                </div>
258                <div id="tab-3" class="tab-pane">
259                  <br />
260                  <p>
261                    Tab 3 content...<br /> Magna mollis euismod. Donec
262                    sed odio dui.
263                  </p>
264                </div>
265              </div><!-- /tab-content -->
266            </div> <!-- /kofa-content -->
267          </div> <!-- /well -->
268        </div> <!-- /kofa-content-narrow -->
269      </div> <!-- /row -->
270
271      <div class="row">
272        <div class="col-md-12 content kofa-content-wide">
273          <div class="well kofa-content">
274            <div class="actionbar">
275              <a class="btn btn-default" href="">
276                <img src="static/img/actionicon_modify.png"
277                     alt="Manage" />
278                     Manage
279              </a>
280              <a class="btn btn-default" href="">
281                <img src="static/img/actionicon_trigtrans.png"
282                     alt="Trigger transition" />
283                     Trigger transition
284              </a>
285            </div>
286            <div class="hero-unit">
287              <h1>Hello there!</h1>
288              <p>this is...</p>
289            </div>
290            <div>...content that spans the whole page.</div>
291            <br><br>
292            <div id="#sampleform">
293              <form method="post">
294                <fieldset id="form-fieldset">
295                  <legend>A Sample Form</legend>
296                  <div class="form-group variable-form">
297                    <label>Some Label</label>
298                    <input type="text" class="textType"
299                           name="myinput[]" placeholder="A name..." />
300                  </div>
301                  <button type="submit" class="btn rowadd btn-default">
302                    Add row
303                  </button>
304                  <br />
305                  <button type="submit" class="btn btn-primary">Save</button>
306                </fieldset>
307              </form>
308            </div> <!-- /sampleform -->
309            <br><br>
310            <h3>A Sample Data Table</h3>
311            <div class="table-responsive">
312              <table id="#dadatable" class="table table-striped dataTable">
313                <thead>
314                  <tr>
315                    <th>Id</th>
316                    <th>Name</th>
317                    <th>Portal Roles</th>
318                    <th>Local Roles</th>
319                    <th></th>
320                  </tr>
321                </thead><tbody><tr><td>admin</td>
322                    <td>John</td>
323                    <td nowrap="nowrap">Portal Manager <br />
324                      Academics Officer (view only)
325                    </td>
326                    <td>Owner</td>
327                    <td class="text-right">
328                      <form method="post">
329                        <input type="hidden" name="userid" value="admin" />
330                        <input class="btn btn-sm btn-primary" type="submit"
331                               name="manage" value="Manage" />
332                        <input class="btn btn-sm btn-default" type="submit"
333                               name="delete" value="Remove" />
334                      </form>
335                    </td>
336                  </tr>
337                  <tr>
338                    <td>tester</td>
339                    <td>Vitali</td>
340                    <td nowrap="nowrap">Academics Officer (view only)</td>
341                    <td>Owner</td>
342                    <td class="text-right">
343                      <form method="post">
344                        <input type="hidden" name="userid" value="your_id" />
345                        <input class="btn btn-sm btn-primary" type="submit"
346                               name="manage" value="Manage" />
347                        <input class="btn btn-sm btn-default" type="submit"
348                               name="delete" value="Remove" />
349                      </form>
350                    </td>
351                  </tr>
352                </tbody>
353              </table>
354            </div>
355
356            <br><br>
357            <h3>A Sample Inline Form</h3>
358            <form method="POST" class="form-inline">
359            <br />
360              <div class="form-group">
361                <input class="btn btn-primary" type="submit" name="search"
362                  value="Find student(s)" />
363              </div>
364              <div class="form-group">
365                <select name="searchtype" class="form-control">
366                  <option value="student_id">with id</option>
367                  <option value="fullname">with name</option>
368                  <option value="reg_number">with registration number</option>
369                  <option value="matric_number">with matric number</option>
370                  <option value="current_session">in session</option>
371                  <option value="depcode">in department</option>
372                  <option value="current_mode">in study mode</option>
373                  <option value="suspended">
374                    with deactivated account (search term omitted)
375                  </option>
376                  <option value="transcript">
377                    who requested transcript (search term omitted)
378                  </option>
379                </select>
380              </div>
381              <div class="form-group">
382                <input type="text" class="form-control" name="searchterm" />
383              </div>
384            </form>
385
386            <br><br>
387            <h3>A Sample Display Form Table</h3>
388            <table class="form-table">
389              <tbody>
390                <tr>
391                  <td class="fieldname">
392                    Code:
393                  </td>
394                  <td>
395                    app2012
396                  </td>
397                </tr>
398                <tr>
399                  <td class="fieldname">
400                    Application Target:
401                  </td>
402                  <td>
403                    General Studies
404                  </td>
405                </tr>
406                <tr>
407                  <td class="fieldname">
408                    Year of Entrance:
409                  </td>
410                  <td>
411                    2012
412                  </td>
413                </tr>
414                <tr>
415                  <td class="fieldname">
416                    Application Mode (Donec id elit non mi porta gravida.):
417                  </td>
418                  <td>
419                    Create Application Records
420                  </td>
421                </tr>
422              </tbody>
423            </table>
424
425            <br><br>
426            <h3>A Sample Edit/Manage Form Table</h3>
427            <table class="form-table">
428              <tbody>
429                <tr>
430                  <td class="fieldname">
431                    <span>Code</span>:
432                  </td>
433                  <td>
434                    <span>app2012</span>
435                  </td>
436                </tr>
437                <tr>
438                  <td class="fieldname">
439                    <span>*</span>
440                    <span>Title</span>:
441                  </td>
442                  <td>
443                    <input class="textType" id="form.title" name="form.title"
444                           size="20" type="text"
445                           value="General Studies 2012/2013" />
446                  </td>
447                </tr>
448                <tr>
449                  <td class="fieldname">
450                    <span>Application Target</span>:
451                  </td>
452                  <td>
453                    <span>General Studies</span>
454                  </td>
455                </tr>
456                <tr>
457                  <td class="fieldname">
458                    <span>Year of Entrance</span>:
459                  </td>
460                  <td>
461                    <span>2012</span>
462                  </td>
463                </tr>
464                <tr>
465                  <td class="fieldname">
466                    <span>*</span>
467                    <span>
468                      Application Mode
469                      (A select field coming from zope.formlib:)
470                    </span>:
471                  </td>
472                  <td>
473                    <div class="value">
474                      <select id="form.mode" name="form.mode" size="1">
475                        <option selected="selected" value="create">
476                          Create Application Records
477                        </option>
478                        <option value="update">Update Application Records
479                        </option>
480                      </select>
481                    </div>
482                    <input name="form.mode-empty-marker"
483                           type="hidden" value="1" />
484                  </td>
485                </tr>
486                <tr>
487                  <td class="fieldname">
488                      <span>A datepicker field</span>:
489                  </td>
490                  <td>
491                    <input class="datepicker-le-year textType"
492                                 id="form.any_date" name="form.any_date"
493                                 size="20" type="text" value="" />
494                  </td>
495                </tr>
496
497                <tr>
498                  <td class="fieldname">
499                      A select field in Kofa pagetemplates:
500                  </td>
501                  <td>
502                      <select id="any_id" name="any_name" size="1"
503                              class="form-control half">
504                        <option selected="selected" value="create">
505                            Create Application Records
506                        </option>
507                        <option value="update">
508                            Update Application Records
509                        </option>
510                      </select>
511                  </td>
512                </tr>
513              </tbody>
514            </table>
515          </div> <!-- /well kofa-content-->
516        </div> <!-- /kofa-content-wide -->
517      </div> <!-- /row -->
518      <div class="footer">
519        <p class="credit muted text-right">
520          Kofa - Student Management System<br />
521          Copyright &copy; WAeUP Group 2014
522        </p>
523      </div>
524    </div> <!-- /container -->
525
526    <script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
527    <script src="bootstrap/js/bootstrap.min.js"></script>
528
529    <script type="text/javascript" class="kofa-script kofa-script-tooltip">
530      $(function () {
531        $("[data-toggle=tooltip]").tooltip();
532      });
533    </script>
534
535    <script type="text/javascript">
536      $("button.rowadd").click(function (evt) {
537         /* Do not submit the form really */
538         evt.preventDefault();
539         /* Add first .form-field after last .form-field... */
540         $(".variable-form:last").after($(".variable-form:first").clone().hide().fadeIn());
541      });
542    </script>
543
544    <script src="static/js/jquery.dataTables.min.js"></script>
545    <script src="static/js/kofa-datatables.js"></script>
546    <script src="static/js/jquery-ui.min.js"></script>
547    <script src="static/js/kofa-datepicker.js"></script>
548    <script src="static/js/kofa-toggleall.js"></script>
549
550  </body>
551</html>
Note: See TracBrowser for help on using the repository browser.