diff --git a/frontend/src/App.jsx b/frontend/src/App.jsx index fc3cd50..22f815c 100644 --- a/frontend/src/App.jsx +++ b/frontend/src/App.jsx @@ -212,6 +212,7 @@ function TutorApp({ currentUser, onLogout }) { const [programStatus, setProgramStatus] = useState(null) const [studentProgram, setStudentProgram] = useState(null) const [activeAssetIndex, setActiveAssetIndex] = useState(0) + const [assetFullscreenOpen, setAssetFullscreenOpen] = useState(false) const [progressPanelOpen, setProgressPanelOpen] = useState(false) const [settingsPanelOpen, setSettingsPanelOpen] = useState(false) const mediaRecorderRef = useRef(null) @@ -509,6 +510,7 @@ function TutorApp({ currentUser, onLogout }) { stopSpeechPlayback() deactivateAutoListening(false) setSessionActive(false) + setAssetFullscreenOpen(false) setProgressPanelOpen(false) setSettingsPanelOpen(false) setCurrentInstruction('') @@ -1063,7 +1065,15 @@ function TutorApp({ currentUser, onLogout }) { - {activeAsset.title} + )} @@ -1140,6 +1150,38 @@ function TutorApp({ currentUser, onLogout }) { )} + + {assetFullscreenOpen && activeAsset && ( +
+
+ Fiche {activeAssetIndex + 1}/{lessonAssets.length} + +
+
+ {activeAsset.title} +
+
+ + +
+
+ )} )} diff --git a/frontend/src/styles.css b/frontend/src/styles.css index f2fca2f..b0b4020 100644 --- a/frontend/src/styles.css +++ b/frontend/src/styles.css @@ -503,7 +503,18 @@ button:disabled { opacity: 0.5; cursor: not-allowed; } .lesson-asset-actions button { padding: 0.6rem 0.8rem; } -.lesson-asset-view img { +.lesson-asset-open { + min-height: 0; + flex: 1 1 auto; + display: flex; + flex-direction: column; + gap: 0.4rem; + padding: 0; + background: transparent; + color: #14213d; + border: none; +} +.lesson-asset-open img { width: 100%; min-height: 0; flex: 1 1 auto; @@ -512,6 +523,43 @@ button:disabled { opacity: 0.5; cursor: not-allowed; } border-radius: 14px; background: white; } +.lesson-asset-open span { + display: none; + color: #2563eb; + font-size: 0.9rem; + font-weight: 700; +} +.asset-fullscreen { + position: fixed; + inset: 0; + z-index: 20; + display: grid; + grid-template-rows: auto minmax(0, 1fr) auto; + gap: 0.75rem; + padding: 0.75rem; + background: #f5f7fb; +} +.asset-fullscreen-bar, +.asset-fullscreen-controls { + display: flex; + align-items: center; + justify-content: space-between; + gap: 0.75rem; +} +.asset-fullscreen-stage { + min-height: 0; + overflow: auto; + border: 1px solid #dbeafe; + border-radius: 16px; + background: white; +} +.asset-fullscreen-stage img { + display: block; + width: max(100%, 980px); + height: auto; + min-height: 100%; + object-fit: contain; +} .lesson-bubble { min-height: 68px; } @@ -746,21 +794,50 @@ button:disabled { opacity: 0.5; cursor: not-allowed; } } .teacher-transcript { - max-height: 3.1rem; - font-size: 1rem; + max-height: 2.7rem; + font-size: 0.95rem; } .lesson-display-head, .lesson-asset-toolbar { - align-items: stretch; - flex-direction: column; - gap: 0.4rem; + align-items: center; + flex-direction: row; + gap: 0.5rem; } .lesson-asset-actions { + display: flex; + gap: 0.5rem; + } + + .lesson-asset-actions button { + padding: 0.45rem 0.55rem; + font-size: 0.86rem; + } + + .lesson-asset-toolbar strong { + font-size: 0.95rem; + } + + .lesson-asset-open span { + display: block; + } + + .lesson-asset-open img { + max-height: 24dvh; + } + + .asset-fullscreen { + padding: 0.5rem; + } + + .asset-fullscreen-stage img { + width: max(100%, 1120px); + } + + .asset-fullscreen-controls { display: grid; grid-template-columns: 1fr 1fr; - gap: 0.5rem; } .lesson-composer {