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

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

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