source: main/waeup.kofa/branches/uli-diazo-themed/layout/theme.html @ 10971

Last change on this file since 10971 was 10971, checked in by Henrik Bettermann, 11 years ago

Adjust actionbar and action buttons.
File size: 7.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="bootstrap/css/bootstrap.min.css"
12          rel="stylesheet">
13    <link href="static/css/base.css" rel="stylesheet">
14
15    <!-- Le HTML5 shim, for IE6-8 support of HTML5 elements -->
16    <!--[if lt IE 9]>
17      <script src="http://html5shim.googlecode.com/svn/trunk/html5.js"></script>
18    <![endif]-->
19
20    <!-- icons -->
21    <link rel="shortcut icon" href="static/ico/favicon.ico">
22    <link rel="apple-touch-icon-precomposed" sizes="144x144"
23          href="static/ico/apple-touch-icon-144-precomposed.png">
24    <link rel="apple-touch-icon-precomposed" sizes="114x114"
25          href="static/ico/apple-touch-icon-114-precomposed.png">
26    <link rel="apple-touch-icon-precomposed" sizes="72x72"
27          href="static/ico/apple-touch-icon-72-precomposed.png">
28    <link rel="apple-touch-icon-precomposed"
29          href="static/ico/apple-touch-icon-57-precomposed.png">
30
31  </head>
32
33  <body id="kofa-body">
34
35    <div class="navbar navbar-inverse navbar-fixed-top" role="navigation">
36      <div class="navbar-header">
37        <button type="button" class="navbar-toggle" data-toggle="collapse"
38                  data-target="#kofa-primary-nav">
39          <span class="icon-bar"></span>
40          <span class="icon-bar"></span>
41          <span class="icon-bar"></span>
42        </button>
43        <a class="navbar-brand active kofa-brand-link" href="/">WAeUP.Kofa</a>
44      </div>
45      <div class="navbar-collapse collapse"
46           id="kofa-primary-nav">
47        <ul class="nav navbar-nav kofa-navbar-left">
48          <li class="active"><a href="#">Academics</a></li>
49          <li><a href="#about">Applicants</a></li>
50          <li><a href="#contact">Students</a></li>
51          <li><a href="#contact">Hostels</a></li>
52          <li class="dropdown kofa-langselect">
53            <a href="#" class="dropdown-toggle"
54               data-toggle="dropdown">Language <b class="caret"></b></a>
55            <ul class="dropdown-menu">
56              <li class="kofa-language"><a href="#">en</a></li>
57              <li class="kofa-language"><a href="#">fr</a></li>
58              <li class="kofa-language"><a href="#">de</a></li>
59              <li class="kofa-language"><a href="#">ha</a></li>
60              <li class="kofa-language"><a href="#">yo</a></li>
61              <li class="kofa-language"><a href="#">ig</a></li>
62            </ul>
63          </li>
64        </ul>
65
66        <ul class="nav navbar-nav navbar-right kofa-navbar-right">
67          <li class="nav"><a href="#">Contact</a></li>
68          <li class="nav"><a href="#">Logout</a></li>
69        </ul>
70      </div><!--/.nav-collapse -->
71    </div><!-- /.navbar -->
72
73    <div class="container">
74
75      <div class="row">
76        <div class="col-md-12 container kofa-breadcrumbs-box">
77          <div class="well">
78            <ol class="breadcrumb kofa-breadcrumbs">
79              <li class="kofa-breadcrumb">
80                <a href="#">
81                  Home
82                </a>
83              </li>
84              <li class="kofa-breadcrumb">
85                <a href="#">
86                  Subtopic
87                </a>
88              </li>
89            </ol><!-- /kofa-breadcrumbs -->
90          </div> <!-- /well -->
91        </div> <!-- /kofa-breadcrumbs-box -->
92      </div> <!-- /row -->
93
94      <div class="row">
95        <div class="col-md-2 kofa-sidebar">
96          <div class="sidebar-nav well">
97            <div>
98              <div class="kofa-sidebar-title">Student Name</div>
99              <ul class="nav">
100                <li><a href="#">Base Data</a></li>
101                <li><a href="#">Clearance Data</a></li>
102                <li><a href="#">Personal Data</a></li>
103                <li><a href="#">Study Course</a></li>
104                <li><a href="#"">Payments</a></li>
105                <li><a href="#">Accommodation</a></li>
106                <li><a href="#">History</a></li>
107              </ul>
108            </div>
109            <div>
110              <div class="kofa-sidebar-title">Manager Name</div>
111              <ul class="nav">
112                <li><a href="#">Portal Configuration</a></li>
113                <li><a href="#">Portal Users</a></li>
114                <li><a href="#">Data Center</a></li>
115                <li><a href="#">Reports</a></li>
116                <li><a href="#">Access Codes</a></li>
117                <li><a href="#">My Preferences</a></li>
118                <li><a href="#">My Roles</a></li>
119              </ul>
120            </div>
121          </div> <!-- /well -->
122        </div> <!-- /kofa-sidebar -->
123        <div class="col-md-10 content kofa-content-narrow">
124
125          <div class="well kofa-content ">
126            <div class="actionbar">
127              <a class="btn btn-default" href="">
128                <img src="static/img/actionicon_modify.png"
129                     alt="Manage" />
130                     Manage
131              </a>
132              <a class="btn btn-default" href="">
133                <img src="static/img/actionicon_trigtrans.png"
134                     alt="Trigger transition" />
135                     Trigger transition
136              </a>
137            </div>
138
139            <div class="hero-unit kofa-content-label-box">
140              <h1 class="kofa-content-label-title">waeup.kofa theme</h1>
141              <p class="kofa-content-label-descr">
142                A sample theme for waeup.kofa</p>
143            </div>
144            <p>
145              Donec id elit non mi porta gravida at eget metus. Fusce
146              dapibus, tellus ac cursus commodo, tortor mauris
147              condimentum nibh, ut fermentum massa justo sit amet
148              risus. Etiam porta sem malesuada magna mollis
149              euismod. Donec sed odio dui.
150            </p>
151            <img src="static/img/bg.png" />
152          </div> <!-- /well -->
153        </div> <!-- /kofa-content-narrow -->
154      </div> <!-- /row -->
155
156      <div class="row">
157        <div class="col-md-12 content kofa-content kofa-content-wide">
158          <div class="well">
159            <div class="hero-unit">
160              <h1>Hello there!</h1>
161              <p>this is...</p>
162            </div>
163            <div>...content that spans the whole page.</div>
164            <div id="#sampleform">
165              <form method="post">
166                <fieldset id="form-fieldset">
167                  <legend>A Sample Form</legend>
168                  <div class="form-field">
169                    <label>Some Label</label>
170                    <input type="text" class="textType"
171                           name="myinput[]" placeholder="A name..." />
172                  </div>
173                  <button type="submit" class="btn rowadd">
174                    Add row
175                  </button>
176                  <br />
177                  <button type="submit" class="btn btn-primary">Save</button>
178                </fieldset>
179              </form>
180            </div> <!-- /sampleform -->
181          </div> <!-- /well -->
182        </div> <!-- /kofa-content-wide -->
183      </div> <!-- /row -->
184
185      <div class="row">
186        <div class="footer">
187          <hr />
188          <p class="credit muted text-right">
189            <a href="//waeup.org">&copy; WAeUP Group 2014</a>
190          </p>
191        </div>
192      </div> <!-- /row -->
193
194    </div> <!-- /container -->
195
196    <script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
197    <script src="bootstrap/js/bootstrap.min.js"></script>
198
199    <script type="text/javascript" class="kofa-script kofa-script-tooltip">
200      $(function () {
201        $("[data-toggle=tooltip]").tooltip();
202      });
203    </script>
204    <script type="text/javascript">
205      $("button.rowadd").click(function (evt) {
206         /* Do not submit the form really */
207         evt.preventDefault();
208         /* Add first .form-field after last .form-field... */
209         $(".form-field:last").after($(".form-field:first").clone().hide().fadeIn());
210      });
211    </script>
212
213  </body>
214</html>
Note: See TracBrowser for help on using the repository browser.