mirror of
https://github.com/discourse/discourse.git
synced 2024-12-01 12:03:43 +08:00
5552e257d8
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.
70 lines
1.4 KiB
SCSS
70 lines
1.4 KiB
SCSS
.new-user-wrapper {
|
|
.new-user-content-wrapper {
|
|
// Grid layout
|
|
width: 100%;
|
|
display: grid;
|
|
grid-template-columns: 1fr 5fr;
|
|
grid-template-rows: auto 1fr;
|
|
grid-gap: 0;
|
|
|
|
.user-navigation-secondary {
|
|
grid-column-start: 1;
|
|
grid-column-end: 3;
|
|
grid-row-start: 1;
|
|
grid-row-end: 2;
|
|
|
|
display: flex;
|
|
flex-direction: row;
|
|
}
|
|
|
|
.user-navigation-secondary ~ .user-content {
|
|
grid-column-start: 1;
|
|
grid-column-end: 3;
|
|
grid-row-start: 2;
|
|
grid-row-end: 3;
|
|
}
|
|
|
|
.user-content {
|
|
padding: 0;
|
|
margin-top: 2em;
|
|
grid-column-start: 1;
|
|
grid-column-end: 3;
|
|
grid-row-start: 1;
|
|
grid-row-end: 3;
|
|
}
|
|
|
|
.user-additional-controls {
|
|
align-self: start;
|
|
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 {
|
|
position: relative;
|
|
}
|
|
|
|
.user-nav-dropdown-submenu-wrapper {
|
|
position: absolute;
|
|
top: 2em;
|
|
min-width: 10em;
|
|
padding: 0;
|
|
box-shadow: shadow("dropdown");
|
|
z-index: z("dropdown");
|
|
}
|
|
}
|