Discource-C
/
discourse
mirror of https://github.com/discourse/discourse.git
1
0
Fork 0
Code Issues Packages Projects Releases Wiki Activity

UX: less janky animation for experimental sidebar (#17396)

This commit is contained in:
Kris 2022-07-08 14:06:01 -04:00 committed by GitHub
parent 8e0b1ee74d
commit 5a26c87fa6
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
2 changed files with 17 additions and 9 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

19
app/assets/stylesheets/common/base/sidebar.scss
View File

@ -7,17 +7,22 @@
.header-sidebar-toggle { .header-sidebar-toggle {
--toggle-padding: 0.5em; --toggle-padding: 0.5em;
margin-right: 0.75em; margin-right: 0.75em;
// extending the toggle beyond the page when space allows
// for better logo alignment with content
margin-left: -3.5em;
@media screen and (max-width: 1480px) {
margin-left: -0.75em;
}
@media screen and (min-width: 1300px) { @media screen and (max-width: 1380px) {
// extending the toggle beyond the page when space allows body.has-sidebar-page & {
// for better logo alignment with content margin-left: 0;
body:not(.has-sidebar-page) & {
margin-left: -3.7em;
transition: margin var(--d-sidebar-animation-speed)
var(--d-sidebar-animation-ease);
} }
} }
transition: margin var(--d-sidebar-animation-speed)
var(--d-sidebar-animation-ease);
.mobile-view & { .mobile-view & {
margin-left: calc(var(--toggle-padding) * -1); margin-left: calc(var(--toggle-padding) * -1);
} }

7
app/assets/stylesheets/desktop/discourse.scss
View File

@ -205,10 +205,13 @@ body.has-sidebar-page {
body.sidebar-animate { body.sidebar-animate {
#main-outlet-wrapper { #main-outlet-wrapper {
// grid-template-columns transition supported in Firefox, Chrome support coming summer 2022 // grid-template-columns transition supported in Firefox, Chrome support coming summer 2022
transition: grid-template-columns var(--d-sidebar-animation-time); transition-property: grid-template-columns, max-width;
transition-timing-function: var(--d-sidebar-animation-ease);
transition-duration: var(--d-sidebar-animation-time);
} }
.d-header-wrap .wrap { .d-header-wrap .wrap {
transition: max-width var(--d-sidebar-animation-time); transition: max-width var(--d-sidebar-animation-time)
var(--d-sidebar-animation-ease);
} }
} }