Homepages: Add option for smaller sizes tiles/widgets

[jccote-infor]

Is your feature request related to a problem or use case? Please describe.
We are working a design that contains smaller elements than the current ones in the home page see designs on https://jira.infor.com/browse/STS-90

First attempt to work through homepage provided no means to adjust the tile set's gutter width, leaving large gaps between smaller tiles. These seems to be because its set to 360px widgets.

This is a request to allow the home page to use tiles in a 259px (or as close as possible using the math). Like the designs in the link.

Describe the solution you'd like

• Add a setting/way in the home page component to do this design and add an example.
• Change the block grid to have layout animations and use flex or css grid, including animations when adding new tiles

Describe alternatives you've considered

• Current attempt switches presentation from homepage to the blockgrid control. however this lacks animations
• Move to flexlayout

Additional context

• Stratus Team
• STS-90 in jira

Dev Tasks Summary

• add an example with 260px boxes
• add options for 5/6 to work in that size
• check it works to add and remove boxes when using those sizes
• Design is on https://jira.infor.com/browse/STS-90 so they need that to work basically in home page
• HomePages: Animation and refresh doesnt work the first time #4686 resolve this so timeout isnt needed

[tmcconechy]

Just discussed this with @deep7102 and we think that it might be the easiest to add animations to the block grid and fix that up (use css grid and flex box now since we dont need IE 9 anymore)

[jccote-infor]

Determined discussing with Tim that the current approach with blockgrid may be our path. I'll do the light fixes advised in the pull request then put aside for January sprint.

Thanks all, Jerry

[tmcconechy]

Cool, Yeah that way you can move forward with something. Then we will add the animations.

[tmcconechy]

Possible solution posted on MS teams by Jan

Just needed to overwrite widget width, min/max-width styles. everything work as expected.

homepageOptions: SohoHomePageOptions = {
  gutterSize: 20,
  widgetWidth: 300,
  widgetHeight: 300,
  animate: true,
  columns: 5,
};

<div soho-homepage [homePageOptions]="homepageOptions">
  <df-add-tile (addTile)="addTile()"></df-add-tile>
  <div soho-widget [removable]="true" class="df-tile">
  </div>
  ....
</div>

.widget.df-tile {
  width: 300px;
  min-height: 300px;
  max-height: 300px;
}

Let me know if that resolves it for you here.

[tmcconechy]

In addition they would like 6 columns to work. So i think we just need to work in this example and ensure 4,5,6 columns work.

[jccote-infor]

Determined that existing homepage widget does have an input point for the core constants of tile and gutter size, so we can stick with it instead of blockgrid. Many thanks to Jan Dvorak for the assist. Some adjustments to the core resize function are needed to effect five and six columns in responsive layout - see attachment sts90_resize.txt here
sts90_resize.txt
for a revision that seems to work (limited dev testing so for, more focused testing needed)

Remaining work to be done - the class/LESS revisions within the tile work but the class naming is unclear, will improve on those.

[jccote-infor]

We're considering setting the widget sizing within IDS Angular. We reduced from 360 or so down to a 259px square, looks like the change would go to _homepage.scss, defs for (.homepage .card, .homepage .widget)

[tmcconechy]

We can look when we tackle this. The types are there https://github.com/infor-design/enterprise-ng/blob/master/projects/ids-enterprise-typings/lib/homepage/soho-homepage.d.ts#L21

But in order to introduce the css change, i guess we would have to add a "small-widget" size. If we did i dont think the correct size would be 259 but perhaps 260. So basically we would have to add a new class so thats not really an NG thing.

[jccote-infor]

whatever the number, I might be on the wrong track myself. The value set Jan showed us how to fill in is the driver, perhaps into direct element style settings

[janahintal]

All pages are working as expected. Will now move to done. Thank you.

http://localhost:4000/components/homepage/test-small-add-remove-widget.html
http://localhost:4000/components/homepage/test-small-column-five.html
http://localhost:4000/components/homepage/test-small-column-six.html
http://localhost:4000/components/homepage/test-small-editable.html
http://localhost:4000/components/homepage/test-small-scenario-d.html
http://localhost:4000/components/homepage/test-small-scenario-f.html
http://localhost:4000/components/homepage/test-small-scenario-l.html
Example for six column
http://localhost:4000/components/homepage/example-six-column.html

[jccote-infor]

Stratus Dev is working well with it. The home page tiles are responding well at all column counts up to 6, the most I can get at their new reduced size. This completes the -ng side of JIRA STS-118 (paging on home page) and the still-in-process STS-160 (reduce home page tile size)

Many thanks.