From 505397aa2b1746ce3f5c0df6af13e2c3edb7efcf Mon Sep 17 00:00:00 2001 From: Martin Charles Date: Fri, 20 May 2016 23:38:18 -0400 Subject: [PATCH 1/3] Changed pos: abs to translateX According to [Paul Irish][1], using `transform` instead of `left`, `right`, etc. is better for multiple reasons. This will be useful when adding better touch support. [1]: http://www.paulirish.com/2012/why-moving-elements-with-translate-is-better-than-posabs-topleft/ --- .../js/components/main-wrapper/extra/index.vue | 17 +++++++++-------- .../components/main-wrapper/sidebar/index.vue | 15 ++++++++------- 2 files changed, 17 insertions(+), 15 deletions(-) diff --git a/resources/assets/js/components/main-wrapper/extra/index.vue b/resources/assets/js/components/main-wrapper/extra/index.vue index 27ed16e2..e508b26d 100644 --- a/resources/assets/js/components/main-wrapper/extra/index.vue +++ b/resources/assets/js/components/main-wrapper/extra/index.vue @@ -110,7 +110,6 @@ padding: 24px 16px $footerHeight; background: $colorExtraBgr; max-height: calc(100vh - #{$headerHeight + $footerHeight}); - display: none; color: $color2ndText; overflow: auto; -ms-overflow-style: -ms-autohiding-scrollbar; @@ -176,16 +175,18 @@ @media only screen and (max-width : 1024px) { position: fixed; - height: calc(100vh - #{$headerHeight + $footerHeight}); - padding-bottom: $footerHeight; // make sure the footer can never overlap the content - width: $extraPanelWidth; - z-index: 5; top: $headerHeight; - right: -100%; - transition: right .3s ease-in; + right: 0; + height: calc(100vh - #{$headerHeight + $footerHeight}); + width: $extraPanelWidth; + padding-bottom: $footerHeight; // make sure the footer can never overlap the content + z-index: 5; + + transform: translateX(100%); + transition: transform .3s ease-in; &.showing { - right: 0; + transform: translateX(0); } } diff --git a/resources/assets/js/components/main-wrapper/sidebar/index.vue b/resources/assets/js/components/main-wrapper/sidebar/index.vue index 04e9fb59..7658fc67 100644 --- a/resources/assets/js/components/main-wrapper/sidebar/index.vue +++ b/resources/assets/js/components/main-wrapper/sidebar/index.vue @@ -263,16 +263,17 @@ @media only screen and (max-width : 667px) { position: fixed; - height: calc(100vh - #{$headerHeight + $footerHeight}); - padding-bottom: $footerHeight; // make sure the footer can never overlap the content - width: 100%; - z-index: 99; top: $headerHeight; - left: -100%; - transition: left .3s ease-in; + height: calc(100vh - #{$headerHeight + $footerHeight}); + width: 100%; + padding-bottom: $footerHeight; // make sure the footer can never overlap the content + z-index: 99; + + transform: translateX(-100%); + transition: transform .3s ease-in; &.showing { - left: 0; + transform: translateX(0); } } } From 9eb3ee9dc2430a688892cc296dc0b04e35b30e7a Mon Sep 17 00:00:00 2001 From: Martin Charles Date: Fri, 20 May 2016 23:38:29 -0400 Subject: [PATCH 2/3] Changed Slide In/Out Transition Instead of using the ease-in transition, using one from [this example.][1] 1: https://github.com/GoogleChrome/ui-element-samples/tree/master/side-nav --- resources/assets/js/components/main-wrapper/extra/index.vue | 2 +- resources/assets/js/components/main-wrapper/sidebar/index.vue | 2 +- resources/assets/sass/partials/_vars.scss | 1 + 3 files changed, 3 insertions(+), 2 deletions(-) diff --git a/resources/assets/js/components/main-wrapper/extra/index.vue b/resources/assets/js/components/main-wrapper/extra/index.vue index e508b26d..5f30520d 100644 --- a/resources/assets/js/components/main-wrapper/extra/index.vue +++ b/resources/assets/js/components/main-wrapper/extra/index.vue @@ -183,7 +183,7 @@ z-index: 5; transform: translateX(100%); - transition: transform .3s ease-in; + transition: transform .3s $slideAnimation; &.showing { transform: translateX(0); diff --git a/resources/assets/js/components/main-wrapper/sidebar/index.vue b/resources/assets/js/components/main-wrapper/sidebar/index.vue index 7658fc67..e980f29f 100644 --- a/resources/assets/js/components/main-wrapper/sidebar/index.vue +++ b/resources/assets/js/components/main-wrapper/sidebar/index.vue @@ -270,7 +270,7 @@ z-index: 99; transform: translateX(-100%); - transition: transform .3s ease-in; + transition: transform .3s $slideAnimation; &.showing { transform: translateX(0); diff --git a/resources/assets/sass/partials/_vars.scss b/resources/assets/sass/partials/_vars.scss index 9aedcfc2..f2f2e112 100644 --- a/resources/assets/sass/partials/_vars.scss +++ b/resources/assets/sass/partials/_vars.scss @@ -35,3 +35,4 @@ $footerHeight: 64px; $mainHeadingHeight: 64px; $extraPanelWidth: 334px; +$slideAnimation: cubic-bezier(0,0,0.3,1); From d30f7dd7fc8300c3e50b404273f86b6b9c158443 Mon Sep 17 00:00:00 2001 From: Martin Charles Date: Fri, 20 May 2016 23:38:34 -0400 Subject: [PATCH 3/3] Fixed a Bug Which Caused Header Text to Overlap When there was too much text in a h1.heading > span, it would overlap instead of wrapping. --- .../assets/js/components/main-wrapper/main-content/index.vue | 1 + 1 file changed, 1 insertion(+) diff --git a/resources/assets/js/components/main-wrapper/main-content/index.vue b/resources/assets/js/components/main-wrapper/main-content/index.vue index d2cfe0b4..e010725f 100644 --- a/resources/assets/js/components/main-wrapper/main-content/index.vue +++ b/resources/assets/js/components/main-wrapper/main-content/index.vue @@ -105,6 +105,7 @@ align-items: center; align-content: stretch; display: flex; + line-height: 1em; span:first-child { flex: 1;