Update comments replies markup and style
This commit is contained in:
parent
ac337a03b4
commit
badcc46358
5 changed files with 93 additions and 11 deletions
|
|
@ -5,6 +5,12 @@
|
|||
.text-white {
|
||||
color: var(--color-white);
|
||||
}
|
||||
.text-white-50 {
|
||||
color: var(--color-white-50);
|
||||
}
|
||||
.text-white-70 {
|
||||
color: var(--color-white-70);
|
||||
}
|
||||
.text-grey-200 {
|
||||
color: var(--color-grey-200);
|
||||
}
|
||||
|
|
@ -41,6 +47,9 @@
|
|||
.bg-white-10 {
|
||||
background-color: var(--color-white-10);
|
||||
}
|
||||
.bg-white-20 {
|
||||
background-color: var(--color-white-20);
|
||||
}
|
||||
|
||||
.bg-grey-50 {
|
||||
background-color: var(--color-grey-50);
|
||||
|
|
|
|||
|
|
@ -20,6 +20,9 @@
|
|||
flex-direction: column-reverse;
|
||||
}
|
||||
|
||||
.justify-start {
|
||||
justify-content: flex-start;
|
||||
}
|
||||
.justify-center {
|
||||
justify-content: center;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -16,6 +16,7 @@
|
|||
--icon-summary: url("data:image/svg+xml,%3Csvg width='20' height='20' viewBox='0 0 20 20' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M1.875 6.0625L9.5625 13.75C9.61861 13.8098 9.68638 13.8574 9.76163 13.89C9.83688 13.9226 9.918 13.9394 10 13.9394C10.082 13.9394 10.1631 13.9226 10.2384 13.89C10.3136 13.8574 10.3814 13.8098 10.4375 13.75L18.125 6.0625' stroke='%235E6060' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E%0A");
|
||||
--icon-favorite: url("data:image/svg+xml,%3Csvg width='20' height='20' viewBox='0 0 20 20' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M10 16.8126L3.1 10.5626C-0.65 6.81262 4.8625 -0.387383 10 5.43762C15.1375 -0.387383 20.625 6.83762 16.9 10.5626L10 16.8126Z' fill='currentColor'/%3E%3C/svg%3E%0A");
|
||||
--icon-chevron-single-down: url("data:image/svg+xml,%3Csvg width='20' height='20' viewBox='0 0 20 20' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M1.875 6.0625L9.5625 13.75C9.61861 13.8098 9.68638 13.8574 9.76163 13.89C9.83688 13.9226 9.918 13.9394 10 13.9394C10.082 13.9394 10.1631 13.9226 10.2384 13.89C10.3136 13.8574 10.3814 13.8098 10.4375 13.75L18.125 6.0625' stroke='currentColor' stroke-width='1.25' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E%0A");
|
||||
--icon-chevron-single-left: url("data:image/svg+xml,%3Csvg width='20' height='20' viewBox='0 0 20 20' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M13.9377 1.875L6.25019 9.5625C6.1904 9.61861 6.14275 9.68638 6.11017 9.76163C6.0776 9.83688 6.06079 9.918 6.06079 10C6.06079 10.082 6.0776 10.1631 6.11017 10.2384C6.14275 10.3136 6.1904 10.3814 6.25019 10.4375L13.9377 18.125' stroke='currentColor' stroke-width='1.25' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E%0A");
|
||||
--icon-votre-brief: url("data:image/svg+xml,%3Csvg width='20' height='20' viewBox='0 0 20 20' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M14.0625 5.8375C13.9088 5.60629 13.7056 5.41211 13.4677 5.26897C13.2298 5.12583 12.9631 5.0373 12.6869 5.0098C12.4106 4.98229 12.1316 5.01648 11.8702 5.1099C11.6087 5.20332 11.3713 5.35364 11.175 5.55M1.875 18.125L8.85 11.7875M18.125 7.5C18.125 10.6066 15.6066 13.125 12.5 13.125C9.3934 13.125 6.875 10.6066 6.875 7.5C6.875 4.3934 9.3934 1.875 12.5 1.875C15.6066 1.875 18.125 4.3934 18.125 7.5Z' stroke='currentColor' stroke-width='1.25' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E%0A");
|
||||
--icon-offre-commerciale: url("data:image/svg+xml,%3Csvg width='20' height='20' viewBox='0 0 20 20' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M5.625 10H14.375M5.625 13.75H14.375M3.125 5.625H16.875C17.5654 5.625 18.125 6.18464 18.125 6.875V16.875C18.125 17.5654 17.5654 18.125 16.875 18.125H3.125C2.43464 18.125 1.875 17.5654 1.875 16.875V6.875C1.875 6.18464 2.43464 5.625 3.125 5.625ZM7.5 1.875H12.5C12.8315 1.875 13.1495 2.0067 13.3839 2.24112C13.6183 2.47554 13.75 2.79348 13.75 3.125V5.625H6.25V3.125C6.25 2.79348 6.3817 2.47554 6.61612 2.24112C6.85054 2.0067 7.16848 1.875 7.5 1.875Z' stroke='currentColor' stroke-width='1.25' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E%0A");
|
||||
--icon-brief-enrichi: url("data:image/svg+xml,%3Csvg width='20' height='20' viewBox='0 0 20 20' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M11.8751 7.5C12.5655 7.5 13.1251 6.94036 13.1251 6.25C13.1251 5.55965 12.5655 5 11.8751 5C11.1848 5 10.6251 5.55965 10.6251 6.25C10.6251 6.94036 11.1848 7.5 11.8751 7.5Z' stroke='currentColor' stroke-width='1.25' stroke-linecap='round' stroke-linejoin='round'/%3E%3Cpath d='M6.87511 13.75C7.22029 13.75 7.50011 13.4702 7.50011 13.125C7.50011 12.7798 7.22029 12.5 6.87511 12.5C6.52993 12.5 6.25011 12.7798 6.25011 13.125C6.25011 13.4702 6.52993 13.75 6.87511 13.75Z' stroke='currentColor' stroke-width='1.25' stroke-linecap='round' stroke-linejoin='round'/%3E%3Cpath d='M6.87511 9.375C7.56547 9.375 8.12511 8.81536 8.12511 8.125C8.12511 7.43465 7.56547 6.875 6.87511 6.875C6.18476 6.875 5.62511 7.43465 5.62511 8.125C5.62511 8.81536 6.18476 9.375 6.87511 9.375Z' stroke='currentColor' stroke-width='1.25' stroke-linecap='round' stroke-linejoin='round'/%3E%3Cpath d='M13.1501 16.6C13.1362 16.3575 13.0519 16.1244 12.9076 15.929C12.7633 15.7337 12.5653 15.5846 12.3376 15.5C11.7722 15.3142 11.2917 14.9328 10.9824 14.4243C10.6731 13.9159 10.5553 13.3138 10.6502 12.7263C10.7451 12.1388 11.0465 11.6044 11.5001 11.2192C11.9538 10.8341 12.53 10.6234 13.1251 10.625H15.4626C15.8635 10.6261 16.2588 10.5308 16.6152 10.3471C16.9715 10.1634 17.2784 9.89665 17.5101 9.56942C17.7417 9.24219 17.8913 8.86406 17.9461 8.46691C18.0009 8.06976 17.9594 7.66525 17.8251 7.2875C17.3279 5.88371 16.4545 4.64357 15.3003 3.70256C14.146 2.76155 12.7553 2.15588 11.2801 1.95172C9.80497 1.74756 8.30206 1.95276 6.93562 2.5449C5.56917 3.13705 4.39176 4.09335 3.53201 5.30935C2.67226 6.52534 2.16325 7.95424 2.06059 9.43993C1.95793 10.9256 2.26558 12.4109 2.94991 13.7336C3.63425 15.0563 4.66895 16.1655 5.94096 16.9399C7.21298 17.7144 8.67338 18.1243 10.1626 18.125C10.8981 18.1271 11.6302 18.0261 12.3376 17.825C12.5974 17.7522 12.8224 17.5884 12.9716 17.3636C13.1207 17.1387 13.1841 16.8677 13.1501 16.6Z' stroke='currentColor' stroke-width='1.25' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E%0A");
|
||||
|
|
@ -68,6 +69,9 @@
|
|||
[data-icon="chevron-single-down"] {
|
||||
--icon: var(--icon-chevron-single-down)
|
||||
}
|
||||
[data-icon="chevron-single-left"] {
|
||||
--icon: var(--icon-chevron-single-left)
|
||||
}
|
||||
[data-icon="votre-brief"] {
|
||||
--icon: var(--icon-votre-brief)
|
||||
}
|
||||
|
|
|
|||
|
|
@ -3,6 +3,7 @@
|
|||
<h2 id="comments-label" class="sr-only">Commentaires</h2>
|
||||
<div class="comments | flow">
|
||||
<template v-if="!openedComment">
|
||||
<!-- TODO: faire un composant comment -->
|
||||
<article
|
||||
v-for="(comment, commentIndex) in Object.values(comments).reverse()"
|
||||
:key="commentIndex"
|
||||
|
|
@ -23,46 +24,104 @@
|
|||
<p class="comment__body">
|
||||
{{ comment.text }}
|
||||
</p>
|
||||
<!-- TODO: à dynamiser (affichage ou non si replies + nombre de replies)-->
|
||||
<footer class="comment__replies">
|
||||
<span>1 réponse</span>
|
||||
</footer>
|
||||
</article>
|
||||
</template>
|
||||
<template v-else>
|
||||
<article>
|
||||
{{ openedComment.title }}
|
||||
<!-- TODO: mettre la bonne cible pour to: -->
|
||||
<router-link
|
||||
:to="'/' + page.parent"
|
||||
class="btn | justify-start w-full | bg-white-10 text-white | px-8"
|
||||
data-icon="chevron-single-left"
|
||||
>
|
||||
<span>Retour à la liste</span>
|
||||
</router-link>
|
||||
<!-- TODO: utiliser le composant comment ici -->
|
||||
<article
|
||||
class="comment"
|
||||
data-opened="true"
|
||||
>
|
||||
<header>
|
||||
<p>
|
||||
<strong>{{ openedComment.user.name ?? openedComment.user.email }}</strong>
|
||||
<span class="comment__id">#{{ commentIndex + 1 }}</span> •
|
||||
<span class="comment__page">Page {{ pageIndex }}</span>
|
||||
<time :datetime="dayjs(openedComment.date).format('YYYY-MM-DD')">{{
|
||||
formatDate(openedComment.date)
|
||||
}}</time>
|
||||
</p>
|
||||
</header>
|
||||
<p class="comment__body">
|
||||
{{ openedComment.text }}
|
||||
</p>
|
||||
<footer class="comment__replies">
|
||||
<span>1 réponse</span>
|
||||
</footer>
|
||||
</article>
|
||||
<div class="replies">
|
||||
<article v-for="reply in openedComment.replies"></article>
|
||||
<!-- TODO: utiliser le composant comment ici -->
|
||||
<article
|
||||
v-for="comment in openedComment.replies"
|
||||
class="comment reply"
|
||||
>
|
||||
<header>
|
||||
<p>
|
||||
<strong>{{ comment.user.name ?? comment.user.email }}</strong>
|
||||
<span class="comment__id">#{{ commentIndex + 1 }}</span> •
|
||||
<span class="comment__page">Page {{ pageIndex }}</span>
|
||||
<time :datetime="dayjs(comment.date).format('YYYY-MM-DD')">{{
|
||||
formatDate(comment.date)
|
||||
}}</time>
|
||||
</p>
|
||||
</header>
|
||||
<p class="comment__body">
|
||||
{{ comment.text }}
|
||||
</p>
|
||||
</article>
|
||||
</div>
|
||||
</template>
|
||||
</div>
|
||||
<button
|
||||
v-if="!openedComment && !isAddOpen"
|
||||
id="create-comment"
|
||||
class="btn btn--white-20 | w-full"
|
||||
@click="isAddOpen = true"
|
||||
>
|
||||
Ajouter un commentaire
|
||||
</button>
|
||||
<button
|
||||
v-if="openedComment && !isReplyOpen"
|
||||
id="reply-comment"
|
||||
class="btn btn--white-20 | justify-start w-full | text-white-50"
|
||||
@click="isReplyOpen = true"
|
||||
>
|
||||
Répondre…
|
||||
</button>
|
||||
|
||||
<form
|
||||
v-if="isAddOpen"
|
||||
action=""
|
||||
method="post"
|
||||
class="flow"
|
||||
class="flow | bg-white-20 | p-12 | rounded-xl"
|
||||
@submit="addComment"
|
||||
>
|
||||
<label class="sr-only" for="comment">Votre commentaire</label>
|
||||
<textarea
|
||||
name="comment"
|
||||
id="comment"
|
||||
placeholder="Ajouter un commentaire"
|
||||
rows="3"
|
||||
placeholder="Ajouter un commentaire…"
|
||||
rows="5"
|
||||
class="text-sm | rounded-lg bg-black p-12"
|
||||
v-model="newCommentText"
|
||||
></textarea>
|
||||
<footer class="flex">
|
||||
<button class="btn btn--white-20" @click="closeAddField()">
|
||||
<input type="submit" class="btn btn--tranparent" />
|
||||
<button class="btn btn--white-10" @click="closeAddField()">
|
||||
Annuler
|
||||
</button>
|
||||
<input type="submit" class="btn btn--tranparent" />
|
||||
</footer>
|
||||
</form>
|
||||
</aside>
|
||||
|
|
|
|||
|
|
@ -179,6 +179,7 @@ function changeFile(newFile) {
|
|||
--flow-space: var(--space-12);
|
||||
font-size: var(--text-sm);
|
||||
border: var(--border);
|
||||
border-width: 2px;
|
||||
border-radius: var(--rounded-lg);
|
||||
padding: var(--space-12);
|
||||
color: var(--color-grey-400);
|
||||
|
|
@ -219,20 +220,26 @@ function changeFile(newFile) {
|
|||
.comment[data-status="unread"] header time {
|
||||
color: var(--color-primary);
|
||||
}
|
||||
.comment[data-opened="true"] {
|
||||
border-color: transparent;
|
||||
}
|
||||
.comment[data-opened="true"] .comment__replies {
|
||||
color: var(--color-primary);
|
||||
}
|
||||
#comments-container form {
|
||||
--flow-space: 0.5rem;
|
||||
flex-direction: column;
|
||||
position: -webkit-sticky;
|
||||
position: sticky;
|
||||
bottom: 4.5rem;
|
||||
background: black;
|
||||
padding: var(--space-24) 0;
|
||||
bottom: 5.5rem;
|
||||
}
|
||||
#comments-container textarea {
|
||||
position: sticky;
|
||||
bottom: 0;
|
||||
margin: 0;
|
||||
resize: none;
|
||||
background: none;
|
||||
padding: 0;
|
||||
color: var(--color-white);
|
||||
}
|
||||
::placeholder {
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue