source: main/waeup.ikoba/trunk/layout/theme.html @ 14172

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

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