Fixed order of elements to allow for proper tabbing in comments section (#4099)

* Rearranged elements and fixed css

* Fixed unclickable comment sorting at 800<=width

---------

Co-authored-by: Wes Appler <wes@lamemakes>
This commit is contained in:
Wesley Appler 2023-11-07 18:21:12 -05:00 committed by GitHub
parent fbd8b8759c
commit 6bbf11f464
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
2 changed files with 25 additions and 16 deletions

View File

@ -24,12 +24,21 @@
.commentsTitle {
padding-block: 1em;
display: inline-block;
}
.commentSort {
float: var(--float-right-ltr-rtl-value);
}
@media only screen and (max-width: 800px) {
.commentSort {
float: none;
inline-size: fit-content;
}
}
.comment {
padding: 15px;
position: relative;

View File

@ -2,6 +2,22 @@
<ft-card
class="card"
>
<h3
v-if="commentData.length > 0 && !isLoading && showComments"
class="commentsTitle"
>
{{ $t("Comments.Comments") }}
<span
class="hideComments"
role="button"
tabindex="0"
@click="showComments = false"
@keydown.space.prevent="showComments = false"
@keydown.enter.prevent="showComments = false"
>
{{ $t("Comments.Hide Comments") }}
</span>
</h3>
<h4
v-if="canPerformInitialCommentLoading"
class="getCommentsTitle"
@ -33,22 +49,6 @@
:select-values="sortValues"
@change="handleSortChange"
/>
<h3
v-if="commentData.length > 0 && !isLoading && showComments"
class="commentsTitle"
>
{{ $t("Comments.Comments") }}
<span
class="hideComments"
role="button"
tabindex="0"
@click="showComments = false"
@keydown.space.prevent="showComments = false"
@keydown.enter.prevent="showComments = false"
>
{{ $t("Comments.Hide Comments") }}
</span>
</h3>
<div
v-if="commentData.length > 0 && showComments"
>