Improve UX of comment form

- Remove modal and insert notices above submit button - Disable form on successfully submission - Add "loading..." icon and text to button on submit - Remove unused text string translations
mmistakes · Aug 12, 2016 · 804b217 · 804b217
1 parent 3a9350d
commit 804b217
Show file tree

Hide file tree

Showing 4 changed files with 50 additions and 62 deletions.
diff --git a/_data/ui-text.yml b/_data/ui-text.yml
@@ -36,11 +36,8 @@ en: &DEFAULT_EN
   comment_form_website_label : "Website (optional)"
   comment_btn_submit         : "Submit Comment"
   comment_btn_submitted      : "Submitted"
-  comment_success_title      : "Comment submitted"
   comment_success_msg        : "Thanks for your comment! It will show on the site once it has been approved."
-  comment_error_title        : "Error"
   comment_error_msg          : "Sorry, there was an error with your submission. Please make sure all required fields have been completed and try again."
-  close_btn_label            : "close"
   loading_label              : "Loading..."
 en-US:
   <<: *DEFAULT_EN
@@ -87,11 +84,8 @@ es: &DEFAULT_ES
   comment_form_website_label :
   comment_btn_submit         :
   comment_btn_submitted      :
-  comment_success_title      :
   comment_success_msg        :
-  comment_error_title        :
   comment_error_msg          :
-  close_btn_label            :
   loading_label              :
 es-ES:
   <<: *DEFAULT_ES
@@ -134,11 +128,8 @@ fr: &DEFAULT_FR
   comment_form_website_label :
   comment_btn_submit         :
   comment_btn_submitted      :
-  comment_success_title      :
   comment_success_msg        :
-  comment_error_title        :
   comment_error_msg          :
-  close_btn_label            :
   loading_label              :
 fr-FR:
   <<: *DEFAULT_FR
@@ -183,11 +174,8 @@ tr: &DEFAULT_TR
   comment_form_website_label :
   comment_btn_submit         :
   comment_btn_submitted      :
-  comment_success_title      :
   comment_success_msg        :
-  comment_error_title        :
   comment_error_msg          :
-  close_btn_label            :
   loading_label              :
 tr-TR:
   <<: *DEFAULT_TR
@@ -228,11 +216,8 @@ pt: &DEFAULT_PT
   comment_form_website_label :
   comment_btn_submit         :
   comment_btn_submitted      :
-  comment_success_title      :
   comment_success_msg        :
-  comment_error_title        :
   comment_error_msg          :
-  close_btn_label            :
   loading_label              :
 pt-BR:
   <<: *DEFAULT_PT
@@ -275,11 +260,8 @@ it: &DEFAULT_IT
   comment_form_website_label :
   comment_btn_submit         :
   comment_btn_submitted      :
-  comment_success_title      :
   comment_success_msg        :
-  comment_error_title        :
   comment_error_msg          :
-  close_btn_label            :
   loading_label              :
 it-IT:
   <<: *DEFAULT_IT

diff --git a/_includes/comments-providers/staticman.html b/_includes/comments-providers/staticman.html
@@ -1,52 +1,41 @@
 {% if site.repository and site.staticman.branch %}
