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

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

Further adjustments of forms, tables and buttons in browser module.
File size: 16.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/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            </div> <!-- /kofa-content -->
206          </div> <!-- /well -->
207        </div> <!-- /kofa-content-narrow -->
208      </div> <!-- /row -->
209
210      <div class="row">
211        <div class="col-md-12 content kofa-content-wide">
212          <div class="well kofa-content">
213            <div class="actionbar">
214              <a class="btn btn-default" href="">
215                <img src="static/img/actionicon_modify.png"
216                     alt="Manage" />
217                     Manage
218              </a>
219              <a class="btn btn-default" href="">
220                <img src="static/img/actionicon_trigtrans.png"
221                     alt="Trigger transition" />
222                     Trigger transition
223              </a>
224            </div>
225            <div class="hero-unit">
226              <h1>Hello there!</h1>
227              <p>this is...</p>
228            </div>
229            <div>...content that spans the whole page.</div>
230            <br><br>
231            <div id="#sampleform">
232              <form method="post">
233                <fieldset id="form-fieldset">
234                  <legend>A Sample Form</legend>
235                  <div class="form-group variable-form">
236                    <label>Some Label</label>
237                    <input type="text" class="textType"
238                           name="myinput[]" placeholder="A name..." />
239                  </div>
240                  <button type="submit" class="btn rowadd btn-default">
241                    Add row
242                  </button>
243                  <br />
244                  <button type="submit" class="btn btn-primary">Save</button>
245                </fieldset>
246              </form>
247            </div> <!-- /sampleform -->
248            <br><br>
249            <h3>A Sample Data Table</h3>
250            <table id="#dadatable" class="table table-striped dataTable">
251              <thead>
252                <tr>
253                  <th>Id</th>
254                  <th>Name</th>
255                  <th>Portal Roles</th>
256                  <th>Local Roles</th>
257                  <th></th>
258                </tr>
259              </thead><tbody><tr><td>admin</td>
260                  <td>John</td>
261                  <td nowrap="nowrap">Portal Manager <br />Academics Officer (view only) </td>
262                  <td>Owner</td>
263                  <td class="text-right">
264                    <form method="post">
265                      <input type="hidden" name="userid" value="admin" />
266                      <input class="btn btn-sm btn-primary" type="submit" name="manage" value="Manage" />
267                      <input class="btn btn-sm btn-default" type="submit" name="delete" value="Remove" />
268                    </form>
269                  </td>
270                </tr>
271                <tr>
272                  <td>tester</td>
273                  <td>Vitali</td>
274                  <td nowrap="nowrap">Academics Officer (view only)</td>
275                  <td>Owner</td>
276                  <td class="text-right">
277                    <form method="post">
278                      <input type="hidden" name="userid" value="your_id" />
279                      <input class="btn btn-sm btn-primary" type="submit" name="manage" value="Manage" />
280                      <input class="btn btn-sm btn-default" type="submit" name="delete" value="Remove" />
281                    </form>
282                  </td>
283                </tr>
284              </tbody>
285            </table>
286
287            <br><br>
288            <h3>A Sample Inline Form</h3>
289            <form method="POST" class="form-inline">
290            <br />
291              <div class="form-group">
292                <input class="btn btn-primary" type="submit" name="search"
293                  value="Find student(s)" />
294              </div>
295              <div class="form-group">
296                <select name="searchtype">
297                  <option value="student_id">with id</option>
298                  <option value="fullname">with name</option>
299                  <option value="reg_number">with registration number</option>
300                  <option value="matric_number">with matriculation number</option>
301                  <option value="current_session">in session</option>
302                  <option value="depcode">in department</option>
303                  <option value="current_mode">in study mode</option>
304                  <option value="suspended">
305                    with deactivated account (search term omitted)
306                  </option>
307                  <option value="transcript">
308                    who requested transcript (search term omitted)
309                  </option>
310                </select>
311              </div>
312              <div class="form-group">
313                <input type="text" class="form-control" name="searchterm" />
314              </div>
315            </form>
316
317            <br><br>
318            <h3>A Sample Display Form Table</h3>
319            <table class="form-table">
320              <tbody>
321                <tr>
322                  <td class="fieldname">
323                    Code:
324                  </td>
325                  <td>
326                    app2012
327                  </td>
328                </tr>
329                <tr>
330                  <td class="fieldname">
331                    Application Target:
332                  </td>
333                  <td>
334                    General Studies
335                  </td>
336                </tr>
337                <tr>
338                  <td class="fieldname">
339                    Year of Entrance:
340                  </td>
341                  <td>
342                    2012
343                  </td>
344                </tr>
345                <tr>
346                  <td class="fieldname">
347                    Application Mode (Donec id elit non mi porta gravida at eget metus.):
348                  </td>
349                  <td>
350                    Create Application Records
351                  </td>
352                </tr>
353              </tbody>
354            </table>
355
356            <br><br>
357            <h3>A Sample Edit/Manage Form Table</h3>
358            <table class="form-table">
359              <tbody>
360                <tr>
361                  <td class="fieldname">
362                    <span>Code</span>:
363                  </td>
364                  <td>
365                    <span>app2012</span>
366                  </td>
367                </tr>
368                <tr>
369                  <td class="fieldname">
370                    <span>*</span>
371                    <span>Title</span>:
372                  </td>
373                  <td>
374                    <input class="textType" id="form.title" name="form.title"
375                           size="20" type="text" value="General Studies 2012/2013" />
376                  </td>
377                </tr>
378                <tr>
379                  <td class="fieldname">
380                    <span>Application Target</span>:
381                  </td>
382                  <td>
383                    <span>General Studies</span>
384                  </td>
385                </tr>
386                <tr>
387                  <td class="fieldname">
388                    <span>Year of Entrance</span>:
389                  </td>
390                  <td>
391                    <span>2012</span>
392                  </td>
393                </tr>
394                <tr>
395                  <td class="fieldname">
396                    <span>*</span>
397                    <span>Application Mode (Donec id elit non mi porta gravida at eget metus.)</span>:
398                  </td>
399                  <td>
400                    <div class="value">
401                    <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>
402                    <input name="form.mode-empty-marker" type="hidden" value="1" />
403                  </td>
404                </tr>
405              </tbody>
406            </table>
407
408          </div> <!-- /well kofa-content-->
409        </div> <!-- /kofa-content-wide -->
410      </div> <!-- /row -->
411
412      <div class="footer">
413        <p class="credit muted text-right">
414          Kofa - Student Management System<br />
415          Copyright &copy; WAeUP Group 2014
416        </p>
417      </div>
418
419    </div> <!-- /container -->
420
421    <script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
422    <script src="bootstrap/js/bootstrap.min.js"></script>
423
424    <script type="text/javascript" class="kofa-script kofa-script-tooltip">
425      $(function () {
426        $("[data-toggle=tooltip]").tooltip();
427      });
428    </script>
429
430    <script type="text/javascript">
431      $("button.rowadd").click(function (evt) {
432         /* Do not submit the form really */
433         evt.preventDefault();
434         /* Add first .form-field after last .form-field... */
435         $(".variable-form:last").after($(".variable-form:first").clone().hide().fadeIn());
436      });
437    </script>
438
439    <script src="static/js/jquery.dataTables.min.js"></script>
440
441    <script type="text/javascript">
442      $(document).ready(function(){
443        $('.dataTable').dataTable();
444
445        $('.dataTableFiles').dataTable( {
446                "aaSorting": [[ 2, "desc" ]],
447        } );
448
449        $('.dataTableManage').dataTable( {
450                "aaSorting": [[ 1, "asc" ]],
451                "aoColumnDefs":[{ "bSortable": false, "aTargets": [ 0 ] }]
452        } );
453
454        $('.dataTableManageFiles').dataTable( {
455                "aaSorting": [[ 3, "desc" ]],
456                "aoColumnDefs":[{ "bSortable": false, "aTargets": [ 0 ] }]
457        } );
458
459        //* activate current tab, if any... */
460        $('a[href="' + window.location.hash + '"]').trigger('click');
461      });
462    </script>
463
464  </body>
465</html>
Note: See TracBrowser for help on using the repository browser.