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

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

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