From eb59b4b185f5c1e56eeccfdcf4c841af09e8c707 Mon Sep 17 00:00:00 2001
From: Justineo <justice360@gmail.com>
Date: Tue, 22 Aug 2023 19:57:16 +0800
Subject: [PATCH] chore: refine demo

---
 src/demo/Demo.vue                  | 18 +++++++++++-------
 src/demo/examples/BarChart.vue     |  2 +-
 src/demo/examples/ConnectChart.vue |  2 +-
 src/demo/examples/GeoChart.vue     |  2 +-
 src/demo/examples/ManualChart.vue  |  2 +-
 src/demo/examples/PolarChart.vue   |  2 +-
 src/demo/examples/RadarChart.vue   |  2 +-
 7 files changed, 17 insertions(+), 13 deletions(-)

diff --git a/src/demo/Demo.vue b/src/demo/Demo.vue
index 7acb8db..c133ee6 100644
--- a/src/demo/Demo.vue
+++ b/src/demo/Demo.vue
@@ -247,13 +247,15 @@ select {
 }
 
 figure {
-  display: inline-block;
-  position: relative;
+  display: flex;
+  justify-content: center;
+  width: fit-content;
   margin: 2em auto;
 
   .echarts {
+    width: calc(60vw + 4em);
     height: 360px;
-    min-width: calc(40vw + 4em);
+    max-width: 720px;
     padding: 1.5em 2em;
     border: 1px solid rgba(0, 0, 0, 0.1);
     border-radius: 8px;
@@ -312,9 +314,6 @@ figure {
 
 @media (max-width: 980px) {
   p {
-    display: flex;
-    justify-content: center;
-
     select {
       text-indent: calc(50% - 1em);
     }
@@ -352,6 +351,11 @@ figure {
     }
   }
 
+  .actions {
+    display: flex;
+    justify-content: center;
+  }
+
   figure {
     width: 100vw;
     margin: 1em auto;
@@ -359,7 +363,7 @@ figure {
     .echarts {
       width: 100%;
       min-width: 0;
-      height: 75vw;
+      height: 60vw;
       padding: 1em 0;
       border: none;
       border-radius: 0;
diff --git a/src/demo/examples/BarChart.vue b/src/demo/examples/BarChart.vue
index 310d066..21198a1 100644
--- a/src/demo/examples/BarChart.vue
+++ b/src/demo/examples/BarChart.vue
@@ -69,7 +69,7 @@ function refresh() {
           second{{ seconds > 1 ? "s" : "" }}...
         </small>
       </p>
-      <p>
+      <p class="actions">
         <button @click="refresh" :disabled="seconds > 0">Refresh</button>
       </p>
     </template>
diff --git a/src/demo/examples/ConnectChart.vue b/src/demo/examples/ConnectChart.vue
index 698fd26..9afc414 100644
--- a/src/demo/examples/ConnectChart.vue
+++ b/src/demo/examples/ConnectChart.vue
@@ -45,7 +45,7 @@ watch(
       <v-chart :option="c2" group="radiance" autoresize />
     </template>
     <template #extra>
-      <p>
+      <p class="actions">
         <label>
           <input type="checkbox" v-model="connected" />
           Connected
diff --git a/src/demo/examples/GeoChart.vue b/src/demo/examples/GeoChart.vue
index 9096928..fa85cb7 100644
--- a/src/demo/examples/GeoChart.vue
+++ b/src/demo/examples/GeoChart.vue
@@ -51,7 +51,7 @@ function convert() {
       style="background-color: #404a59"
     />
     <template #extra>
-      <p>
+      <p class="actions">
         <button @click="convert">Convert to image</button>
       </p>
       <aside class="modal" :class="{ open }" @click="open = false">
diff --git a/src/demo/examples/ManualChart.vue b/src/demo/examples/ManualChart.vue
index 10a072b..c247271 100644
--- a/src/demo/examples/ManualChart.vue
+++ b/src/demo/examples/ManualChart.vue
@@ -105,7 +105,7 @@ function load() {
         You may use the <code>manual-update</code> prop for performance critical
         use cases.
       </p>
-      <p>
+      <p class="actions">
         <button :disabled="loaded" @click="load">Load</button>
       </p>
     </template>
diff --git a/src/demo/examples/PolarChart.vue b/src/demo/examples/PolarChart.vue
index e57affb..038d514 100644
--- a/src/demo/examples/PolarChart.vue
+++ b/src/demo/examples/PolarChart.vue
@@ -33,7 +33,7 @@ const theme = shallowRef("dark");
       :style="theme === 'dark' ? 'background-color: #100c2a' : ''"
     />
     <template #extra>
-      <p>
+      <p class="actions">
         Theme
         <select v-model="theme">
           <option :value="null">Default</option>
diff --git a/src/demo/examples/RadarChart.vue b/src/demo/examples/RadarChart.vue
index f71d9dc..92ac17e 100644
--- a/src/demo/examples/RadarChart.vue
+++ b/src/demo/examples/RadarChart.vue
@@ -22,7 +22,7 @@ const metricIndex = shallowRef(0);
   <v-example id="radar" title="Radar chart" desc="(with Pinia integration)">
     <v-chart :option="getRadarData(metricIndex)" autoresize />
     <template #extra>
-      <p>
+      <p class="actions">
         <select v-model="metricIndex">
           <option
             v-for="(metric, index) in metrics"