This repository was archived by the owner on Jul 16, 2026. It is now read-only.
Mobile-app compact layout bump to 0.1.11 - #169
Merged
Merged
Conversation
- Add a viewport-based "compact" mode (m.compact: narrow width OR short height) for the mobile-app view, without changing portal/desktop/editor behavior: paginated StartPage (stats screen -> sections screen), floating side nav buttons + progress badge on SectionPlayer/ReviewScreen, section list hidden consistently across orientations, and general spacing/density fixes across StartPage, SectionIntro, ResultsScreen, Scoreboard, Hint, QuestionCard, ReoQuestion. - Add a back-to-overview link on SectionIntro (previously an unused prop). - Show "No Limit" instead of hiding the tile when timeLimit/maxAttempts aren't sent by the backend. - Fix maxAttempts to read from playerConfig.metadata (Angular parity), not the player's own config; seed attemptNumber from metadata.currentAttempt across sessions. - Hide the Retake CTA once attempts are exhausted (Angular showReplay parity) and emit an exdata player event mirroring Angular's maxLimitExceeded/isLastAttempt signal to the host.
There was a problem hiding this comment.
Pull request overview
This PR bumps @project-sunbird/sunbird-quml-player-web-component-react to 0.1.11 and introduces a viewport-aware mobile-app “compact” mode (narrow width or short height) to improve usability on phones—especially landscape—while keeping portal/desktop/editor behavior unchanged. It also aligns attempt/maxAttempts behavior with Angular, including “No Limit” display, retake gating, and emitting attempt-limit exdata events to the host.
Changes:
- Add SCSS mixins for
short(viewport height) andcompact(mobile container width OR short height), plus a React hook to mirror compact logic when DOM structure must change (StartPage paging). - Update overview/start flow UX: two-step StartPage in compact mode, “Start” vs “Resume” labeling, and show “No Limit” for missing backend time/attempt caps.
- Implement Angular-parity attempt handling: read
maxAttemptsfromplayerConfig.metadata, seedattemptNumberfrommetadata.currentAttempt, hide Retake when exhausted, and emit exdata signals.
Reviewed changes
Copilot reviewed 31 out of 31 changed files in this pull request and generated 1 comment.
Show a summary per file
| File | Description |
|---|---|
| projects/sunbird-quml-player-react/src/styles/variables.scss | Adds short-height breakpoint token for landscape-phone handling. |
| projects/sunbird-quml-player-react/src/styles/mixins.scss | Introduces short (viewport) and compact (mobile OR short) mixins. |
| projects/sunbird-quml-player-react/src/i18n/translations-en.ts | Adds new strings (Quiz Summary, Resume, No Limit, resume timer note). |
| projects/sunbird-quml-player-react/src/i18n/translations-ar.ts | Adds Arabic equivalents for new UI strings. |
| projects/sunbird-quml-player-react/src/i18n/translations-fr.ts | Adds French equivalents for new UI strings. |
| projects/sunbird-quml-player-react/src/i18n/translations-pt.ts | Adds Portuguese equivalents for new UI strings. |
| projects/sunbird-quml-player-react/src/dev/sample-data.ts | Moves maxAttempts to metadata to match host/backend contract. |
| projects/sunbird-quml-player-react/src/components/StartPage/useIsCompactViewport.ts | Adds JS hook mirroring compact logic for DOM paging behavior. |
| projects/sunbird-quml-player-react/src/components/StartPage/StartPage.tsx | Implements compact two-step overview and “No Limit”/Resume behavior. |
| projects/sunbird-quml-player-react/src/components/StartPage/StartPage.test.tsx | Updates tests for “No Limit” tiles and attempts-null behavior. |
| projects/sunbird-quml-player-react/src/components/StartPage/StartPage.module.scss | Adds compact/short layout styling + floating Next/back button styles. |
| projects/sunbird-quml-player-react/src/components/SectionPlayer/SectionPlayer.tsx | Adds progress prop to QuestionCard; prepares compact floating nav buttons. |
| projects/sunbird-quml-player-react/src/components/SectionPlayer/SectionPlayer.module.scss | Implements compact floating Prev/Next and short-height spacing adjustments. |
| projects/sunbird-quml-player-react/src/components/SectionIntro/SectionIntro.tsx | Adds optional back-to-overview (Previous) control. |
| projects/sunbird-quml-player-react/src/components/SectionIntro/SectionIntro.test.tsx | Adds tests for presence/behavior of the new Previous link. |
| projects/sunbird-quml-player-react/src/components/SectionIntro/SectionIntro.module.scss | Styles Previous link and adds short-height density tweaks. |
| projects/sunbird-quml-player-react/src/components/Scoreboard/Scoreboard.tsx | Localizes scoreboard labels and adds QUIZ_SUMMARY i18n support. |
| projects/sunbird-quml-player-react/src/components/Scoreboard/Scoreboard.module.scss | Adds short-height spacing/density tweaks. |
| projects/sunbird-quml-player-react/src/components/ReviewScreen/ReviewScreen.tsx | Adds progress prop to QuestionCard and nav button class hooks. |
| projects/sunbird-quml-player-react/src/components/ReviewScreen/ReviewScreen.module.scss | Hides section list in compact mode and adds floating nav button styling. |
| projects/sunbird-quml-player-react/src/components/ResultsScreen/ResultsScreen.tsx | Makes Retake optional; passes language through to Scoreboard. |
| projects/sunbird-quml-player-react/src/components/ResultsScreen/ResultsScreen.test.tsx | Adds test asserting Retake is hidden when omitted. |
| projects/sunbird-quml-player-react/src/components/ResultsScreen/ResultsScreen.module.scss | Adds short-height spacing/density tweaks. |
| projects/sunbird-quml-player-react/src/components/questions/ReoQuestion/ReoQuestion.module.scss | Improves touch drag behavior via touch-action: none. |
| projects/sunbird-quml-player-react/src/components/QuestionCard/QuestionCard.tsx | Adds optional progress badge support (used in compact mode). |
| projects/sunbird-quml-player-react/src/components/QuestionCard/QuestionCard.module.scss | Styles compact-only progress badge + short-height spacing tweaks. |
| projects/sunbird-quml-player-react/src/components/MainPlayer/MainPlayer.tsx | Moves maxAttempts/currentAttempt logic to metadata; adds host exdata events; retake gating; resume state. |
| projects/sunbird-quml-player-react/src/components/MainPlayer/MainPlayer.max-attempts.test.tsx | Adds test coverage for maxAttempts parity, retake gating, and exdata events. |
| projects/sunbird-quml-player-react/src/components/Hint/Hint.module.scss | Adjusts top spacing for short-height viewports. |
| projects/sunbird-quml-player-react/src/App.tsx | Updates dev config to put maxAttempts under metadata. |
| projects/sunbird-quml-player-react/package.json | Version bump to 0.1.11. |
💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.
- Implement summaryType (Complete/Score/Duration/Score and Duration): Complete shows score as a fraction, Score hides duration, Duration hides score, Score and Duration/absent shows both plain. The correct/incorrect/partial/skipped breakdown is unaffected (no Angular equivalent, kept always-on). - Fix showTimer incorrectly gating internal time tracking, not just the live widget (Angular parity: showTimer only controls widget visibility). Previously a time limit was silently never enforced, and results-screen duration was never available, whenever showTimer was false/unset - both now work correctly regardless of showTimer.
sntiwari1
approved these changes
Jul 14, 2026
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to subscribe to this conversation on GitHub.
Already have an account?
Sign in.
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
Summary
Two commits: mobile-app "compact" viewport layout (paged overview, floating nav on question/review screens, tighter
spacing) + attempt-limit/results-screen parity fixes (
maxAttempts,summaryType,showTimer).What changed
Mobile-app only (desktop/portal/editor unaffected):
StartPagepaged into two screens (stats → sections) instead of one long scrollEverywhere:
maxAttemptsnow read from the correct field (metadata, notconfig) — Retake is hidden once attempts areexhausted (previously always unlimited)
summaryType(Complete/Score/Duration/Score and Duration) now actually gates score/duration on the resultsscreen — was completely ignored before
showTimerincorrectly blocking internal time tracking: a hidden timer now still enforces its time limit(auto-submits) and still reports duration on results — previously both were silently broken when the timer widget was
hidden
Scoreboardlabels are now translated (were hardcoded English)Testing
tsc -bclean; 358/358 tests passing. New tests cover max-attempts/Retake gating, theexdatahost event,`s