N-archive/hacks-guide-minimal-mistakes-theme
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity

Replace fieldset elements with div.form-group

Browse source 
Move Staticman v2 comment logic above v1 as it will be deprecated soon.
This commit is contained in:
Michael Rose 2017-10-05 09:56:54 -04:00
parent 838c9b4788
commit 9af1e8d548
4 changed files with 698 additions and 678 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

160
_includes/comments.html
View file

@ -25,72 +25,6 @@
</script> </script>
<script async type="text/javascript" src="https://apis.google.com/js/plusone.js" onload="initComment()" /> <script async type="text/javascript" src="https://apis.google.com/js/plusone.js" onload="initComment()" />
<noscript>Please enable JavaScript to view the <a href="https://plus.google.com/">comments powered by Google+.</a></noscript>--> <noscript>Please enable JavaScript to view the <a href="https://plus.google.com/">comments powered by Google+.</a></noscript>-->
{% when "staticman" %}
<section id="static-comments">
{% if site.repository and site.staticman.branch %}
<!-- Start static comments -->
<div class="js-comments">
{% if site.data.comments[page.slug] %}
<h4 class="page__comments-title">{{ site.data.ui-text[site.locale].comments_title | default: "Comments" }}</h4>
{% assign comments = site.data.comments[page.slug] | sort %}
{% for comment in comments %}
{% assign email = comment[1].email %}
{% assign name = comment[1].name %}
{% assign url = comment[1].url %}
{% assign date = comment[1].date %}
{% assign message = comment[1].message %}
{% include comment.html index=forloop.index email=email name=name url=url date=date message=message %}
{% endfor %}
{% endif %}
</div>
<!-- End static comments -->
<!-- Start new comment form -->
<div class="page__comments-form">
<h4 class="page__comments-title">{{ site.data.ui-text[site.locale].comments_label | default: "Leave a Comment" }}</h4>
<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>
<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" style="display: none;">
<input type="hidden" name="options[slug]" value="{{ page.slug }}">
<label for="comment-form-location">Not used. Leave blank if you are a human.</label>
<input type="text" id="comment-form-location" name="fields[hidden]" autocomplete="off"/>
</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--primary btn--large">{{ site.data.ui-text[site.locale].comment_btn_submit | default: "Submit Comment" }}</button>
</fieldset>
</form>
</div>
<!-- End new comment form -->
{% endif %}
</section>
{% when "staticman_v2" %} {% when "staticman_v2" %}
<section id="static-comments"> <section id="static-comments">
{% if site.repository and site.staticman.branch %} {% if site.repository and site.staticman.branch %}
@ -122,47 +56,113 @@
<span class="sr-only">{{ site.data.ui-text[site.locale].loading_label | default: "Loading..." }}</span> <span class="sr-only">{{ site.data.ui-text[site.locale].loading_label | default: "Loading..." }}</span>
</div> </div>
<fieldset> <div class="form-group">
<label for="comment-form-message">{{ site.data.ui-text[site.locale].comment_form_comment_label | default: "Comment" }} <small class="required">*</small></label> <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> <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> <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> </div>
<fieldset> <div class="form-group">
<label for="comment-form-name">{{ site.data.ui-text[site.locale].comment_form_name_label | default: "Name" }} <small class="required">*</small></label> <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" /> <input type="text" id="comment-form-name" name="fields[name]" tabindex="2" />
</fieldset> </div>
<fieldset> <div class="form-group">
<label for="comment-form-email">{{ site.data.ui-text[site.locale].comment_form_email_label | default: "Email address" }} <small class="required">*</small></label> <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" /> <input type="email" id="comment-form-email" name="fields[email]" tabindex="3" />
</fieldset> </div>
<fieldset> <div class="form-group">
<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"/>
</fieldset> </div>
<fieldset class="hidden" style="display: none;"> <div class="form-group hidden" style="display: none;">
<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>
<input type="text" id="comment-form-location" name="fields[hidden]" autocomplete="off"/> <input type="text" id="comment-form-location" name="fields[hidden]" autocomplete="off"/>
<input type="hidden" name="options[reCaptcha][siteKey]" value="{{ site.reCaptcha.siteKey }}"> <input type="hidden" name="options[reCaptcha][siteKey]" value="{{ site.reCaptcha.siteKey }}">
<input type="hidden" name="options[reCaptcha][secret]" value="{{ site.reCaptcha.secret }}"> <input type="hidden" name="options[reCaptcha][secret]" value="{{ site.reCaptcha.secret }}">
</fieldset> </div>
<!-- Start comment form alert messaging --> <!-- Start comment form alert messaging -->
<p class="hidden js-notice"> <p class="hidden js-notice">
<strong class="js-notice-text"></strong> <strong class="js-notice-text"></strong>
</p> </p>
<!-- End comment form alert messaging --> <!-- End comment form alert messaging -->
<fieldset> <div class="form-group">
<div class="g-recaptcha" data-sitekey="{{ site.reCaptcha.siteKey }}"></div> <div class="g-recaptcha" data-sitekey="{{ site.reCaptcha.siteKey }}"></div>
</fieldset> </div>
<fieldset> <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--large">{{ site.data.ui-text[site.locale].comment_btn_submit | default: "Submit Comment" }}</button>
</fieldset> </div>
</form> </form>
</div> </div>
<!-- End new comment form --> <!-- End new comment form -->
{% if site.reCaptcha.siteKey %}<script async src="https://www.google.com/recaptcha/api.js"></script>{% endif %} {% if site.reCaptcha.siteKey %}<script async src="https://www.google.com/recaptcha/api.js"></script>{% endif %}
{% endif %} {% endif %}
</section> </section>
{% when "staticman" %}
<section id="static-comments">
{% if site.repository and site.staticman.branch %}
<!-- Start static comments -->
<div class="js-comments">
{% if site.data.comments[page.slug] %}
<h4 class="page__comments-title">{{ site.data.ui-text[site.locale].comments_title | default: "Comments" }}</h4>
{% assign comments = site.data.comments[page.slug] | sort %}
{% for comment in comments %}
{% assign email = comment[1].email %}
{% assign name = comment[1].name %}
{% assign url = comment[1].url %}
{% assign date = comment[1].date %}
{% assign message = comment[1].message %}
{% include comment.html index=forloop.index email=email name=name url=url date=date message=message %}
{% endfor %}
{% endif %}
</div>
<!-- End static comments -->
<!-- Start new comment form -->
<div class="page__comments-form">
<h4 class="page__comments-title">{{ site.data.ui-text[site.locale].comments_label | default: "Leave a Comment" }}</h4>
<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>
<span class="sr-only">{{ site.data.ui-text[site.locale].loading_label | default: "Loading..." }}</span>
</div>
<div class="form-group">
<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>
</div>
<div class="form-group">
<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" />
</div>
<div class="form-group">
<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" />
</div>
<div class="form-group">
<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"/>
</div>
<div class="form-group hidden" style="display: none;">
<input type="hidden" name="options[slug]" value="{{ page.slug }}">
<label for="comment-form-location">Not used. Leave blank if you are a human.</label>
<input type="text" id="comment-form-location" name="fields[hidden]" autocomplete="off"/>
</div>
<!-- Start comment form alert messaging -->
<p class="hidden js-notice">
<strong class="js-notice-text"></strong>
</p>
<!-- End comment form alert messaging -->
<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>
</div>
</form>
</div>
<!-- End new comment form -->
{% endif %}
</section>
{% when "custom" %} {% when "custom" %}
<section id="custom-comments"></section> <section id="custom-comments"></section>
{% endcase %} {% endcase %}

