IntenseWebs/discourse
3
0
Fork 0
mirror of https://github.com/discourse/discourse.git synced 2025-02-25 18:55:32 -06:00
Code Issues Packages Projects Releases Wiki Activity

FIX: jumpy more sidebar section (#21430)

Browse Source 
Bug introduced in PR https://github.com/discourse/discourse/pull/21398

More section needs to be wrapped in div with position:relative to have sticky and absolute position.
This commit is contained in:
Krzysztof Kotlarek
2023-05-08 14:33:24 +10:00
committed by GitHub
parent 7aa2ede17f
commit be1cbc7082
2 changed files with 20 additions and 12 deletions
Download Patch File Download Diff File Expand all files Collapse all files

25
app/assets/javascripts/discourse/app/components/sidebar/more-section-links.hbs
View File

@@ -10,18 +10,21 @@
@label="sidebar.more" @label="sidebar.more"
/> />
</li> </li>
{{#if this.open}}
<div
class="sidebar-more-section-links-details-content-wrapper"
{{did-insert this.registerClickListener}}
{{will-destroy this.unregisterClickListener}}
>
<div class="sidebar-more-section-links-details-content"> {{#if this.open}}
<div class="sidebar-more-section-links-details-content-main"> <div class="sidebar-more-section-links-details">
{{#each this.sectionLinks as |sectionLink|}} <div
<Sidebar::MoreSectionLink @sectionLink={{sectionLink}} /> class="sidebar-more-section-links-details-content-wrapper"
{{/each}} {{did-insert this.registerClickListener}}
{{will-destroy this.unregisterClickListener}}
>
<div class="sidebar-more-section-links-details-content">
<div class="sidebar-more-section-links-details-content-main">
{{#each this.sectionLinks as |sectionLink|}}
<Sidebar::MoreSectionLink @sectionLink={{sectionLink}} />
{{/each}}
</div>
</div> </div>
</div> </div>
</div> </div>

7
app/assets/stylesheets/common/base/sidebar-more-section-links.scss
View File

@@ -35,9 +35,14 @@
padding: 0.33rem calc(var(--d-sidebar-row-horizontal-padding) / 3); padding: 0.33rem calc(var(--d-sidebar-row-horizontal-padding) / 3);
} }
} }
.sidebar-more-section-links-details-content-main {
position: sticky;
}
.sidebar-more-section-links-details-content-wrapper { .sidebar-more-section-links-details-content-wrapper {
position: absolute; position: absolute;
width: 100%; width: 100%;
z-index: z("modal", "content") + 1; z-index: z("modal", "content") + 1;
position: sticky; }
.sidebar-more-section-links-details {
position: relative;
} }