Uploaded image for project: 'Sakai'
  1. Sakai
  2. SAK-40530

Roster > UI improvements and new features

    Details

    • Type: Feature Request
    • Status: RESOLVED
    • Priority: Major
    • Resolution: Fixed
    • Affects Version/s: 19.0
    • Fix Version/s: 19.0
    • Component/s: Roster
    • Test Plan:
      Hide

      In a Course site with at least one official roster properly attached, perform the following:

      1. Go to the Roster tool (add it to the site if not already present)
      2. Verify the following:
        1. "Overview" tab is loaded by default in the "Cards" layout
        2. Data is loaded and displayed, and looks generally eye pleasing
        3. Toggling between the "Layout" options dynamically changes the presentation of the data in the table on click
        4. Page size for both "Cards" and "Photo Grid" layouts fill the usable portion of the screen with some extra to provide a scroll bar, and does not leave partially completed rows (unless it's the absolute last row possible)
      3. Verify the following for each layout type:
        1. Infinite scrolling works, with lazy loading of members
        2. Toggling between "Photo Source" works
        3. Role and Group filters both work
        4. Selecting a group from a student's group selector drop down applies the appropriate group filter
        5. Search filter works, and provides clickable auto-complete matches
        6. Clear button removes any/all filters and search criteria applied
        7. Export works, and obeys any/all filters and search criteria applied
        8. Print works, obeys any/all filters and search criteria, obeys the currently selected "Layout" type, and looks generally eye pleasing
          1. Caveat: Firefox currently has a known, unfixed bug which causes it to truncate any flexed containers when printing. Please use a browser other than Firefox to test printing. See here for more details on the Firefox bug.
      4. In "Photo Grid" mode, verify that the "Hide Names" modifier works:
        1. When enabled, all names should disappear from the photo grid
        2. Scroll to load more students, and verify that these new students do not display names
        3. Disable the setting, and verify all names come back; scroll to load more and verify new names are present
        4. Enable the setting again, switch to "Cards" or "List" mode
        5. Verify the "Hide Names" effect does not leak into these other layout modes
      5. In "List" mode, verify that the "Hide Photos" modifier works:
        1. when enabled, the "Photo" column should disappear entirely
        2. Scroll to load more students, and verify that these new students do not display photos
        3. Disable the setting, and verify all photos come back; scroll to load more and verify new photos are present
        4. Enable the setting again, switch to "Cards" or "Photo Grid" mode
        5. Verify the "Hide Photos" effect does not leak into these other layout modes
      6. Retest all of the above in the "Enrollment Status" tab
      7. Retest all of the above (both "Overview" and "Enrollment Status") in a mobile browser
        1. Verify that the "List" view mode is not available in mobile browsers
      Show
      In a Course site with at least one official roster properly attached, perform the following: Go to the Roster tool (add it to the site if not already present) Verify the following: "Overview" tab is loaded by default in the "Cards" layout Data is loaded and displayed, and looks generally eye pleasing Toggling between the "Layout" options dynamically changes the presentation of the data in the table on click Page size for both "Cards" and "Photo Grid" layouts fill the usable portion of the screen with some extra to provide a scroll bar, and does not leave partially completed rows (unless it's the absolute last row possible) Verify the following for each layout type : Infinite scrolling works, with lazy loading of members Toggling between "Photo Source" works Role and Group filters both work Selecting a group from a student's group selector drop down applies the appropriate group filter Search filter works, and provides clickable auto-complete matches Clear button removes any/all filters and search criteria applied Export works, and obeys any/all filters and search criteria applied Print works, obeys any/all filters and search criteria, obeys the currently selected "Layout" type, and looks generally eye pleasing Caveat : Firefox currently has a known, unfixed bug which causes it to truncate any flexed containers when printing. Please use a browser other than Firefox to test printing. See here for more details on the Firefox bug. In "Photo Grid" mode, verify that the "Hide Names" modifier works: When enabled, all names should disappear from the photo grid Scroll to load more students, and verify that these new students do not display names Disable the setting, and verify all names come back; scroll to load more and verify new names are present Enable the setting again, switch to "Cards" or "List" mode Verify the "Hide Names" effect does not leak into these other layout modes In "List" mode, verify that the "Hide Photos" modifier works: when enabled, the "Photo" column should disappear entirely Scroll to load more students, and verify that these new students do not display photos Disable the setting, and verify all photos come back; scroll to load more and verify new photos are present Enable the setting again, switch to "Cards" or "Photo Grid" mode Verify the "Hide Photos" effect does not leak into these other layout modes Retest all of the above in the "Enrollment Status" tab Retest all of the above (both "Overview" and "Enrollment Status") in a mobile browser Verify that the "List" view mode is not available in mobile browsers

      Description

      The linked PR proposes the following changes to both the "Overview" and "Enrollment Status" tabs:

      • Re-organize the "table" toolbar items according to SWITCH (see SAK-40098 and SAK-40248 for related changes in other tools):
        • Role, Group, and Search components on the left
        • Action buttons in the middle
        • View options on the right
      • Introduces 3 distinct view styles: "Cards", "Photo Grid" and "List"
        • Can be toggled by the user to alter how the data on the page is displayed
        • "List" is similar to what used to be the default view at large screen sizes: a spreadsheet or table view
          • Not available at mobile screen sizes, as it's table format is not suitable for small screens. This is also inline with previous behaviour which would dynamically force the user to a card-style layout at mobile screen sizes
          • Default view style for the Enrollment Status tab
        • "Photo Grid" is similar to what used to be the "Pictures Only" mode checkbox: a grid of photos and very basic information
        • "Cards" is similar to what used to be the default view at mobile screen sizes: a list or table of cards containing both pictures, and a larger subset of information
          • Default view style for the Overview tab
      • Introduces 2 new view modifiers: "Hide Names" and "Hide Pictures"
        • "Hide Names" is only available in the Photo Grid view style, and is useful for instructors who are trying to remember student's names by their pictures
        • "Hide Photos" is only available in the List view style, because the other two view styles are designed specifically to show the pictures.
      • Introduces a drop-down control for group selection, rather than a list of links
        • This makes the "List" view more visually appealing
        • Is absolutely necessary for both "Cards" and "Photo Grid" views, to constrain the width and height of the cards to known values to standardize design
      • Introduces dynamic page size calculation (necessary in an "infinite scrolling" paradigm)
        • SAK-32109 describes a problem where the page has ample room to display more students, but the default page size of 10 wasn't enough to fill the page. The implemented solution to this was to expose the page size value as a static, server side sakai.property. The idea was that you could increase the number so that it would fill the page, in this one circumstance
        • This isn't ideal, because depending on the device being used the amount of students that can be rendered on screen is variable. So even if you increased the sakai.property to 20, it still might not fill the page on a large size screen.
        • On top of this, you don't want to raise the page size in sakai.properties to a really high number across the board, because that's overkill in 99% of situations.
        • A more flexible solution to this is to remove the sakai.property, and dynamically calculate the page size client-side based on the view style and the amount of real estate the user's screen has on tool load, and then pass the appropriate page size to the server for delivering pages
        • Both "Cards" and "Photo Grid" now have dynamically calculated page sizes, so that each "page" fills the user's screen portion (with a little extra to help emphasize the scroll bar)
          • "List" view falls back to either the card or photo grid view's page size (whichever you last viewed)
          • We can't calculate the page size for "List" view because each row's height is variable depending on the text data within the row
        • This dynamic page size also eliminates the problem of having a static page size which is not divisible by the number of cards which can fit in a "row" of the users screen (for "Cards" and "Photo Grid"). This results in the last item, or items, of a page to be hanging at the bottom in an incomplete row, which can give the user the impression that there are no more students to load despite a scroll bar being present
          • For example, say the page size is 10 and the user's screen can fit 3 cards in each row. This would produce 3 rows of 3, and a 4th row of only 1 card
        • As such, "roster.display.pageSize" has been removed from default.sakai.properties

      NOTE: this PR removes the sakai.property "roster.display.pageSize"

        Gliffy Diagrams

          Attachments

          1. cardView_mobile.png
            cardView_mobile.png
            50 kB
          2. cardView.png
            cardView.png
            120 kB
          3. listView_hidePictures.png
            listView_hidePictures.png
            137 kB
          4. listView.png
            listView.png
            144 kB
          5. photoGridView_hideNames.png
            photoGridView_hideNames.png
            81 kB
          6. photoGridView_mobile.png
            photoGridView_mobile.png
            47 kB
          7. photoGridView.png
            photoGridView.png
            96 kB

            Issue Links

              Activity

                People

                • Assignee:
                  bjones86 Brian Jones
                  Reporter:
                  bjones86 Brian Jones
                • Votes:
                  0 Vote for this issue
                  Watchers:
                  2 Start watching this issue

                  Dates

                  • Created:
                    Updated:
                    Resolved:

                    Git Source Code