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

This commit is contained in:
Michael Rose 2016-08-11 10:14:27 -04:00
parent cb26538572
commit 7aa4e3ca3d
4 changed files with 281 additions and 186 deletions

View file

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

View file

@ -4,7 +4,7 @@
<h2 class="modal__title js-modal-title"></h2> <h2 class="modal__title js-modal-title"></h2>
<div class="modal__supporting-text js-modal-text"></div> <div class="modal__supporting-text js-modal-text"></div>
<div class="modal__actions"> <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> </div>
</article> </article>
<!-- End comment form modal --> <!-- End comment form modal -->
@ -26,6 +26,7 @@
success: function (data) { 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." }}'); 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'); $(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) { error: function (err) {
console.log(err); console.log(err);

View file

@ -1,52 +1,20 @@
{% include base_path %} {% include base_path %}
<div class="page__comments"> <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 %} {% case site.comments.provider %}
{% when "disqus" %} {% when "disqus" %}
<h4 class="page__comments-title">{{ comments_label }}</h4>
<section id="disqus_thread"></section> <section id="disqus_thread"></section>
{% when "facebook" %} {% 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> <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" %} {% 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> <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" %} {% when "staticman" %}
<section id="comments"> <section id="comments">
{% if site.repository and site.staticman.branch %} {% 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 --> <!-- Start static comments -->
<div class="js-comments"> <div class="js-comments">
{% if site.data.comments[page.slug] %} {% if site.data.comments[page.slug] %}
@ -64,6 +32,42 @@
{% endif %} {% endif %}
</div> </div>
<!-- End static comments --> <!-- 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 %} {% endif %}
</section> </section>
{% when "custom" %} {% when "custom" %}

View file

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