Changeset 11558 for main/waeup.kofa/trunk/src/waeup/kofa/browser/templates

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/.

Location:

main/waeup.kofa/trunk/src/waeup/kofa/browser/templates

Files:

• datacenteruploadpage.pt (modified) (1 diff)
• fileupload.pt (modified) (2 diffs)

main/waeup.kofa/trunk/src/waeup/kofa/browser/templates/datacenteruploadpage.pt

@@ -16 +16 @@
       </td>
       <td>
-        <input type="file" size=47 name="uploadfile:file" />
+                <div class="input-group half">
+                        <div class="input-group-btn">
+                                <div class="btn btn-default btn-file">
+              Select&hellip;
+              <input type="file" name="uploadfile:file" />
+            </div>
+                        </div>
+                        <input type="text" class="form-control" readonly>
+        </div>
       </td>
     </tr>

main/waeup.kofa/trunk/src/waeup/kofa/browser/templates/fileupload.pt

@@ -4 +4 @@
   </td>
   <td>
+
+                <div class="input-group">
+                        <div class="input-group-btn">
+                                <div class="btn btn-default btn-file">
+          Select new file&hellip;
+          <input type="file" tal:attributes="name viewlet/input_name" />
+        </div>
+                        </div>
+                        <input type="text" class="form-control" readonly>
+      <div class="input-group-btn">
+        <input type="submit"
+               tal:attributes="id python:('upload_%s' % viewlet.input_name);
+                name python:('upload_%s' % viewlet.input_name);
+                value viewlet/upload_button"
+               class="btn btn-primary" />
+        (<span tal:replace="viewlet/max_upload_size">10 kB</span> max.)
+      </div>
+    </div>
+
     <tal:file tal:condition="viewlet/file_exists">
+      <br />
+      <input type="submit"
+             tal:attributes="id python:('delete_%s' % viewlet.input_name);
+                name python:('delete_%s' % viewlet.input_name);
+                value viewlet/delete_button"
+             class="btn btn-danger" />&nbsp;
       <a tal:attributes="href python: view.url(context, viewlet.download_name)"
          tal:content="viewlet/title"
@@ -11 +36 @@
       </a>
     </tal:file>
-    <input type="file" tal:attributes="name viewlet/input_name"/>
-    <br />
-    <input type="submit" tal:condition="viewlet/file_exists"
-           tal:attributes="id python:('delete_%s' % viewlet.input_name);
-              name python:('delete_%s' % viewlet.input_name);
-              value viewlet/delete_button"
-           class="btn btn-danger" />
-    <input type="submit"
-             tal:attributes="id python:('upload_%s' % viewlet.input_name);
-                name python:('upload_%s' % viewlet.input_name);
-                value viewlet/upload_button"
-             class="btn btn-primary" />
-    <span i18n:translate="">
-      Max. file size:
-    </span>
-    <span tal:replace="viewlet/max_upload_size">10 KB</span>
+
     <br />
   </td>