Umbrella Sakai Mobile View is too wide or not responsive
Description
Attachments
depends on
relates to
Activity
Automation for Jira July 31, 2024 at 2:10 PM
A pull request has been created, "SAK-49969 library fixed the mobile view for assignment and chatroom", you can see it at https://github.com/sakaiproject/sakai/pull/12769
Christina Schwiebert May 2, 2024 at 7:13 PM
Additionally - Permissions (in all tools that have the permissions tab)
Wilma Hodges April 24, 2024 at 3:55 PM
OK, I went through and re-tested with Chrome Responsive Design and on my iPhone. I noted in the Jira description if there were any differences between the FF responsive mode and the Chrome responsive mode and/or iPhone 13. Most of them displayed the same issues, but the were a few tools that differed slightly (Discussions, Polls, Search, Statistics). Search does look ok on Chrome and iPhone, although it lets you drag/shift side to side a bit from left to right, which seems strange.
Adrian Fish April 24, 2024 at 7:08 AM
Sorry, didn’t read your comment properly. You turn responsive mode on in Chrome in the dev tools console. The icon is to the top left of the console. I’ve attached a screenshot.
Adrian Fish April 23, 2024 at 7:29 PM
Did you test search?
Details
Details
Priority
MajorAffects versions
23 Status
Components
Assignee
Adrian FishReporter
Wilma Hodges
When viewed in mobile view, the responsive design for several tools is too wide for a cell-phone sized mobile device, resulting in a screen that appears to cut off data on one side and requires sideways scrolling to view the information. This is a very awkward and unpleasant experience for mobile device users.
Ironically, some of the “older” tools in Sakai seem to be sized appropriately when viewed in mobile view, while several of the “newer” tools are the ones that don’t size correctly for the screen.
I have gone through tool by tool for all of the core, unstealthed tools typically available in a course site. I will include screenshots of the problematic ones below.
Note: For my testing and screenshots, I used Firefox’s Responsive Design View with the iPhone SE 2nd edition selected for the size profile (i.e. 375 x 667). I also spot checked with a few other device sizes for other common phones, but the main difference was in the length of the display, not in the width of the device. Newer models like iPhone 12/13 Pro (390 x 844) and Galaxy S20 (360 x 800) still experienced the same issues with content being cut off.
Tool
Status
Screenshot/s
Overview
good
Announcements
good
Assignments
assignment list page is ok, but student submission and instructor grading screens are too wide
Calendar
too wide
Chat Room
width ok, but Messages tab is partially hidden by Users in Chat tab and difficult to select
Commons
too wide
Contact Us
good
Conversations
good
Dashboard
too wide; Site information section does not resize images and looks really bad
see associated Jira for more info and screenshots https://sakaiproject.atlassian.net/issues/SAK-49917
Discussions
forum/topic list looks ok, but the authoring screen when starting a conversation is too wide, also instructor add forum/topic screen is too wide
*Re-tested on 4/24/24 and instructor add forum/topic width looks ok in Chrome responsive mode and iPhone 13. However, “Start Conversation” screen is still too wide for both student and instructor on all browsers tested.
Drop Box
too wide
Email
mostly good, but “Subject” is cut off a bit on right side
Email Archive
good
External Tool (External Tool)
seems ok, although this may vary by tool
Gradebook
Instructor spreadsheet view doesn’t work at all (maybe include a message in the UI about this?), but the instructor’s view of an individual student is ok, and quick entry screen seems to work well. However, the student view of their own grades is too wide. Also instructor Categories and Weighting in Settings is too wide.
Lessons (Lessons)
good overall, although there is some odd overlapping when viewing collapsible sections that have been expanded.
Messages
the Messages landing page looks fine, but when you click into a folder to actually view messages, it is too wide and table displays poorly
News
good
Podcasts
good
Polls
Polls landing page in student view is just a little bit too wide; however, the poll and poll results pages look fine.
*Re-tested on 4/24/24 and the width is slightly better in Chrome and on iPhone, but it is still just a tiny bit too wide on student view of tool landing page, as well as on the instructor Add Poll screen for the CKEditor box.
PostEm
Instructor view not responsive - table displays poorly. Also, student view of individual feedback table is not responsive (although the landing page to select items to view looks ok)
Resources
too wide
*Re-tested on 4/24/24 and this is still an issue. Be sure to test it with some files/folders that have longer filenames.
Roster
good
Rubrics
good
Search
too wide
*Re-tested on 4/24/24 and Search does look ok in Chrome responsive mode and on iPhone 13. However, it does let you drag the screen sideways a bit, shifting right and left on both Chrome and iPhone, which seems a bit odd/unexpected.
Section Info
table doesn’t resize and edit section page too wide
Sign-up
table doesn’t resize and meeting detail is too wide
Site Info
good
Statistics
Stats Overview page is a little too wide, but the Reports page looks fine.
*Re-tested on 4/24/24 and Overview page looks ok on iPhone 13. In Chrome it still lets you shift left/right a little (similar to Search), but the content is all visible on the screen.
Syllabus
Student view looks fine. However, in Instructor view, the Add page is a little too wide, and the Manage page isn’t responsive at all
Tests & Quizzes
a little too wide, although student view of quiz looks ok
Web Content
good
Wiki
good