source: main/waeup.kofa/branches/uli-rm-bootstrap/layout/theme.html @ 16045

Last change on this file since 16045 was 14563, checked in by Henrik Bettermann, 8 years ago

Replace tabs.

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