278
_sass/minimal-mistakes/_forms.scss
View file

@ -2,7 +2,7 @@
Forms Forms
========================================================================== */ ========================================================================== */
form { form {
margin: 0 0 5px 0; margin: 0 0 5px 0;
padding: 1em; padding: 1em;
background-color: $form-background-color; background-color: $form-background-color;
@ -37,26 +37,26 @@ form {
br { br {
display: none; display: none;
} }
} }
label, label,
input, input,
button, button,
select, select,
textarea { textarea {
vertical-align: baseline; vertical-align: baseline;
*vertical-align: middle; *vertical-align: middle;
} }
input, input,
button, button,
select, select,
textarea { textarea {
box-sizing: border-box; box-sizing: border-box;
font-family: $sans-serif; font-family: $sans-serif;
} }
label { label {
display: block; display: block;
margin-bottom: 0.25em; margin-bottom: 0.25em;
color: $text-color; color: $text-color;
@ -71,11 +71,11 @@ label {
select { select {
display: block; display: block;
} }
} }
input, input,
textarea, textarea,
select { select {
display: inline-block; display: inline-block;
width: 100%; width: 100%;
padding: 0.25em; padding: 0.25em;
@ -85,19 +85,19 @@ select {
border: $border-color; border: $border-color;
border-radius: $border-radius; border-radius: $border-radius;
box-shadow: $box-shadow; box-shadow: $box-shadow;
} }
.input-mini { .input-mini {
width: 60px; width: 60px;
} }
.input-small { .input-small {
width: 90px; width: 90px;
} }
input[type="image"], input[type="image"],
input[type="checkbox"], input[type="checkbox"],
input[type="radio"] { input[type="radio"] {
width: auto; width: auto;
height: auto; height: auto;
padding: 0; padding: 0;
@ -107,22 +107,22 @@ input[type="radio"] {
cursor: pointer; cursor: pointer;
border-radius: 0; border-radius: 0;
border: 0 \9; border: 0 \9;
} }
input[type="checkbox"], input[type="checkbox"],
input[type="radio"] { input[type="radio"] {
box-sizing: border-box; box-sizing: border-box;
padding: 0; padding: 0;
*width: 13px; *width: 13px;
*height: 13px; *height: 13px;
} }
input[type="image"] { input[type="image"] {
border: 0; border: 0;
box-shadow: none; box-shadow: none;
} }
input[type="file"] { input[type="file"] {
width: auto; width: auto;
padding: initial; padding: initial;
line-height: initial; line-height: initial;
@ -130,211 +130,221 @@ input[type="file"] {
background-color: transparent; background-color: transparent;
background-color: initial; background-color: initial;
box-shadow: none; box-shadow: none;
} }
input[type="button"], input[type="button"],
input[type="reset"], input[type="reset"],
input[type="submit"] { input[type="submit"] {
width: auto; width: auto;
height: auto; height: auto;
cursor: pointer; cursor: pointer;
*overflow: visible; *overflow: visible;
} }
select, select,
input[type="file"] { input[type="file"] {
*margin-top: 4px; *margin-top: 4px;
} }
select { select {
width: auto; width: auto;
background-color: #fff; background-color: #fff;
} }
select[multiple], select[multiple],
select[size] { select[size] {
height: auto; height: auto;
} }
textarea { textarea {
resize: vertical; resize: vertical;
height: auto; height: auto;
overflow: auto; overflow: auto;
vertical-align: top; vertical-align: top;
} }
input[type="hidden"] { input[type="hidden"] {
display: none; display: none;
} }
.form { .form {
position: relative; position: relative;
} }
.radio, .radio,
.checkbox { .checkbox {
padding-left: 18px; padding-left: 18px;
font-weight: normal; font-weight: normal;
} }
.radio input[type="radio"], .radio input[type="radio"],
.checkbox input[type="checkbox"] { .checkbox input[type="checkbox"] {
float: left; float: left;
margin-left: -18px; margin-left: -18px;
} }
.radio.inline, .radio.inline,
.checkbox.inline { .checkbox.inline {
display: inline-block; display: inline-block;
padding-top: 5px; padding-top: 5px;
margin-bottom: 0; margin-bottom: 0;
vertical-align: middle; vertical-align: middle;
} }
.radio.inline + .radio.inline, .radio.inline + .radio.inline,
.checkbox.inline + .checkbox.inline { .checkbox.inline + .checkbox.inline {
margin-left: 10px; margin-left: 10px;
} }
/* /*
Disabled state Disabled state
========================================================================== */ ========================================================================== */
input[disabled], input[disabled],
select[disabled], select[disabled],
textarea[disabled], textarea[disabled],
input[readonly], input[readonly],
select[readonly], select[readonly],
textarea[readonly] { textarea[readonly] {
opacity: 0.5; opacity: 0.5;
cursor: not-allowed; cursor: not-allowed;
} }
/* /*
Focus & active state Focus & active state
========================================================================== */ ========================================================================== */
input:focus, input:focus,
textarea:focus { textarea:focus {
border-color: $primary-color; border-color: $primary-color;
outline: 0; outline: 0;
outline: thin dotted \9; outline: thin dotted \9;
box-shadow: inset 0 1px 3px rgba($text-color, 0.06), 0 0 5px rgba($primary-color, 0.7); box-shadow: inset 0 1px 3px rgba($text-color, 0.06), 0 0 5px rgba($primary-color, 0.7);
} }
input[type="file"]:focus, input[type="file"]:focus,
input[type="radio"]:focus, input[type="radio"]:focus,
input[type="checkbox"]:focus, input[type="checkbox"]:focus,
select:focus { select:focus {
box-shadow: none; box-shadow: none;
} }
/* /*
Help text Help text
========================================================================== */ ========================================================================== */
.help-block, .help-block,
.help-inline { .help-inline {
color: $muted-text-color; color: $muted-text-color;
} }
.help-block { .help-block {
display: block; display: block;
margin-bottom: 1em; margin-bottom: 1em;
line-height: 1em; line-height: 1em;
} }
.help-inline { .help-inline {
display: inline-block; display: inline-block;
vertical-align: middle; vertical-align: middle;
padding-left: 5px; padding-left: 5px;
} }
/*
.form-group
========================================================================== */
.form-group {
margin-bottom: 5px;
padding: 0;
border-width: 0;
}
/* /*
.form-inline .form-inline
========================================================================== */ ========================================================================== */
.form-inline input, .form-inline input,
.form-inline textarea, .form-inline textarea,
.form-inline select { .form-inline select {
display: inline-block; display: inline-block;
margin-bottom: 0; margin-bottom: 0;
} }
.form-inline label { .form-inline label {
display: inline-block; display: inline-block;
} }
.form-inline .radio, .form-inline .radio,
.form-inline .checkbox, .form-inline .checkbox,
.form-inline .radio { .form-inline .radio {
padding-left: 0; padding-left: 0;
margin-bottom: 0; margin-bottom: 0;
vertical-align: middle; vertical-align: middle;
} }
.form-inline .radio input[type="radio"], .form-inline .radio input[type="radio"],
.form-inline .checkbox input[type="checkbox"] { .form-inline .checkbox input[type="checkbox"] {
float: left; float: left;
margin-left: 0; margin-left: 0;
margin-right: 3px; } margin-right: 3px; }
/* /*
.form-search .form-search
========================================================================== */ ========================================================================== */
.form-search input, .form-search input,
.form-search textarea, .form-search textarea,
.form-search select { .form-search select {
display: inline-block; display: inline-block;
margin-bottom: 0; margin-bottom: 0;
} }
.form-search .search-query { .form-search .search-query {
padding-left: 14px; padding-left: 14px;
padding-right: 14px; padding-right: 14px;
margin-bottom: 0; margin-bottom: 0;
border-radius: 14px; border-radius: 14px;
} }
.form-search label { .form-search label {
display: inline-block; display: inline-block;
} }
.form-search .radio, .form-search .radio,
.form-search .checkbox, .form-search .checkbox,
.form-inline .radio { .form-inline .radio {
padding-left: 0; padding-left: 0;
margin-bottom: 0; margin-bottom: 0;
vertical-align: middle; vertical-align: middle;
} }
.form-search .radio input[type="radio"], .form-search .radio input[type="radio"],
.form-search .checkbox input[type="checkbox"] { .form-search .checkbox input[type="checkbox"] {
float: left; float: left;
margin-left: 0; margin-left: 0;
margin-right: 3px; margin-right: 3px;
} }
/* /*
.form--loading .form--loading
========================================================================== */ ========================================================================== */
.form--loading:before { .form--loading:before {
content: ''; content: '';
} }
.form--loading .form__spinner { .form--loading .form__spinner {
display: block; display: block;
} }
.form:before { .form:before {
position: absolute; position: absolute;
top: 0; top: 0;
left: 0; left: 0;
@ -342,23 +352,23 @@ select:focus {
height: 100%; height: 100%;
background-color: rgba(255, 255, 255, 0.7); background-color: rgba(255, 255, 255, 0.7);
z-index: 10; z-index: 10;
} }
.form__spinner { .form__spinner {
display: none; display: none;
position: absolute; position: absolute;
top: 50%; top: 50%;
left: 50%; left: 50%;
z-index: 11; z-index: 11;
} }
/* /*
Google search form Google search form
========================================================================== */ ========================================================================== */
#goog-fixurl { #goog-fixurl {
ul { ul {
list-style: none; list-style: none;
margin-left: 0; margin-left: 0;
@ -367,9 +377,9 @@ select:focus {
list-style-type: none; list-style-type: none;
} }
} }
} }
#goog-wm-qt { #goog-wm-qt {
width: auto; width: auto;
margin-right: 10px; margin-right: 10px;
margin-bottom: 20px; margin-bottom: 20px;
@ -382,8 +392,8 @@ select:focus {
border-style: solid !important; border-style: solid !important;
border-color: $border-color; border-color: $border-color;
border-radius: $border-radius; border-radius: $border-radius;
} }
#goog-wm-sb { #goog-wm-sb {
@extend .btn; @extend .btn;
} }

