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

Last change on this file since 17937 was 17172, checked in by Henrik Bettermann, 2 years ago

Add Javascript which automatically submits a form on select change (not used in base but in lpng custom package).

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