From 7e33b748d1d910e27d9a850d1af8d139b2770b34 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Philipp=20Ku=CC=88hn?= Date: Tue, 13 Oct 2020 09:07:47 +0200 Subject: [PATCH 1/3] improve spacings --- docs/src/components/Demo/style.scss | 6 +++--- docs/src/components/LiveDemo/CustomLayout.vue | 4 ++-- docs/src/components/LiveDemo/style.scss | 4 ++-- docs/src/layouts/App/prism.scss | 2 +- docs/src/templates/DocPage/style.scss | 4 ++-- 5 files changed, 10 insertions(+), 10 deletions(-) diff --git a/docs/src/components/Demo/style.scss b/docs/src/components/Demo/style.scss index bbd3e4b8..a34e38b7 100644 --- a/docs/src/components/Demo/style.scss +++ b/docs/src/components/Demo/style.scss @@ -3,7 +3,7 @@ border-radius: 0.5rem; &__preview { - padding: 1.5rem; + padding: 1.25rem; border-top-left-radius: inherit; border-top-right-radius: inherit; border-bottom-width: 0; @@ -17,7 +17,7 @@ } &__tabs { - padding: 1rem 1.5rem 0 1.5rem; + padding: 1rem 1.25rem 0 1.25rem; background-color: rgba($colorBlack, 0.9); } @@ -54,7 +54,7 @@ display: flex; justify-content: space-between; width: 100%; - padding: 0.5rem 1.5rem; + padding: 0.5rem 1.25rem; font-size: 0.85rem; border: 1px solid rgba($colorWhite, 0.1); border-bottom-left-radius: inherit; diff --git a/docs/src/components/LiveDemo/CustomLayout.vue b/docs/src/components/LiveDemo/CustomLayout.vue index 4df8f6a6..bf817bca 100644 --- a/docs/src/components/LiveDemo/CustomLayout.vue +++ b/docs/src/components/LiveDemo/CustomLayout.vue @@ -46,7 +46,7 @@ export default { border-radius: 0.5rem 0.5rem 0 0; &__preview { - padding: 1.5rem; + padding: 1.25rem; border-top-left-radius: inherit; border-top-right-radius: inherit; border-bottom-width: 0; @@ -62,7 +62,7 @@ export default { .prism-editor-wrapper { overflow: auto; max-height: unquote("max(300px, 60vh)"); - padding: 1.5rem; + padding: 1.25rem; } .prism-editor__container { diff --git a/docs/src/components/LiveDemo/style.scss b/docs/src/components/LiveDemo/style.scss index 822b6223..cf709170 100644 --- a/docs/src/components/LiveDemo/style.scss +++ b/docs/src/components/LiveDemo/style.scss @@ -42,7 +42,7 @@ display: flex; justify-content: space-between; width: 100%; - padding: 0.5rem 1.5rem; + padding: 0.5rem 1.25rem; border: 1px solid rgba($colorWhite, 0.1); border-bottom-left-radius: inherit; border-bottom-right-radius: inherit; @@ -51,7 +51,7 @@ } &__error { - padding: 1rem 1.5rem; + padding: 1.25rem; color: $colorRed; background-color: rgba($colorRed, 0.1); } diff --git a/docs/src/layouts/App/prism.scss b/docs/src/layouts/App/prism.scss index 5f87bc69..e2629c18 100644 --- a/docs/src/layouts/App/prism.scss +++ b/docs/src/layouts/App/prism.scss @@ -44,7 +44,7 @@ pre[class*="language-"] { position: relative; color: $colorWhite; background: $codeBackground; - padding: 1.2rem 1.5rem !important; + padding: 1.25rem !important; border-radius: 0.5rem; max-height: unquote("max(300px, 60vh)"); } diff --git a/docs/src/templates/DocPage/style.scss b/docs/src/templates/DocPage/style.scss index 835e570e..b08a90f8 100644 --- a/docs/src/templates/DocPage/style.scss +++ b/docs/src/templates/DocPage/style.scss @@ -101,7 +101,7 @@ & + ul { list-style: none; border: 1px solid rgba($colorWhite, 0.1); - padding: 1.2rem 1.5rem !important; + padding: 1.25rem !important; border-radius: 0.5rem; &::before { @@ -225,7 +225,7 @@ } > .remark-container { - padding: 1rem; + padding: 1.25rem; border: 1px solid rgba($colorWhite, 0.1); border-radius: 0.5rem; From a6041f2723e045d965d7033e978a9f89627713f3 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Philipp=20Ku=CC=88hn?= Date: Fri, 16 Oct 2020 09:11:09 +0200 Subject: [PATCH 2/3] improve scroll position --- docs/src/layouts/App/base.scss | 4 ++++ docs/src/main.js | 23 ++++++++++++++++++++++- 2 files changed, 26 insertions(+), 1 deletion(-) diff --git a/docs/src/layouts/App/base.scss b/docs/src/layouts/App/base.scss index ec7a0050..95b824ad 100644 --- a/docs/src/layouts/App/base.scss +++ b/docs/src/layouts/App/base.scss @@ -59,6 +59,10 @@ body { color: $colorText; } +*[id] { + scroll-margin-top: 6rem; +} + button { font: inherit; cursor: pointer; diff --git a/docs/src/main.js b/docs/src/main.js index 99476dbe..68c8b968 100644 --- a/docs/src/main.js +++ b/docs/src/main.js @@ -5,9 +5,30 @@ import 'prismjs/components/prism-scss.js' import PortalVue from 'portal-vue' import App from '~/layouts/App' -export default function (Vue) { +export default function (Vue, { router }) { Vue.use(PortalVue) Vue.component('Layout', App) Vue.component('Demo', () => import(/* webpackChunkName: "demo" */ '~/components/Demo')) Vue.component('LiveDemo', () => import(/* webpackChunkName: "live-demo" */ '~/components/LiveDemo')) + + router.options.scrollBehavior = async (to, from, savedPosition) => { + if (to.hash) { + const elem = document.querySelector(to.hash) + + if (elem) { + const offset = parseFloat(getComputedStyle(elem).scrollMarginTop) + return { + selector: to.hash, + offset: { y: offset }, + } + } + } + + if (savedPosition) { + return savedPosition + } + + return { x: 0, y: 0 } + } + } From e549f3954fa668536c5cedd878297550002027d3 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Philipp=20Ku=CC=88hn?= Date: Fri, 16 Oct 2020 09:28:14 +0200 Subject: [PATCH 3/3] improve scrolling again --- docs/gridsome.client.js | 15 +++++++++++++++ docs/src/main.js | 23 +---------------------- 2 files changed, 16 insertions(+), 22 deletions(-) create mode 100644 docs/gridsome.client.js diff --git a/docs/gridsome.client.js b/docs/gridsome.client.js new file mode 100644 index 00000000..65d2f3f2 --- /dev/null +++ b/docs/gridsome.client.js @@ -0,0 +1,15 @@ +export default function (Vue, options, context) { + + context.router.afterEach(to => { + if (to.hash) { + setTimeout(() => { + const element = document.getElementById(to.hash.substr(1)) + const top = element.offsetTop + const offset = parseFloat(getComputedStyle(element).scrollMarginTop) + + window.scrollTo(0, top - offset) + }, 0) + } + }) + +} diff --git a/docs/src/main.js b/docs/src/main.js index 68c8b968..99476dbe 100644 --- a/docs/src/main.js +++ b/docs/src/main.js @@ -5,30 +5,9 @@ import 'prismjs/components/prism-scss.js' import PortalVue from 'portal-vue' import App from '~/layouts/App' -export default function (Vue, { router }) { +export default function (Vue) { Vue.use(PortalVue) Vue.component('Layout', App) Vue.component('Demo', () => import(/* webpackChunkName: "demo" */ '~/components/Demo')) Vue.component('LiveDemo', () => import(/* webpackChunkName: "live-demo" */ '~/components/LiveDemo')) - - router.options.scrollBehavior = async (to, from, savedPosition) => { - if (to.hash) { - const elem = document.querySelector(to.hash) - - if (elem) { - const offset = parseFloat(getComputedStyle(elem).scrollMarginTop) - return { - selector: to.hash, - offset: { y: offset }, - } - } - } - - if (savedPosition) { - return savedPosition - } - - return { x: 0, y: 0 } - } - }