Browse Source

Convert post buttons from <a> to <button>

This is a change I've been meaning to make for a while anyway for better
semantic HTML and accessibility, and it ended up being necessary to be
able to support some other updates as well.
merge-requests/64/head
Deimos 6 years ago
parent
commit
e2c116b185
  1. 46
      tildes/scss/modules/_btn.scss
  2. 2
      tildes/scss/modules/_comment.scss
  3. 45
      tildes/scss/modules/_post-buttons.scss
  4. 1
      tildes/scss/styles.scss
  5. 24
      tildes/scss/themes/_theme_base.scss
  6. 2
      tildes/static/js/behaviors/comment-label-button.js
  7. 2
      tildes/static/js/behaviors/comment-reply-button.js
  8. 34
      tildes/tildes/templates/macros/comments.jinja2
  9. 54
      tildes/tildes/templates/topic.jinja2

46
tildes/scss/modules/_btn.scss

@ -68,3 +68,49 @@
border: 1px solid;
}
}
.btn-post {
display: flex;
flex-wrap: wrap;
align-items: center;
justify-content: space-between;
margin: 0;
padding: 0.2rem;
// The buttons don't need to be spaced widely on a desktop
@media (min-width: $size-md) {
justify-content: left;
}
li {
margin-top: 0;
}
// Combined with flex-wrap: wrap, this should put any form on its own line
form {
min-width: 100%;
}
}
.btn-post-action {
@include min-touch-size;
display: flex;
padding: 0.2rem 0.4rem;
background: none;
border: 0;
justify-content: center;
align-items: center;
font-weight: bold;
font-size: 0.6rem;
line-height: 0.6rem;
cursor: pointer;
}
.btn-post-action-used {
text-decoration: underline;
}

2
tildes/scss/modules/_comment.scss

@ -167,7 +167,7 @@
.comment-tree-replies,
.comment-text,
.comment-votes,
.post-buttons {
.btn-post {
display: none;
}

45
tildes/scss/modules/_post-buttons.scss

@ -1,45 +0,0 @@
// Copyright (c) 2018 Tildes contributors <code@tildes.net>
// SPDX-License-Identifier: AGPL-3.0-or-later
.post-buttons {
display: flex;
flex-wrap: wrap;
align-items: center;
justify-content: space-between;
margin: 0;
padding: 0.2rem;
// The buttons don't need to be spaced widely on a desktop
@media (min-width: $size-md) {
justify-content: left;
}
li {
margin-top: 0;
}
// Combined with flex-wrap: wrap, this should put any form on its own line
form {
min-width: 100%;
}
}
.post-button {
@include min-touch-size;
display: flex;
padding: 0.2rem 0.4rem;
justify-content: center;
align-items: center;
font-weight: bold;
font-size: 0.6rem;
line-height: 0.6rem;
cursor: pointer;
}
.post-button-used {
text-decoration: underline;
}

1
tildes/scss/styles.scss

@ -23,7 +23,6 @@
@import 'modules/nav';
@import 'modules/pagination';
@import 'modules/post';
@import 'modules/post-buttons';
@import 'modules/settings';
@import 'modules/sidebar';
@import 'modules/site-footer';

24
tildes/scss/themes/_theme_base.scss

@ -163,6 +163,18 @@
}
}
.btn-post-action {
color: map-get($theme, "foreground-secondary");
&:hover {
color: map-get($theme, "foreground-extreme");
}
}
.btn-post-action-used {
color: map-get($theme, "button-used");
}
.btn-comment-label-exemplary {
@include labelbutton(map-get($theme, "comment-label-exemplary"));
}
@ -335,18 +347,6 @@
}
}
.post-button {
color: map-get($theme, "foreground-secondary");
&:hover {
color: map-get($theme, "foreground-extreme");
}
}
.post-button-used {
color: map-get($theme, "button-used");
}
.sidebar-controls {
background-color: map-get($theme, "background-secondary");
}

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

@ -76,7 +76,7 @@ $.onmount('[data-js-comment-label-button]', function() {
// update Intercooler so it knows about these new elements
Intercooler.processNodes(clone);
$comment.find(".post-buttons").first().after(clone);
$comment.find(".btn-post").first().after(clone);
});
});

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

