mahara-contributors team mailing list archive

[Kristina Hoeppner <1479679@xxxxxxxxxxxxxxxxxx>]

Hello Gordon,

Thank you for your report. This is better than trying to explain it in
140 characters on Twitter. ;-)

When you use rows, the blocks reflow within the row. That means that all
blocks from the first row are re-arranged and then the second row is
taken. Since your 4th and 5th images are in the second row and not the
first row, the 4th image is not pulled into the empty spot that is there
in the first row because Mahara essentially preserves the rows as it
would not know how to adjust them later when you go back to a wider
display.

That is a limitation of the current implementation of the layout. We
would need to make changes to the layout engine to make it more
flexible. I think one possibility would be using a Javascript grid
layout library. A few are mentioned in
https://365webresources.com/top-10-javascriptcss-grid-layout-systems-
front-end-designer/ Freewall http://vnjs.net/www/project/freewall/ in
particular looks nice and in contrast to Masonry and some others offers
the possibility to resize a block to fit the available space. It offers
numerous configuration options.

Cheers
Kristina


** Changed in: mahara
       Status: New => Confirmed

** Changed in: mahara
   Importance: Undecided => Wishlist

-- 
You received this bug notification because you are a member of Mahara
Contributors, which is subscribed to Mahara.
Matching subscriptions: Subscription for all Mahara Contributors -- please ask on #mahara-dev or mahara.org forum before editing or unsubscribing it!
https://bugs.launchpad.net/bugs/1479679

Title:
  Reflow display leaves gaps between blocks

Status in Mahara:
  Confirmed

Bug description:
  I've presented this visually with screenshots on this Mahara page - https://mahara.org/user/learntribe/screenshots2
  When reflowing blocks (in this case images in textboxes that are used as hyperlinked icons) there is an issue with how the blocks display. When using a multi-column, multi-row layout and shrinking the screen size until the layout reflows from 3 columns to 2 columns, as much of the content as possible is squeezed onto the first column, and the blocks on the second column appear to be evenly distributed to the same height as the first column (leaving gaps between them).

  Ideally the content should distribute evenly so that (if equally
  sized) half of the blocks are in the first column and the others are
  in the second column. If not of the same height they should display as
  evenly as possible according to total height of the blocks in sequence
  - from a mobile perspective this makes better use of visible space
  than a longer first column does. The rows should also be vertically
  top-aligned with each block positioned under the previous so there
  isn't a gap between the blocks in the second row, which makes it look
  as if spacing is justified vertically.

  Regards, Gordon.

To manage notifications about this bug go to:
https://bugs.launchpad.net/mahara/+bug/1479679/+subscriptions