Merge branch 'hotfix/3.4.2'
This commit is contained in:
commit
4340aa7835
7 changed files with 60 additions and 66 deletions
|
@ -1,3 +1,9 @@
|
|||
## [3.4.2](https://github.com/mmistakes/minimal-mistakes/releases/tag/3.4.2)
|
||||
|
||||
### Enhancements
|
||||
|
||||
- Improve UX of static comment forms. [#448](https://github.com/mmistakes/minimal-mistakes/issues/448)
|
||||
|
||||
## [3.4.1](https://github.com/mmistakes/minimal-mistakes/releases/tag/3.4.1)
|
||||
|
||||
### Enhancements
|
||||
|
|
|
@ -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
|
||||
|
|
|
@ -1,22 +1,13 @@
|
|||
{% 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'),
|
||||
|
@ -24,29 +15,27 @@
|
|||
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>
|
||||
|
|
|
@ -35,7 +35,7 @@
|
|||
|
||||
<!-- 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 @@
|
|||
<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>
|
||||
|
|
|
@ -97,7 +97,7 @@
|
|||
}
|
||||
|
||||
&.disabled {
|
||||
color: $light-gray;
|
||||
color: mix(#fff, $gray, 75%);
|
||||
pointer-events: none;
|
||||
cursor: not-allowed;
|
||||
}
|
||||
|
@ -131,7 +131,7 @@
|
|||
font-weight: bold;
|
||||
text-align: center;
|
||||
text-decoration: none;
|
||||
color: mix(#fff, $gray, 25%);
|
||||
color: mix(#fff, $gray, 50%);
|
||||
border: 1px solid $light-gray;
|
||||
border-radius: $border-radius;
|
||||
|
||||
|
@ -151,7 +151,7 @@
|
|||
}
|
||||
|
||||
&.disabled {
|
||||
color: $light-gray;
|
||||
color: mix(#fff, $gray, 75%);
|
||||
pointer-events: none;
|
||||
cursor: not-allowed;
|
||||
}
|
||||
|
|
|
@ -8,9 +8,7 @@
|
|||
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;
|
||||
|
||||
@include breakpoint($x-large) {
|
||||
|
@ -113,9 +111,7 @@
|
|||
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;
|
||||
|
||||
&--overlay {
|
||||
|
@ -126,9 +122,7 @@
|
|||
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;
|
||||
|
||||
a {
|
||||
|
@ -303,10 +297,25 @@
|
|||
.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;
|
||||
|
@ -314,8 +323,7 @@
|
|||
}
|
||||
|
||||
.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 {
|
||||
|
|
|
@ -1,6 +1,6 @@
|
|||
{
|
||||
"name": "minimal-mistakes",
|
||||
"version": "3.4.1",
|
||||
"version": "3.4.2",
|
||||
"description": "Minimal Mistakes Jekyll theme npm build scripts",
|
||||
"repository": {
|
||||
"type": "git",
|
||||
|
|
Loading…
Reference in a new issue