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

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

Use jquery-ui for datepicker (only!).

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