diff --git a/client/src/components/LiveResults/LiveResults.tsx b/client/src/components/LiveResults/LiveResults.tsx index ecf64e0..9539a53 100644 --- a/client/src/components/LiveResults/LiveResults.tsx +++ b/client/src/components/LiveResults/LiveResults.tsx @@ -51,14 +51,14 @@ const LiveResults: React.FC = ({ socket, questions, showSelect useEffect(() => { // Set student list before starting - let newStudents:StudentResult[] = []; + let newStudents: StudentResult[] = []; for (const student of students as UserType[]) { - newStudents.push( { username: student.name, idUser: student.id, answers: [] } ) + newStudents.push({ username: student.name, idUser: student.id, answers: [] }) } setStudentResults(newStudents); - + }, []) useEffect(() => { @@ -242,16 +242,11 @@ const LiveResults: React.FC = ({ socket, questions, showSelect - +
+
- +
Nom d'utilisateur
{Array.from({ length: maxQuestions }, (_, index) => ( @@ -259,7 +254,7 @@ const LiveResults: React.FC = ({ socket, questions, showSelect key={index} sx={{ textAlign: 'center', - cursor: `pointer`, + cursor: 'pointer', borderStyle: 'solid', borderWidth: 1, borderColor: 'rgba(224, 224, 224, 1)' @@ -270,6 +265,7 @@ const LiveResults: React.FC = ({ socket, questions, showSelect
))} = ({ socket, questions, showSelect {studentResults.map((student) => ( = ({ socket, questions, showSelect - +
% réussite
{Array.from({ length: maxQuestions }, (_, index) => ( @@ -385,6 +382,7 @@ const LiveResults: React.FC = ({ socket, questions, showSelect
+ ); }; diff --git a/client/src/components/LiveResults/liveResult.css b/client/src/components/LiveResults/liveResult.css index 553c31e..c16ca48 100644 --- a/client/src/components/LiveResults/liveResult.css +++ b/client/src/components/LiveResults/liveResult.css @@ -27,6 +27,39 @@ align-items: flex-start; } +.table-cell-border { + border-style: solid; + border-width: 1px; + border-color: rgba(224, 224, 224, 1); +} + +/* -------------- */ + +.table-container { + overflow-x: auto; + position: relative; +} + +.sticky-header { + position: sticky; + top: 0; + background-color: white; + z-index: 2; /* Ensure it stays above other cells */ +} + +.sticky-column { + position: sticky; + left: 0; + background-color: white; + z-index: 1; /* Ensure it stays above other cells but below the header */ +} + +.sticky-intersection { + z-index: 3; /* Ensure the top-left cell stays above both header and column */ +} + +/* ------------------------------- */ + /* Media query for narrow screens */ @media (max-width: 600px) { .action-bar { diff --git a/client/src/pages/Teacher/ManageRoom/ManageRoom.tsx b/client/src/pages/Teacher/ManageRoom/ManageRoom.tsx index 47c8294..e8d8bfc 100644 --- a/client/src/pages/Teacher/ManageRoom/ManageRoom.tsx +++ b/client/src/pages/Teacher/ManageRoom/ManageRoom.tsx @@ -255,8 +255,8 @@ const ManageRoom: React.FC = () => {
- -
+{/* the following breaks the css (nested room classes) */} +
{quizQuestions ? (