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

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

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