From 5c5b3568cde18b057656f5a5f9dc151f0a069575 Mon Sep 17 00:00:00 2001 From: Tulir Asokan Date: Sun, 11 Nov 2018 20:21:51 +0200 Subject: [PATCH] Add animations to sidebar toggling --- .../management/frontend/src/style/pages/dashboard-grid.css | 7 ------- maubot/management/frontend/src/style/pages/dashboard.sass | 7 ++++--- maubot/management/frontend/src/style/pages/topbar.sass | 3 ++- 3 files changed, 6 insertions(+), 11 deletions(-) diff --git a/maubot/management/frontend/src/style/pages/dashboard-grid.css b/maubot/management/frontend/src/style/pages/dashboard-grid.css index 516c7ff..5f12093 100644 --- a/maubot/management/frontend/src/style/pages/dashboard-grid.css +++ b/maubot/management/frontend/src/style/pages/dashboard-grid.css @@ -9,13 +9,6 @@ @media screen and (max-width: 35rem) { .dashboard { - grid-template: - [row1-start] "topbar" 3.5rem [row1-end] - [row2-start] "main" auto [row2-end] - / auto; - } - - .dashboard.sidebar-open { grid-template: [row1-start] "title topbar" 3.5rem [row1-end] [row2-start] "user main" 2.5rem [row2-end] diff --git a/maubot/management/frontend/src/style/pages/dashboard.sass b/maubot/management/frontend/src/style/pages/dashboard.sass index a5b82bf..31f15bb 100644 --- a/maubot/management/frontend/src/style/pages/dashboard.sass +++ b/maubot/management/frontend/src/style/pages/dashboard.sass @@ -63,9 +63,10 @@ @import topbar @media screen and (max-width: 35rem) - &:not(.sidebar-open) - > nav.sidebar, > a.title, > div.user - display: none !important + &:not(.sidebar-open) > * + transform: translateX(-15rem) + > * + transition: transform 0.4s > main.view grid-area: main diff --git a/maubot/management/frontend/src/style/pages/topbar.sass b/maubot/management/frontend/src/style/pages/topbar.sass index e7d8312..c241974 100644 --- a/maubot/management/frontend/src/style/pages/topbar.sass +++ b/maubot/management/frontend/src/style/pages/topbar.sass @@ -47,7 +47,7 @@ transform-origin: 4px 0 - //transition: transform 0.5s cubic-bezier(0.77, 0.2, 0.05, 1.0), background 0.5s cubic-bezier(0.77, 0.2, 0.05, 1.0), opacity 0.55s ease + transition: transform 0.4s cubic-bezier(0.77, 0.2, 0.05, 1.0), background 0.5s cubic-bezier(0.77, 0.2, 0.05, 1.0), opacity 0.55s ease &:nth-of-type(1) transform-origin: 0 0 @@ -56,6 +56,7 @@ transform-origin: 0 100% transform: translateY(2px) + transition: transform 0.4s cubic-bezier(0.77, 0.2, 0.05, 1.0) &.active transform: translateX(1px) translateY(4px)