Hugging Face's logo

Spaces:
mohsin-devs
/
DocumentVault
Running

App Files Community
mohsin-devs commited on
Commit
2b339d1
·
1 Parent(s): 73ae9fa

Improve mobile UI and remove debug banner

Browse files
Files changed (3) hide show
  1. index.html +1 -5
  2. js/main.js +21 -4
  3. styles.css +38 -13
index.html CHANGED
@@ -13,10 +13,6 @@
13
  <link rel="stylesheet" href="styles.css">
14
  </head>
15
  <body>
16
- <div style="position:fixed;top:0;left:0;background:red;color:white;z-index:9999;padding:4px 12px;font-weight:bold;font-size:12px;box-shadow:0 2px 8px rgba(0,0,0,0.2);pointer-events:none;">
17
- DOCVAULT VERSION 2.1 HARD MARKER (FIXED)
18
- </div>
19
-
20
  <!-- Hidden file input -->
21
  <input type="file" id="fileInput" multiple style="display:none">
22
 
@@ -206,6 +202,6 @@
206
  <script>
207
  window.__DOCVAULT_REMOTE_API_BASE__ = 'https://mohsin-devs-docvault.hf.space/api';
208
  </script>
209
- <script type="module" src="js/main.js?v=7"></script>
210
  </body>
211
  </html>
 
13
  <link rel="stylesheet" href="styles.css">
14
  </head>
15
  <body>
 
 
 
 
16
  <!-- Hidden file input -->
17
  <input type="file" id="fileInput" multiple style="display:none">
18
 
 
202
  <script>
203
  window.__DOCVAULT_REMOTE_API_BASE__ = 'https://mohsin-devs-docvault.hf.space/api';
204
  </script>
205
+ <script type="module" src="js/main.js?v=8"></script>
206
  </body>
207
  </html>
js/main.js CHANGED
@@ -62,6 +62,16 @@ class App {
62
  }
63
 
64
  setupEventListeners() {
 
 
 
 
 
 
 
 
 
 
65
  // Nav
66
  document.getElementById('navMyFiles').onclick = (e) => {
67
  e.preventDefault();
@@ -120,6 +130,15 @@ class App {
120
  e.target.value = '';
121
  };
122
 
 
 
 
 
 
 
 
 
 
123
  // Create Folder Modal
124
  document.getElementById('confirmFolderBtn').onclick = () => this.createFolder();
125
  document.getElementById('cancelFolderBtn').onclick = () => document.getElementById('createFolderModal').classList.remove('active');
@@ -149,8 +168,6 @@ class App {
149
  });
150
 
151
  // Mobile Toggle
152
- const menuToggle = document.getElementById('menuToggle');
153
- const sidebar = document.querySelector('.sidebar');
154
  if (menuToggle && sidebar) {
155
  menuToggle.onclick = (e) => {
156
  e.stopPropagation();
@@ -161,7 +178,7 @@ class App {
161
  // Close sidebar on navigation (mobile)
162
  document.querySelectorAll('.nav-item').forEach(item => {
163
  item.addEventListener('click', () => {
164
- sidebar.classList.remove('mobile-open');
165
  });
166
  });
167
 
@@ -186,7 +203,7 @@ class App {
186
  } else {
187
  overlay.classList.remove('active');
188
  }
189
- sidebar.classList.remove('mobile-open');
190
  }
191
  });
192
  });
 
62
  }
63
 
64
  setupEventListeners() {
65
+ const sidebar = document.querySelector('.sidebar');
66
+ const menuToggle = document.getElementById('menuToggle');
67
+ const contentArea = document.getElementById('contentArea');
68
+ const isCompactViewport = () => window.matchMedia('(max-width: 768px)').matches;
69
+ const closeSidebarOnCompactView = () => {
70
+ if (sidebar && isCompactViewport()) {
71
+ sidebar.classList.remove('mobile-open');
72
+ }
73
+ };
74
+
75
  // Nav
76
  document.getElementById('navMyFiles').onclick = (e) => {
77
  e.preventDefault();
 
130
  e.target.value = '';
131
  };
132
 
133
+ if (contentArea) {
134
+ contentArea.addEventListener('click', () => {
135
+ closeSidebarOnCompactView();
136
+ });
137
+ contentArea.addEventListener('touchstart', () => {
138
+ closeSidebarOnCompactView();
139
+ }, { passive: true });
140
+ }
141
+
142
  // Create Folder Modal
143
  document.getElementById('confirmFolderBtn').onclick = () => this.createFolder();
144
  document.getElementById('cancelFolderBtn').onclick = () => document.getElementById('createFolderModal').classList.remove('active');
 
168
  });
169
 
