Margins management & cleanup

[srenault-meeds]

Rationale

Currently, there are differencies between containers depending on which one we use:

• height is often set to be auto depending on the app's content
• height is sometimes "forced" so it is consistent between different columns for example
• width is ok as the app takes the whole width of the container (100%)

BUT depending on the app added in the container, a margin-bottom is sometimes added or not.
That makes the layout not ok for example:

• Add links portlet above the stream app, in the same container
• result: you will see no margin between apps

OR:

• check margin of the space menu portlet in the space activity stream page (AKA space banner)
• a margin-bottom is applied to the app while it must be added to the container

OR contributions container in overview page gets a padding that is extra to the usual margin we'd like to apply

Expected: we must remove extra margins added to the apps AND we must make sure margins-bottom are added to all containers that contains apps.

1. Functional Requirements

Top User Stories

App Margins cleanup
Browse any pages and remove extra margin added to apps (any margin), i.e:

• profile-stats-portlet
• OnlinePortlet
• SuggestionsPeopleAndSpace
• rulesOverview
• ActivityStream
• Image portlet
• ProjectListToolbar
• popularSpacesApplication
• SpacesOverview
• usersLeaderboard
• spaceHeader
• connectorsadministration
• UserSettingLanguage
• UserSettingNotifications
• UserSettingSecurity
• walletSettingsApp
• connectorUserSettings

Container padding /margin cleanup

• Containers in overview must not have the padding applied currently
• analyticsPagerow

Container margins management
Any container must follow this pattern:

• Width: The App width takes 100% of the container width
• Height: auto depending on the apps' contents

With capabilities to manage exception if needed to fix a height

• Margins:

1. Parent container has a minimum of margin of 20px then depending on the width of the screen, from 1280px, the margin for left and right is dynamic to keep a max width
2. children containers provides margin-bottom of 20px between apps and containers
3. If no app, neither container, below the last children, then no margin-bottom

Impacts

Gamification

NA

Notifications

NA

Analytics

NA

Unified Search

NA

2. Technical Requirements

Existing Features

No DOM structure change should happen on existing applications to remove margins.

Feature Flags

No feature flag

4. Software Architecture

Access

We will have to delete max-width, min-width, width, margin and padding definitions from all Vue applications parent containers. The content of applications has to remain flexible in term of width using flex box.

To add margins for all applications being part of the page, we will have to add this class in platform-ui:

.UIPage .PORTLET-FRAGMENT {
  margin-bottom: @applicationMarginBottom;
}

With the definition of the less & CSS variables:

@applicationMarginBottomDefault: 20px;
@applicationMarginBottom: var(--allPagesApplicationMarginBottom, @applicationMarginBottomDefault);

By using CSS variables inside less variables, this will allow to change the value using branding UI.

[srenault-meeds]

@margondicco @rdenarie @boubaker as discussed
AND I have checked every pages in meeds, any container, any apps so I have added the detailed list of work to do in the MIP

[margondicco]

Go fonc

[srenault-meeds]

Thanks. @boubaker ready for tech spec

[boubaker]

Ready for review by DAO members ( eXo: @rdenarie )

[rdenarie]

GO tech

[rdenarie]

all pr approved.

Can you ping me when they are all merged ?

[boubaker]

all pr approved.

Thanks. All PRs merged