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

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

Adjust kofa content label and description.
File size: 14.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
16    <link href="static/css/jquery.dataTables.css"
17          rel="stylesheet">
18
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        <div class="col-md-10 content kofa-content-narrow">
127          <div class="well">
128            <div class="kofa-content">
129              <div class="actionbar">
130                <a class="btn btn-default" href="">
131                  <img src="static/img/actionicon_modify.png"
132                       alt="Manage" />
133                       Manage
134                </a>
135                <a class="btn btn-default" href="">
136                  <img src="static/img/actionicon_trigtrans.png"
137                       alt="Trigger transition" />
138                       Trigger transition
139                </a>
140              </div>
141              <div class="alert alert-danger">
142                  There were errors ...
143              </div>
144              <div class="alert alert-warning">
145                  Be careful ...
146              </div>
147              <div class="alert alert-success">
148                  You have successfully ...
149              </div>
150              <h1>WAeUP.Kofa Theme</h1>
151              <p class="kofa-content-desc">A sample Diazo theme for WAeUP.Kofa
152              <br>
153              Fusce dapibus, tellus ac cursus commodo.
154              </p>
155              <p>
156                Donec id elit non mi porta gravida at eget metus. Fusce
157                dapibus, tellus ac cursus commodo, tortor mauris
158                condimentum nibh, ut fermentum massa justo sit amet
159                risus. Etiam porta sem malesuada magna mollis
160                euismod. Donec sed odio dui.
161              </p>
162              <img src="static/img/bg.png" />
163            </div> <!-- /kofa-content -->
164          </div> <!-- /well -->
165        </div> <!-- /kofa-content-narrow -->
166      </div> <!-- /row -->
167
168      <div class="row">
169        <div class="col-md-12 content kofa-content-wide">
170          <div class="well kofa-content">
171            <div class="hero-unit">
172              <h1>Hello there!</h1>
173              <p>this is...</p>
174            </div>
175            <div>...content that spans the whole page.</div>
176            <br><br>
177            <div id="#sampleform">
178              <form method="post">
179                <fieldset id="form-fieldset">
180                  <legend>A Sample Form</legend>
181                  <div class="form-group variable-form">
182                    <label>Some Label</label>
183                    <input type="text" class="textType"
184                           name="myinput[]" placeholder="A name..." />
185                  </div>
186                  <button type="submit" class="btn rowadd btn-default">
187                    Add row
188                  </button>
189                  <br />
190                  <button type="submit" class="btn btn-primary">Save</button>
191                </fieldset>
192              </form>
193            </div> <!-- /sampleform -->
194            <br><br>
195            <h3>A Sample Data Table</h3>
196            <table id="#dadatable" class="table table-striped dataTable">
197              <thead>
198                <tr>
199                  <th>Id</th>
200                  <th>Name</th>
201                  <th>Portal Roles</th>
202                  <th>Local Roles</th>
203                  <th></th>
204                </tr>
205              </thead><tbody><tr><td>admin</td>
206                  <td>John</td>
207                  <td nowrap="nowrap">Portal Manager <br />Academics Officer (view only) </td>
208                  <td>Owner</td>
209                  <td class="text-right">
210                    <form method="post">
211                      <input type="hidden" name="userid" value="admin" />
212                      <input class="btn btn-sm btn-primary" type="submit" name="manage" value="Manage" />
213                      <input class="btn btn-sm btn-default" type="submit" name="delete" value="Remove" />
214                    </form>
215                  </td>
216                </tr>
217                <tr>
218                  <td>tester</td>
219                  <td>Vitali</td>
220                  <td nowrap="nowrap">Academics Officer (view only)</td>
221                  <td>Owner</td>
222                  <td class="text-right">
223                    <form method="post">
224                      <input type="hidden" name="userid" value="your_id" />
225                      <input class="btn btn-sm btn-primary" type="submit" name="manage" value="Manage" />
226                      <input class="btn btn-sm btn-default" type="submit" name="delete" value="Remove" />
227                    </form>
228                  </td>
229                </tr>
230              </tbody>
231            </table>
232
233            <br><br>
234            <h3>A Sample Inline Form</h3>
235            <form method="POST" class="form-inline">
236            <br />
237              <div class="form-group">
238                <input class="btn btn-primary" type="submit" name="search"
239                  value="Find student(s)" />
240              </div>
241              <div class="form-group">
242                <select name="searchtype">
243                  <option value="student_id">with id</option>
244                  <option value="fullname">with name</option>
245                  <option value="reg_number">with registration number</option>
246                  <option value="matric_number">with matriculation number</option>
247                  <option value="current_session">in session</option>
248                  <option value="depcode">in department</option>
249                  <option value="current_mode">in study mode</option>
250                  <option value="suspended">
251                    with deactivated account (search term omitted)
252                  </option>
253                  <option value="transcript">
254                    who requested transcript (search term omitted)
255                  </option>
256                </select>
257              </div>
258              <div class="form-group">
259                <input type="text" class="form-control" name="searchterm" />
260              </div>
261            </form>
262
263            <br><br>
264            <h3>A Sample Display Form Table</h3>
265            <table class="form-table">
266              <tbody>
267                <tr>
268                  <td class="fieldname">
269                    Code:
270                  </td>
271                  <td>
272                    app2012
273                  </td>
274                </tr>
275                <tr>
276                  <td class="fieldname">
277                    Application Target:
278                  </td>
279                  <td>
280                    General Studies
281                  </td>
282                </tr>
283                <tr>
284                  <td class="fieldname">
285                    Year of Entrance:
286                  </td>
287                  <td>
288                    2012
289                  </td>
290                </tr>
291                <tr>
292                  <td class="fieldname">
293                    Application Mode:
294                  </td>
295                  <td>
296                    Create Application Records
297                  </td>
298                </tr>
299              </tbody>
300            </table>
301
302            <br><br>
303            <h3>A Sample Edit/Manage Form Table</h3>
304            <table class="form-table">
305              <tbody>
306                <tr>
307                  <td class="fieldname">
308                    <span>Code</span>:
309                  </td>
310                  <td>
311                    <span>app2012</span>
312                  </td>
313                </tr>
314                <tr>
315                  <td class="fieldname">
316                    <span>*</span>
317                    <span>Title</span>:
318                  </td>
319                  <td>
320                    <input class="textType" id="form.title" name="form.title"
321                           size="20" type="text" value="General Studies 2012/2013" />
322                  </td>
323                </tr>
324                <tr>
325                  <td class="fieldname">
326                    <span>Application Target</span>:
327                  </td>
328                  <td>
329                    <span>General Studies</span>
330                  </td>
331                </tr>
332                <tr>
333                  <td class="fieldname">
334                    <span>Year of Entrance</span>:
335                  </td>
336                  <td>
337                    <span>2012</span>
338                  </td>
339                </tr>
340                <tr>
341                  <td class="fieldname">
342                    <span>*</span>
343                    <span>Application Mode</span>:
344                  </td>
345                  <td>
346                    <div class="value">
347                    <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>
348                    <input name="form.mode-empty-marker" type="hidden" value="1" />
349                  </td>
350                </tr>
351              </tbody>
352            </table>
353
354          </div> <!-- /well kofa-content-->
355        </div> <!-- /kofa-content-wide -->
356      </div> <!-- /row -->
357
358      <div class="footer">
359        <p class="credit muted text-right">
360          Kofa - Student Management System<br />
361          Copyright &copy; WAeUP Group 2014
362        </p>
363      </div>
364
365    </div> <!-- /container -->
366
367    <script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
368    <script src="bootstrap/js/bootstrap.min.js"></script>
369
370    <script type="text/javascript" class="kofa-script kofa-script-tooltip">
371      $(function () {
372        $("[data-toggle=tooltip]").tooltip();
373      });
374    </script>
375
376    <script type="text/javascript">
377      $("button.rowadd").click(function (evt) {
378         /* Do not submit the form really */
379         evt.preventDefault();
380         /* Add first .form-field after last .form-field... */
381         $(".variable-form:last").after($(".variable-form:first").clone().hide().fadeIn());
382      });
383    </script>
384
385    <script src="static/js/jquery.dataTables.min.js"></script>
386
387    <script type="text/javascript">
388      $(document).ready(function(){
389        $('.dataTable').dataTable();
390
391        $('.dataTableFiles').dataTable( {
392                "aaSorting": [[ 2, "desc" ]],
393        } );
394
395        $('.dataTableManage').dataTable( {
396                "aaSorting": [[ 1, "asc" ]],
397                "aoColumnDefs":[{ "bSortable": false, "aTargets": [ 0 ] }]
398        } );
399
400        $('.dataTableManageFiles').dataTable( {
401                "aaSorting": [[ 3, "desc" ]],
402                "aoColumnDefs":[{ "bSortable": false, "aTargets": [ 0 ] }]
403        } );
404      });
405    </script>
406
407  </body>
408</html>
Note: See TracBrowser for help on using the repository browser.