160
docs/_includes/comments.html
View file

@ -25,72 +25,6 @@
</script> </script>
<script async type="text/javascript" src="https://apis.google.com/js/plusone.js" onload="initComment()" /> <script async type="text/javascript" src="https://apis.google.com/js/plusone.js" onload="initComment()" />
<noscript>Please enable JavaScript to view the <a href="https://plus.google.com/">comments powered by Google+.</a></noscript>--> <noscript>Please enable JavaScript to view the <a href="https://plus.google.com/">comments powered by Google+.</a></noscript>-->
{% when "staticman" %}
<section id="static-comments">
{% if site.repository and site.staticman.branch %}
<!-- Start static comments -->
<div class="js-comments">
{% if site.data.comments[page.slug] %}
<h4 class="page__comments-title">{{ site.data.ui-text[site.locale].comments_title | default: "Comments" }}</h4>
{% assign comments = site.data.comments[page.slug] | sort %}
{% for comment in comments %}
{% assign email = comment[1].email %}
{% assign name = comment[1].name %}
{% assign url = comment[1].url %}
{% assign date = comment[1].date %}
{% assign message = comment[1].message %}
{% include comment.html index=forloop.index email=email name=name url=url date=date message=message %}
{% endfor %}
{% endif %}
</div>
<!-- End static comments -->
<!-- Start new comment form -->
<div class="page__comments-form">
<h4 class="page__comments-title">{{ site.data.ui-text[site.locale].comments_label | default: "Leave a Comment" }}</h4>
<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>
<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" style="display: none;">
<input type="hidden" name="options[slug]" value="{{ page.slug }}">
<label for="comment-form-location">Not used. Leave blank if you are a human.</label>
<input type="text" id="comment-form-location" name="fields[hidden]" autocomplete="off"/>
</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--primary btn--large">{{ site.data.ui-text[site.locale].comment_btn_submit | default: "Submit Comment" }}</button>
</fieldset>
</form>
</div>
<!-- End new comment form -->
{% endif %}
</section>
{% when "staticman_v2" %} {% when "staticman_v2" %}
<section id="static-comments"> <section id="static-comments">
{% if site.repository and site.staticman.branch %} {% if site.repository and site.staticman.branch %}
@ -122,47 +56,113 @@
<span class="sr-only">{{ site.data.ui-text[site.locale].loading_label | default: "Loading..." }}</span> <span class="sr-only">{{ site.data.ui-text[site.locale].loading_label | default: "Loading..." }}</span>
</div> </div>
<fieldset> <div class="form-group">
<label for="comment-form-message">{{ site.data.ui-text[site.locale].comment_form_comment_label | default: "Comment" }} <small class="required">*</small></label> <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> <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> <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> </div>
<fieldset> <div class="form-group">
<label for="comment-form-name">{{ site.data.ui-text[site.locale].comment_form_name_label | default: "Name" }} <small class="required">*</small></label> <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" /> <input type="text" id="comment-form-name" name="fields[name]" tabindex="2" />
</fieldset> </div>
<fieldset> <div class="form-group">
<label for="comment-form-email">{{ site.data.ui-text[site.locale].comment_form_email_label | default: "Email address" }} <small class="required">*</small></label> <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" /> <input type="email" id="comment-form-email" name="fields[email]" tabindex="3" />
</fieldset> </div>
<fieldset> <div class="form-group">
<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"/>
</fieldset> </div>
<fieldset class="hidden" style="display: none;"> <div class="form-group hidden" style="display: none;">
<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>
<input type="text" id="comment-form-location" name="fields[hidden]" autocomplete="off"/> <input type="text" id="comment-form-location" name="fields[hidden]" autocomplete="off"/>
<input type="hidden" name="options[reCaptcha][siteKey]" value="{{ site.reCaptcha.siteKey }}"> <input type="hidden" name="options[reCaptcha][siteKey]" value="{{ site.reCaptcha.siteKey }}">
<input type="hidden" name="options[reCaptcha][secret]" value="{{ site.reCaptcha.secret }}"> <input type="hidden" name="options[reCaptcha][secret]" value="{{ site.reCaptcha.secret }}">
</fieldset> </div>
<!-- Start comment form alert messaging --> <!-- Start comment form alert messaging -->
<p class="hidden js-notice"> <p class="hidden js-notice">
<strong class="js-notice-text"></strong> <strong class="js-notice-text"></strong>
</p> </p>
<!-- End comment form alert messaging --> <!-- End comment form alert messaging -->
<fieldset> <div class="form-group">
<div class="g-recaptcha" data-sitekey="{{ site.reCaptcha.siteKey }}"></div> <div class="g-recaptcha" data-sitekey="{{ site.reCaptcha.siteKey }}"></div>
</fieldset> </div>
<fieldset> <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--large">{{ site.data.ui-text[site.locale].comment_btn_submit | default: "Submit Comment" }}</button>
</fieldset> </div>
</form> </form>
</div> </div>
<!-- End new comment form --> <!-- End new comment form -->
{% if site.reCaptcha.siteKey %}<script async src="https://www.google.com/recaptcha/api.js"></script>{% endif %} {% if site.reCaptcha.siteKey %}<script async src="https://www.google.com/recaptcha/api.js"></script>{% endif %}
{% endif %} {% endif %}
</section> </section>
{% when "staticman" %}
<section id="static-comments">
{% if site.repository and site.staticman.branch %}
<!-- Start static comments -->
<div class="js-comments">
{% if site.data.comments[page.slug] %}
<h4 class="page__comments-title">{{ site.data.ui-text[site.locale].comments_title | default: "Comments" }}</h4>
{% assign comments = site.data.comments[page.slug] | sort %}
{% for comment in comments %}
{% assign email = comment[1].email %}
{% assign name = comment[1].name %}
{% assign url = comment[1].url %}
{% assign date = comment[1].date %}
{% assign message = comment[1].message %}
{% include comment.html index=forloop.index email=email name=name url=url date=date message=message %}
{% endfor %}
{% endif %}
</div>
<!-- End static comments -->
<!-- Start new comment form -->
<div class="page__comments-form">
<h4 class="page__comments-title">{{ site.data.ui-text[site.locale].comments_label | default: "Leave a Comment" }}</h4>
<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>
<span class="sr-only">{{ site.data.ui-text[site.locale].loading_label | default: "Loading..." }}</span>
</div>
<div class="form-group">
<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>
</div>
<div class="form-group">
<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" />
</div>
<div class="form-group">
<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" />
</div>
<div class="form-group">
<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"/>
</div>
<div class="form-group hidden" style="display: none;">
<input type="hidden" name="options[slug]" value="{{ page.slug }}">
<label for="comment-form-location">Not used. Leave blank if you are a human.</label>
<input type="text" id="comment-form-location" name="fields[hidden]" autocomplete="off"/>
</div>
<!-- Start comment form alert messaging -->
<p class="hidden js-notice">
<strong class="js-notice-text"></strong>
</p>
<!-- End comment form alert messaging -->
<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>
</div>
</form>
</div>
<!-- End new comment form -->
{% endif %}
</section>
{% when "custom" %} {% when "custom" %}
<section id="custom-comments"></section> <section id="custom-comments"></section>
{% endcase %} {% endcase %}

10
docs/_sass/minimal-mistakes/_forms.scss
View file

@ -253,6 +253,16 @@ select:focus {
padding-left: 5px; padding-left: 5px;
} }
/*
.form-group
========================================================================== */
.form-group {
margin-bottom: 5px;
padding: 0;
border-width: 0;
}
/* /*
.form-inline .form-inline