Fix staticman UI to work with bootstrap 4; fixes #679 (#681)

This commit is contained in:
Dean Attali 2020-07-13 01:09:27 -04:00 committed by GitHub
parent 70717c9a6a
commit 68a0e505bf
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
2 changed files with 19 additions and 19 deletions

View File

@ -39,7 +39,7 @@
<label for="comment-form-url">{{ site.data.ui-text[site.locale].comment_form_website_label | default: "Website (optional)" }}</label> <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"/> <input type="url" id="comment-form-url" name="fields[url]" tabindex="4"/>
</div> </div>
<div class="form-group hidden" style="display: none;"> <div class="form-group d-none" style="display: none;">
<input type="hidden" name="options[origin]" value="{{ page.url | absolute_url }}"> <input type="hidden" name="options[origin]" value="{{ page.url | absolute_url }}">
<input type="hidden" name="options[slug]" value="{{ page.slug }}"> <input type="hidden" name="options[slug]" value="{{ page.slug }}">
<label for="comment-form-location">Not used. Leave blank if you are a human.</label> <label for="comment-form-location">Not used. Leave blank if you are a human.</label>
@ -48,9 +48,9 @@
{% if site.staticman.reCaptcha.secret %}<input type="hidden" name="options[reCaptcha][secret]" value="{{ site.staticman.reCaptcha.secret }}">{% endif %} {% if site.staticman.reCaptcha.secret %}<input type="hidden" name="options[reCaptcha][secret]" value="{{ site.staticman.reCaptcha.secret }}">{% endif %}
</div> </div>
<!-- Start comment form alert messaging --> <!-- Start comment form alert messaging -->
<p class="hidden js-notice"> <p class="d-none js-notice alert">
<strong class="js-notice-text-success hidden">{{ 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." }}</strong> <strong class="js-notice-text-success d-none">{{ 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." }}</strong>
<strong class="js-notice-text-failure hidden">{{ 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." }}</strong> <strong class="js-notice-text-failure d-none">{{ 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." }}</strong>
</p> </p>
<!-- End comment form alert messaging --> <!-- End comment form alert messaging -->
{% if site.staticman.reCaptcha.siteKey %} {% if site.staticman.reCaptcha.siteKey %}
@ -59,8 +59,8 @@
</div> </div>
{% endif %} {% endif %}
<div class="form-group"> <div class="form-group">
<button type="submit" id="comment-form-submit" tabindex="5" class="btn btn--primary btn--large">{{ site.data.ui-text[site.locale].comment_btn_submit | default: "Submit Comment" }}</button> <button type="submit" id="comment-form-submit" tabindex="5" class="btn btn-primary btn-lg">{{ site.data.ui-text[site.locale].comment_btn_submit | default: "Submit Comment" }}</button>
<button type="submit" id="comment-form-submitted" tabindex="5" class="btn btn--primary btn--large hidden" disabled>{{ site.data.ui-text[site.locale].comment_btn_submitted | default: "Submitted" }}</button> <button type="submit" id="comment-form-submitted" tabindex="5" class="btn btn-primary btn-lg d-none" disabled>{{ site.data.ui-text[site.locale].comment_btn_submitted | default: "Submitted" }}</button>
</div> </div>
</form> </form>
</div> </div>

View File

@ -21,18 +21,18 @@ layout: null
data: $(this).serialize(), data: $(this).serialize(),
contentType: 'application/x-www-form-urlencoded', contentType: 'application/x-www-form-urlencoded',
success: function (data) { success: function (data) {
$('#comment-form-submit').addClass('hidden'); $('#comment-form-submit').addClass('d-none');
$('#comment-form-submitted').removeClass('hidden'); $('#comment-form-submitted').removeClass('d-none');
$('.page__comments-form .js-notice').removeClass('notice--danger'); $('.page__comments-form .js-notice').removeClass('alert-danger');
$('.page__comments-form .js-notice').addClass('notice--success'); $('.page__comments-form .js-notice').addClass('alert-success');
showAlert('success'); showAlert('success');
}, },
error: function (err) { error: function (err) {
console.log(err); console.log(err);
$('#comment-form-submitted').addClass('hidden'); $('#comment-form-submitted').addClass('d-none');
$('#comment-form-submit').removeClass('hidden'); $('#comment-form-submit').removeClass('d-none');
$('.page__comments-form .js-notice').removeClass('notice--success'); $('.page__comments-form .js-notice').removeClass('alert-success');
$('.page__comments-form .js-notice').addClass('notice--danger'); $('.page__comments-form .js-notice').addClass('alert-danger');
showAlert('failure'); showAlert('failure');
$(form).removeClass('disabled'); $(form).removeClass('disabled');
} }
@ -42,13 +42,13 @@ layout: null
}); });
function showAlert(message) { function showAlert(message) {
$('.page__comments-form .js-notice').removeClass('hidden'); $('.page__comments-form .js-notice').removeClass('d-none');
if (message == 'success') { if (message == 'success') {
$('.page__comments-form .js-notice-text-success').removeClass('hidden'); $('.page__comments-form .js-notice-text-success').removeClass('d-none');
$('.page__comments-form .js-notice-text-failure').addClass('hidden'); $('.page__comments-form .js-notice-text-failure').addClass('d-none');
} else { } else {
$('.page__comments-form .js-notice-text-success').addClass('hidden'); $('.page__comments-form .js-notice-text-success').addClass('d-none');
$('.page__comments-form .js-notice-text-failure').removeClass('hidden'); $('.page__comments-form .js-notice-text-failure').removeClass('d-none');
} }
} }
})(jQuery); })(jQuery);