source: main/waeup.kofa/trunk/layout/theme.html @ 13171

Last change on this file since 13171 was 12931, checked in by Henrik Bettermann, 10 years ago

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