Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

Fix landing page estate section layout. #213

Merged
merged 3 commits into from
Mar 25, 2021
Merged

Fix landing page estate section layout. #213

merged 3 commits into from
Mar 25, 2021

Conversation

Hyperkid123
Copy link
Contributor

jira: https://issues.redhat.com/browse/RHCLOUD-13163
Fixes the estate seaction after getting data from API.

Instead of a custom flex layout, it uses the description list. That can be further customized for smaller screens via its props. The DL will keep the rows horizontally and columns vertically aligned because its using a grid layout.

Before

screenshot-ci cloud redhat com-2021 03 24-15_19_48

After

screenshot-ci foo redhat com_1337-2021 03 24-15_21_32

@Hyperkid123 Hyperkid123 requested review from rvsia and a team March 24, 2021 14:21
@ryelo ryelo requested a review from epwinchell March 24, 2021 18:22
@epwinchell
Copy link
Contributor

epwinchell commented Mar 24, 2021 •
edited
Loading

@Hyperkid123

  • There should be a max of 6 items in the Estate section
  • items should not stretch in the widest viewport, but have a fixed width , with the overall width limited to 1160px (1450px total with the nav)
  • items can stretch at the intermediate layout with 3 (out of 6) items per line
  • Mobile view should go horizontal like it was before

(I wasn't able to accomplish all this without flex, but maybe you'll have better luck.)

@Hyperkid123 Hyperkid123 mentioned this pull request Mar 25, 2021
Open
@Hyperkid123
Copy link
Contributor Author

@epwinchell got the updates:

items should not stretch in the widest viewport, but have a fixed width , with the overall width limited to 1160px (1450px total with the nav)

We can have a discussion about it here: #215 (comment) I would exclude that requirement from this PR and keep it for some final adjustment. Same with font sizes spacings etc. The layout is the priority of this PR.

I have used PF values for screen breakpoints.

Large

screenshot-ci foo redhat com_1337-2021 03 25-11_17_58

Medium

screenshot-ci foo redhat com_1337-2021 03 25-11_17_38

Small

screenshot-ci foo redhat com_1337-2021 03 25-11_16_51

