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

Last change on this file since 10995 was 10995, checked in by uli, 11 years ago

Use twbs 3.x tabs.

File size: 16.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="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/base.css" rel="stylesheet">
18
19    <!-- Le HTML5 shim, for IE6-8 support of HTML5 elements -->
20    <!--[if lt IE 9]>
21      <script src="http://html5shim.googlecode.com/svn/trunk/html5.js"></script>
22    <![endif]-->
23
24    <!-- icons -->
25    <link rel="shortcut icon" href="static/ico/favicon.ico">
26
27
28  </head>
29
30  <body id="kofa-body">
31
32    <div class="navbar navbar-inverse navbar-fixed-top" role="navigation">
33      <div class="navbar-header">
34        <button type="button" class="navbar-toggle" data-toggle="collapse"
35                  data-target="#kofa-primary-nav">
36          <span class="icon-bar"></span>
37          <span class="icon-bar"></span>
38          <span class="icon-bar"></span>
39        </button>
40        <a class="navbar-brand active kofa-brand-link" href="/">WAeUP.Kofa</a>
41      </div>
42      <div class="navbar-collapse collapse"
43           id="kofa-primary-nav">
44        <ul class="nav navbar-nav kofa-navbar-left">
45          <li class="active"><a href="#">Academics</a></li>
46          <li><a href="#about">Applicants</a></li>
47          <li><a href="#contact">Students</a></li>
48          <li><a href="#contact">Hostels</a></li>
49          <li class="dropdown kofa-langselect">
50            <a href="#" class="dropdown-toggle"
51               data-toggle="dropdown">Language <b class="caret"></b></a>
52            <ul class="dropdown-menu">
53              <li class="kofa-language"><a href="#">en</a></li>
54              <li class="kofa-language"><a href="#">fr</a></li>
55              <li class="kofa-language"><a href="#">de</a></li>
56              <li class="kofa-language"><a href="#">ha</a></li>
57              <li class="kofa-language"><a href="#">yo</a></li>
58              <li class="kofa-language"><a href="#">ig</a></li>
59            </ul>
60          </li>
61        </ul>
62
63        <ul class="nav navbar-nav navbar-right kofa-navbar-right">
64          <li class="nav"><a href="#">Contact</a></li>
65          <li class="nav"><a href="#">Logout</a></li>
66        </ul>
67      </div><!--/.nav-collapse -->
68    </div><!-- /.navbar -->
69
70    <div class="container">
71      <div class="row">
72        <div class="col-md-12 container kofa-breadcrumbs-box">
73          <div class="well">
74            <ol class="breadcrumb kofa-breadcrumbs">
75              <li class="kofa-breadcrumb">
76                <a href="#">
77                  Home
78                </a>
79              </li>
80              <li class="kofa-breadcrumb">
81                <a href="#">
82                  Subtopic
83                </a>
84              </li>
85              <span class="wfstatus">
86                Student Id: K12345678
87                  &nbsp;&nbsp;
88                  State: clearance requested
89              </span> <!-- /wfstatus -->
90            </ol><!-- /kofa-breadcrumbs -->
91          </div> <!-- /well -->
92        </div> <!-- /kofa-breadcrumbs-box -->
93      </div> <!-- /row -->
94
95      <div class="row">
96        <div class="col-md-2 kofa-sidebar">
97          <div class="sidebar-nav well">
98            <div>
99              <div class="kofa-sidebar-title">Student Name</div>
100              <ul class="nav">
101                <li><a href="#">Base Data</a></li>
102                <li><a href="#">Clearance Data</a></li>
103                <li><a href="#">Personal Data</a></li>
104                <li><a href="#">Study Course</a></li>
105                <li><a href="#">Payments</a></li>
106                <li><a href="#">Accommodation</a></li>
107                <li><a href="#">History</a></li>
108              </ul>
109            </div>
110            <div>
111              <div class="kofa-sidebar-title">Manager Name</div>
112              <ul class="nav">
113                <li><a href="#">Portal Configuration</a></li>
114                <li><a href="#">Portal Users</a></li>
115                <li><a href="#">Data Center</a></li>
116                <li><a href="#">Reports</a></li>
117                <li><a href="#">Access Codes</a></li>
118                <li><a href="#">My Preferences</a></li>
119                <li><a href="#">My Roles</a></li>
120              </ul>
121            </div>
122          </div> <!-- /well -->
123        </div> <!-- /kofa-sidebar -->
124
125        <div class="col-md-10 content kofa-content-narrow">
126          <div class="well">
127            <div class="kofa-content">
128              <div class="actionbar">
129                <a class="btn btn-default" href="">
130                  <img src="static/img/actionicon_modify.png"
131                       alt="Manage" />
132                       Manage
133                </a>
134                <a class="btn btn-default" href="">
135                  <img src="static/img/actionicon_trigtrans.png"
136                       alt="Trigger transition" />
137                       Trigger transition
138                </a>
139              </div>
140              <div class="alert alert-danger">
141                  There were errors ...
142              </div>
143              <div class="alert alert-warning">
144                  Be careful ...
145              </div>
146              <div class="alert alert-success">
147                  You have successfully ...
148              </div>
149              <h1>WAeUP.Kofa Theme</h1>
150
151              <p class="kofa-content-desc">
152                A sample Diazo theme for WAeUP.Kofa
153                <br />
154                Fusce dapibus, tellus ac cursus commodo.
155              </p>
156              <p>
157                Donec id elit non mi porta gravida at eget metus. Fusce
158                dapibus, tellus ac cursus commodo, tortor mauris
159                condimentum nibh, ut fermentum massa justo sit amet
160                risus. Etiam porta sem malesuada magna mollis
161                euismod. Donec sed odio dui.
162              </p>
163              <img src="static/img/bg.png" />
164
165              <!-- Tabs... -->
166              <br /><br />
167              <h3>Sample Tabs</h3>
168              <ul id="tabs" class="tabs nav nav-tabs" data-tabs="tabs">
169                <li class="active">
170                  <a href="#tab-1" data-toggle="tab">Tab 1</a>
171                </li>
172                <li class="">
173                  <a href="#tab-2" data-toggle="tab">Tab 2</a>
174                </li>
175                <li class="">
176                  <a href="#tab-3" data-toggle="tab">Tab 3</a>
177                </li>
178              </ul>
179              <div class="tab-content">
180                <div id="tab-1" class="tab-pane active">
181                  <br />
182                  <p>
183                    Tab 1 content...<br />  Donec id elit non mi porta
184                    gravida at eget metus. Fusce dapibus, tellus ac
185                    cursus commodo.
186                  </p>
187                </div>
188                <div id="tab-2" class="tab-pane">
189                  <br />
190                  <p>
191                    Tab 2 content...<br />  Tortor mauris condimentum
192                    nibh, ut fermentum massa justo sit amet
193                    risus. Etiam porta sem malesuada.
194                  </p>
195                </div>
196                <div id="tab-3" class="tab-pane">
197                  <br />
198                  <p>
199                    Tab 3 content...<br /> Magna mollis euismod. Donec
200                    sed odio dui.
201                  </p>
202                </div>
203              </div><!-- /tab-content -->
204
205              <script type="text/javascript"
206                      class="kofa-script kofa-script-tabs">
207                $('a[data-toggle="tab"]').on('shown.bs.tab', function (e) {
208                console.log('showing tab ' + e.target); // Active Tab
209                console.log('showing tab ' + e.relatedTarget); // Previous Tab
210                });
211              </script>
212
213            </div> <!-- /kofa-content -->
214          </div> <!-- /well -->
215        </div> <!-- /kofa-content-narrow -->
216      </div> <!-- /row -->
217
218      <div class="row">
219        <div class="col-md-12 content kofa-content-wide">
220          <div class="well kofa-content">
221            <div class="hero-unit">
222              <h1>Hello there!</h1>
223              <p>this is...</p>
224            </div>
225            <div>...content that spans the whole page.</div>
226            <br><br>
227            <div id="#sampleform">
228              <form method="post">
229                <fieldset id="form-fieldset">
230                  <legend>A Sample Form</legend>
231                  <div class="form-group variable-form">
232                    <label>Some Label</label>
233                    <input type="text" class="textType"
234                           name="myinput[]" placeholder="A name..." />
235                  </div>
236                  <button type="submit" class="btn rowadd btn-default">
237                    Add row
238                  </button>
239                  <br />
240                  <button type="submit" class="btn btn-primary">Save</button>
241                </fieldset>
242              </form>
243            </div> <!-- /sampleform -->
244            <br><br>
245            <h3>A Sample Data Table</h3>
246            <table id="#dadatable" class="table table-striped dataTable">
247              <thead>
248                <tr>
249                  <th>Id</th>
250                  <th>Name</th>
251                  <th>Portal Roles</th>
252                  <th>Local Roles</th>
253                  <th></th>
254                </tr>
255              </thead><tbody><tr><td>admin</td>
256                  <td>John</td>
257                  <td nowrap="nowrap">Portal Manager <br />Academics Officer (view only) </td>
258                  <td>Owner</td>
259                  <td class="text-right">
260                    <form method="post">
261                      <input type="hidden" name="userid" value="admin" />
262                      <input class="btn btn-sm btn-primary" type="submit" name="manage" value="Manage" />
263                      <input class="btn btn-sm btn-default" type="submit" name="delete" value="Remove" />
264                    </form>
265                  </td>
266                </tr>
267                <tr>
268                  <td>tester</td>
269                  <td>Vitali</td>
270                  <td nowrap="nowrap">Academics Officer (view only)</td>
271                  <td>Owner</td>
272                  <td class="text-right">
273                    <form method="post">
274                      <input type="hidden" name="userid" value="your_id" />
275                      <input class="btn btn-sm btn-primary" type="submit" name="manage" value="Manage" />
276                      <input class="btn btn-sm btn-default" type="submit" name="delete" value="Remove" />
277                    </form>
278                  </td>
279                </tr>
280              </tbody>
281            </table>
282
283            <br><br>
284            <h3>A Sample Inline Form</h3>
285            <form method="POST" class="form-inline">
286            <br />
287              <div class="form-group">
288                <input class="btn btn-primary" type="submit" name="search"
289                  value="Find student(s)" />
290              </div>
291              <div class="form-group">
292                <select name="searchtype">
293                  <option value="student_id">with id</option>
294                  <option value="fullname">with name</option>
295                  <option value="reg_number">with registration number</option>
296                  <option value="matric_number">with matriculation number</option>
297                  <option value="current_session">in session</option>
298                  <option value="depcode">in department</option>
299                  <option value="current_mode">in study mode</option>
300                  <option value="suspended">
301                    with deactivated account (search term omitted)
302                  </option>
303                  <option value="transcript">
304                    who requested transcript (search term omitted)
305                  </option>
306                </select>
307              </div>
308              <div class="form-group">
309                <input type="text" class="form-control" name="searchterm" />
310              </div>
311            </form>
312
313            <br><br>
314            <h3>A Sample Display Form Table</h3>
315            <table class="form-table">
316              <tbody>
317                <tr>
318                  <td class="fieldname">
319                    Code:
320                  </td>
321                  <td>
322                    app2012
323                  </td>
324                </tr>
325                <tr>
326                  <td class="fieldname">
327                    Application Target:
328                  </td>
329                  <td>
330                    General Studies
331                  </td>
332                </tr>
333                <tr>
334                  <td class="fieldname">
335                    Year of Entrance:
336                  </td>
337                  <td>
338                    2012
339                  </td>
340                </tr>
341                <tr>
342                  <td class="fieldname">
343                    Application Mode:
344                  </td>
345                  <td>
346                    Create Application Records
347                  </td>
348                </tr>
349              </tbody>
350            </table>
351
352            <br><br>
353            <h3>A Sample Edit/Manage Form Table</h3>
354            <table class="form-table">
355              <tbody>
356                <tr>
357                  <td class="fieldname">
358                    <span>Code</span>:
359                  </td>
360                  <td>
361                    <span>app2012</span>
362                  </td>
363                </tr>
364                <tr>
365                  <td class="fieldname">
366                    <span>*</span>
367                    <span>Title</span>:
368                  </td>
369                  <td>
370                    <input class="textType" id="form.title" name="form.title"
371                           size="20" type="text" value="General Studies 2012/2013" />
372                  </td>
373                </tr>
374                <tr>
375                  <td class="fieldname">
376                    <span>Application Target</span>:
377                  </td>
378                  <td>
379                    <span>General Studies</span>
380                  </td>
381                </tr>
382                <tr>
383                  <td class="fieldname">
384                    <span>Year of Entrance</span>:
385                  </td>
386                  <td>
387                    <span>2012</span>
388                  </td>
389                </tr>
390                <tr>
391                  <td class="fieldname">
392                    <span>*</span>
393                    <span>Application Mode</span>:
394                  </td>
395                  <td>
396                    <div class="value">
397                    <select id="form.mode" name="form.mode" size="1"><option selected="selected" value="create">Create Application Records</option><option value="update">Update Application Records</option></select></div>
398                    <input name="form.mode-empty-marker" type="hidden" value="1" />
399                  </td>
400                </tr>
401              </tbody>
402            </table>
403
404          </div> <!-- /well kofa-content-->
405        </div> <!-- /kofa-content-wide -->
406      </div> <!-- /row -->
407
408      <div class="footer">
409        <p class="credit muted text-right">
410          Kofa - Student Management System<br />
411          Copyright &copy; WAeUP Group 2014
412        </p>
413      </div>
414
415    </div> <!-- /container -->
416
417    <script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
418    <script src="bootstrap/js/bootstrap.min.js"></script>
419
420    <script type="text/javascript" class="kofa-script kofa-script-tooltip">
421      $(function () {
422        $("[data-toggle=tooltip]").tooltip();
423      });
424    </script>
425
426    <script type="text/javascript">
427      $("button.rowadd").click(function (evt) {
428         /* Do not submit the form really */
429         evt.preventDefault();
430         /* Add first .form-field after last .form-field... */
431         $(".variable-form:last").after($(".variable-form:first").clone().hide().fadeIn());
432      });
433    </script>
434
435    <script src="static/js/jquery.dataTables.min.js"></script>
436
437    <script type="text/javascript">
438      $(document).ready(function(){
439        $('.dataTable').dataTable();
440
441        $('.dataTableFiles').dataTable( {
442                "aaSorting": [[ 2, "desc" ]],
443        } );
444
445        $('.dataTableManage').dataTable( {
446                "aaSorting": [[ 1, "asc" ]],
447                "aoColumnDefs":[{ "bSortable": false, "aTargets": [ 0 ] }]
448        } );
449
450        $('.dataTableManageFiles').dataTable( {
451                "aaSorting": [[ 3, "desc" ]],
452                "aoColumnDefs":[{ "bSortable": false, "aTargets": [ 0 ] }]
453        } );
454
455        //* activate current tab, if any... */
456        $('a[href="' + window.location.hash + '"]').trigger('click');
457      });
458    </script>
459
460  </body>
461</html>
Note: See TracBrowser for help on using the repository browser.