Browse Source

Convert comment label buttons from <a> to <button>

The post buttons (Reply, Delete, etc.) were converted to <button> quite
a while ago, and these ones should be switched over for the same reasons
as those were (accessibility, more semantic), as well as being able to
support the error messages from Intercooler.
merge-requests/85/head
Deimos 5 years ago
parent
commit
8bfe394744
  1. 9
      tildes/scss/modules/_btn.scss
  2. 6
      tildes/scss/modules/_comment.scss
  3. 2
      tildes/static/js/behaviors/comment-label-button.js
  4. 4
      tildes/tildes/templates/macros/comments.jinja2

9
tildes/scss/modules/_btn.scss

@ -58,18 +58,17 @@
margin: 0 0.4rem; margin: 0 0.4rem;
padding: 0.2rem; padding: 0.2rem;
background: none;
border: 0;
font-size: 0.6rem; font-size: 0.6rem;
font-weight: bold; font-weight: bold;
text-transform: capitalize; text-transform: capitalize;
cursor: pointer; cursor: pointer;
&.btn {
height: 1rem;
text-transform: capitalize;
}
&.btn-used { &.btn-used {
height: 1rem;
border: 1px solid; border: 1px solid;
} }
} }

6
tildes/scss/modules/_comment.scss

@ -133,10 +133,16 @@
margin: 0; margin: 0;
padding: 0 1rem; padding: 0 1rem;
justify-content: space-between; justify-content: space-between;
align-items: center;
@media (min-width: $size-md) { @media (min-width: $size-md) {
justify-content: left; justify-content: left;
} }
// Wrap error message onto a new line
.text-status-message {
min-width: 100%;
}
} }
.comment-label-count { .comment-label-count {

2
tildes/static/js/behaviors/comment-label-button.js

@ -24,7 +24,7 @@ $.onmount("[data-js-comment-label-button]", function() {
var labeltemplate = document.querySelector("#comment-label-options"); var labeltemplate = document.querySelector("#comment-label-options");
var clone = document.importNode(labeltemplate.content, true); var clone = document.importNode(labeltemplate.content, true);
var options = clone.querySelectorAll("a");
var options = clone.querySelectorAll("button");
for (var i = 0; i < options.length; i++) { for (var i = 0; i < options.length; i++) {
var label = options[i]; var label = options[i];

4
tildes/tildes/templates/macros/comments.jinja2

@ -246,12 +246,12 @@
<menu class="comment-label-buttons"> <menu class="comment-label-buttons">
{% for label in options if request.user.is_label_available(label) %} {% for label in options if request.user.is_label_available(label) %}
<li> <li>
<a class="btn-comment-label btn-comment-label-{{ label.name|lower }}"
<button class="btn-comment-label btn-comment-label-{{ label.name|lower }}"
data-js-label-name="{{ label.name|lower }}" data-js-label-name="{{ label.name|lower }}"
{% if label.reason_prompt %} {% if label.reason_prompt %}
data-js-reason-prompt="{{ label.reason_prompt }}" data-js-reason-prompt="{{ label.reason_prompt }}"
{% endif %} {% endif %}
>{{ label.name|lower }}{% if label.reason_prompt %}...{% endif %}</a>
>{{ label.name|lower }}{% if label.reason_prompt %}...{% endif %}</button>
</li> </li>
{% endfor %} {% endfor %}
</menu> </menu>

Loading…
Cancel
Save