Changeset 11558 for main/waeup.kofa/trunk/src/waeup/kofa/students/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/.

File:

• main/waeup.kofa/trunk/src/waeup/kofa/students/browser_templates/imageupload.pt (modified) (2 diffs)

main/waeup.kofa/trunk/src/waeup/kofa/students/browser_templates/imageupload.pt

@@ -6 +6 @@
     <img align="middle" height="125px"
          tal:attributes="src python: view.url(context, viewlet.download_name)" />
+    &nbsp;
     <input type="submit" tal:condition="viewlet/file_exists"
      tal:attributes="id python:('delete_%s' % viewlet.input_name);
@@ -11 +12 @@
      value="Delete" class="btn btn-danger" />
     <br /><br />
-    <input type="file" tal:attributes="name viewlet/input_name"/>
-    <br /><br />
-    <input type="submit"
-             tal:attributes="id python:('upload_%s' % viewlet.input_name);
+
+                <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"
-             value="Upload" class="btn btn-primary" />
-    <span i18n:translate="">
-      Max. file size:
-    </span>
-    <span tal:replace="viewlet/max_upload_size">10 KB</span>
+               class="btn btn-primary" />
+        (<span tal:replace="viewlet/max_upload_size">10 kB</span> max.)
+      </div>
+    </div>
   </td>
 </tr>