@Hyperkid123 Hyperkid123 changed the title Fix landing page estate section. Fix landing page estate section layout. Mar 25, 2021
@Hyperkid123 Hyperkid123 merged commit d3cabd3 into RedHatInsights:master Mar 25, 2021
@Hyperkid123 Hyperkid123 deleted the fix-header branch April 15, 2021 08:07
Hyperkid123 added a commit that referenced this pull request Apr 26, 2021
@Hyperkid123 @karelhala
@arivepr @ryelo @epwinchell @rvsia @PanSpagetka @mattnolting @dlabrecq
Prod stable update (#268)
15e5ea4 
* Migrate webpack 5 (#173)

* Migrate to webpack 5

* Apply platform linting rules.

* Fix landing page bug by using full path (#175)

* Landing nav (#174)

* Remove PF babel cjs mapping.

* Add chubk names to lazy loaded routes.

* Update landing layout to accomodate the left nav.

* Create navigation focus trigger mechanism.

* Add navigation overlay component.

* Add nav overlay sticky syling to nav item.

* Udpdate PF

* Fixed missing overlay divider.

* Fix tests after layout changes.

* Remove landing nav from unauthed page.

* Temporarily exclude qa-beta from custom release.

* Mockup - Console Landing Page Layout  (#180)

* fix nav overlay (#181)

* Remove redhat from certain product names (#176)

* add beta prefix on beta routes (#182)

* estate cleanup (#183)

* cleanup 2 (#184)

* Landing page refactor 3 (#185)

* Remove left nav from code. (#186)

* Use landing nav esi partial. (#187)

* Landing page refactor 4 (#188)

* Use chrome 2 container (#189)

* Chrome 2 styling follow-up (#190)

* Landing page refactor 5 (#191)

* Landing page refactor 6 (#192)

* Make icon components (#193)

* Landing page refactor 5

* add some icons

* remove file

* classnames

Co-authored-by: ewinchel <[email protected]>

* Add Insights SVG and cleanup (#194)

* Landing page refactor 7 (#195)

* Landing page refactor 7

* Landing page refactor 7

* add new link and add beta stuff (#201)

* rework first panel and change content (#202)

* hide labels for summit recordings (#204)

* Prepare scaffolding for api requests (#203)

* Prepare scaffolding for api requests

* Remove withRouter from app

* Unblock landing page deploy to qa (#205)

* Console landing page applet system. (#206)

* Update all dependencies.

* Add simple renderers for content.

* Add Cost API data (#207)

* Ansible api (#208)

* Remove old console logs.

* Prepare initial ansible data fetching

This is just a first iteration of the API. We will make it pretty once
we have all APIs ready and data used in renderers.

* Add RHEL schema (#209)

* Use api to load content (#212)

* Create unified content output.

* Add unknown icon to renderers

* Load content data to redux

* Use content data in landing page.

* use correct name for content buckets

* Pre load costAppId

* Fix recommendations panel (#214)

* Fix recommendations panel

* Make button the same width

* Fix footer layout (#216)

* Fix footer layout

* Use grid layout for footer tile.

* Fix landing page estate section layout. (#213)

* Fix landing page estate section.

* Limit estate to max 6 items.

* Make estate responsive.

* Clean up api code (#218)

* Create api requests processor.

* Generalize ansible shcema.

* Generalize cost schema

* Make create content data function scalable.

* Clear propTypes for tiles (#217)

* Gate api behind permissions (#219)

* Add permissions processor method.

* Allow permissions for recommendation and footer tiles.

* Adjust ansible schema to use permissions.

* Add response processor to content resolver.

* Adjust rhel to pull data from API.

* Group data loading sources to one function.

* Decouple tiles loading (#220)

* Estate renderer loads data independently.

* Adjust ansible and rhel to independent loading.

* Adjust cost to independent loading.

* Structure estate into separate sections.

* Add closure for permissions (#221)

* Add closure for permissions

* Retry the permission 5x to catch errors

* Update ansible permissions (#222)

* Fix hasPermissions to mirror chrome implementation.

* Add catalog and approval admin roles permissions

I've suggested that the team adds catalog:*:* and approval:*:*
permissions to these roles. Until they add them, we will have to keep
this list of permissions unfortunatelly.

* Add more features for recommendation tile (#223)

* Add more features for recommendation tile

* Update snapshots

* Fix missing condition

* Use useRequest hook

* Clean up for tiles (#224)

* Move all files regarding landing page tiles to one folder

* Rename renderer files to use same naming

* Fix propTypes warnings

* git mv to enforce name changes

* Update wrong import path

* Use reducer for landing page (#225)

* Use reducer for landing page

* Check that permission are an array

* Check permission is an array

* Project cleanup (#226)

* Big cleanup

- removed technologies reducer as it is just a constant 🤷
- removed unused Redux function, **they will stay in git, so you can always get them back!**
- fixed all tests, no errors, no warnings, no redundant stores, etc.

* Remove providers from tests where are not required

* Add missing filtering from mapStateToProps (#227)

* Add landing page tests (#229)

* Add more tests (#231)

* landing page refactor 8 (#228)

* landing page refactor 8

* landing page refactor 8

* Use permissions cache for loosePermissions (#233)

* Recommendations redesign (#232)

* Use grid layout for footer tiles. (#230)

* Update content (#234)

* Allow API requests for config-try-learn section.

* Add cloud access content.

* Add RHEL incidents recommendation endpoint.

* Add FIFI data.

* Display items in correct order.

* Fix false negative "isNot" condition result.

* Use "useRequest" in config-try-learn tile to get data.

* Update landing page content

- Add new tiles
- Hide tiles that do not have required data

* Update header color to remove visible bg transtion.

* Fix double scrollbar. (#237)

* Update footer icons nad titles. (#238)

* Recommendations restyling 2 (#236)

* Recommendations 2

* Recommendations 2

* Add icons and remove empty recommendation sections (#235)

* Add icons to tiles.

* Remove recommendation tiles if the fail condition

If we just hide the tiles but, not remove them, we can end up in a
situation when we have the Section title, but no visible children.
Removing them from the data makes it simple to hide empty sections.

* Use useRequest callbacks to hide recommendation.

* Divide recommendations into sections (#239)

* Divide middle section into 4 categories.

* Adjust middle section tile removal.

* Generalize recommendations data creation.

* Add default recommendations content.

* Add missing icons to ansible tiles.

* Adjust rhel estate section permissions

rule 'inventory:*:*' does not exist on prod. The content will be shown
if one of ['inventory:*:*', 'inventory:*:read', 'inventory:hosts:read']
permissions is true

* Add estate scroll (#240)

* Allow horizontal mouse wheel scrolling of the estate section.

* Change estate overflow property to auto.

* Remove console.log

* Move recommendation section title to first section tile.

* Title updates (#241)

* add footer background (#243)

* Update prod beta (#267)

* replace CTL icons (#245)

* Update content (#246)

* Gate empty recommendation tile description tag. (#247)

* Update content. (#248)

* Add empty state (#244)

* Add empty state

* Use existin default json

* Remove App services default

* Address QA feedback (#249)

* Add HTML titles to estate text

* Fix missing catalog links

* Open external links in a new tab.

* tweak recommendations spacing (#250)

* Estate section skeleton tweak (#251)

* styling cleanup and adjustments (#253)

* Estate multi-line text with truncation (#255)

* styling cleanup and adjustments

* Estate multiline truncation fix

* Add managed services content. (#254)

* feat(landing-page): new 2021 landing page (#252)

* feat(landing-page): new 2021 landing page

* feat(landing-page): new 2021 landing page

* feat(landing-page): removed inline style

* feat(landing-page): updated comment @epwinchell

* feat(landing-page): updated quotes

* updated image paths

* updated colors

* fix tests

* updated youtube vid, added ouiaId

* fixed lint errors

Co-authored-by: Martin Marosi <[email protected]>

* Footer fixes (#257)

* update marketing urls (#258)

* update marketing urls

* update beta link

* Use new Sources queries to create links (#256)

* Update Un-entitled modals (#260)

* refined new landing page (#261)

* Update content (#259)

* update url for data collection info (#263)

* Fix estate tiles overlap. (#262)

* Content updates (#264)

* Add periods to recommendation titles.

* Fix fifi try item typo.

* Hide orders if the total is 0.

* Fix rhel incidents condition accessor.

* Update the GCP description for Cost Management (#265)

* Enable managed services content in all environments. (#266)

Co-authored-by: epwinchell <[email protected]>
Co-authored-by: Robin Knaur <[email protected]>
Co-authored-by: Matt Nolting <[email protected]>
Co-authored-by: Ryan Long <[email protected]>
Co-authored-by: Richard Všianský <[email protected]>
Co-authored-by: Dan Labrecque <[email protected]>

Co-authored-by: Karel Hala <[email protected]>
Co-authored-by: Alexander Rivera <[email protected]>
Co-authored-by: Ryan Long <[email protected]>
Co-authored-by: Eric Winchell <[email protected]>
Co-authored-by: ewinchel <[email protected]>
Co-authored-by: Richard Všianský <[email protected]>
Co-authored-by: Robin Knaur <[email protected]>
Co-authored-by: Matt Nolting <[email protected]>
Co-authored-by: Dan Labrecque <[email protected]>
Hyperkid123 added a commit that referenced this pull request Apr 26, 2021
@Hyperkid123 @karelhala
@arivepr @ryelo @epwinchell @rvsia @PanSpagetka @mattnolting @dlabrecq
Update ci stable (#269)
1e68878 
* Migrate webpack 5 (#173)

* Migrate to webpack 5

* Apply platform linting rules.

* Fix landing page bug by using full path (#175)

* Landing nav (#174)

* Remove PF babel cjs mapping.

* Add chubk names to lazy loaded routes.

* Update landing layout to accomodate the left nav.

* Create navigation focus trigger mechanism.

* Add navigation overlay component.

* Add nav overlay sticky syling to nav item.

* Udpdate PF

* Fixed missing overlay divider.

* Fix tests after layout changes.

* Remove landing nav from unauthed page.

* Temporarily exclude qa-beta from custom release.

* Mockup - Console Landing Page Layout  (#180)

* fix nav overlay (#181)

* Remove redhat from certain product names (#176)

* add beta prefix on beta routes (#182)

* estate cleanup (#183)

* cleanup 2 (#184)

* Landing page refactor 3 (#185)

* Remove left nav from code. (#186)

* Use landing nav esi partial. (#187)

* Landing page refactor 4 (#188)

* Use chrome 2 container (#189)

* Chrome 2 styling follow-up (#190)

* Landing page refactor 5 (#191)

* Landing page refactor 6 (#192)

* Make icon components (#193)

* Landing page refactor 5

* add some icons

* remove file

* classnames

Co-authored-by: ewinchel <[email protected]>

* Add Insights SVG and cleanup (#194)

* Landing page refactor 7 (#195)

* Landing page refactor 7

* Landing page refactor 7

* add new link and add beta stuff (#201)

* rework first panel and change content (#202)

* hide labels for summit recordings (#204)

* Prepare scaffolding for api requests (#203)

* Prepare scaffolding for api requests

* Remove withRouter from app

* Unblock landing page deploy to qa (#205)

* Console landing page applet system. (#206)

* Update all dependencies.

* Add simple renderers for content.

* Add Cost API data (#207)

* Ansible api (#208)

* Remove old console logs.

* Prepare initial ansible data fetching

This is just a first iteration of the API. We will make it pretty once
we have all APIs ready and data used in renderers.

* Add RHEL schema (#209)

* Use api to load content (#212)

* Create unified content output.

* Add unknown icon to renderers

* Load content data to redux

* Use content data in landing page.

* use correct name for content buckets

* Pre load costAppId

* Fix recommendations panel (#214)

* Fix recommendations panel

* Make button the same width

* Fix footer layout (#216)

* Fix footer layout

* Use grid layout for footer tile.

* Fix landing page estate section layout. (#213)

* Fix landing page estate section.

* Limit estate to max 6 items.

* Make estate responsive.

* Clean up api code (#218)

* Create api requests processor.

* Generalize ansible shcema.

* Generalize cost schema

* Make create content data function scalable.

* Clear propTypes for tiles (#217)

* Gate api behind permissions (#219)

* Add permissions processor method.

* Allow permissions for recommendation and footer tiles.

* Adjust ansible schema to use permissions.

* Add response processor to content resolver.

* Adjust rhel to pull data from API.

* Group data loading sources to one function.

* Decouple tiles loading (#220)

* Estate renderer loads data independently.

* Adjust ansible and rhel to independent loading.

* Adjust cost to independent loading.

* Structure estate into separate sections.

* Add closure for permissions (#221)

* Add closure for permissions

* Retry the permission 5x to catch errors

* Update ansible permissions (#222)

* Fix hasPermissions to mirror chrome implementation.

* Add catalog and approval admin roles permissions

I've suggested that the team adds catalog:*:* and approval:*:*
permissions to these roles. Until they add them, we will have to keep
this list of permissions unfortunatelly.

* Add more features for recommendation tile (#223)

* Add more features for recommendation tile

* Update snapshots

* Fix missing condition

* Use useRequest hook

* Clean up for tiles (#224)

* Move all files regarding landing page tiles to one folder

* Rename renderer files to use same naming

* Fix propTypes warnings

* git mv to enforce name changes

* Update wrong import path

* Use reducer for landing page (#225)

* Use reducer for landing page

* Check that permission are an array

* Check permission is an array

* Project cleanup (#226)

* Big cleanup

- removed technologies reducer as it is just a constant 🤷
- removed unused Redux function, **they will stay in git, so you can always get them back!**
- fixed all tests, no errors, no warnings, no redundant stores, etc.

* Remove providers from tests where are not required

* Add missing filtering from mapStateToProps (#227)

* Add landing page tests (#229)

* Add more tests (#231)

* landing page refactor 8 (#228)

* landing page refactor 8

* landing page refactor 8

* Use permissions cache for loosePermissions (#233)

* Recommendations redesign (#232)

* Use grid layout for footer tiles. (#230)

* Update content (#234)

* Allow API requests for config-try-learn section.

* Add cloud access content.

* Add RHEL incidents recommendation endpoint.

* Add FIFI data.

* Display items in correct order.

* Fix false negative "isNot" condition result.

* Use "useRequest" in config-try-learn tile to get data.

* Update landing page content

- Add new tiles
- Hide tiles that do not have required data

* Update header color to remove visible bg transtion.

* Fix double scrollbar. (#237)

* Update footer icons nad titles. (#238)

* Recommendations restyling 2 (#236)

* Recommendations 2

* Recommendations 2

* Add icons and remove empty recommendation sections (#235)

* Add icons to tiles.

* Remove recommendation tiles if the fail condition

If we just hide the tiles but, not remove them, we can end up in a
situation when we have the Section title, but no visible children.
Removing them from the data makes it simple to hide empty sections.

* Use useRequest callbacks to hide recommendation.

* Divide recommendations into sections (#239)

* Divide middle section into 4 categories.

* Adjust middle section tile removal.

* Generalize recommendations data creation.

* Add default recommendations content.

* Add missing icons to ansible tiles.

* Adjust rhel estate section permissions

rule 'inventory:*:*' does not exist on prod. The content will be shown
if one of ['inventory:*:*', 'inventory:*:read', 'inventory:hosts:read']
permissions is true

* Add estate scroll (#240)

* Allow horizontal mouse wheel scrolling of the estate section.

* Change estate overflow property to auto.

* Remove console.log

* Move recommendation section title to first section tile.

* Title updates (#241)

* add footer background (#243)

* replace CTL icons (#245)

* Update content (#246)

* Gate empty recommendation tile description tag. (#247)

* Update content. (#248)

* Add empty state (#244)

* Add empty state

* Use existin default json

* Remove App services default

* Address QA feedback (#249)

* Add HTML titles to estate text

* Fix missing catalog links

* Open external links in a new tab.

* tweak recommendations spacing (#250)

* Estate section skeleton tweak (#251)

* styling cleanup and adjustments (#253)

* Estate multi-line text with truncation (#255)

* styling cleanup and adjustments

* Estate multiline truncation fix

* Add managed services content. (#254)

* feat(landing-page): new 2021 landing page (#252)

* feat(landing-page): new 2021 landing page

* feat(landing-page): new 2021 landing page

* feat(landing-page): removed inline style

* feat(landing-page): updated comment @epwinchell

* feat(landing-page): updated quotes

* updated image paths

* updated colors

* fix tests

* updated youtube vid, added ouiaId

* fixed lint errors

Co-authored-by: Martin Marosi <[email protected]>

* Footer fixes (#257)

* update marketing urls (#258)

* update marketing urls

* update beta link

* Use new Sources queries to create links (#256)

* Update Un-entitled modals (#260)

* refined new landing page (#261)

* Update content (#259)

* update url for data collection info (#263)

* Fix estate tiles overlap. (#262)

* Content updates (#264)

* Add periods to recommendation titles.

* Fix fifi try item typo.

* Hide orders if the total is 0.

* Fix rhel incidents condition accessor.

* Update the GCP description for Cost Management (#265)

* Enable managed services content in all environments. (#266)

Co-authored-by: Karel Hala <[email protected]>
Co-authored-by: Alexander Rivera <[email protected]>
Co-authored-by: Ryan Long <[email protected]>
Co-authored-by: Eric Winchell <[email protected]>
Co-authored-by: ewinchel <[email protected]>
Co-authored-by: Richard Všianský <[email protected]>
Co-authored-by: Robin Knaur <[email protected]>
Co-authored-by: Matt Nolting <[email protected]>
Co-authored-by: Dan Labrecque <[email protected]>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Reviewers

@epwinchell epwinchell epwinchell approved these changes

@rvsia rvsia rvsia approved these changes

Assignees
No one assigned
Labels
None yet
Projects
None yet
Milestone
No milestone
Development

Successfully merging this pull request may close these issues.
3 participants
@Hyperkid123 @epwinchell @rvsia