gmatte/EvalueTonSavoir
1
0
Fork 0
mirror of https://github.com/ets-cfuhrman-pfe/EvalueTonSavoir.git synced 2025-08-11 21:23:54 -04:00
Code Issues Projects Releases Packages Wiki Activity Actions

Améliorations - table des résultats défile horizontalement avec la première colonne fixe

Browse source
This commit is contained in:
C. Fuhrman 2024-09-24 09:49:15 -04:00
parent 7562898438
commit b410a6da29
3 changed files with 46 additions and 15 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

22
client/src/components/LiveResults/LiveResults.tsx
View file

@ -51,10 +51,10 @@ const LiveResults: React.FC<LiveResultsProps> = ({ 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);
@ -242,16 +242,11 @@ const LiveResults: React.FC<LiveResultsProps> = ({ socket, questions, showSelect
</FormGroup>
</div>
<Table size="small" stickyHeader component={Paper}>
<div className="table-container">
<Table size="small" component={Paper}>
<TableHead>
<TableRow>
<TableCell
sx={{
borderStyle: 'solid',
borderWidth: 1,
borderColor: 'rgba(224, 224, 224, 1)'
}}
>
<TableCell className="sticky-column">
<div className="text-base text-bold">Nom d'utilisateur</div>
</TableCell>
{Array.from({ length: maxQuestions }, (_, index) => (
@ -259,7 +254,7 @@ const LiveResults: React.FC<LiveResultsProps> = ({ 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<LiveResultsProps> = ({ socket, questions, showSelect
</TableCell>
))}
<TableCell
className="sticky-header"
sx={{
textAlign: 'center',
borderStyle: 'solid',
@ -285,6 +281,7 @@ const LiveResults: React.FC<LiveResultsProps> = ({ socket, questions, showSelect
{studentResults.map((student) => (
<TableRow key={student.idUser}>
<TableCell
className="sticky-column"
sx={{
borderStyle: 'solid',
borderWidth: 1,
@ -348,7 +345,7 @@ const LiveResults: React.FC<LiveResultsProps> = ({ socket, questions, showSelect
</TableBody>
<TableFooter>
<TableRow sx={{ backgroundColor: '#d3d3d34f' }}>
<TableCell sx={{ color: 'black' }}>
<TableCell className="sticky-column" sx={{ color: 'black' }}>
<div className="text-base text-bold">% réussite</div>
</TableCell>
{Array.from({ length: maxQuestions }, (_, index) => (
@ -385,6 +382,7 @@ const LiveResults: React.FC<LiveResultsProps> = ({ socket, questions, showSelect
</TableFooter>
</Table>
</div>
</div>
);
};

33
client/src/components/LiveResults/liveResult.css
View file

@ -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 {

4
client/src/pages/Teacher/ManageRoom/ManageRoom.tsx
View file

@ -255,8 +255,8 @@ const ManageRoom: React.FC = () => {
<div className='dumb'></div>
</div>
<div className='room'>
{/* the following breaks the css (nested room classes) */}
<div className=''>
{quizQuestions ? (