-  <!-- Start comment form modal -->
-  <article class="modal">
-    <h2 class="modal__title js-modal-title"></h2>
-    <div class="modal__supporting-text js-modal-text"></div>
-    <div class="modal__actions">
-      <button class="btn btn--danger js-close-modal">{{ site.data.ui-text[site.locale].close_btn_label | default: "close" }}</button>
-    </div>
-  </article>
-  <!-- End comment form modal -->
-
   <script>
     (function ($) {
     var $comments = $('.js-comments');
 
-    $('.js-form').submit(function () {
+    $('#new_comment').submit(function () {
       var form = this;
 
-      $(form).addClass('form--loading');
+      $(form).addClass('disabled');
+      $('#comment-form-submit').html('<i class="fa fa-spinner fa-spin fa-fw"></i> {{ site.data.ui-text[site.locale].loading_label | default: "Loading..." }}');
 
       $.ajax({
         type: $(this).attr('method'),
         url: $(this).attr('action'),
         data: $(this).serialize(),
         contentType: 'application/x-www-form-urlencoded',
         success: function (data) {
-          showModal('{{ site.data.ui-text[site.locale].comment_success_title | default: "Comment submitted" }}', '{{ site.data.ui-text[site.locale].comment_success_msg | default: "Thanks for your comment! It will show on the site once it has been approved." }}');
-          $(form).removeClass('form--loading');
-          $('#comment-form-submit').addClass('btn--disabled').html('{{ site.data.ui-text[site.locale].comment_btn_submitted | default: "Submitted" }}');
+          $('#comment-form-submit').html('{{ site.data.ui-text[site.locale].comment_btn_submitted | default: "Submitted" }}');
+          $('.page__comments-form .js-notice').removeClass('notice--danger');
+          $('.page__comments-form .js-notice').addClass('notice--success');
+          showAlert('{{ site.data.ui-text[site.locale].comment_success_msg | default: "Thanks for your comment! It will show on the site once it has been approved." }}');
         },
         error: function (err) {
           console.log(err);
-          showModal('{{ site.data.ui-text[site.locale].comment_error_title | default: "Error" }}', '{{ site.data.ui-text[site.locale].comment_error_msg | default: "Sorry, there was an error with your submission. Please make sure all required fields have been completed and try again." }}');
-          $(form).removeClass('form--loading');
+          $('#comment-form-submit').html('{{ site.data.ui-text[site.locale].comment_btn_submit  | default: "Submit Comment" }}');
+          $('.page__comments-form .js-notice').removeClass('notice--success');
+          $('.page__comments-form .js-notice').addClass('notice--danger');
+          showAlert('{{ site.data.ui-text[site.locale].comment_error_msg | default: "Sorry, there was an error with your submission. Please make sure all required fields have been completed and try again." }}');
+          $(form).removeClass('disabled');
         }
       });
 
       return false;
     });
 
-    $('.js-close-modal').click(function () {
-      $('body').removeClass('show-modal');
-    });
-
-    function showModal(title, message) {
-      $('.js-modal-title').text(title);
-      $('.js-modal-text').html(message);
-
-      $('body').addClass('show-modal');
+    function showAlert(message) {
+      $('.page__comments-form .js-notice').removeClass('hidden');
+      $('.page__comments-form .js-notice-text').html(message);
     }
   })(jQuery);
   </script>

diff --git a/_includes/comments.html b/_includes/comments.html
@@ -35,7 +35,7 @@ <h4 class="page__comments-title">{{ site.data.ui-text[site.locale].comments_titl
 
         <!-- Start new comment form -->
         <h4 class="page__comments-title">{{ site.data.ui-text[site.locale].comments_label | default: "Leave a Comment" }}</h4>
-        <p class="small help-block">{{ site.data.ui-text[site.locale].comment_form_info | default: "Your email address will not be published. Required fields are marked" }} <span class="required">*</span></p>
+        <p class="small">{{ site.data.ui-text[site.locale].comment_form_info | default: "Your email address will not be published. Required fields are marked" }} <span class="required">*</span></p>
         <form id="new_comment" class="page__comments-form js-form form" method="post" action="https://api.staticman.net/v1/entry/{{ site.repository }}/{{ site.staticman.branch }}">
           <div class="form__spinner">
             <i class="fa fa-spinner fa-spin fa-3x fa-fw"></i>
@@ -63,6 +63,11 @@ <h4 class="page__comments-title">{{ site.data.ui-text[site.locale].comments_labe
             <input type="hidden" name="options[slug]" value="{{ page.slug }}">
             <input type="hidden" name="fields[hidden]"/>
           </fieldset>
+          <!-- Start comment form alert messaging -->
+          <p class="hidden js-notice">
+            <strong class="js-notice-text"></strong>
+          </p>
+          <!-- End comment form alert messaging -->
           <fieldset>
             <button type="submit" id="comment-form-submit" tabindex="5" class="btn btn--large">{{ site.data.ui-text[site.locale].comment_btn_submit | default: "Submit Comment" }}</button>
           </fieldset>

diff --git a/_sass/_page.scss b/_sass/_page.scss
@@ -8,10 +8,8 @@
   margin-top: 2em;
   padding-left: 1em;
   padding-right: 1em;
-  -webkit-animation: intro 0.3s both;
-          animation: intro 0.3s both;
-  -webkit-animation-delay: 0.35s;
-          animation-delay: 0.35s;
+  animation: intro 0.3s both;
+  animation-delay: 0.35s;
 
   @include breakpoint($x-large) {
     max-width: $x-large;
@@ -113,10 +111,8 @@
   position: relative;
   margin-bottom: 2em;
   @include clearfix;
-  -webkit-animation: intro 0.3s both;
-          animation: intro 0.3s both;
-  -webkit-animation-delay: 0.25s;
-          animation-delay: 0.25s;
+  animation: intro 0.3s both;
+  animation-delay: 0.25s;
 
   &--overlay {
     position: relative;
@@ -126,10 +122,8 @@
     background-size: cover;
     background-repeat: no-repeat;
     background-position: center;
-    -webkit-animation: intro 0.3s both;
-            animation: intro 0.3s both;
-    -webkit-animation-delay: 0.25s;
-            animation-delay: 0.25s;
+    animation: intro 0.3s both;
+    animation-delay: 0.25s;
 
     a {
       color: #fff;
@@ -303,19 +297,33 @@
 .page__comments-form {
   padding: 1em;
   background: $lighter-gray;
+  transition: $global-transition;
+
+  &.disabled {
+    input,
+    button,
+    textarea,
+    label {
+      pointer-events: none;
+      cursor: not-allowed;
+      filter: alpha(opacity=65);
+      box-shadow: none;
+      opacity: 0.65;
+    }
+  }
 }
 
 .comment {
-  margin: 2em 0;
+  @include clearfix();
+  margin: 1em 0;
 
   &:not(:last-child) {
     border-bottom: 1px solid $border-color;
   }
 }
 
 .comment__avatar-wrapper {
-  display: table-cell;
-  vertical-align: top;
+  float: left;
   width: 60px;
   height: 60px;
 
@@ -339,8 +347,12 @@
 }
 
 .comment__content-wrapper {
-  display: table-cell;
-  vertical-align: top;
+  float: right;
+  width: calc(100% - 60px);
+
+  @include breakpoint($large) {
+    width: calc(100% - 100px);
+  }
 }
 
 .comment__author {