From 5552e257d8e7fd090713d0d56cc0b8712ebca288 Mon Sep 17 00:00:00 2001
From: Alan Guo Xiang Tan <gxtan1990@gmail.com>
Date: Wed, 23 Nov 2022 11:53:08 +0800
Subject: [PATCH] UX: Styling backwards compatibility for old user page
 navigation (#19161)

While updating all user pages to use the new horizontal, scrollable user
page navigation, we've inadvertently broken the interface for plugins which rely on the
`user-main-nav` plugin outlet to extend the user profile page. Such
plugins usually add a new user profile page with the following
template structure which is copied from Discourse core before the user
page navigation redesign:

```
{{#d-section pageClass="..." class="user-secondary-navigation" scrollTop=false}}
  {{#mobile-nav class="..." desktopClass="action-list nav-stacked"}}
    ...
  {{/mobile-nav}}
{{/d-section}}

<section class="user-content">
  {{outlet}}
</section>
```

This commit seeks to add backwards compatibility in terms of the styling
of the interface such that even if the old template structure is used,
it would not look completely broken.
---
 app/assets/stylesheets/desktop/new-user.scss | 16 +++++++++++++++-
 app/assets/stylesheets/mobile/new-user.scss  |  5 +++++
 2 files changed, 20 insertions(+), 1 deletion(-)

diff --git a/app/assets/stylesheets/desktop/new-user.scss b/app/assets/stylesheets/desktop/new-user.scss
index f65656ec38f..3d9f9801e7d 100644
--- a/app/assets/stylesheets/desktop/new-user.scss
+++ b/app/assets/stylesheets/desktop/new-user.scss
@@ -3,7 +3,7 @@
     // Grid layout
     width: 100%;
     display: grid;
-    grid-template-columns: 1fr;
+    grid-template-columns: 1fr 5fr;
     grid-template-rows: auto 1fr;
     grid-gap: 0;
 
@@ -38,6 +38,20 @@
       justify-self: start;
       grid-row-start: 2;
     }
+
+    // For backwards compatibility with legacy design
+    .user-secondary-navigation {
+      margin-top: 2em;
+      grid-column-start: 1;
+      grid-column-end: 2;
+    }
+
+    // For backwards compatibility with legacy design
+    .user-secondary-navigation ~ .user-content {
+      min-width: 100%;
+      grid-column-start: 2;
+      grid-column-end: 3;
+    }
   }
 
   .user-nav-dropdown-list-item {
diff --git a/app/assets/stylesheets/mobile/new-user.scss b/app/assets/stylesheets/mobile/new-user.scss
index 49778129057..118b6b7ec5b 100644
--- a/app/assets/stylesheets/mobile/new-user.scss
+++ b/app/assets/stylesheets/mobile/new-user.scss
@@ -12,6 +12,11 @@
     }
   }
 
+  // For backwards compatibility with legacy design
+  .user-secondary-navigation {
+    margin-top: 1.5em;
+  }
+
   .user-navigation-secondary {
     font-size: var(--font-up-1);