feat(analytics): enhance mobile layout

koishijs · Dec 18, 2023 · d4d442f · d4d442f
1 parent 132853f
commit d4d442f
Show file tree

Hide file tree

Showing 2 changed files with 18 additions and 1 deletion.
diff --git a/plugins/analytics/client/home.vue b/plugins/analytics/client/home.vue
@@ -53,12 +53,19 @@ import NumberGrid from './numbers/index.vue'
       }
     }
 
-    @media (max-width: 768px) {
+    @media (max-width: 768px) and (min-width: 480px) {
       .echarts {
         width: 600px;
         height: 400px;
       }
     }
+
+    @media (max-width: 480px) {
+      .echarts {
+        width: 100%;
+        height: 300px;
+      }
+    }
   }
 }
 

diff --git a/plugins/analytics/client/numbers/numeric.vue b/plugins/analytics/client/numbers/numeric.vue
@@ -57,6 +57,11 @@ defineProps<{
   .value {
     font-size: 1rem;
   }
+
+  @media (max-width: 768px) {
+    margin: 0.5rem 0;
+    padding: 0 1rem;
+  }
 }
 
 .k-analytic-number footer {
@@ -66,6 +71,11 @@ defineProps<{
   margin-bottom: 0.75rem;
   display: flex;
   justify-content: space-between;
+
+  @media (max-width: 768px) {
+    margin: 0.5rem 0;
+    padding: 0.5rem 1rem 0;
+  }
 }
 
 </style>