170
  // Mobile Toggle
 
 
171
  if (menuToggle && sidebar) {
172
  menuToggle.onclick = (e) => {
173
  e.stopPropagation();
 
178
  // Close sidebar on navigation (mobile)
179
  document.querySelectorAll('.nav-item').forEach(item => {
180
  item.addEventListener('click', () => {
181
+ closeSidebarOnCompactView();
182
  });
183
  });
184
 
 
203
  } else {
204
  overlay.classList.remove('active');
205
  }
206
+ closeSidebarOnCompactView();
207
  }
208
  });
209
  });
styles.css CHANGED
@@ -1488,32 +1488,47 @@ body {
1488
 
1489
  /* ── RESPONSIVE ── */
1490
  @media (max-width: 992px) {
1491
- .sidebar { width: 240px; }
1492
- .search-bar { width: 400px; }
 
 
1493
  }
1494
 
1495
  @media (max-width: 768px) {
1496
  .sidebar {
1497
  position: fixed;
1498
- left: -270px;
1499
  height: 100vh;
1500
  transition: left 0.3s ease;
1501
  box-shadow: var(--shadow-xl);
 
1502
  }
1503
  .sidebar.mobile-open {
1504
  left: 0;
1505
  }
1506
- .main-content { margin-left: 0; }
1507
- .top-header { padding: 0 16px; min-height: 64px; }
1508
- .search-bar { width: 100%; margin: 0 8px; }
 
 
 
 
 
 
 
 
 
 
 
1509
  .user-actions { gap: 8px; }
1510
- .content-area { padding: 0 16px 16px; }
1511
- .breadcrumbs { padding: 16px 16px 8px; font-size: 16px; }
1512
- .breadcrumb-item { font-size: 15px; }
1513
- .section-header { margin-bottom: 16px; }
1514
- .grid-container { grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); gap: 12px; }
1515
- .folder-card { padding: 12px; min-height: 140px; }
1516
- .file-preview { height: 100px; }
 
1517
 
1518
  /* Mobile Menu Toggle */
1519
  .menu-toggle {
@@ -1527,6 +1542,16 @@ body {
1527
  color: var(--text-main);
1528
  cursor: pointer;
1529
  }
 
 
 
 
 
 
 
 
 
 
1530
  }
1531
 
1532
  /* Add menu toggle to header if it doesn't exist */
 
1488
 
1489
  /* ── RESPONSIVE ── */
1490
  @media (max-width: 992px) {
1491
+ .app-container { gap: 12px; padding: 10px; }
1492
+ .sidebar { width: 224px; }
1493
+ .search-bar { width: 100%; max-width: 420px; }
1494
+ .grid-container { grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); }
1495
  }
1496
 
1497
  @media (max-width: 768px) {
1498
  .sidebar {
1499
  position: fixed;
1500
+ left: -260px;
1501
  height: 100vh;
1502
  transition: left 0.3s ease;
1503
  box-shadow: var(--shadow-xl);
1504
+ border-radius: 0 20px 20px 0;
1505
  }
1506
  .sidebar.mobile-open {
1507
  left: 0;
1508
  }
1509
+ .main-content {
1510
+ margin-left: 0;
1511
+ border-radius: 18px;
1512
+ }
1513
+ .top-header {
1514
+ padding: 0 12px;
1515
+ min-height: 62px;
1516
+ gap: 8px;
1517
+ }
1518
+ .search-bar {
1519
+ width: 100%;
1520
+ margin: 0 6px;
1521
+ padding: 10px 14px;
1522
+ }
1523
  .user-actions { gap: 8px; }
1524
+ .content-area { padding: 0 12px 14px; }
1525
+ .breadcrumbs { padding: 14px 12px 8px; font-size: 16px; }
1526
+ .breadcrumb-item { font-size: 14px; }
1527
+ .section-header { margin-bottom: 14px; }
1528
+ .grid-container { grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 10px; }
1529
+ .folder-card { padding: 12px; min-height: 136px; }
1530
+ .file-card { border-radius: 16px; }
1531
+ .file-preview { height: 92px; }
1532
 
1533
  /* Mobile Menu Toggle */
1534
  .menu-toggle {
 
1542
  color: var(--text-main);
1543
  cursor: pointer;
1544
  }
1545
+ .sidebar-bottom {
1546
+ padding-top: 14px;
1547
+ }
1548
+ .storage-dashboard {
1549
+ padding: 12px;
1550
+ }
1551
+ .hf-badge {
1552
+ padding: 9px 10px;
1553
+ font-size: 11px;
1554
+ }
1555
  }
1556
 
1557
  /* Add menu toggle to header if it doesn't exist */