Changeset 11558 for main/waeup.kofa/trunk/layout/theme.html

Timestamp:

2 Apr 2014, 09:58:39 (11 years ago)

Author:

Henrik Bettermann

Message:

File input fields brought into shape with Bootstrap 3. Technique adapted from ​http://labs.abeautifulsite.net/demos/bootstrap-file-inputs/.

File:

• main/waeup.kofa/trunk/layout/theme.html (modified) (5 diffs)

main/waeup.kofa/trunk/layout/theme.html

@@ -18 +18 @@
           rel="stylesheet">
     <link href="static/css/base.css" rel="stylesheet">
+    <link href="static/css/file-upload.css" rel="stylesheet">
 
     <!-- HTML5 shim and Respond.js IE8 support of HTML5 elements and media queries -->
@@ -271 +272 @@
                      title="This is a tooltip">Sample Tooltip
                 </div>
+
                 <br><br>
+
+                <h3>File Upload</h3>
+                <br>
+                <a href="#">Birth Certificate Scan</a>
+                <input type="submit"
+                       value="Delete file"
+                       class="btn btn-danger" />
+                <div class="btn btn-default btn-file">
+                  Select new file&hellip;
+                  <input type="file"/>
+                </div>
+                <input type="submit"
+                       value="Upload selected file"
+                       class="btn btn-primary" />
+                (10 kB max.)
+                <br><br>
+
+                                        <div class="input-group">
+                                                <div class="input-group-btn">
+                                                        <div class="btn btn-default btn-file">
+                      Select new file&hellip;
+                      <input type="file">
+                    </div>
+                                                </div>
+                                                <input type="text" class="form-control" readonly>
+                  <div class="input-group-btn">
+                    <input type="submit"
+                           value="Upload selected file"
+                           class="btn btn-primary" />
+                    (10 kB max.)
+                  </div>
+                </div>
+
 
               </div><!-- /tab-content -->
@@ -309 +344 @@
                            name="myinput[]" placeholder="A name..." />
                   </div>
-                  <button type="submit" class="btn rowadd btn-default">
+                  <div type="submit" class="btn rowadd btn-default">
                     Add row
-                  </button>
-                  <br />
-                  <button type="submit" class="btn btn-primary">Save</button>
+                  </div>
+                  <div type="submit" class="btn btn-primary">Save</div>
                 </fieldset>
               </form>
@@ -338 +372 @@
                       <form method="post">
                         <input type="hidden" name="userid" value="admin" />
-                        <input class="btn btn-sm btn-primary" type="submit"
+                        <input class="btn btn-primary btn-sm" type="submit"
                                name="manage" value="Manage" />
-                        <input class="btn btn-sm btn-default" type="submit"
+                        <input class="btn btn-default btn-sm" type="submit"
                                name="delete" value="Remove" />
                       </form>
@@ -518 +552 @@
     <script src="static/js/kofa-activate-tab.js"></script>
     <script src="static/js/kofa-scrollto.js"></script>
+    <script src="static/js/file-upload.js"></script>
     <script class="kofa-script-tooltip"
         src="static/js/kofa-tooltip.js">