Merge pull request #2447 from ClearlyClaire/glitch-soc/merge-upstream

Merge upstream changes up to 126cd7705d

app/javascript/flavours/glitch/features/ui/components/navigation_panel.jsx

@@ -53,20 +53,20 @@ class NavigationPanel extends Component {
     const { intl, onOpenSettings } = this.props;
     const { signedIn, disabledAccountId } = this.context.identity;
 
-    return (
-      <div className='navigation-panel'>
-        {transientSingleColumn && (
-          <div className='navigation-panel__logo'>
-            <div className='switch-to-advanced'>
+    let banner = undefined;
+
+    if(transientSingleColumn)
+      banner = (<div className='switch-to-advanced'>
         {intl.formatMessage(messages.openedInClassicInterface)}
         {" "}
         <a href={`/deck${location.pathname}`} className='switch-to-advanced__toggle'>
           {intl.formatMessage(messages.advancedInterface)}
         </a>
-            </div>
-            <hr />
-          </div>
-        )}
+      </div>);
+
+    return (
+      <div className='navigation-panel'>
+        {banner}
 
         {signedIn && (
           <>

app/javascript/flavours/glitch/styles/components/single_column.scss

@@ -273,6 +273,7 @@
 
     .navigation-panel__sign-in-banner,
     .navigation-panel__logo,
+    .navigation-panel__banner,
     .getting-started__trends {
       display: none;
     }

app/javascript/mastodon/features/ui/components/navigation_panel.jsx

@@ -53,23 +53,29 @@ class NavigationPanel extends Component {
     const { intl } = this.props;
     const { signedIn, disabledAccountId } = this.context.identity;
 
-    return (
-      <div className='navigation-panel'>
-        <div className='navigation-panel__logo'>
-          <Link to='/' className='column-link column-link--logo'><WordmarkLogo /></Link>
+    let banner = undefined;
 
-          {transientSingleColumn ? (
-            <div className='switch-to-advanced'>
+    if(transientSingleColumn)
+      banner = (<div className='switch-to-advanced'>
         {intl.formatMessage(messages.openedInClassicInterface)}
         {" "}
         <a href={`/deck${location.pathname}`} className='switch-to-advanced__toggle'>
           {intl.formatMessage(messages.advancedInterface)}
         </a>
+      </div>);
+
+    return (
+      <div className='navigation-panel'>
+        <div className='navigation-panel__logo'>
+          <Link to='/' className='column-link column-link--logo'><WordmarkLogo /></Link>
+          {!banner && <hr />}
         </div>
-          ) : (
-            <hr />
-          )}
+
+        {banner &&
+          <div class='navigation-panel__banner'>
+            {banner}
           </div>
+        }
 
         {signedIn && (
           <>

app/javascript/styles/mastodon/components.scss

@@ -2467,6 +2467,7 @@ $ui-header-height: 55px;
 
     .navigation-panel__sign-in-banner,
     .navigation-panel__logo,
+    .navigation-panel__banner,
     .getting-started__trends {
       display: none;
     }