Move comments above form elements and add missing English UI text strings

_data/ui-text.yml

@@ -28,10 +28,20 @@ en: &DEFAULT_EN
   email_label                : "Email"
   recent_posts               : "Recent Posts"
   undefined_wpm              : "Undefined parameter words_per_minute at _config.yml"
+  comment_form_info          : "Your email address will not be published. Required fields are marked"
+  comment_form_comment_label : "Comment"
+  comment_form_md_info       : "Markdown is supported."
+  comment_form_name_label    : "Name"
+  comment_form_email_label   : "Email address"
+  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   : "I Am Error"
+  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
 en-CA:
@@ -59,6 +69,7 @@ es: &DEFAULT_ES
   categories_label           : "Categorías:"
   date_label                 : "Actualizado:"
   comments_label             : "Comentar"
+  comments_title             :
   more_label                 : "Ver más"
   related_label              : "Podrías ver también"
   follow_label               : "Seguir:"
@@ -68,6 +79,20 @@ es: &DEFAULT_ES
   email_label                : "Email"
   recent_posts               : "Entradas recientes"
   undefined_wpm              : "Parametro words_per_minute (Palabras por minuto) no definido en _config.yml"
+  comment_form_info          :
+  comment_form_comment_label :
+  comment_form_md_info       :
+  comment_form_name_label    :
+  comment_form_email_label   :
+  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
 es-CO:
@@ -91,6 +116,7 @@ fr: &DEFAULT_FR
   categories_label           : "Catégories :"
   date_label                 : "Mis à jour :"
   comments_label             : "Laisser un commentaire"
+  comments_title             :
   more_label                 : "Lire plus"
   related_label              : "Vous pourriez aimer"
   follow_label               : "Suivez moi"
@@ -100,6 +126,20 @@ fr: &DEFAULT_FR
   email_label                : "Email"
   recent_posts               : "Posts récents"
   undefined_wpm              : "Le paramètre words_per_minute n'est pas défini dans _config.yml"
+  comment_form_info          :
+  comment_form_comment_label :
+  comment_form_md_info       :
+  comment_form_name_label    :
+  comment_form_email_label   :
+  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
 fr-BE:
@@ -125,6 +165,7 @@ tr: &DEFAULT_TR
   categories_label           : "Kategoriler:"
   date_label                 : "Güncelleme tarihi:"
   comments_label             : "Yorum yapın"
+  comments_title             :
   more_label                 : "Daha fazlasını öğrenin"
   related_label              : "Bunlar ilginizi çekebilir:"
   follow_label               : "Takip et:"
@@ -134,6 +175,20 @@ tr: &DEFAULT_TR
   email_label                : "E-posta"
   recent_posts               : "Son yazılar"
   undefined_wpm              : "_config.yml dosyasında tanımlanmamış words_per_minute parametresi"
+  comment_form_info          :
+  comment_form_comment_label :
+  comment_form_md_info       :
+  comment_form_name_label    :
+  comment_form_email_label   :
+  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
 
@@ -155,6 +210,7 @@ pt: &DEFAULT_PT
   categories_label           : "Categorias:"
   date_label                 : "Atualizado em:"
   comments_label             : "Deixe um comentário"
+  comments_title             :
   more_label                 : "Aprenda Mais"
   related_label              : "Você Talvez Goste Também"
   follow_label               : "Acompanhe em"
@@ -164,6 +220,20 @@ pt: &DEFAULT_PT
   email_label                : "Email"
   recent_posts               : "Postagens recentes"
   undefined_wpm              : "Parâmetro indefinido em word_per_minute no _config.yml"
+  comment_form_info          :
+  comment_form_comment_label :
+  comment_form_md_info       :
+  comment_form_name_label    :
+  comment_form_email_label   :
+  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
 pt-PT:
@@ -187,6 +257,7 @@ it: &DEFAULT_IT
   categories_label           : "Categorie:"
   date_label                 : "Aggiornato:"
   comments_label             : "Scrivi un commento"
+  comments_title             :
   more_label                 : "Scopri di più"
   related_label              : "Potrebbe Piacerti Anche"
   follow_label               : "Segui:"
@@ -196,6 +267,20 @@ it: &DEFAULT_IT
   email_label                : "Email"
   recent_posts               : "Articoli Recenti"
   undefined_wpm              : "Parametro words_per_minute non definito in _config.yml"
+  comment_form_info          :
+  comment_form_comment_label :
+  comment_form_md_info       :
+  comment_form_name_label    :
+  comment_form_email_label   :
+  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
 

_includes/comments-providers/staticman.html

@@ -4,7 +4,7 @@
     <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">Close</button>
