diff --git a/README.md b/README.md index f7152d4..39f6c5e 100644 --- a/README.md +++ b/README.md @@ -2,16 +2,12 @@ ## Liste des améliorations -- [ ] Bouton "Voir les posts de l'utilisateur" à enlever (un seul écrivain donc inutile...) -- [ ] Bug CSS concernant le footer -- [ ] Mauvaise actualisation du pseudo quand on se renomme -- [ ] Support d'un dark thème (à réflechir...) -- [ ] Erreur 403 quand on modifie le pseudo mais pas l'image d'un utilisateur -- [ ] Garder l'avatar de l'utilisateur quand il met à jour uniquement son pseudo -- [ ] Ne pas avoir à confirmer son mot de passe lors de la connexion -- [ ] Pouvoir modifier son commentaire +- [x] Bug CSS concernant le footer +- [x] Problème d'actualisation des commentaires quand on écrit au moins 2 commentaires à la suite +- [x] Responsive des commentaires +- [x] Garder l'avatar de l'utilisateur quand il met à jour uniquement son pseudo +- [x] Ne pas avoir à confirmer son mot de passe lors de la connexion - [x] L'avatar s'affiche pas quand on upload un commentaire (il faut recharger la page) -- [ ] Faire des meilleurs modal - [ ] Terminer l'interface admin - [x] Bug (de temps en temps) pour stocker les données utilisateur diff --git a/public/icon.jpg b/public/icon.jpg deleted file mode 100644 index 7da39e5..0000000 Binary files a/public/icon.jpg and /dev/null differ diff --git a/public/icon.png b/public/icon.png new file mode 100644 index 0000000..b511a7f Binary files /dev/null and b/public/icon.png differ diff --git a/src/app/components/comment-form/comment-form.component.ts b/src/app/components/comment-form/comment-form.component.ts index 4fdd2a9..e23278e 100644 --- a/src/app/components/comment-form/comment-form.component.ts +++ b/src/app/components/comment-form/comment-form.component.ts @@ -42,6 +42,7 @@ export class CommentFormComponent { // get l'image de profile après avoir créé le commentaire this.subs.push(this.commentService.create(this.commentForm.value.content, this.postId, author.id, token).pipe( switchMap((comment: Comment) => { + this.createdComment = { ... this.createdComment } // attention a bien mettre à jour la ref sinon ça casse this.createdComment.authorId = author.id; this.createdComment.content = comment.content; this.createdComment.id = comment.id; @@ -53,10 +54,9 @@ export class CommentFormComponent { }) ).subscribe({ next: (profilePicture: string) => { - this.createdComment.profilePicture = profilePicture; // c'est de la merde + this.createdComment.profilePicture = profilePicture; this.commentForm.value.content = ""; this.commentToEmit.emit(this.createdComment); - console.log(this.createdComment) this.successMessage("Succès", "Commentaire créé avec succès"); }, error: (error) => { diff --git a/src/app/components/loading/loading.component.html b/src/app/components/loading/loading.component.html index 29e6720..f989d89 100644 --- a/src/app/components/loading/loading.component.html +++ b/src/app/components/loading/loading.component.html @@ -1,3 +1,3 @@
- loadign + loadign
diff --git a/src/app/pages/post/post.component.css b/src/app/pages/post/post.component.css index b9e602f..88f8232 100644 --- a/src/app/pages/post/post.component.css +++ b/src/app/pages/post/post.component.css @@ -58,16 +58,6 @@ em { } } -.commentaires { - margin: auto; - width: 45%; - display: flex; - align-items: center; - gap: 2rem; - flex-direction: column; - margin-top: 5rem; -} - .delete-dialog { display: flex; justify-content: center; @@ -75,10 +65,48 @@ em { gap: 3em; } -.comment-div { +.commentaires { + margin: auto; + margin-top: 5rem; + width: 45%; display: flex; - align-items: center; - gap: 1rem; + flex-direction: column; + gap: 2.5rem; + padding: 0 1rem; } +.comment-div { + display: flex; + align-items: flex-start; + gap: 1rem; + background-color: #f9f9f9; + padding: 1rem; + border-radius: 12px; + box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05); + flex-wrap: wrap; + position: relative; +} + +@media screen and (max-width: 1200px) { + .body-content, + .commentaires { + width: 95%; + } + + .comment-div { + flex-direction: column; + align-items: flex-start; + } + + .comment-meta-header { + flex-direction: column; + align-items: flex-start; + } + + .delete-button { + position: static; + align-self: flex-end; + margin-top: 0.5rem; + } +} diff --git a/src/app/pages/post/post.component.ts b/src/app/pages/post/post.component.ts index 8b4cc4d..97882f4 100644 --- a/src/app/pages/post/post.component.ts +++ b/src/app/pages/post/post.component.ts @@ -68,15 +68,8 @@ export class PostComponent { next: res => { res.post.body = res.post.body.replace(/ /g, ' ') this.concernedPost = res.post; - this.sortCommentList(res.comment) - this.comments = res.comment.sort((a, b) => { - if (a.commentDate > b.commentDate) { - return -1 - } else if (a.commentDate < b.commentDate) { - return 1 - } - return 0 - }); + this.comments = res.comment + this.sortCommentList() this.comments.forEach(comment => this.commentDeleteDialogMap.set(comment.id, false)); }, error: err => this.failureMessage("Erreur", err.error.message) @@ -90,7 +83,8 @@ export class PostComponent { addNewCommentToList(comment: Comment) { this.comments.push(comment); - this.sortCommentList(this.comments); + console.log(this.comments) + this.sortCommentList(); } setCommentDialogVisible(commentId: bigint) { @@ -118,15 +112,15 @@ export class PostComponent { } } - sortCommentList(comments: Comment[]) { - comments.sort((a, b) => { + sortCommentList() { + this.comments = this.comments.sort((a, b) => { if (a.commentDate > b.commentDate) { return -1 } else if (a.commentDate < b.commentDate) { return 1 } return 0 - }) + }); } successMessage(summary: string, detail: string): void { diff --git a/src/app/pages/profile/profile.component.html b/src/app/pages/profile/profile.component.html index d2bf924..4d86dbc 100644 --- a/src/app/pages/profile/profile.component.html +++ b/src/app/pages/profile/profile.component.html @@ -17,7 +17,6 @@ } - @if (actualAuthor) { @if (concernedAuthor.id === actualAuthor.id) { diff --git a/src/app/pages/profile/profile.component.ts b/src/app/pages/profile/profile.component.ts index 937db53..84d88a2 100644 --- a/src/app/pages/profile/profile.component.ts +++ b/src/app/pages/profile/profile.component.ts @@ -33,7 +33,6 @@ export class ProfileComponent implements OnDestroy { authorName: string = ""; subs: Subscription[] = []; updateProfileDialog: boolean = false; - changePasswordDialog: boolean = false; constructor(private route: ActivatedRoute, private authorService: AuthorService, diff --git a/src/assets/icon.jpg b/src/assets/icon.jpg deleted file mode 100644 index 7da39e5..0000000 Binary files a/src/assets/icon.jpg and /dev/null differ diff --git a/src/assets/icon.png b/src/assets/icon.png new file mode 100644 index 0000000..b511a7f Binary files /dev/null and b/src/assets/icon.png differ diff --git a/src/index.html b/src/index.html index 84c9c6c..bb90503 100644 --- a/src/index.html +++ b/src/index.html @@ -6,7 +6,7 @@ A BON ENTENDEUR - + diff --git a/src/styles.css b/src/styles.css index 9008a50..3926c9a 100644 --- a/src/styles.css +++ b/src/styles.css @@ -11,7 +11,6 @@ body { background-color: #1c1c1c; color: #f1f1f1; padding: 20px; - text-align: center; font-size: 14px; } @@ -20,6 +19,7 @@ body { .footer-follow, .footer-links, .footer-copyright { + text-align: center; margin: 5px 0; } @@ -36,14 +36,6 @@ app-root { flex-direction: column; } -.footer { - width: 100%; - text-align: center; - padding: 10px; - background: #222; - color: white; -} - .footer-link { color: #1e90ff; text-decoration: none; @@ -54,5 +46,11 @@ app-root { text-decoration: underline; } -html, body { height: 100%; } -body { margin: 0; font-family: Roboto, "Helvetica Neue", sans-serif; } +html, body { + height: 100%; +} + +body { + margin: 0; + font-family: Roboto, "Helvetica Neue", sans-serif; +}