From eabae3bf6f934a2c0ff2518257378e593219082b Mon Sep 17 00:00:00 2001 From: Ben Hong Date: Tue, 14 Jul 2020 10:44:37 -0400 Subject: [PATCH 1/4] feature (#170): add temporary beta banner --- src/.vuepress/components/BetaBanner.vue | 11 ++++ src/.vuepress/styles/index.styl | 15 ++++++ src/.vuepress/theme/components/Sidebar.vue | 7 +-- src/.vuepress/theme/layouts/Layout.vue | 63 +++++++++------------- src/.vuepress/theme/styles/config.styl | 1 + src/.vuepress/theme/styles/wrapper.styl | 6 +-- 6 files changed, 57 insertions(+), 46 deletions(-) create mode 100644 src/.vuepress/components/BetaBanner.vue diff --git a/src/.vuepress/components/BetaBanner.vue b/src/.vuepress/components/BetaBanner.vue new file mode 100644 index 0000000000..d33a4f91f0 --- /dev/null +++ b/src/.vuepress/components/BetaBanner.vue @@ -0,0 +1,11 @@ + + + + + diff --git a/src/.vuepress/styles/index.styl b/src/.vuepress/styles/index.styl index 1ed44dd2bd..0785548d63 100644 --- a/src/.vuepress/styles/index.styl +++ b/src/.vuepress/styles/index.styl @@ -125,6 +125,21 @@ } } +.beta-banner + position fixed + z-index 20 + top $navbarHeight + left 0 + right 0 + height 3rem + display flex + align-items center + justify-content center + background-color #fffedb + box-sizing border-box + border-bottom 1px solid $borderColor + font-weight bold + .scrimba, .vueschool { background-color: #e7ecf3; diff --git a/src/.vuepress/theme/components/Sidebar.vue b/src/.vuepress/theme/components/Sidebar.vue index e70e33367a..2ee765aae0 100644 --- a/src/.vuepress/theme/components/Sidebar.vue +++ b/src/.vuepress/theme/components/Sidebar.vue @@ -4,10 +4,7 @@ - + @@ -45,7 +42,7 @@ export default { font-size 1.1em padding 0.5rem 0 0.5rem 1.5rem & > .sidebar-links - padding 1.5rem 0 + padding calc(1.5rem + 3rem) 0 // add $betaBannerHeight & > li > a.sidebar-link font-size 1.1em line-height 1.7 diff --git a/src/.vuepress/theme/layouts/Layout.vue b/src/.vuepress/theme/layouts/Layout.vue index 3298070997..290494052b 100644 --- a/src/.vuepress/theme/layouts/Layout.vue +++ b/src/.vuepress/theme/layouts/Layout.vue @@ -5,20 +5,12 @@ @touchstart="onTouchStart" @touchend="onTouchEnd" > - - -
- - + + + +
+ + @@ -29,10 +21,7 @@ - + @@ -60,40 +49,38 @@ export default { Navbar }, - data () { + data() { return { isSidebarOpen: false } }, computed: { - shouldShowNavbar () { + shouldShowNavbar() { const { themeConfig } = this.$site const { frontmatter } = this.$page - if ( - frontmatter.navbar === false - || themeConfig.navbar === false) { + if (frontmatter.navbar === false || themeConfig.navbar === false) { return false } return ( - this.$title - || themeConfig.logo - || themeConfig.repo - || themeConfig.nav - || this.$themeLocaleConfig.nav + this.$title || + themeConfig.logo || + themeConfig.repo || + themeConfig.nav || + this.$themeLocaleConfig.nav ) }, - shouldShowSidebar () { + shouldShowSidebar() { const { frontmatter } = this.$page return ( - !frontmatter.home - && frontmatter.sidebar !== false - && this.sidebarItems.length + !frontmatter.home && + frontmatter.sidebar !== false && + this.sidebarItems.length ) }, - sidebarItems () { + sidebarItems() { return resolveSidebarItems( this.$page, this.$page.regularPath, @@ -102,7 +89,7 @@ export default { ) }, - pageClasses () { + pageClasses() { const userPageClass = this.$page.frontmatter.pageClass return [ { @@ -115,27 +102,27 @@ export default { } }, - mounted () { + mounted() { this.$router.afterEach(() => { this.isSidebarOpen = false }) }, methods: { - toggleSidebar (to) { + toggleSidebar(to) { this.isSidebarOpen = typeof to === 'boolean' ? to : !this.isSidebarOpen this.$emit('toggle-sidebar', this.isSidebarOpen) }, // side swipe - onTouchStart (e) { + onTouchStart(e) { this.touchStart = { x: e.changedTouches[0].clientX, y: e.changedTouches[0].clientY } }, - onTouchEnd (e) { + onTouchEnd(e) { const dx = e.changedTouches[0].clientX - this.touchStart.x const dy = e.changedTouches[0].clientY - this.touchStart.y if (Math.abs(dx) > Math.abs(dy) && Math.abs(dx) > 40) { diff --git a/src/.vuepress/theme/styles/config.styl b/src/.vuepress/theme/styles/config.styl index 2ce741f209..d2956bd6cf 100644 --- a/src/.vuepress/theme/styles/config.styl +++ b/src/.vuepress/theme/styles/config.styl @@ -1,2 +1,3 @@ $contentClass = '.theme-default-content' $fontPrimary = 'Source Sans Pro', 'Helvetica Neue', Arial, sans-serif +$betaBannerHeight = 3rem diff --git a/src/.vuepress/theme/styles/wrapper.styl b/src/.vuepress/theme/styles/wrapper.styl index a99262c71a..d0700ef7fd 100644 --- a/src/.vuepress/theme/styles/wrapper.styl +++ b/src/.vuepress/theme/styles/wrapper.styl @@ -1,9 +1,9 @@ $wrapper max-width $contentWidth margin 0 auto - padding 2rem 2.5rem + padding calc(2rem + 3rem) 2.5rem // added $betaBannerHeight @media (max-width: $MQNarrow) - padding 2rem + padding calc(2rem + 3rem) 2rem // added $betaBannerHeight @media (max-width: $MQMobileNarrow) - padding 1.5rem + padding calc(2rem + 3rem) 1.5rem // added $betaBannerHeight From 8b49cac3034c1308098495e2d737e0c8a69d9d3b Mon Sep 17 00:00:00 2001 From: Ben Hong Date: Tue, 14 Jul 2020 14:48:43 -0400 Subject: [PATCH 2/4] feature (#170): improve phrasing Co-authored-by: Natalia Tepluhina --- src/.vuepress/components/BetaBanner.vue | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/.vuepress/components/BetaBanner.vue b/src/.vuepress/components/BetaBanner.vue index d33a4f91f0..38af310308 100644 --- a/src/.vuepress/components/BetaBanner.vue +++ b/src/.vuepress/components/BetaBanner.vue @@ -4,7 +4,7 @@ export default {} From 8af78175a147f8913b38bbc522e3209618e64948 Mon Sep 17 00:00:00 2001 From: Ben Hong Date: Tue, 14 Jul 2020 14:56:27 -0400 Subject: [PATCH 3/4] fix (#170): update home page with beta banner --- src/.vuepress/theme/components/Home.vue | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/.vuepress/theme/components/Home.vue b/src/.vuepress/theme/components/Home.vue index cbc857dfdd..551850caf1 100644 --- a/src/.vuepress/theme/components/Home.vue +++ b/src/.vuepress/theme/components/Home.vue @@ -144,7 +144,7 @@ export default { @import '@theme/styles/_settings.scss'; .hero { - padding: 100px 40px 30px; + padding: calc(100px + 3rem) 40px 30px; // add $betaBannerHeight .inner { max-width: 1260px; From 028ea141a22d055ea0cc428916ad13d41ca2466e Mon Sep 17 00:00:00 2001 From: Ben Hong Date: Tue, 14 Jul 2020 15:01:24 -0400 Subject: [PATCH 4/4] docs (#170): improve phrasing --- src/.vuepress/components/BetaBanner.vue | 5 ++++- 1 file changed, 4 insertions(+), 1 deletion(-) diff --git a/src/.vuepress/components/BetaBanner.vue b/src/.vuepress/components/BetaBanner.vue index 38af310308..672389ee41 100644 --- a/src/.vuepress/components/BetaBanner.vue +++ b/src/.vuepress/components/BetaBanner.vue @@ -4,7 +4,10 @@ export default {}