Uploaded image for project: 'Magnolia UI'
  1. Magnolia UI
  2. MGNLUI-4485

Resurface: Add zoom levels for thumbnail view

    XMLWordPrintable

Details

    • Task
    • Resolution: Obsolete
    • Neutral
    • 6.0
    • None
    • None
    • None
    • 8

    Description

       As a user i want the thumbnails UI to behave nicely & look good on different zoom levels so browsing in thumbs view becomes a joy.

       

      Note:

      MGNLUI-4464 had us think about how to best dimension thumbnails.

      The slider always generates unused space to the right side and doesn't display caption text nicely, so instead of the slider we provide 3 zoom levels.

      With this move responsiveness also becomes a child's play.

      Acceptance criteria:

      • Replace slider with 3 zoom level buttons as in mock here (will be added shortly)
      • Implement 3 zoom levels with certain amount of thumbs per row:
        • 12 thumbnails per row (no caption)
          • 12 * 86 + 12 = 1044
        • 8 thumbnails per row (with caption, sfont size 12px)
          • 8 * 129.5 + 8 = 1044
        • 4 thumbnails per row (caption, font size 15px)
          • 4 * 260 + 4 = 1044
      • Make sure image and caption display nicely for all 3 levels

       

      Checklists

        Acceptance criteria

        Attachments

          1. desktop_max.png
            desktop_max.png
            758 kB
          2. desktop_med.png
            desktop_med.png
            849 kB
          3. desktop_min.png
            desktop_min.png
            406 kB
          4. mobile_max.png
            mobile_max.png
            201 kB
          5. mobile_med.png
            mobile_med.png
            259 kB
          6. mobile_min.png
            mobile_min.png
            330 kB

          Issue Links

            Activity

              People

                Unassigned Unassigned
                mmichel Maxime Michel
                Votes:
                0 Vote for this issue
                Watchers:
                1 Start watching this issue

                Dates

                  Created:
                  Updated:
                  Resolved:

                  Checklists

                    Task DoR