Amélioration page editor

2025-08-11 21:23:54 -04:00 · 2025-04-08 21:32:35 -04:00 · 2025-04-08 21:32:35 -04:00 · ddf955a7a2
commit ddf955a7a2
parent 51cebdaba1
3 changed files with 87 additions and 195 deletions
--- a/client/src/pages/Teacher/EditorQuiz/EditorQuiz.tsx
+++ b/client/src/pages/Teacher/EditorQuiz/EditorQuiz.tsx
@ -175,48 +175,65 @@ const QuizForm: React.FC = () => {
    }

    return (
-        <div className='quizEditor'>
-
-            <div className='editHeader'>
+        <div className="quizEditor">
+            <div
+                className="editHeader"
+                style={{
+                    display: 'flex',
+                    justifyContent: 'space-between',
+                    alignItems: 'center',
+                    marginBottom: '32px'
+                }}
+            >
                <ReturnButton
                    askConfirm
                    message={`Êtes-vous sûr de vouloir quitter l'éditeur sans sauvegarder le questionnaire?`}
                />

-                <div className='title'>Éditeur de quiz</div>
+<Button
+                    variant="contained"
+                    onClick={handleQuizSave}
+                    sx={{ display: 'flex', alignItems: 'center' }}
+                >
+                    <SaveIcon sx={{ fontSize: 20 }} />
+                    Enregistrer
+                </Button>
+            </div>

-                <div className='dumb'></div>
+            <div style={{ textAlign: 'center', marginTop: '30px' }}>
+                <div className="title">Éditeur de quiz</div>
            </div>

            {/* <h2 className="subtitle">Éditeur</h2> */}

-            <TextField
-                onChange={handleQuizTitleChange}
-                value={quizTitle}
-                placeholder="Titre du quiz"
-                label="Titre du quiz"
-                fullWidth
-            />
-            <label>Choisir un dossier:
-            <NativeSelect
-                id="select-folder"
-                color="primary"
-                value={selectedFolder}
-                onChange={handleSelectFolder}
-                disabled={!isNewQuiz}
-                style={{ marginBottom: '16px' }} // Ajout de marge en bas
+            <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center' }}>
+                <TextField
+                    onChange={handleQuizTitleChange}
+                    value={quizTitle}
+                    color="primary"
+                    placeholder="Titre du quiz"
+                    label="Titre du quiz"
+                    sx={{ width: '200px', marginTop: '50px' }}
+                />
+             <NativeSelect
+                    id="select-folder"
+                    color="primary"
+                    value={selectedFolder}
+                    onChange={handleSelectFolder}
+                    disabled={!isNewQuiz}
+                    style={{ marginBottom: '16px', width: '200px', marginTop: '10px' }}
                >
-                <option disabled value=""> Choisir un dossier... </option>
+                    <option disabled value="">
+                        Choisir un dossier...
+                    </option>
+                    {folders.map((folder: FolderType) => (
+                        <option value={folder._id} key={folder._id}>
+                            {folder.title}
+                        </option>
+                    ))}
+                </NativeSelect>
+            </div>

-                {folders.map((folder: FolderType) => (
-                    <option value={folder._id} key={folder._id}> {folder.title} </option>
-                ))}
-            </NativeSelect></label>
-
-            <Button variant="contained" onClick={handleQuizSave}>
-            <SaveIcon sx={{ fontSize: 20 }} />
-                Enregistrer
-            </Button>

            <Divider style={{ margin: '16px 0' }} />

--- a/client/src/pages/Teacher/ManageRoom/ManageRoom.tsx
+++ b/client/src/pages/Teacher/ManageRoom/ManageRoom.tsx
@ -386,32 +386,41 @@ const ManageRoom: React.FC = () => {

    return (
        <div className="room">
-            <h1>Salle : {formattedRoomName}</h1>
-            <div className="roomHeader">
+            <div className="disconnectWrapper" style={{ marginBottom: '20px' }}>
                <DisconnectButton
                    onReturn={handleReturn}
                    askConfirm
                    message={`Êtes-vous sûr de vouloir quitter?`}
                />
+            </div>

+            <div className="roomHeader">
                <div
-                    className="headerContent"
                    style={{
                        display: 'flex',
-                        justifyContent: 'space-between',
+                        justifyContent: 'center',
                        alignItems: 'center',
-                        width: '100%'
+                        width: '100%',
+                        marginBottom: '10px'
                    }}
                >
-                    {
+                    <h1 style={{ margin: 0, display: 'flex', alignItems: 'center' }}>
+                        Salle : {formattedRoomName}
                        <div
-                            className="userCount subtitle smallText"
-                            style={{ display: 'flex', justifyContent: 'flex-end' }}
+                            className="userCount subtitle"
+                            style={{
+                                display: 'inline-flex',
+                                alignItems: 'center',
+                                fontSize: '1.5rem',
+                                fontWeight: 'bold',
+                                marginLeft: '20px',
+                                marginBottom: '0px'
+                            }}
                        >
-                            <GroupIcon style={{ marginRight: '5px' }} />
+                            <GroupIcon style={{ marginRight: '5px', verticalAlign: 'middle' }} />{' '}
                            {students.length}/60
                        </div>
-                    }
+                    </h1>
                </div>

                <div className="dumb"></div>
--- a/client/src/pages/Teacher/ManageRoom/manageRoom.css
+++ b/client/src/pages/Teacher/ManageRoom/manageRoom.css
@ -2,25 +2,31 @@
 .room .roomHeader {
    width: 100%;
    display: flex;
-    flex-direction: row;
-    justify-content: space-between;
-    align-content: stretch
+    flex-direction: column;
+    align-items: flex-start;
+    position: relative;
 }
 .room .roomHeader .returnButton {
-    flex-basis: 10%;
-
-    display: flex;
-    justify-content: center;
+    position: absolute;
+    top: 10px;
+    left: 0;
+    z-index: 10;
 }

 .room .roomHeader .centerTitle {
    flex-basis: auto;
-
    display: flex;
-    flex-direction: column;
-    justify-content: flex-end;
-    align-items: flex-end;
+    justify-content: flex-start;
+    align-items: flex-start;
+    margin-top: 40px;
+}

+.room .roomHeader .headerContent {
+    width: 100%;
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    margin-top: 60px;
 }

 .room .roomHeader .dumb {
@ -34,7 +40,6 @@

    overflow: auto;
    justify-content: center;
-    /* align-items: center; */
 }

 .room .finishQuizButton {
@ -44,146 +49,7 @@
    width: 100%;
 }

-
-
-/* .create-room-container {
-    display: flex;
-    flex-direction: column;
-    align-items: center;
-    justify-content: center;
-    height: 100%;
-}
-
-.manage-room-container {
-    display: flex;
-    flex-direction: column;
-    align-items: center;
-    height: 100%;
-    width: 100%;
-}
-
-.quiz-setup-container {
-    display: flex;
-    flex-direction: column;
-    width: 100%;
-    margin-top: 2rem;
-}
-
-.quiz-mode-selection {
-    display: flex;
-    flex-grow: 0;
-    flex-direction: column;
-    justify-content: center;
-    align-items: center;
-    margin-top: 10px;
-    height: 15vh;
-}
-
-.users-container {
-    display: flex;
-    flex-direction: column;
-    align-items: center;
-    flex-grow: 1;
-    gap: 2vh;
-}
-
-.launch-quiz-btn {
-    width: 20vw;
-    height: 11vh;
-    margin-top: 2vh;
-    box-shadow: 2px 2px 4px rgba(0, 0, 0, 0.2);
-}
-
-.mode-choice {
-    display: flex;
-    flex-direction: row;
-    justify-content: center;
-    align-items: center;
-    width: 20vw;
-    margin-top: 2vh;
-}
-
-.user {
-    background-color: #e7dad1;
-    padding: 10px 20px;
-    border: 1px solid black;
-    border-radius: 10px;
-    box-shadow: 2px 2px 4px rgba(0, 0, 0, 0.2);
-}
-
-.bottom-btn {
-    display: flex;
-    width: 100%;
-    justify-content: flex-end;
-    margin-top: 2vh;
-}
-
-.room-container {
-    position: relative;
-    width: 100%;
-    max-width: 60vw;
-}
-
-@media only screen and (max-device-width: 768px) {
-    .room-container {
-        max-width: 100%;
-    }
-}
-
-.room-wrapper {
-    display: flex;
-    width: 100%;
-    height: 100%;
-    justify-content: center;
-}
-
-.room-name-wrapper {
-    display: flex;
-    flex-direction: column;
-    align-items: end;
-}
-.user-item {
-    width: 100%;
-}
-
-.flex-column-wrapper {
-    display: flex;
-    flex-direction: column;
-    height: 85vh;
-    overflow: auto;
-}
-
-.preview-and-result-container {
-    display: flex;
-    flex-direction: column;
-    gap: 2rem;
-}
-
-.nextQuestionButton {
-    align-self: flex-end;
-    margin-bottom: 5rem !important;
-}
-
-.top-container {
-    display: flex;
-    justify-content: space-between;
-    align-items: center;
-}
-
-@media only screen and (max-device-height: 4000px) {
-    .flex-column-wrapper {
-        height: 60vh;
-    }
-}
-
-@media only screen and (max-device-height: 1079px) {
-    .flex-column-wrapper {
-        height: 50vh;
-    }
-}
-
-@media only screen and (max-device-height: 741px) {
-    .flex-column-wrapper {
-        height: 40vh;
-    }
-} */
+.room h1 {
+    text-align: center;
+    margin-top: 50px;
+}