@ -72,7 +72,7 @@ $.onmount('[data-js-comment-reply-button]', function() {
$(cancelButton).on('click', function (event) {
// re-enable click/hover events on the reply button
$(this).parents('.comment').first()
.find('.post-button[name=reply]').first()
.find('.btn-post-action[name=reply]').first()
.css('pointer-events', 'auto');
});
buttonDiv.appendChild(cancelButton);

34
tildes/tildes/templates/macros/comments.jinja2

@ -161,10 +161,10 @@
</div>
{% endif %}
<menu class="post-buttons">
<menu class="btn-post">
{% if request.has_permission('vote', comment) %}
{% if comment.user_voted is defined and comment.user_voted %}
<li><a class="post-button post-button-used" name="unvote"
<li><button class="btn-post-action btn-post-action-used" name="unvote"
data-ic-delete-from="{{ request.route_url(
'ic_comment_vote',
comment_id36=comment.comment_id36,
@ -173,7 +173,7 @@
data-ic-replace-target="true"
>Voted
{% else %}
<li><a class="post-button" name="vote"
<li><button class="btn-post-action" name="vote"
data-ic-put-to="{{ request.route_url(
'ic_comment_vote',
comment_id36=comment.comment_id36,
@ -185,26 +185,26 @@
{% if comment.num_votes > 0 %}
({{ comment.num_votes }})
{% endif %}
</a></li>
</button></li>
{% endif %}
{% if request.has_permission('label', comment) %}
<li><a class="post-button" name="label" data-js-comment-label-button>Label</a></li>
<li><button class="btn-post-action" name="label" data-js-comment-label-button>Label</button></li>
{% endif %}
{% if request.has_permission('edit', comment) %}
<li><a class="post-button" name="edit"
<li><button class="btn-post-action" name="edit"
data-ic-get-from="{{ request.route_url(
'ic_comment',
comment_id36=comment.comment_id36,
) }}"
data-ic-target="#comment-{{ comment.comment_id36 }} .comment-itself:first .comment-text"
data-ic-scroll-to-target="true"
>Edit</a></li>
>Edit</button></li>
{% endif %}
{% if request.has_permission('delete', comment) %}
<li><a class="post-button"
<li><button class="btn-post-action"
data-ic-delete-from="{{ request.route_url(
'ic_comment',
comment_id36=comment.comment_id36,
@ -212,12 +212,12 @@
data-ic-target="#comment-{{ comment.comment_id36 }} .comment-itself:first"
data-ic-replace-target="true"
data-ic-confirm="Delete this comment? This cannot be undone."
>Delete</a></li>
>Delete</button></li>
{% endif %}
{% if request.has_permission('bookmark', comment) %}
{% if comment.bookmark_created_time %}
<li><a class="post-button post-button-used" name="unbookmark"
<li><button class="btn-post-action btn-post-action-used" name="unbookmark"
data-ic-delete-from="{{ request.route_url(
'ic_comment_bookmark',
comment_id36=comment.comment_id36,
@ -226,7 +226,7 @@
data-ic-replace-target="true"
>Bookmarked
{% else %}
<li><a class="post-button" name="bookmark"
<li><button class="btn-post-action" name="bookmark"
data-ic-put-to="{{ request.route_url(
'ic_comment_bookmark',
comment_id36=comment.comment_id36,
@ -235,35 +235,35 @@
data-ic-replace-target="true"
>Bookmark
{% endif %}
</a></li>
</button></li>
{% endif %}
{% if request.has_permission("remove", comment) %}
<li>
{% if not comment.is_removed %}
<a class="post-button"
<button class="btn-post-action"
data-ic-put-to="{{ request.route_url(
'ic_comment_remove',
comment_id36=comment.comment_id36,
) }}"
data-ic-replace-target="true"
data-ic-confirm="Remove this comment?"
>Remove</a>
>Remove</button>
{% else %}
<a class="post-button"
<button class="btn-post-action"
data-ic-delete-from="{{ request.route_url(
'ic_comment_remove',
comment_id36=comment.comment_id36,
) }}"
data-ic-replace-target="true"
data-ic-confirm="Un-remove this comment?"
>Un-remove</a>
>Un-remove</button>
{% endif %}
</li>
{% endif %}
{% if request.has_permission('reply', comment) %}
<li><a class="post-button" name="reply" data-js-comment-reply-button>Reply</a></li>
<li><button class="btn-post-action" name="reply" data-js-comment-reply-button>Reply</button></li>
{% endif %}
</menu>
{% endif %}

54
tildes/tildes/templates/topic.jinja2

