You are viewing a plain text version of this content. The canonical link for it is here.
Posted to commits@echarts.apache.org by sh...@apache.org on 2020/07/13 05:00:50 UTC
[incubator-echarts-doc] branch master updated: tweak: tweak live
example layout style.
This is an automated email from the ASF dual-hosted git repository.
shenyi pushed a commit to branch master
in repository https://gitbox.apache.org/repos/asf/incubator-echarts-doc.git
The following commit(s) were added to refs/heads/master by this push:
new f14f39b tweak: tweak live example layout style.
new 24000ba Merge pull request #125 from plainheart/tweak-live-example-layout
f14f39b is described below
commit f14f39b2449cc769ddde2738568b5724758abbc9
Author: plainheart <yh...@all-my-life.cn>
AuthorDate: Mon Jul 13 12:21:32 2020 +0800
tweak: tweak live example layout style.
---
src/components/DocContent.vue | 47 ++++++++++++++++++++++++++++++++++---------
1 file changed, 37 insertions(+), 10 deletions(-)
diff --git a/src/components/DocContent.vue b/src/components/DocContent.vue
index 144f432..dd50d38 100644
--- a/src/components/DocContent.vue
+++ b/src/components/DocContent.vue
@@ -1,6 +1,7 @@
<template>
<div class="doc-main" v-loading="loading">
- <div :class="[
+ <div ref="docContentDom"
+ :class="[
'doc-content',
shared.showOptionExample ? 'option-example-actived' : '',
'option-example-' + shared.computedOptionExampleLayout + '-layout'
@@ -145,7 +146,10 @@ export default {
methods: {
resize() {
- this.shared.optionExampleLayout === 'auto' && updateOptionExampleLayout('auto');
+ this.shared.optionExampleLayout === 'auto' && updateOptionExampleLayout('auto');
+ Vue.nextTick(() => {
+ this.updateDocContentMargin();
+ });
},
updateLazyload() {
@@ -241,12 +245,31 @@ export default {
openOptionExample() {
this.shared.showOptionExample = true;
+ },
+
+ updateDocContentMargin(isClose) {
+ if (!this.$refs.liveExample && !isClose) {
+ return;
+ }
+ // update margin of doc content
+ this.$refs.docContentDom.style.margin = '';
+ if (!isClose) {
+ const marginDir = this.shared.computedOptionExampleLayout;
+ if (marginDir !== 'right') {
+ const marginStyleName = 'margin' + marginDir[0].toUpperCase() + marginDir.slice(1);
+ const marginValue = this.$refs.liveExample.$el.clientHeight;
+ this.$refs.docContentDom.style[marginStyleName] = marginValue + 'px';
+ }
+ }
}
},
watch: {
'shared.currentPath'(newVal) {
this.updateCurrentPath(newVal);
+ Vue.nextTick(() => {
+ this.updateDocContentMargin();
+ });
},
'pageExamples'(newVal) {
// { code, title, name }
@@ -258,12 +281,16 @@ export default {
this.shared.allOptionExamples = null;
}
},
- // 'shared.currentOptionExampleLayout'() {
- // this.scrollTo(this.shared.currentPath);
- // },
- // 'shared.showOptionExample'() {
- // this.scrollTo(this.shared.currentPath);
- // }
+ 'shared.computedOptionExampleLayout'() {
+ Vue.nextTick(() => {
+ this.updateDocContentMargin();
+ });
+ },
+ 'shared.showOptionExample'(newVal) {
+ Vue.nextTick(() => {
+ this.updateDocContentMargin(!newVal);
+ });
+ }
}
}
</script>
@@ -309,10 +336,10 @@ export default {
&.option-example-actived {
&.option-example-top-layout {
- margin-top: 42%;
+ // margin-top: 42%;
}
&.option-example-bottom-layout {
- margin-bottom: 42%;
+ // margin-bottom: 42%;
}
&.option-example-right-layout {
margin-right: 45%;
---------------------------------------------------------------------
To unsubscribe, e-mail: commits-unsubscribe@echarts.apache.org
For additional commands, e-mail: commits-help@echarts.apache.org