source: main/kofacustom.sampleuni/trunk/layout/theme.html @ 14395

Last change on this file since 14395 was 13827, checked in by Henrik Bettermann, 9 years ago

Pin waeup.kofa version 1.4.1 and adjust to changes made in base package.

File size: 22.3 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="static/bootstrap/css/bootstrap.min.css"
12          rel="stylesheet">
13    <link href="static/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    <link href="static/css/custom.css" rel="stylesheet">
21    <link href="static/css/file-upload.css" rel="stylesheet">
22
23    <!-- HTML5 shim and Respond.js IE8 support of HTML5 elements and media queries -->
24    <!--[if lt IE 9]>
25      <script src="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script>
26      <script src="https://oss.maxcdn.com/libs/respond.js/1.4.2/respond.min.js"></script>
27      <link href="static/css/IE8.css" rel="stylesheet">
28    <![endif]-->
29
30    <script src="static/js/kofa-functions.js"></script>
31
32    <!-- icons -->
33    <link rel="shortcut icon" href="static/ico/favicon.ico">
34
35
36  </head>
37
38  <body id="kofa-body">
39
40    <div class="navbar navbar-inverse navbar-fixed-top" role="navigation">
41      <div class="navbar-header">
42        <button type="button" class="navbar-toggle" data-toggle="collapse"
43                  data-target="#kofa-primary-nav">
44          <span class="icon-bar"></span>
45          <span class="icon-bar"></span>
46          <span class="icon-bar"></span>
47        </button>
48        <a class="navbar-brand active kofa-brand-link" href="/">WAeUP.Kofa</a>
49      </div>
50      <div class="navbar-collapse collapse"
51           id="kofa-primary-nav">
52        <ul class="nav navbar-nav kofa-navbar-left">
53          <li class="active"><a href="#">Academics</a></li>
54          <li><a href="#about">Applicants</a></li>
55          <li><a href="#contact">Students</a></li>
56          <li><a href="#contact">Hostels</a></li>
57          <li class="dropdown">
58            <a href="#" class="dropdown-toggle"
59               data-toggle="dropdown">My Data
60               <b class="caret"></b>
61            <ul class="dropdown-menu">
62              <li><a href="#">Base Data</a></li>
63              <li><a href="#">Clearance Data</a></li>
64              <li><a href="#">Personal Data</a></li>
65              <li><a href="#">History</a></li>
66            </ul>
67          </li>
68        </ul>
69
70        <ul class="nav navbar-nav navbar-right kofa-navbar-right">
71          <li class="dropdown kofa-langselect">
72            <a href="#" class="dropdown-toggle"
73               data-toggle="dropdown">
74               <img src="static/img/earth.png" />
75            <ul class="dropdown-menu">
76              <li class="kofa-language"><a href="#">English</a></li>
77              <li class="kofa-language"><a href="#">Français</a></li>
78              <li class="kofa-language"><a href="#">Deutsch</a></li>
79              <li class="kofa-language"><a href="#">Hausa</a></li>
80              <li class="kofa-language"><a href="#">Yoruba</a></li>
81              <li class="kofa-language"><a href="#">Igbo</a></li>
82            </ul>
83          </li>
84          <li><a href="#">Contact</a></li>
85          <li><a href="#">Logout</a></li>
86        </ul>
87      </div><!--/.nav-collapse -->
88    </div><!-- /.navbar -->
89
90    <div class="container">
91
92      <div class="row">
93        <div class="col-md-12 container kofa-maintenance">
94          <div class="well">
95            <div class="maintenance-warning">
96                M A I N T E N A N C E &nbsp;&nbsp;&nbsp; M O D E
97            </div> <!-- /maintenance-warning -->
98          </div> <!-- /well -->
99        </div> <!-- /kofa-maintenance -->
100      </div>
101
102      <div class="row">
103        <div class="col-md-12 container kofa-breadcrumbs-box-long">
104          <div class="well">
105            <ol class="breadcrumb kofa-breadcrumbs">
106              <li>
107                <a href="#">
108                  Home
109                </a>
110              </li>
111              <li>
112                <a href="#">
113                  Subtopic 1
114                </a>
115              </li>
116              <li>
117                <a href="#">
118                  Subtopic 2
119                </a>
120              </li>
121              <li>
122                <a href="#">
123                  Subtopic 3
124                </a>
125              </li>
126            </ol><!-- /kofa-breadcrumbs -->
127          </div> <!-- /well -->
128        </div> <!-- /kofa-breadcrumbs-box-long -->
129      </div>
130
131      <div class="row">
132        <div class="col-md-8 container kofa-breadcrumbs-box-short">
133          <div class="well">
134            <ol class="breadcrumb kofa-breadcrumbs">
135              <li>
136                <a href="#">
137                  Home
138                </a>
139              </li>
140              <li>
141                <a href="#">
142                  Subtopic 1
143                </a>
144              </li>
145              <li>
146                <a href="#">
147                  Subtopic 2
148                </a>
149              </li>
150              <li>
151                <a href="#">
152                  Subtopic 3
153                </a>
154              </li>
155            </ol><!-- /kofa-breadcrumbs -->
156          </div> <!-- /well -->
157        </div> <!-- /kofa-breadcrumbs-box-short -->
158
159        <div class="col-md-4 container kofa-student-status-box">
160          <div class="well">
161            <div class="wfstatus">
162                K1000000 &bull; quite long student status
163            </div> <!-- /wfstatus -->
164          </div> <!-- /well -->
165        </div> <!-- /kofa-student-status-box -->
166
167      </div> <!-- /row -->
168
169      <div class="row">
170        <div class="col-md-2 kofa-sidebar">
171          <div class="sidebar-nav well">
172            <div>
173              <div class="kofa-sidebar-title">Student Name</div>
174              <ul class="nav">
175                <li><a href="#">Base Data</a></li>
176                <li><a href="#">Clearance Data</a></li>
177                <li><a href="#">Personal Data</a></li>
178                <li><a href="#">Study Course</a></li>
179                <li><a href="#">Payments</a></li>
180                <li><a href="#">Accommodation</a></li>
181                <li><a href="#">History</a></li>
182              </ul>
183            </div>
184            <div>
185              <div class="kofa-sidebar-title">Manager Name</div>
186              <ul class="nav">
187                <li><a href="#">Portal Configuration</a></li>
188                <li><a href="#">Portal Users</a></li>
189                <li><a href="#">Data Center</a></li>
190                <li><a href="#">Reports</a></li>
191                <li><a href="#">Access Codes</a></li>
192                <li><a href="#">My Preferences</a></li>
193                <li><a href="#">My Roles</a></li>
194              </ul>
195            </div>
196          </div> <!-- /well -->
197        </div> <!-- /kofa-sidebar -->
198
199        <div class="col-md-10 content kofa-content-narrow">
200          <div class="well">
201            <div class="kofa-content">
202              <div class="actionbar">
203                <a class="btn btn-default" href="">
204                  <img src="static/img/actionicon_modify.png"
205                       alt="Manage" />
206                       Manage
207                </a>
208                <a class="btn btn-default" href="">
209                  <img src="static/img/actionicon_trigtrans.png"
210                       alt="Trigger transition" />
211                       Trigger transition
212                </a>
213              </div>
214              <div class="alert alert-danger">
215                  There were errors ...
216              </div>
217              <div class="alert alert-warning">
218                  Be careful ...
219              </div>
220              <div class="alert alert-success">
221                  You have successfully ...
222              </div>
223              <h1>WAeUP.Kofa Theme</h1>
224
225              <p class="kofa-content-desc">
226                A sample Diazo theme for WAeUP.Kofa
227                <br />
228                Fusce dapibus, tellus ac cursus commodo.
229              </p>
230              <p>
231                Donec id elit non mi porta gravida at eget metus. Fusce
232                dapibus, tellus ac cursus commodo, tortor mauris
233                condimentum nibh, ut fermentum massa justo sit amet
234                risus. Etiam porta sem malesuada magna mollis
235                euismod. Donec sed odio dui.
236              </p>
237              <img src="static/img/bg.png" />
238
239              <!-- Tabs... -->
240              <br /><br />
241              <h3>Sample Tabs</h3>
242              <ul id="tabs" class="tabs nav nav-tabs" data-tabs="tabs">
243                <li class="active">
244                  <a href="#tab-1" data-toggle="tab">Tab 1</a>
245                </li>
246                <li class="">
247                  <a href="#tab-2" data-toggle="tab">Tab 2</a>
248                </li>
249                <li class="">
250                  <a href="#tab-3" data-toggle="tab">Tab 3</a>
251                </li>
252              </ul>
253              <div class="tab-content">
254                <div id="tab-1" class="tab-pane active">
255                  <br />
256                  <p>
257                    Tab 1 content...<br />  Donec id elit non mi porta
258                    gravida at eget metus. Fusce dapibus, tellus ac
259                    cursus commodo.
260                  </p>
261                </div>
262                <div id="tab-2" class="tab-pane">
263                  <br />
264                  <p>
265                    Tab 2 content...<br />  Tortor mauris condimentum
266                    nibh, ut fermentum massa justo sit amet
267                    risus. Etiam porta sem malesuada.
268                  </p>
269                </div>
270                <div id="tab-3" class="tab-pane">
271                  <br />
272                  <p>
273                    Tab 3 content...<br /> Magna mollis euismod. Donec
274                    sed odio dui.
275                  </p>
276                </div>
277
278                <br>
279
280                <h3>Sample Tooltip</h3>
281                <br>Move the mouse over the button:
282                <div class="btn btn-default" data-toggle="tooltip"
283                     title="This is a tooltip">Sample Tooltip
284                </div>
285
286                <br><br>
287
288                <h3>File Upload</h3>
289                <br>
290                <a href="#">Birth Certificate Scan</a>
291                <input type="submit"
292                       value="Delete file"
293                       class="btn btn-danger" />
294                <div class="btn btn-default btn-file">
295                  Select new file&hellip;
296                  <input type="file"/>
297                </div>
298                <input type="submit"
299                       value="Upload selected file"
300                       class="btn btn-primary" />
301                (10 kB max.)
302                <br><br>
303
304                                        <div class="input-group">
305                                                <div class="input-group-btn">
306                                                        <div class="btn btn-default btn-file">
307                      Select new file&hellip;
308                      <input type="file">
309                    </div>
310                                                </div>
311                                                <input type="text" class="form-control" readonly>
312                  <div class="input-group-btn">
313                    <input type="submit"
314                           value="Upload selected file"
315                           class="btn btn-primary" />
316                    (10 kB max.)
317                  </div>
318                </div>
319
320
321              </div><!-- /tab-content -->
322            </div> <!-- /kofa-content -->
323          </div> <!-- /well -->
324        </div> <!-- /kofa-content-narrow -->
325      </div> <!-- /row -->
326
327      <div class="row">
328        <div class="col-md-12 content kofa-content-wide">
329          <div class="well kofa-content">
330            <div class="actionbar">
331              <a class="btn btn-default" href="">
332                <img src="static/img/actionicon_modify.png"
333                     alt="Manage" />
334                     Manage
335              </a>
336              <a class="btn btn-default" href="">
337                <img src="static/img/actionicon_trigtrans.png"
338                     alt="Trigger transition" />
339                     Trigger transition
340              </a>
341            </div>
342            <div class="hero-unit">
343              <h1>Hello there!</h1>
344              <p>this is...</p>
345            </div>
346            <div>...content that spans the whole page.</div>
347
348            <br><br>
349            <h3>Accordions</h3>
350            <div class="panel-group" id="accordion" role="tablist"
351                 aria-multiselectable="true">
352              <div class="panel panel-default">
353                <div class="panel-heading" role="tab" id="headingTwo">
354                  <h4 class="panel-title">
355                    <a class="collapsed" data-toggle="collapse"
356                       data-parent="#accordion" href="#collapseTwo"
357                       aria-expanded="false" aria-controls="collapseTwo">
358                      Collapsible Group
359                    </a>
360                  </h4>
361                </div>
362                <div id="collapseTwo" class="panel-collapse collapse"
363                     role="tabpanel" aria-labelledby="headingTwo">
364                  <div class="panel-body">
365                    Anim pariatur cliche reprehenderit, enim eiusmod high life
366                    terry richardson ad squid. 3 wolf moon officia aute, non
367                    skateboard dolor brunch. Food truck quinoa laborum eiusmod.
368                  </div>
369                </div>
370              </div>
371            </div>
372
373            <br><br>
374            <h3>A Sample Data Table</h3>
375            <div class="table-responsive">
376              <table id="#datatable" class="table table-striped dataTable">
377                <thead>
378                  <tr>
379                    <th>Id</th>
380                    <th>Name</th>
381                    <th>Portal Roles</th>
382                    <th>Local Roles</th>
383                    <th></th>
384                  </tr>
385                </thead><tbody><tr><td>admin</td>
386                    <td>John</td>
387                    <td nowrap="nowrap">Portal Manager <br />
388                      Academics Officer (view only)
389                    </td>
390                    <td>Owner</td>
391                    <td class="text-right">
392                      <form method="post">
393                        <input type="hidden" name="userid" value="admin" />
394                        <input class="btn btn-primary btn-sm" type="submit"
395                               name="manage" value="Manage" />
396                        <input class="btn btn-default btn-sm" type="submit"
397                               name="delete" value="Remove" />
398                      </form>
399                    </td>
400                  </tr>
401                  <tr>
402                    <td>tester</td>
403                    <td>Vitali</td>
404                    <td nowrap="nowrap">Academics Officer (view only)</td>
405                    <td>Owner</td>
406                    <td class="text-right">
407                      <form method="post">
408                        <input type="hidden" name="userid" value="your_id" />
409                        <input class="btn btn-sm btn-primary" type="submit"
410                               name="manage" value="Manage" />
411                        <input class="btn btn-sm btn-default" type="submit"
412                               name="delete" value="Remove" />
413                      </form>
414                    </td>
415                  </tr>
416                </tbody>
417              </table>
418            </div>
419
420            <br><br>
421            <h3>A Sample Inline Form</h3>
422            <form method="POST" class="form-inline">
423            <br />
424              <div class="form-group">
425                <input class="btn btn-primary" type="submit" name="search"
426                  value="Find student(s)" />
427              </div>
428              <div class="form-group">
429                <select name="searchtype" class="form-control">
430                  <option value="student_id">with id</option>
431                  <option value="fullname">with name</option>
432                  <option value="reg_number">with registration number</option>
433                  <option value="matric_number">with matric number</option>
434                  <option value="current_session">in session</option>
435                  <option value="depcode">in department</option>
436                  <option value="current_mode">in study mode</option>
437                  <option value="suspended">
438                    with deactivated account (search term omitted)
439                  </option>
440                  <option value="transcript">
441                    who requested transcript (search term omitted)
442                  </option>
443                </select>
444              </div>
445              <div class="form-group">
446                <input type="text" class="form-control" name="searchterm" />
447              </div>
448            </form>
449
450            <br><br>
451            <h3>A Sample Display Form Table</h3>
452            <table class="form-table">
453              <tbody>
454                <tr>
455                  <td class="fieldname">Code:</td>
456                  <td>app2012</td>
457                </tr>
458                <tr>
459                 <td class="fieldname">Application Target:</td>
460                  <td>General Studies</td>
461                </tr>
462                 <tr>
463                  <td class="fieldname">
464                    Application Mode (Donec id elit non mi porta gravida.):
465                  </td>
466                  <td>Create Application Records</td>
467                </tr>
468              </tbody>
469            </table>
470
471            <br><br>
472            <h3>A Sample Edit/Manage Form Table</h3>
473            <table class="form-table">
474              <tbody>
475                <tr>
476                  <td class="fieldname">Code:</td>
477                  <td>app2012</td>
478                </tr>
479                <tr>
480                  <td class="fieldname">* Title:</td>
481                  <td>
482                    <input class="textType" id="form.title" name="form.title"
483                           size="20" type="text"
484                           value="General Studies 2012/2013" />
485                  </td>
486                </tr>
487                <tr>
488                  <td class="fieldname">Any phone number:</td>
489                  <td>
490                    <select id="form.phone.country" name="form.phone.country"
491                              size="1" class="phone-input">
492                      <option value="+234">Nigeria (+234)</option>
493                      <option value="+49">Germany (+49)</option>
494                      <option value="+1">U.S. (+1)</option>
495                    </select>-
496                    <input class=" phone-input textType" id="form.phone.area"
497                           name="form.phone.area" size="20" type="text"
498                           value="" />-
499                    <input class=" phone-input textType" id="form.phone.ext"
500                           name="form.phone.ext" size="20" type="text" value="" />
501                  </td>
502                </tr>
503                <tr>
504                  <td class="fieldname">Any text field:</td>
505                  <td>
506                      <textarea id="any_id"
507                          name="any_name" rows="5">Placeholder text</textarea>
508                  </td>
509                </tr>
510                <tr>
511                  <td class="fieldname">*
512                      Application Mode
513                      (A select field coming from zope.formlib):
514                  </td>
515                  <td>
516                    <div class="value">
517                      <select id="form.mode" name="form.mode" size="1">
518                        <option selected="selected" value="create">
519                          Create Application Records
520                        </option>
521                        <option value="update">Update Application Records
522                        </option>
523                      </select>
524                    </div>
525                    <input name="form.mode-empty-marker"
526                           type="hidden" value="1" />
527                  </td>
528                </tr>
529                <tr>
530                  <td class="fieldname">A datepicker field:</td>
531                  <td>
532                    <input class="datepicker-le-year textType"
533                                 id="form.any_date" name="form.any_date"
534                                 size="20" type="text" value="" />
535                  </td>
536                </tr>
537
538                <tr>
539                  <td class="fieldname">
540                      A select field in Kofa pagetemplates:
541                  </td>
542                  <td>
543                      <select id="any_id" name="any_name" size="1"
544                              class="form-control half">
545                        <option selected="selected" value="create">
546                            Create Application Records
547                        </option>
548                        <option value="update">
549                            Update Application Records
550                        </option>
551                      </select>
552                  </td>
553                </tr>
554              </tbody>
555            </table>
556            <br>
557            <div class="documentation">
558              <a href="#" target="_blank">
559                Kofa Docs for this page
560              </a>
561            </div>
562          </div> <!-- /well kofa-content-->
563        </div> <!-- /kofa-content-wide -->
564      </div> <!-- /row -->
565      <div id="bottom" class="footer">
566        <p class="credit muted text-right">
567          Kofa - Student Management System<br />
568          Copyright &copy; WAeUP Group
569          <script type="text/javascript">
570          renderCurrentYear();
571          </script>
572        </p>
573      </div>
574    </div> <!-- /container -->
575
576    <script src="https://code.jquery.com/jquery-1.9.1.min.js"></script>
577    <script src="static/bootstrap/js/bootstrap.min.js"></script>
578    <script src="static/js/kofa-scroll.js"></script>
579    <script src="static/js/kofa-activate-tab.js"></script>
580    <script src="static/js/kofa-scrollto.js"></script>
581    <script src="static/js/file-upload.js"></script>
582    <script class="kofa-script-tooltip"
583        src="static/js/kofa-tooltip.js">
584    </script>
585    <script class="kofa-script-datatable"
586        src="static/js/jquery.dataTables.min.js">
587    </script>
588    <script class="kofa-script-datatable"
589        src="static/js/kofa-datatables.js">
590    </script>
591    <script class="jquery-ui"
592        src="static/js/jquery-ui.min.js">
593    </script>
594    <script class="kofa-script-datepicker"
595        src="static/js/kofa-datepicker.js">
596    </script>
597  </body>
598</html>
Note: See TracBrowser for help on using the repository browser.