@ -67,81 +67,81 @@
{% endif %}
{% if request.has_any_permission(('edit', 'delete', 'tag', 'lock', 'move', 'edit_title', 'remove', 'bookmark'), topic) %}
<menu class="post-buttons">
<menu class="btn-post">
{% if request.has_permission('edit', topic) %}
<li><a class="post-button" name="edit"
<li><button class="btn-post-action" name="edit"
data-ic-get-from="{{ request.route_url(
'ic_topic',
topic_id36=topic.topic_id36,
) }}"
data-ic-target=".topic-full .topic-full-text"
data-ic-scroll-to-target="true"
>Edit</a></li>
>Edit</button></li>
{% endif %}
{% if request.has_permission('tag', topic) %}
<li><a class="post-button" name="tag"
<li><button class="btn-post-action" name="tag"
data-ic-get-from="{{ request.route_url(
'ic_topic_tags',
topic_id36=topic.topic_id36,
) }}"
data-ic-swap-style="replace"
data-ic-target=".topic-full .post-buttons:first + .post-buttons-settings"
>Tag</a></li>
data-ic-target=".topic-full .btn-post:first + .btn-post-settings"
>Tag</button></li>
{% endif %}
{% if request.has_permission('delete', topic) %}
<li><a class="post-button" name="delete"
<li><button class="btn-post-action" name="delete"
data-ic-delete-from="{{ request.route_url(
'ic_topic',
topic_id36=topic.topic_id36,
) }}"
data-ic-confirm="Delete this topic? This cannot be undone."
>Delete</a></li>
>Delete</button></li>
{% endif %}
{% if request.has_permission('move', topic) %}
<li><a class="post-button" name="move"
<li><button class="btn-post-action" name="move"
data-ic-get-from="{{ request.route_url(
'ic_topic_group',
topic_id36=topic.topic_id36,
) }}"
data-ic-swap-style="replace"
data-ic-target=".topic-full .post-buttons:first + .post-buttons-settings"
>Move</a>
data-ic-target=".topic-full .btn-post:first + .btn-post-settings"
>Move</button>
{% endif %}
{% if request.has_permission('edit_title', topic) %}
<li><a class="post-button" name="edit-title"
<li><button class="btn-post-action" name="edit-title"
data-ic-get-from="{{ request.route_url(
'ic_topic_title',
topic_id36=topic.topic_id36,
) }}"
data-ic-swap-style="replace"
data-ic-target=".topic-full .post-buttons:first + .post-buttons-settings"
>Edit title</a>
data-ic-target=".topic-full .btn-post:first + .btn-post-settings"
>Edit title</button>
{% endif %}
{% if request.has_permission('lock', topic) %}
<li>
{% if not topic.is_locked %}
<a class="post-button"
<button class="btn-post-action"
data-ic-put-to="{{ request.route_url(
'ic_topic_lock',
topic_id36=topic.topic_id36,
) }}"
data-ic-replace-target="true"
data-ic-confirm="Lock this topic?"
>Lock</a>
>Lock</button>
{% else %}
<a class="post-button"
<button class="btn-post-action"
data-ic-delete-from="{{ request.route_url(
'ic_topic_lock',
topic_id36=topic.topic_id36,
) }}"
data-ic-replace-target="true"
data-ic-confirm="Unlock this topic?"
>Unlock</a>
>Unlock</button>
{% endif %}
</li>
{% endif %}
@ -149,21 +149,21 @@
{% if request.has_permission('bookmark', topic) %}
<li>
{% if not topic.bookmark_created_time %}
<a class="post-button"
<button class="btn-post-action"
data-ic-put-to="{{ request.route_url(
'ic_topic_bookmark',
topic_id36=topic.topic_id36,
) }}"
data-ic-replace-target="true"
>Bookmark</a>
>Bookmark</button>
{% else %}
<a class="post-button"
<button class="btn-post-action"
data-ic-delete-from="{{ request.route_url(
'ic_topic_bookmark',
topic_id36=topic.topic_id36,
) }}"
data-ic-replace-target="true"
>Unbookmark</a>
>Unbookmark</button>
{% endif %}
</li>
{% endif %}
@ -171,28 +171,28 @@
{% if request.has_permission("remove", topic) %}
<li>
{% if not topic.is_removed %}
<a class="post-button"
<button class="btn-post-action"
data-ic-put-to="{{ request.route_url(
'ic_topic_remove',
topic_id36=topic.topic_id36,
) }}"
data-ic-replace-target="true"
data-ic-confirm="Remove this topic?"
>Remove</a>
>Remove</button>
{% else %}
<a class="post-button"
<button class="btn-post-action"
data-ic-delete-from="{{ request.route_url(
'ic_topic_remove',
topic_id36=topic.topic_id36,
) }}"
data-ic-replace-target="true"
data-ic-confirm="Un-remove this topic?"
>Un-remove</a>
>Un-remove</button>
{% endif %}
</li>
{% endif %}
</menu>
<div class="post-buttons-settings"></div>
<div class="btn-post-settings"></div>
{% endif %}
{% if topic.is_locked %}

Loading…
Cancel
Save