Hugging Face's logo

Spaces:
i0110
/
dashboard
Paused

App Files Community
i0110 commited on
Commit
7de2133
·
verified ·
1 Parent(s): f627d8c

Update public/index.html

Browse files
Files changed (1) hide show
  1. public/index.html +18 -5
public/index.html CHANGED
@@ -2,6 +2,7 @@
2
  <html lang="zh">
3
  <head>
4
  <meta charset="UTF-8">
 
5
  <title>HF Space Manager</title>
6
  <!-- 引入 Chart.js CDN -->
7
  <script src="https://cdn.jsdelivr.net/npm/chart.js@4.4.7/dist/chart.umd.min.js"></script>
@@ -167,10 +168,13 @@
167
  padding: 15px;
168
  border: 1px solid var(--metric-border);
169
  transition: transform 0.2s ease, box-shadow 0.2s ease, background 0.3s ease, border 0.3s ease;
170
- min-height: 180px; /* 固定最小高度，避免内容变化导致抖动 */
171
  display: flex;
172
  flex-direction: column;
173
  }
 
 
 
174
  .server-card:hover {
175
  transform: translateY(-2px);
176
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.2);
@@ -292,7 +296,7 @@
292
  70% { box-shadow: 0 0 0 10px rgba(76, 175, 80, 0); }
293
  100% { box-shadow: 0 0 0 0 rgba(76, 175, 80, 0); }
294
  }
295
- @media (max-width: 768px) {
296
  #summary {
297
  grid-template-columns: 1fr; /* 小屏幕单列显示 */
298
  gap: 10px;
@@ -304,7 +308,7 @@
304
  font-size: 20px; /* 小屏幕字体略小 */
305
  }
306
  .user-servers {
307
- grid-template-columns: 1fr; /* 小屏幕单列显示实例卡片 */
308
  }
309
  .metric-grid {
310
  grid-template-columns: repeat(2, 1fr); /* 小屏幕指标网格改为2列 */
@@ -495,7 +499,7 @@
495
  height: 16px;
496
  fill: currentColor;
497
  }
498
- @media (max-width: 768px) {
499
  .filter-sort-group {
500
  min-width: 100%; /* 小屏时控件占满一行 */
501
  }
@@ -537,7 +541,7 @@
537
  width: 100% !important;
538
  height: auto !important;
539
  }
540
- @media (max-width: 768px) {
541
  .chart-container {
542
  height: 250px; /* 小屏幕图表高度略减 */
543
  }
@@ -841,6 +845,12 @@
841
  if (buttons) {
842
  buttons.style.display = loggedIn ? 'flex' : 'none';
843
  }
 
 
 
 
 
 
844
  // 确保图表切换按钮总是可见，不管是否登录
845
  const chartToggleButton = card.querySelector('.chart-toggle-button');
846
  if (chartToggleButton) {
@@ -1183,6 +1193,9 @@
1183
  card = document.createElement('div');
1184
  card.id = cardId;
1185
  card.className = 'server-card';
 
 
 
1186
  card.innerHTML = `
1187
  <div class="server-header">
1188
  <div class="server-name">
 
2
  <html lang="zh">
3
  <head>
4
  <meta charset="UTF-8">
5
+ <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no"> <!-- 确保 viewport 设置正确，防止缩放问题 -->
6
  <title>HF Space Manager</title>
7
  <!-- 引入 Chart.js CDN -->
8
  <script src="https://cdn.jsdelivr.net/npm/chart.js@4.4.7/dist/chart.umd.min.js"></script>
 
168
  padding: 15px;
169
  border: 1px solid var(--metric-border);
170
  transition: transform 0.2s ease, box-shadow 0.2s ease, background 0.3s ease, border 0.3s ease;
171
+ min-height: 150px; /* 登录状态下的最小高度，适配有操作按钮的情况 */
172
  display: flex;
173
  flex-direction: column;
174
  }
175
+ .server-card.not-logged-in {
176
+ min-height: 120px; /* 未登录状态下的最小高度，减少空白 */
177
+ }
178
  .server-card:hover {
179
  transform: translateY(-2px);
180
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.2);
 
296
  70% { box-shadow: 0 0 0 10px rgba(76, 175, 80, 0); }
297
  100% { box-shadow: 0 0 0 0 rgba(76, 175, 80, 0); }
298
  }
299
+ @media (max-width: 600px) { /* 降低阈值，确保覆盖更多小屏幕设备如 iPhone */
300
  #summary {
301
  grid-template-columns: 1fr; /* 小屏幕单列显示 */
302
  gap: 10px;
 
308
  font-size: 20px; /* 小屏幕字体略小 */
309
  }
310
  .user-servers {
311
+ grid-template-columns: 1fr !important; /* 小屏幕强制单列显示实例卡片，使用 !important 提高优先级 */
312
  }
313
  .metric-grid {
314
  grid-template-columns: repeat(2, 1fr); /* 小屏幕指标网格改为2列 */
 
499
  height: 16px;
500
  fill: currentColor;
501
  }
502
+ @media (max-width: 600px) {
503
  .filter-sort-group {
504
  min-width: 100%; /* 小屏时控件占满一行 */
505
  }
 
541
  width: 100% !important;
542
  height: auto !important;
543
  }
544
+ @media (max-width: 600px) {
545
  .chart-container {
546
  height: 250px; /* 小屏幕图表高度略减 */
547
  }
 
845
  if (buttons) {
846
  buttons.style.display = loggedIn ? 'flex' : 'none';
847
  }
848
+ // 动态添加或去除 not-logged-in 类以调整卡片高度
849
+ if (loggedIn) {
850
+ card.classList.remove('not-logged-in');
851
+ } else {
852
+ card.classList.add('not-logged-in');
853
+ }
854
  // 确保图表切换按钮总是可见，不管是否登录
855
  const chartToggleButton = card.querySelector('.chart-toggle-button');
856
  if (chartToggleButton) {
 
1193
  card = document.createElement('div');
1194
  card.id = cardId;
1195
  card.className = 'server-card';
1196
+ if (!isLoggedIn) {
1197
+ card.classList.add('not-logged-in'); // 未登录时添加类以调整高度
1198
+ }
1199
  card.innerHTML = `
1200
  <div class="server-header">
1201
  <div class="server-name">