View Issue Details
| ID | Project | Category | View Status | Date Submitted | Last Update |
|---|---|---|---|---|---|
| 2757 | Composr | core_abstract_interfaces | public | 2016-08-08 01:31 | 2016-10-21 01:20 |
| Reporter | PDStig | Assigned To | Chris Graham | ||
| Priority | high | Severity | @40@ | ||
| Status | resolved | Resolution | fixed | ||
| Summary | 2757: Replace grids with flex boxes | ||||
| Description | I'm finding that the catalogue/gallery grids are very inefficient and ugly... especially if the grids are different sizes. This could be remedied by implementing the more modern and efficient flex box system. However, it could also result in issues with browser compatibility | ||||
| Additional Information | Issue edited to be more clear. - Chris | ||||
| Tags | No tags attached. | ||||
| Attach Tags | |||||
| Attached Files | |||||
| Time estimation (hours) | 5 | ||||
| Sponsorship open | |||||
|
|
This needs clarifying. I'm not sure what an "AJAX grid" is... we're talking about CSS and HTML, so how is AJAX involved? What do you mean by "different sizes"? I guess you mean if you style multiple instantiations of a catalogue entry grid and use the same CSS for all of them, then you don't get an alignment tuned for any of them. However, that just seems par de course, a themer working on a site with varied layouts and multiple content types would need to spend sufficient time creating individual template sets and/or chaining more sophisticated CSS rules contextually. Certainly if images are involved the layout isn't just going to optimise itself using a flexbox model as those images are going to need thumbnailing out at the correct sizes at the Tempcode layout, not the CSS layer (so as to not waste bandwidth) - that is unless there's a responsive design approach, where you might accept that tradeoff and require higher-bandwidth connections. |
|
|
I must have gotten confused then when I saw "block_ajax_wrapper" in the HTML. By different sizes, I meant heights. So you may have one entry in the grid whose box height is 180 pixels while the rest are 220. And then that can create a non-uniformed and rather ugly look to how the entries display (example, in the next row of entry boxes, the one under the 180 pixel box would of course be higher up on the page than then ones under the 220 boxes. It would look nicer if the tops of all entry boxes in a row were at the same place / aligned.) Additionally, if you have boxes with multiple heights in one "row", you may end up with, say, one single box in the second "row" all the way on the right hand side... and no other boxes in that row... and then it continues with the entries in a third "row" as normal. Flexboxes for the grids would be more efficient because it could level out the entries so they all look uniform... and it would prevent random "floating entries" on their own line... while also giving a nice responsive functionality. Flexboxes could also pad out each entry equally. I actually modified the templates to incorporate flex boxes on one of the Composr sites I host. You can see its implementation at https://wwsu1069.org/shows . So something like that IMO would work wonderfully with Composr. Of course, take note in this implementation that I removed boxes and headers... but that was a personal touch and not part of what I'm going for in this idea. In addition, I have each entry set to baseline alignment, whereas in my recommendation they should probably be left at default (stretch) since entry titles are at the top of a box in an h3 tag. |
|
|
I forgot to mention this applies just to grid-like displays, such as the image grid layout of catalogue entries and MAYBE grid display of gallery entries. I have uploaded two screenshots. current_layout shows a demonstration layout of catalogue entries in image grid view using the default template for Composr 10. Notice how non-uniform the entries are. my_layout is the same catalogue (with some entries cut out due to screen size) but with my edits of the templates to utilize flex boxes and "baseline" container alignment... as well as the use of no_image when no image is present instead of a "view" link. I also made the first two fields visible in truncated form under each entry, but that is a personal touch for the client and not specifically part of my pitch. But notice how the entries are all uniform and look much more appealing. |
|
|
Okay, I definitely agree. 'ajax' is just in the templates to reference the infinite scrolling feature. The normal solution to this is to use min-height, but it doesn't solve the orphan final line situation, and it's really clunky. IE9 and IE10 don't support flexbox: http://caniuse.com/#feat=flexbox But there's a polyfill: https://github.com/jonathantneal/flexibility |
|
|
Mozilla Firefox also sometimes doesn't use flexboxes properly, aka. doesn't make them as wide as you set them to be... but IMO still looks better than our current grid layout. Flexibility seems like it may work for older browsers and could definitely be used in addition to native flexboxes... though it requires Javascript so that's a downfall :( |
|
|
So an idea: Instead of replacing grid layout with flex boxes, have it be a separate display option. Flex box layout will assume field 1 is title / headline (which appears below the picture in the flex box), field 2 is the picture, and field 3 is a short description (appears below the title/headline). |
|
|
The following CSS selectors are implemented min-height+float/table-cell/inline-block layouts that would be better as flex boxes... do_next.css: .do_next_item>div cns_member_directory.css: .block_main_members__boxes .cns_member_box .block_main_members>div cns_member_profiles.css: .cns_profile_friends galleries.css: .gallery_regular_thumb .img_thumb_wrap catalogues.css: .display_type_GRID .catalogue_entry_box_thumbnail forms.css: .radio_list_picture .page_running_topics .radio_list_picture filedump.css: .filedump_thumbnails .box .box_inner global.css: .media_set a |
|
|
Implemented for all the above (catalogues, galleries, etc). The look & feel is basically unchanged, just flexbox provides more reliable and flexible rendering. For catalogues and galleries we're using proportional rendering with the image width scaled - 4 per row. Mobile mode will be 1 per row. |
| Date Modified | Username | Field | Change |
|---|---|---|---|
| 2016-08-08 01:31 | PDStig | New Issue | |
| 2016-08-08 01:38 | Chris Graham | Note Added: 0004212 | |
| 2016-08-08 09:14 | PDStig | Note Added: 0004213 | |
| 2016-08-08 18:51 | PDStig | File Added: current_layout.png | |
| 2016-08-08 18:51 | PDStig | File Added: my_layout.png | |
| 2016-08-08 18:55 | PDStig | Note Added: 0004214 | |
| 2016-08-09 00:42 | Chris Graham | Note Added: 0004219 | |
| 2016-08-09 00:44 | Chris Graham | Summary | Replace AJAX grids with flex boxes => Replace grids with flex boxes |
| 2016-08-09 00:44 | Chris Graham | Description Updated | |
| 2016-08-09 00:44 | Chris Graham | Additional Information Updated | |
| 2016-08-09 01:33 | PDStig | Note Added: 0004221 | |
| 2016-08-11 20:38 | Chris Graham | Time estimation (hours) | => 5 |
| 2016-10-13 23:16 | PDStig | Note Added: 0004426 | |
| 2016-10-20 03:21 | Chris Graham | Note Added: 0004454 | |
| 2016-10-20 04:35 | Chris Graham | Note Edited: 0004454 | |
| 2016-10-20 04:36 | Chris Graham | Note Edited: 0004454 | |
| 2016-10-20 19:32 | Chris Graham | Note Edited: 0004454 | |
| 2016-10-20 21:15 | Chris Graham | Note Edited: 0004454 | |
| 2016-10-21 01:20 | Chris Graham | Note Added: 0004458 | |
| 2016-10-21 01:20 | Chris Graham | Status | Not Assigned => Resolved |
| 2016-10-21 01:20 | Chris Graham | Resolution | open => fixed |
| 2016-10-21 01:20 | Chris Graham | Assigned To | => Chris Graham |