+      <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 -->
@@ -26,6 +26,7 @@
         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" }}');
         },
         error: function (err) {
           console.log(err);

_includes/comments.html

@@ -1,52 +1,20 @@
 {% include base_path %}
 
 <div class="page__comments">
-  <h4 class="page__comments-title">{{ site.data.ui-text[site.locale].comments_label | default: "Leave a Comment" }}</h4>
+  {% capture comments_label %}{{ site.data.ui-text[site.locale].comments_label | default: "Comments" }}{% endcapture %}
   {% case site.comments.provider %}
   {% when "disqus" %}
+    <h4 class="page__comments-title">{{ comments_label }}</h4>
     <section id="disqus_thread"></section>
   {% when "facebook" %}
+    <h4 class="page__comments-title">{{ comments_label }}</h4>
     <section class="fb-comments" data-href="{{ base_path }}{{ page.url }}" data-mobile="true" data-num-posts="{{ site.comments.facebook.num_posts | default: 5 }}" data-width="100%" data-colorscheme="{{ site.comments.facebook.colorscheme | default: 'light' }}"></section>
   {% when "google-plus" %}
+    <h4 class="page__comments-title">{{ comments_label }}</h4>
     <section class="g-comments" data-href="{{ base_path }}{{ page.url }}" data-first_party_property="BLOGGER" data-view_type="FILTERED_POSTMOD">Loading Google+ Comments ...</section>
   {% when "staticman" %}
     <section id="comments">
       {% if site.repository and site.staticman.branch %}
-        <!-- Start new comment form -->
-        <form class="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>
-            <span class="sr-only">Loading...</span>
-          </div>
-
-          <fieldset>
-            <label for="comment-form-name">Your name <small class="required">*</small></label>
-            <input type="text" id="comment-form-name" name="fields[name]" tabindex="1" />
-          </fieldset>
-          <fieldset>
-            <label for="comment-form-email">Email address <small class="required">*</small></label>
-            <input type="email" id="comment-form-email" name="fields[email]" tabindex="2" />
-            <div class="small help-block">Your email address will remain private and won't be shared with anyone.</div>
-          </fieldset>
-          <fieldset>
-            <label for="comment-form-url">Website <small>(optional)</small></label>
-            <input type="url" id="comment-form-url" name="fields[url]" tabindex="3"/>
-          </fieldset>
-          <fieldset>
-            <label for="comment-form-message">Your comment <small class="required">*</small></label>
-            <textarea type="text" rows="3" id="comment-form-message" name="fields[message]" tabindex="4"></textarea>
-            <div class="small help-block"><a href="https://daringfireball.net/projects/markdown/">Markdown</a> is supported.</div>
-          </fieldset>
-          <fieldset class="hidden">
-            <input type="hidden" name="options[slug]" value="{{ page.slug }}">
-            <input type="hidden" name="fields[hidden]"/>
-          </fieldset>
-          <fieldset>
-            <button class="btn btn--large">Submit</button>
-          </fieldset>
-        </form>
-        <!-- End new comment form -->
-
         <!-- Start static comments -->
         <div class="js-comments">
           {% if site.data.comments[page.slug] %}
@@ -64,6 +32,42 @@
           {% endif %}
         </div>
         <!-- End static comments -->
+
+        <!-- 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>
+        <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>
+            <span class="sr-only">{{ site.data.ui-text[site.locale].loading_label | default: "Loading..." }}</span>
+          </div>
+
+          <fieldset>
+            <label for="comment-form-message">{{ site.data.ui-text[site.locale].comment_form_comment_label | default: "Comment" }} <small class="required">*</small></label>
+            <textarea type="text" rows="3" id="comment-form-message" name="fields[message]" tabindex="1"></textarea>
+            <div class="small help-block"><a href="https://daringfireball.net/projects/markdown/">{{ site.data.ui-text[site.locale].comment_form_md_info | default: "Markdown is supported." }}</a></div>
+          </fieldset>
+          <fieldset>
+            <label for="comment-form-name">{{ site.data.ui-text[site.locale].comment_form_name_label | default: "Name" }} <small class="required">*</small></label>
+            <input type="text" id="comment-form-name" name="fields[name]" tabindex="2" />
+          </fieldset>
+          <fieldset>
+            <label for="comment-form-email">{{ site.data.ui-text[site.locale].comment_form_email_label | default: "Email address" }} <small class="required">*</small></label>
+            <input type="email" id="comment-form-email" name="fields[email]" tabindex="3" />
+          </fieldset>
+          <fieldset>
+            <label for="comment-form-url">{{ site.data.ui-text[site.locale].comment_form_website_label | default: "Website (optional)" }}</label>
+            <input type="url" id="comment-form-url" name="fields[url]" tabindex="4"/>
+          </fieldset>
+          <fieldset class="hidden">
+            <input type="hidden" name="options[slug]" value="{{ page.slug }}">
+            <input type="hidden" name="fields[hidden]"/>
+          </fieldset>
+          <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>
+        </form>
+        <!-- End new comment form -->
       {% endif %}
     </section>
   {% when "custom" %}

_sass/_page.scss

@@ -300,6 +300,11 @@
   text-transform: uppercase;
 }
 
+.page__comments-form {
+  padding: 1em;
+  background: $lighter-gray;
+}
+
 .comment {
   margin: 2em 0;