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 2021/08/26 05:19:28 UTC
[echarts-handbook] branch master updated: optimize mobile 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/echarts-handbook.git
The following commit(s) were added to refs/heads/master by this push:
new 728d797 optimize mobile style
728d797 is described below
commit 728d7973cdeaaa2ce471bbf91de0b49281784b9f
Author: pissang <bm...@gmail.com>
AuthorDate: Thu Aug 26 13:18:14 2021 +0800
optimize mobile style
---
components/markdown/Live.vue | 50 +++++++++++++++++++++--------------------
components/partials/Sidebar.vue | 4 ++++
layouts/default.vue | 18 ++++++++-------
pages/_.vue | 2 +-
4 files changed, 41 insertions(+), 33 deletions(-)
diff --git a/components/markdown/Live.vue b/components/markdown/Live.vue
index 030042c..376e818 100644
--- a/components/markdown/Live.vue
+++ b/components/markdown/Live.vue
@@ -133,33 +133,35 @@ export default defineComponent({
.md-live {
@apply overflow-hidden;
@apply shadow-lg rounded-lg mt-10 mb-20;
- @apply flex;
+ @apply flex flex-col-reverse;
- &.layout-lr {
- @apply flex-row;
- }
- &.layout-rl {
- @apply flex-row-reverse;
- }
- &.layout-tb {
- @apply flex-col;
- }
- &.layout-bt {
- @apply flex-col-reverse;
- }
- &.layout-lr,
- &.layout-rl {
- @apply items-stretch;
-
- .md-live-editor-container {
- height: 100%;
+ @media (min-width: 768px) {
+ &.layout-lr {
+ @apply flex-row;
+ }
+ &.layout-rl {
+ @apply flex-row-reverse;
}
- .md-live-editor {
- @apply flex-1;
+ &.layout-tb {
+ @apply flex-col;
}
- .md-live-preview {
- @apply flex-1;
- height: auto;
+ &.layout-bt {
+ @apply flex-col-reverse;
+ }
+ &.layout-lr,
+ &.layout-rl {
+ @apply items-stretch;
+
+ .md-live-editor-container {
+ height: 100%;
+ }
+ .md-live-editor {
+ @apply flex-1;
+ }
+ .md-live-preview {
+ @apply flex-1;
+ height: auto;
+ }
}
}
}
diff --git a/components/partials/Sidebar.vue b/components/partials/Sidebar.vue
index 662f244..1b28f24 100644
--- a/components/partials/Sidebar.vue
+++ b/components/partials/Sidebar.vue
@@ -56,6 +56,10 @@ export default Vue.extend({
padding: 0;
overflow-y: auto;
border-right: 1px solid #eee;
+
+ @media (max-width: 768px) {
+ display: none;
+ }
}
.bd-sidenav {
diff --git a/layouts/default.vue b/layouts/default.vue
index 509bd75..e7eb6a0 100644
--- a/layouts/default.vue
+++ b/layouts/default.vue
@@ -66,6 +66,10 @@ body {
.bd-content {
padding-left: 50px;
+
+ @media (max-width: 768px) {
+ padding-left: 30px;
+ }
}
.post-content {
@@ -209,14 +213,12 @@ body {
height: auto;
@media (max-width: 768px) {
- & {
- position: relative;
- width: 100%;
- left: 0;
- top: 0;
- padding: 10px 20px;
- margin: 0 0 20px 0;
- }
+ position: relative;
+ width: 100%;
+ left: 0;
+ top: 0;
+ padding: 0;
+ margin: 0 0 10px 0;
}
.toc-container-header {
diff --git a/pages/_.vue b/pages/_.vue
index ca0f4c9..e45dd14 100644
--- a/pages/_.vue
+++ b/pages/_.vue
@@ -1,7 +1,6 @@
<template>
<div>
<div class="post-inner">
- <post-content :content="html"></post-content>
<div class="table-of-contents">
<h4 class="toc-container-header">{{ $t('inThisPage') }}</h4>
<ul>
@@ -14,6 +13,7 @@
</li>
</ul>
</div>
+ <post-content :content="html"></post-content>
</div>
<contributors :path="postPath"></contributors>
</div>
---------------------------------------------------------------------
To unsubscribe, e-mail: commits-unsubscribe@echarts.apache.org
For additional commands, e-mail: commits-help@echarts.apache.org