Improve trends layout (#7700)

* Allow collapsing trends, responsively hide trends

* Add trends column

1 files changed, 9 insertions, 1 deletions

diff --git a/app/javascript/mastodon/features/getting_started/index.js b/app/javascript/mastodon/features/getting_started/index.js
index 9575afd7a..67a5b282a 100644
--- a/app/javascript/mastodon/features/getting_started/index.js
+++ b/app/javascript/mastodon/features/getting_started/index.js
@@ -80,6 +80,7 @@ export default class GettingStarted extends ImmutablePureComponent {
 
     const navItems = [];
     let i = 1;
+    let height = 0;
 
     if (multiColumn) {
       navItems.push(
@@ -88,6 +89,8 @@ export default class GettingStarted extends ImmutablePureComponent {
         <ColumnLink key={i++} icon='globe' text={intl.formatMessage(messages.public_timeline)} to='/timelines/public' />,
         <ColumnSubheading key={i++} text={intl.formatMessage(messages.personal)} />
       );
+
+      height += 34*2 + 48*2;
     }
 
     navItems.push(
@@ -96,8 +99,11 @@ export default class GettingStarted extends ImmutablePureComponent {
       <ColumnLink key={i++} icon='bars' text={intl.formatMessage(messages.lists)} to='/lists' />
     );
 
+    height += 48*3;
+
     if (myAccount.get('locked')) {
       navItems.push(<ColumnLink key={i++} icon='users' text={intl.formatMessage(messages.follow_requests)} badge={badgeDisplay(unreadFollowRequests, 40)} to='/follow_requests' />);
+      height += 48;
     }
 
     if (!multiColumn) {
@@ -106,6 +112,8 @@ export default class GettingStarted extends ImmutablePureComponent {
         <ColumnLink key={i++} icon='gears' text={intl.formatMessage(messages.preferences)} href='/settings/preferences' />,
         <ColumnLink key={i++} icon='lock' text={intl.formatMessage(messages.security)} href='/auth/edit' />
       );
+
+      height += 34 + 48*2;
     }
 
     return (
@@ -119,7 +127,7 @@ export default class GettingStarted extends ImmutablePureComponent {
           </h1>
         </div>}
 
-        <div className='getting-started__wrapper'>
+        <div className='getting-started__wrapper' style={{ height }}>
           {!multiColumn && <NavigationBar account={myAccount} />}
           {navItems}
         </div>