Changeset c82fe79 in OpenWorkouts-current for ow


Ignore:
Timestamp:
Sep 27, 2019, 1:06:35 PM (5 years ago)
Author:
Borja Lopez <borja@…>
Branches:
current
Children:
c081c35
Parents:
f89b2f1
Message:

(#84) Show a "loading" spinner while adding a workout by uploading a track file

Location:
ow
Files:
1 added
3 edited

Legend:

Unmodified
Added
Removed
  • ow/static/css/main.css

    rf89b2f1 rc82fe79  
    33  font-style: italic;
    44  font-weight: 300;
    5   src: local('Open Sans Light Italic'), local('OpenSans-LightItalic'), url(https://fonts.gstatic.com/s/opensans/v15/memnYaGs126MiZpBA-UFUKWyV9hrIqY.ttf) format('truetype');
     5  src: local('Open Sans Light Italic'), local('OpenSans-LightItalic'), url(https://fonts.gstatic.com/s/opensans/v17/memnYaGs126MiZpBA-UFUKWyV9hrIqY.ttf) format('truetype');
    66}
    77@font-face {
     
    99  font-style: italic;
    1010  font-weight: 400;
    11   src: local('Open Sans Italic'), local('OpenSans-Italic'), url(https://fonts.gstatic.com/s/opensans/v15/mem6YaGs126MiZpBA-UFUK0Zdcg.ttf) format('truetype');
     11  src: local('Open Sans Italic'), local('OpenSans-Italic'), url(https://fonts.gstatic.com/s/opensans/v17/mem6YaGs126MiZpBA-UFUK0Zdcg.ttf) format('truetype');
    1212}
    1313@font-face {
     
    1515  font-style: italic;
    1616  font-weight: 700;
    17   src: local('Open Sans Bold Italic'), local('OpenSans-BoldItalic'), url(https://fonts.gstatic.com/s/opensans/v15/memnYaGs126MiZpBA-UFUKWiUNhrIqY.ttf) format('truetype');
     17  src: local('Open Sans Bold Italic'), local('OpenSans-BoldItalic'), url(https://fonts.gstatic.com/s/opensans/v17/memnYaGs126MiZpBA-UFUKWiUNhrIqY.ttf) format('truetype');
    1818}
    1919@font-face {
     
    2121  font-style: normal;
    2222  font-weight: 300;
    23   src: local('Open Sans Light'), local('OpenSans-Light'), url(https://fonts.gstatic.com/s/opensans/v15/mem5YaGs126MiZpBA-UN_r8OUuhs.ttf) format('truetype');
     23  src: local('Open Sans Light'), local('OpenSans-Light'), url(https://fonts.gstatic.com/s/opensans/v17/mem5YaGs126MiZpBA-UN_r8OUuhs.ttf) format('truetype');
    2424}
    2525@font-face {
     
    2727  font-style: normal;
    2828  font-weight: 400;
    29   src: local('Open Sans Regular'), local('OpenSans-Regular'), url(https://fonts.gstatic.com/s/opensans/v15/mem8YaGs126MiZpBA-UFVZ0e.ttf) format('truetype');
     29  src: local('Open Sans Regular'), local('OpenSans-Regular'), url(https://fonts.gstatic.com/s/opensans/v17/mem8YaGs126MiZpBA-UFVZ0e.ttf) format('truetype');
    3030}
    3131@font-face {
     
    3333  font-style: normal;
    3434  font-weight: 700;
    35   src: local('Open Sans Bold'), local('OpenSans-Bold'), url(https://fonts.gstatic.com/s/opensans/v15/mem5YaGs126MiZpBA-UN7rgOUuhs.ttf) format('truetype');
     35  src: local('Open Sans Bold'), local('OpenSans-Bold'), url(https://fonts.gstatic.com/s/opensans/v17/mem5YaGs126MiZpBA-UN7rgOUuhs.ttf) format('truetype');
    3636}
    3737@font-face {
     
    3939  font-style: normal;
    4040  font-weight: 800;
    41   src: local('Open Sans ExtraBold'), local('OpenSans-ExtraBold'), url(https://fonts.gstatic.com/s/opensans/v15/mem5YaGs126MiZpBA-UN8rsOUuhs.ttf) format('truetype');
     41  src: local('Open Sans ExtraBold'), local('OpenSans-ExtraBold'), url(https://fonts.gstatic.com/s/opensans/v17/mem5YaGs126MiZpBA-UN8rsOUuhs.ttf) format('truetype');
    4242}
    4343/*! normalize.css v8.0.1 | MIT License | github.com/necolas/normalize.css */
     
    446446.wrapper-l,
    447447.wrapper-xl,
    448 .ow-forms {
     448.ow-forms,
     449.uploading-workout {
    449450  display: block;
    450451  width: 100%;
     
    458459  .wrapper-l,
    459460  .wrapper-xl,
    460   .ow-forms {
     461  .ow-forms,
     462  .uploading-workout {
    461463    padding-left: 2rem;
    462464    padding-right: 2rem;
     
    468470  .wrapper-l,
    469471  .wrapper-xl,
    470   .ow-forms {
     472  .ow-forms,
     473  .uploading-workout {
    471474    padding-left: 4rem;
    472475    padding-right: 4rem;
     
    478481  .wrapper-l,
    479482  .wrapper-xl,
    480   .ow-forms {
     483  .ow-forms,
     484  .uploading-workout {
    481485    padding-left: 5rem;
    482486    padding-right: 5rem;
     
    488492  .wrapper-l,
    489493  .wrapper-xl,
    490   .ow-forms {
     494  .ow-forms,
     495  .uploading-workout {
    491496    padding-left: 6rem;
    492497    padding-right: 6rem;
     
    495500@media (min-width: 320px) {
    496501  .wrapper-s,
    497   .ow-forms {
     502  .ow-forms,
     503  .uploading-workout {
    498504    max-width: 740px;
    499505  }
     
    13101316  background-color: #e1e1e1;
    13111317}
    1312 .ow-forms {
     1318.uploading-workout {
     1319  /* Extends ow-forms, as we use a div with this class to show as a
     1320       replacement of the uploading form while the form is submitting
     1321       (that could take some time when uploading bigger tracking files) */
     1322  width: 100%;
     1323  text-align: center;
     1324  display: none;
     1325}
     1326.ow-forms,
     1327.uploading-workout {
    13131328  padding-top: 2em;
    13141329}
  • ow/static/less/modules/workout.less

    rf89b2f1 rc82fe79  
    438438    }
    439439}
     440
     441
     442.uploading-workout {
     443    /* Extends ow-forms, as we use a div with this class to show as a
     444       replacement of the uploading form while the form is submitting
     445       (that could take some time when uploading bigger tracking files) */
     446    &:extend(.ow-forms);
     447    width: 100%;
     448    text-align: center;
     449    // We need to force this here, extending from ow-forms invalidates using
     450    // the "hidden" mixin class elements with this class
     451    display: none;
     452}
  • ow/templates/add_workout.pt

    rf89b2f1 rc82fe79  
    1717
    1818  <metal:content metal:fill-slot="content">
     19
     20    <div class="uploading-workout hidden">
     21      <h2 i18n:translate="">Uploading workout, please wait...</h2>
     22      <p i18n:translate="">
     23        This can take a moment, depending on the size of your tracking file and your connection speed. Be patient and please don't hit the stop or go back buttons on your browser.
     24      </p>
     25      <img src="" alt="Loading workout" i18n:attributes="alt"
     26           tal:attributes="src request.static_url('ow:static/media/img/loading.gif')">
     27    </div>
     28
    1929    <div class="upload-workout ow-forms">
    2030      <a href="" class="back"
    21            tal:attributes="href request.resource_url(context)"
    22            i18n:translate="">Back</a>
     31         tal:attributes="href request.resource_url(context)"
     32         i18n:translate="">Back</a>
    2333      <h2 i18n:translate="">Upload workout file</h2>
    24         ${form.begin(multipart=True)}
    25         ${form.csrf_token()}
     34      ${form.begin(multipart=True)}
     35      ${form.csrf_token()}
    2636
    2737      <tal:is_duplicate tal:condition="duplicate is not None">
     
    107117
    108118      ${form.end()}
    109     </div>
     119        </div>
    110120
    111121  </metal:content>
    112122
     123  <metal:body-js metal:fill-slot="body-js">
     124    <script>
     125        $(document).ready(function(){
     126            $("div.upload-workout form").on("submit", function(){
     127                console.log('Showing spinner');
     128                $("div.upload-workout").fadeOut();
     129                $("div.uploading-workout").fadeIn();
     130            });
     131        });
     132    </script>
     133  </metal:body-js>
     134
     135
    113136</html>
Note: See TracChangeset for help on using the changeset viewer.