github-mirror/discourse
2
0
Fork 0
mirror of https://github.com/discourse/discourse.git synced 2024-11-23 20:43:19 +08:00
Code Issues Actions 1 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
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
2 changed files with 20 additions and 12 deletions
Show Stats 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"
/>
</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">
<div class="sidebar-more-section-links-details-content-main">
{{#each this.sectionLinks as |sectionLink|}}
<Sidebar::MoreSectionLink @sectionLink={{sectionLink}} />
{{/each}}
{{#if this.open}}
<div class="sidebar-more-section-links-details">
<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">
<div class="sidebar-more-section-links-details-content-main">
{{#each this.sectionLinks as |sectionLink|}}
<Sidebar::MoreSectionLink @sectionLink={{sectionLink}} />
{{/each}}
</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);
}
}
.sidebar-more-section-links-details-content-main {
position: sticky;
}
.sidebar-more-section-links-details-content-wrapper {
position: absolute;
width: 100%;
z-index: z("modal", "content") + 1;
position: sticky;
}
.sidebar-more-section-links-details {
position: relative;
}