From 5a26c87fa688e80ca5ad0f0565d4adfed9e0f460 Mon Sep 17 00:00:00 2001 From: Kris Date: Fri, 8 Jul 2022 14:06:01 -0400 Subject: [PATCH] UX: less janky animation for experimental sidebar (#17396) --- .../stylesheets/common/base/sidebar.scss | 19 ++++++++++++------- app/assets/stylesheets/desktop/discourse.scss | 7 +++++-- 2 files changed, 17 insertions(+), 9 deletions(-) diff --git a/app/assets/stylesheets/common/base/sidebar.scss b/app/assets/stylesheets/common/base/sidebar.scss index c253ef49e28..fe7598d316f 100644 --- a/app/assets/stylesheets/common/base/sidebar.scss +++ b/app/assets/stylesheets/common/base/sidebar.scss @@ -7,17 +7,22 @@ .header-sidebar-toggle { --toggle-padding: 0.5em; 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) { - // extending the toggle beyond the page when space allows - // for better logo alignment with content - body:not(.has-sidebar-page) & { - margin-left: -3.7em; - transition: margin var(--d-sidebar-animation-speed) - var(--d-sidebar-animation-ease); + @media screen and (max-width: 1380px) { + body.has-sidebar-page & { + margin-left: 0; } } + transition: margin var(--d-sidebar-animation-speed) + var(--d-sidebar-animation-ease); + .mobile-view & { margin-left: calc(var(--toggle-padding) * -1); } diff --git a/app/assets/stylesheets/desktop/discourse.scss b/app/assets/stylesheets/desktop/discourse.scss index c45d5e7f15f..20f571f4b7e 100644 --- a/app/assets/stylesheets/desktop/discourse.scss +++ b/app/assets/stylesheets/desktop/discourse.scss @@ -205,10 +205,13 @@ body.has-sidebar-page { body.sidebar-animate { #main-outlet-wrapper { // 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 { - transition: max-width var(--d-sidebar-animation-time); + transition: max-width var(--d-sidebar-animation-time) + var(--d-sidebar-animation-ease); } }