studio-variable/designtopack
3
0
Fork 0
Code Issues 7 Pull requests Projects Releases Packages Wiki Activity Actions

fix: comment edit ctas style + dynamic textarea rows

Browse source 
Ref #88
This commit is contained in:
Timothée Goguely 2025-01-07 16:06:47 +01:00
parent 6cc8325d2b
commit 36d6facd8d
2 changed files with 21 additions and 4 deletions
Download patch file Download diff file Expand all files Collapse all files

19
src/components/comments/Comment.vue
View file

@ -25,7 +25,7 @@
{{ comment.text }} {{ comment.text }}
</p> </p>
<textarea v-else class="comment__body" v-model="draftText"></textarea> <textarea v-else class="comment__body" v-model="draftText" :rows="Math.ceil(draftText.length / 32)"></textarea>
<footer v-if="!isEditCommentMode" class="comment__replies"> <footer v-if="!isEditCommentMode" class="comment__replies">
<p v-if="comment.replies?.length > 0"> <p v-if="comment.replies?.length > 0">
@ -54,7 +54,7 @@
</div> </div>
</footer> </footer>
<footer v-else class="flex"> <footer v-else class="comment__edit-ctas">
<input <input
type="submit" type="submit"
class="btn btn--tranparent" class="btn btn--tranparent"
@ -234,8 +234,23 @@ function cancelEditComment(event) {
.comment__date { .comment__date {
flex-shrink: 0; flex-shrink: 0;
} }
.comment__body {
width: 100%;
padding: 0;
margin-bottom: 0;
color: var(--color-grey-400);
font: inherit;
letter-spacing: inherit;
}
.comment__ctas > * { .comment__ctas > * {
--border-color: transparent; --border-color: transparent;
margin-right: var(--space-4); margin-right: var(--space-4);
} }
.comment__edit-ctas {
display: flex;
gap: var(--space-12);
}
.comment__edit-ctas > * {
flex-grow: 1;
}
</style> </style>

6
src/components/comments/Comments.vue
View file

@ -387,15 +387,17 @@ function openComment(comment) {
bottom: 5.5rem; bottom: 5.5rem;
background: #333; background: #333;
} }
#comments-container textarea { #comments-container textarea:not(.comment__body) {
position: sticky; position: sticky;
bottom: 0; bottom: 0;
margin: 0; margin: 0;
resize: none;
background: none; background: none;
padding: 0; padding: 0;
color: var(--color-white); color: var(--color-white);
} }
#comments-container textarea {
resize: none;
}
#comments-container textarea:focus { #comments-container textarea:focus {
outline: none; outline: none;
} }