Changeset 11558


Ignore:
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
Files:
2 added
8 edited

Legend:

Unmodified
Added
Removed

  • main/waeup.kofa/trunk/CHANGES.txt

    r11551 r11558  
    441.2dev (unreleased)
    55===================
     6
     7* File input fields brought into shape with Bootstrap 3.
    68
    79* Transcript and access code pagetemplates adjusted.

  • main/waeup.kofa/trunk/layout/static/css/base.css

    r11551 r11558  
    131131/* Buttons */
    132132
    133 .btn {
    134     margin: 4px;
    135     font-size: 13px;
    136     display: inline;
     133input.btn {
     134    padding: 8px 12px;
     135    margin-right: 4px;
     136}
     137
     138input.btn-sm {
     139  padding: 5px 10px;
    137140}
    138141

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

    r11494 r11558  
    1818          rel="stylesheet">
    1919    <link href="static/css/base.css" rel="stylesheet">
     20    <link href="static/css/file-upload.css" rel="stylesheet">
    2021
    2122    <!-- HTML5 shim and Respond.js IE8 support of HTML5 elements and media queries -->
    … …  
    271272                     title="This is a tooltip">Sample Tooltip
    272273                </div>
     274
    273275                <br><br>
     276
     277                <h3>File Upload</h3>
     278                <br>
     279                <a href="#">Birth Certificate Scan</a>
     280                <input type="submit"
     281                       value="Delete file"
     282                       class="btn btn-danger" />
     283                <div class="btn btn-default btn-file">
     284                  Select new file&hellip;
     285                  <input type="file"/>
     286                </div>
     287                <input type="submit"
     288                       value="Upload selected file"
     289                       class="btn btn-primary" />
     290                (10 kB max.)
     291                <br><br>
     292
     293                                        <div class="input-group">
     294                                                <div class="input-group-btn">
     295                                                        <div class="btn btn-default btn-file">
     296                      Select new file&hellip;
     297                      <input type="file">
     298                    </div>
     299                                                </div>
     300                                                <input type="text" class="form-control" readonly>
     301                  <div class="input-group-btn">
     302                    <input type="submit"
     303                           value="Upload selected file"
     304                           class="btn btn-primary" />
     305                    (10 kB max.)
     306                  </div>
     307                </div>
     308
    274309
    275310              </div><!-- /tab-content -->
    … …  
    309344                           name="myinput[]" placeholder="A name..." />
    310345                  </div>
    311                   <button type="submit" class="btn rowadd btn-default">
     346                  <div type="submit" class="btn rowadd btn-default">
    312347                    Add row
    313                   </button>
    314                   <br />
    315                   <button type="submit" class="btn btn-primary">Save</button>
     348                  </div>
     349                  <div type="submit" class="btn btn-primary">Save</div>
    316350                </fieldset>
    317351              </form>
    … …  
    338372                      <form method="post">
    339373                        <input type="hidden" name="userid" value="admin" />
    340                         <input class="btn btn-sm btn-primary" type="submit"
     374                        <input class="btn btn-primary btn-sm" type="submit"
    341375                               name="manage" value="Manage" />
    342                         <input class="btn btn-sm btn-default" type="submit"
     376                        <input class="btn btn-default btn-sm" type="submit"
    343377                               name="delete" value="Remove" />
    344378                      </form>
    … …  
    518552    <script src="static/js/kofa-activate-tab.js"></script>
    519553    <script src="static/js/kofa-scrollto.js"></script>
     554    <script src="static/js/file-upload.js"></script>
    520555    <script class="kofa-script-tooltip"
    521556        src="static/js/kofa-tooltip.js">

  • main/waeup.kofa/trunk/src/waeup/kofa/applicants/browser_templates/applicanteditpage.pt

    r11254 r11558  
    2828        <td>
    2929          <img src="passport.jpg" height="180px" /><br />
    30           <input type="file" name="form.passport" />
    3130          <br />
     31                <div class="input-group half">
     32                        <div class="input-group-btn">
     33                                <div class="btn btn-default btn-file">
     34                Select&hellip;
     35                <input type="file" name="form.passport" />
     36              </div>
     37                        </div>
     38                        <input type="text" class="form-control" readonly>
     39          </div>
    3240          <span i18n:translate="">
    3341            Max. file size:

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

    r11254 r11558  
    1616      </td>
    1717      <td>
    18         <input type="file" size=47 name="uploadfile:file" />
     18                <div class="input-group half">
     19                        <div class="input-group-btn">
     20                                <div class="btn btn-default btn-file">
     21              Select&hellip;
     22              <input type="file" name="uploadfile:file" />
     23            </div>
     24                        </div>
     25                        <input type="text" class="form-control" readonly>
     26        </div>
    1927      </td>
    2028    </tr>

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

    r11254 r11558  
    44  </td>
    55  <td>
     6
     7                <div class="input-group">
     8                        <div class="input-group-btn">
     9                                <div class="btn btn-default btn-file">
     10          Select new file&hellip;
     11          <input type="file" tal:attributes="name viewlet/input_name" />
     12        </div>
     13                        </div>
     14                        <input type="text" class="form-control" readonly>
     15      <div class="input-group-btn">
     16        <input type="submit"
     17               tal:attributes="id python:('upload_%s' % viewlet.input_name);
     18                name python:('upload_%s' % viewlet.input_name);
     19                value viewlet/upload_button"
     20               class="btn btn-primary" />
     21        (<span tal:replace="viewlet/max_upload_size">10 kB</span> max.)
     22      </div>
     23    </div>
     24
    625    <tal:file tal:condition="viewlet/file_exists">
     26      <br />
     27      <input type="submit"
     28             tal:attributes="id python:('delete_%s' % viewlet.input_name);
     29                name python:('delete_%s' % viewlet.input_name);
     30                value viewlet/delete_button"
     31             class="btn btn-danger" />&nbsp;
    732      <a tal:attributes="href python: view.url(context, viewlet.download_name)"
    833         tal:content="viewlet/title"
    … …  
    1136      </a>
    1237    </tal:file>
    13     <input type="file" tal:attributes="name viewlet/input_name"/>
    14     <br />
    15     <input type="submit" tal:condition="viewlet/file_exists"
    16            tal:attributes="id python:('delete_%s' % viewlet.input_name);
    17               name python:('delete_%s' % viewlet.input_name);
    18               value viewlet/delete_button"
    19            class="btn btn-danger" />
    20     <input type="submit"
    21              tal:attributes="id python:('upload_%s' % viewlet.input_name);
    22                 name python:('upload_%s' % viewlet.input_name);
    23                 value viewlet/upload_button"
    24              class="btn btn-primary" />
    25     <span i18n:translate="">
    26       Max. file size:
    27     </span>
    28     <span tal:replace="viewlet/max_upload_size">10 KB</span>
     38
    2939    <br />
    3040  </td>

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

    r11254 r11558  
    66    <img align="middle" height="125px"
    77         tal:attributes="src python: view.url(context, viewlet.download_name)" />
     8    &nbsp;
    89    <input type="submit" tal:condition="viewlet/file_exists"
    910     tal:attributes="id python:('delete_%s' % viewlet.input_name);
    … …  
    1112     value="Delete" class="btn btn-danger" />
    1213    <br /><br />
    13     <input type="file" tal:attributes="name viewlet/input_name"/>
    14     <br /><br />
    15     <input type="submit"
    16              tal:attributes="id python:('upload_%s' % viewlet.input_name);
     14
     15                <div class="input-group">
     16                        <div class="input-group-btn">
     17                                <div class="btn btn-default btn-file">
     18          Select new file&hellip;
     19          <input type="file" tal:attributes="name viewlet/input_name" />
     20        </div>
     21                        </div>
     22                        <input type="text" class="form-control" readonly>
     23      <div class="input-group-btn">
     24        <input type="submit"
     25               tal:attributes="id python:('upload_%s' % viewlet.input_name);
    1726                name python:('upload_%s' % viewlet.input_name);
    1827                value viewlet/upload_button"
    19              value="Upload" class="btn btn-primary" />
    20     <span i18n:translate="">
    21       Max. file size:
    22     </span>
    23     <span tal:replace="viewlet/max_upload_size">10 KB</span>
     28               class="btn btn-primary" />
     29        (<span tal:replace="viewlet/max_upload_size">10 kB</span> max.)
     30      </div>
     31    </div>
    2432  </td>
    2533</tr>

  • main/waeup.kofa/trunk/src/waeup/kofa/students/viewlets.py

    r11254 r11558  
    894894    tab_redirect = '#tab2-top'
    895895    mus = 1024 * 150
    896     upload_button =_('Upload new file')
    897     delete_button = _('Delete attachment')
     896    upload_button =_('Upload selected file')
     897    delete_button = _('Delete')
    898898
    899899    @property
Note: See TracChangeset for help on using the changeset viewer.