Merge branch 'master' into https-comment-in-readme

timekit-io · Jan 7, 2016 · 643b613 · 643b613
2 parents 3fece5e + 40621a4
commit 643b613
Show file tree

Hide file tree

Showing 4 changed files with 58 additions and 15 deletions.
diff --git a/src/assets/error-icon.svg b/src/assets/error-icon.svg
diff --git a/src/main.js b/src/main.js
@@ -220,12 +220,12 @@ function TimekitBooking() {
   var decideCalendarSize = function() {
 
     var view = 'agendaWeek';
-    var height = 470;
+    var height = 420;
     var rootWidth = rootTarget.width();
 
     if (rootWidth < 480) {
       view = 'basicDay';
-      height = 346;
+      height = 335;
       rootTarget.addClass('is-small');
     } else {
       rootTarget.removeClass('is-small');
@@ -299,6 +299,7 @@ function TimekitBooking() {
       closeIcon:            require('!svg-inline!./assets/close-icon.svg'),
       checkmarkIcon:        require('!svg-inline!./assets/checkmark-icon.svg'),
       loadingIcon:          require('!svg-inline!./assets/loading-spinner.svg'),
+      errorIcon:            require('!svg-inline!./assets/error-icon.svg'),
       submitText:           'Book it',
       successMessageTitle:  'Thanks!',
       successMessagePart1:  'An invitation has been sent to:',
@@ -360,7 +361,7 @@ function TimekitBooking() {
     var formElement = $(form);
 
     // Abort if form is submitting, have submitted or does not validate
-    if(formElement.hasClass('loading') || formElement.hasClass('success') || !e.target.checkValidity()) {
+    if(formElement.hasClass('loading') || formElement.hasClass('success') || formElement.hasClass('error') || !e.target.checkValidity()) {
       var submitButton = formElement.find('.bookingjs-form-button');
       submitButton.addClass('button-shake');
       setTimeout(function() {
@@ -387,7 +388,20 @@ function TimekitBooking() {
       formElement.removeClass('loading').addClass('success');
 
     }).catch(function(response){
+
       utils.doCallback('createEventFailed', config, response);
+
+      var submitButton = formElement.find('.bookingjs-form-button');
+      submitButton.addClass('button-shake');
+      setTimeout(function() {
+        submitButton.removeClass('button-shake');
+      }, 500);
+
+      formElement.removeClass('loading').addClass('error');
+      setTimeout(function() {
+        formElement.removeClass('error');
+      }, 2000);
+
       throw new Error('TimekitBooking - An error with Timekit createEvent occured, context: ' + response);
     });
 

diff --git a/src/styles/main.scss b/src/styles/main.scss
@@ -16,6 +16,7 @@ $textColor:         #333;
 $textLightColor:    #AEAEAE;
 $primaryColor:      #689AD8;
 $primaryDarkColor:  darken($primaryColor, 10%);
+$errorColor:        #D83B46;
 $fontFamily:        'Open Sans', Helvetica, Tahoma, Arial, sans-serif;
 
 // Classes
@@ -157,25 +158,25 @@ $fontFamily:        'Open Sans', Helvetica, Tahoma, Arial, sans-serif;
       text-align: center;
       font-size: 34px;
       font-weight: 400;
-      margin-top: 90px;
-      margin-bottom: 20px;
+      margin-top: 70px;
+      margin-bottom: 10px;
 
       .is-small & {
-        font-size: 24px;
+        font-size: 27px;
         margin-top: 60px;
-        margin-bottom: 15px;
       }
     }
 
     &-time {
       text-align: center;
       font-size: 17px;
       font-weight: 400;
-      margin-bottom: 70px;
+      margin-bottom: 50px;
+      margin-top: 10px;
 
       .is-small & {
         font-size: 15px;
-        margin-bottom: 30px;
+        margin-bottom: 35px;
       }
     }
   }
@@ -278,29 +279,33 @@ $fontFamily:        'Open Sans', Helvetica, Tahoma, Arial, sans-serif;
       max-width: 200px;
 
       .success-text,
+      .error-text,
       .loading-text {
         transition: opacity 0.3s ease;
         position: absolute;
         top: 13px;
         left: 50%;
         transform: translateX(-50%);
+        opacity: 0;
       }
 
       .inactive-text {
+        white-space: nowrap;
         opacity: 1;
       }
 
-      .loading-text,
-      .success-text {
-        opacity: 0;
-      }
-
       .loading-text svg {
         height: 19px;
         width: 19px;
         animation: spin 0.6s infinite linear;
       }
 
+      .error-text svg {
+        height: 15px;
+        width: 15px;
+        margin-top: 2px;
+      }
+
       .success-text svg {
         height: 15px;
         margin-top: 2px;
@@ -321,17 +326,28 @@ $fontFamily:        'Open Sans', Helvetica, Tahoma, Arial, sans-serif;
     &.loading &-button:hover {
       max-width: 80px;
       background-color: #B1B1B1;
+      cursor: not-allowed;
 
       .inactive-text { opacity: 0; }
       .loading-text { opacity: 1; }
     }
 
+    &.error &-button,
+    &.error &-button:hover {
+      max-width: 80px;
+      background-color: $errorColor;
+      cursor: not-allowed;
+
+      .inactive-text { opacity: 0; }
+      .error-text { opacity: 1; }
+    }
+
     &.success &-button,
     &.success &-button:hover {
       max-width: 80px;
       background-color: #5BAF56;
+      cursor: not-allowed;
 
-      .loading-text,
       .inactive-text { opacity: 0; }
       .success-text { opacity: 1; }
 

diff --git a/src/templates/booking-page.html b/src/templates/booking-page.html
@@ -19,6 +19,7 @@ <h3 class="bookingjs-bookpage-time">{{ chosenTime }}</h3>
     <button class="bookingjs-form-button" type="submit">
       <span class="inactive-text">{{ submitText }}</span>
       <span class="loading-text">{{& loadingIcon }}</span>
+      <span class="error-text">{{& errorIcon }}</span>
       <span class="success-text">{{& checkmarkIcon }}</span>
     </button>
   </form>