Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Fix/ue design #23

Open
wants to merge 4 commits into
base: dev
Choose a base branch
from
Open

Fix/ue design #23

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
4 commits
Select commit Hold shift + click to select a range
a4220e3
fix(ues): design
AlbanSdl Jun 20, 2024
c806c12
fix(ue): add style on replies
AlbanSdl Jun 20, 2024
750c9c6
fix(ue): update design of answer title
AlbanSdl Jun 20, 2024
2a325db
fix(ue): hide rating section when user has no rights
AlbanSdl Jun 20, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
29 changes: 21 additions & 8 deletions public/locales/fr/ues.json.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -2,7 +2,7 @@
// For more information, check the common.json.ts file

export default {
'browser': 'Guide des UEs',
browser: 'Guide des UEs',
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

tu veux pas garder les ' ?

'filter.search': 'Recherche dans le guide des UEs',
'filter.search.title': 'Recherche dans le guide des UEs',
'filter.creditType.title': 'Type de crédits',
Expand All @@ -12,30 +12,43 @@ export default {
'filter.semester.autumn': 'Automne',
'filter.semester.spring': 'Printemps',
'detailed.inscriptionCode': "Code d'inscription",
'detailed.workTime': 'Temps de travail',
'detailed.workTime.project': 'Projet',
'detailed.semester': "Prochain semestre d'ouverture",
'detailed.inscriptionCode.copy': 'Copier dans le presse-papier',
'detailed.worktime.hour': 'h',
'detailed.worktime.cm': 'CM',
'detailed.worktime.cm.tooltip': 'Cours Magistral',
'detailed.worktime.td': 'TD',
'detailed.worktime.td.tooltip': 'Travaux dirigés',
'detailed.worktime.tp': 'TP',
'detailed.worktime.tp.tooltip': 'Travaux pratiques',
'detailed.worktime.the': 'THE',
'detailed.worktime.the.tooltip': 'Travail hors encadrement',
'detailed.worktime.project': 'Projet',
'detailed.semester': 'Ouvert en',
'detailed.semester.none': "Pas de semestre d'ouverture prévu",
'detailed.description': 'Description',
'detailed.program': 'Programme',
'detailed.objectives': 'Objectifs',
'detailed.taughtIn': "Langue d'enseignement",
'detailed.taughtIn': 'Langue',
'detailed.minors': 'Mineurs',
'detailed.minors.none': 'Cette UE ne compte dans aucun mineur',
'detailed.credits': 'Crédits',
'detailed.noWorkingTimeInfo': 'Aucune information sur le temps de travail',
'detailed.dfpdata': 'Inscription',
'detailed.branchOptions': 'Niveau',
'detailed.requirements': 'Pré-requis',
'detailed.requirements.none': 'Aucun pré-requis',
'detailed.rates.title': 'Avis des étudiants',
'detailed.rates.error': 'Une erreur est survenue lors du chargement des avis',
'detailed.rates.delete': 'Supprimer mon avis',
'detailed.comments.loginRequired': 'Connexion requise pour voir les commentaires',
'detailed.comments.author.anonymous': 'Anonyme',
'detailed.comments.author.deleted': 'Utilisateur supprimé',
'detailed.comments.writtenDate': 'Écrit le {{date}}',
'detailed.comments.conversation.see': 'Voir la conversation ({{responseCount}} réponses)',
'detailed.comments.conversation.see.empty': 'Répondre',
'detailed.comments.resume':
"Commentaire de {{authorFirstName}} {{authorLastName}} sur l'UE {{ue}} au semestre {{semester}} ({{date}})",
'detailed.comments.resume': "Commentaire sur l'UE {{ue}}",
'detailed.comments.semester': 'Semestre {{semester}}',
'detailed.comments.updatedAt': 'Mis à jour le {{date}}',
'detailed.comments.resume.anonymous': "Commentaire anonyme sur l'UE {{ue}} au semestre {{semester}} ({{date}})",
'detailed.comments.answers.answerTitle': 'Répondre dans ce fil de discussion',
'detailed.comments.answers.answerButton': 'Envoyer',
'detailed.comments.answers.answerEntry': 'Tapez votre réponse ici',
Expand Down
2 changes: 1 addition & 1 deletion src/api/ue/ue.interface.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -3,7 +3,7 @@ export interface UE {
inscriptionCode: string;
name: string;
info: {
requirements: Array<{ code: string }>;
requirements: Array<string>;
comment: string;
degree: string;
languages: string;
Expand Down
110 changes: 66 additions & 44 deletions src/app/ues/[code]/comments/[commentId]/page.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -14,6 +14,11 @@ import { editCommentReply } from '@/api/commentReply/editCommentReply';
import { useAPI } from '@/api/api';
import { sendCommentReply } from '@/api/commentReply/sendCommentReply';
import { usePageSettings } from '@/module/pageSettings';
import Enter from '@/icons/Enter';
import User from '@/icons/User';
import Comment from '@/icons/Comment';
import Clock from '@/icons/Clock';
import Link from '@/components/UI/Link';

function CommentEditorFooter(originalComment: string, onUpdate: (text: string) => void, t: TFunction) {
return function CommentEditorFooter({ text, disable }: { text: string; disable: () => void }) {
Expand Down Expand Up @@ -46,55 +51,72 @@ export default function CommentDetailsPage() {
return (
<div className={styles.page}>
<h1>
{comment.isAnonymous
? t('ues:detailed.comments.resume.anonymous', {
ue: ue.code,
semester: comment.semester.code,
date: comment.createdAt.toLocaleDateString(),
})
: t('ues:detailed.comments.resume', {
authorFirstName: comment.author.firstName,
authorLastName: comment.author.lastName,
ue: ue.code,
semester: comment.semester.code,
date: comment.createdAt.toLocaleDateString(),
})}
{t('ues:detailed.comments.resume', {
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

summary ça serait mieux je pense plutôt que resume, ça peut faire penser que c'est "reprendre" ou "CV", et en plus en anglais ya des accents sur les "e", donc encore moins intuitif ^^

ue: ue.code,
})}
</h1>
{comment.updatedAt && (
<p className={styles.updateDate}>
{t('ues:detailed.comments.updatedAt', { date: comment.updatedAt.toLocaleDateString() })}
</p>
)}
<div className={styles.meta}>
{!comment.isAnonymous && (
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

si l'utilisateur est anonyme, c'est pas possible de quand même mettre une icone user mais où c'est marqué anonyme et sans lien dessus ? (ou même une icone anonymous 👀) (en fait je pensais à un truc mais c'est ptet pas anonymous)

Dans l'idée, ya probablement mieux mais pour visualiser :
image

<div>
<User />
<Link href={`/users/${comment.author.id}`} noStyle>
{comment.author.firstName} {comment.author.lastName}
</Link>
</div>
)}
<div>
<Comment />
{t('ues:detailed.comments.semester', { semester: comment.semester.code })}
</div>
<div>
<Clock />
<div>
<div>{t('ues:detailed.comments.writtenDate', { date: comment.createdAt.toLocaleDateString() })}</div>
{comment.updatedAt && (
<div>{t('ues:detailed.comments.updatedAt', { date: comment.updatedAt.toLocaleDateString() })}</div>
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

une icone clock pour chacune des 2 ça serait mieux je pense, ça fait bizarre de pas avoir d'icone à côté de updatedAt

)}
</div>
</div>
</div>
<p className={styles.body}>{comment.body}</p>
<div className={styles.comments}>
{comment.answers.map((answer, i) => (
<div key={answer.id} className={styles.comment}>
<p className={styles.author}>
{answer.author
? `${answer.author.firstName} ${answer.author.lastName}`
: t('ues:detailed.comments.author.deleted')}
</p>
<p className={styles.date}>
{t('ues:detailed.comments.writtenDate', { date: answer.createdAt.toLocaleDateString() })}
</p>
<EditableText
className={styles.body}
text={answer.body}
EditingFooter={CommentEditorFooter(
answer.body,
async (body) => {
const newAnswer = await editCommentReply(api, answer.id, body).toPromise();
if (!newAnswer) return false;
setComment({
...comment,
answers: [...comment.answers.slice(0, i), newAnswer, ...comment.answers.slice(i + 1)],
});
return true;
},
t,
)}
enabled={answer.author.id === user.id}
/>
<div className={styles.sideIcon}>
<Enter className={styles.answerIcon} />
</div>
<div>
<p className={styles.author}>
{answer.author ? (
<Link href={`/users/${answer.author.id}`} noStyle>
{answer.author.firstName} {answer.author.lastName}
</Link>
) : (
t('ues:detailed.comments.author.deleted')
)}
</p>
<p className={styles.date}>
{t('ues:detailed.comments.writtenDate', { date: answer.createdAt.toLocaleDateString() })}
</p>
<EditableText
className={styles.body}
text={answer.body}
EditingFooter={CommentEditorFooter(
answer.body,
async (body) => {
const newAnswer = await editCommentReply(api, answer.id, body).toPromise();
if (!newAnswer) return false;
setComment({
...comment,
answers: [...comment.answers.slice(0, i), newAnswer, ...comment.answers.slice(i + 1)],
});
return true;
},
t,
)}
enabled={answer.author.id === user.id}
/>
</div>
</div>
))}
</div>
Expand Down
92 changes: 54 additions & 38 deletions src/app/ues/[code]/comments/[commentId]/style.module.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -9,8 +9,19 @@
color: $ung-light-blue;
}

& > .body {
margin-top: 1.5rem;
.meta {
margin: 1rem 0;

svg {
width: 1em;
height: 1.1em;
vertical-align: bottom;
}
& > * {
display: flex;
flex-flow: row nowrap;
gap: 5px;
}
}

.updateDate {
Expand All @@ -19,56 +30,61 @@
margin-top: 0.3rem;
}

.thoughts {
.answerTitle {
margin-top: 3rem;
margin-bottom: 1rem;
color: $ung-dark-grey;
}

p.body {
text-align: justify;
}

.comments {
display: flex;
flex-flow: column nowrap;
gap: 1rem;
padding: 1rem 0;

.comment {
margin: 30px 0;
display: flex;
flex-flow: row nowrap;
gap: 1em;
padding: 0 1em;

.sideIcon {
width: 12px;
height: 12px;
margin-top: 0.5em;
padding: 5px;
box-sizing: content-box;
border-radius: 50%;
border: 1px solid $navigation-item-tooltip-color;

.answerIcon {
width: 12px;
height: 12px;
color: $ung-light-grey;
transform: scaleY(-1) translateY(25%);
}
}

.author {
color: $ung-light-blue;
font-weight: bold;
font-size: 1.2rem;
color: $ung-dark-grey;
margin-bottom: 0.2rem;
}

.date {
font-weight: bold;
font-style: italic;
color: $ung-light-grey;
}

.body {
margin-left: 1rem;
margin-top: 0.5rem;
padding-left: 0.7rem;
position: relative;

&:after {
content: '';
position: absolute;
left: 0;
top: 0;
height: 100%;
width: 3px;
background: linear-gradient(90deg, $ung-dark-grey, rgba($ung-dark-grey, 0.5));
}

.button {
right: 0;
}
}

&:last-child {
margin-bottom: 0;
//background-color: red;
text-align: justify;
}
}
}

.answerTitle {
margin-top: 3rem;
margin-bottom: 1rem;
color: $ung-dark-grey;
}

.input {
width: 100%;
flex-grow: 1;
Expand All @@ -84,4 +100,4 @@
position: relative;
}
}
}
}
Loading