lee/puter
1
0
Fork 0
mirror of https://github.com/HeyPuter/puter.git synced 2026-09-23 13:46:11 +00:00
Code Issues Actions 9 Packages Projects Releases Wiki Activity

Make dashboard card headers clickable

Browse Source
This commit is contained in:
jelveh
2026-03-28 13:02:43 -07:00
parent 813e78843a
commit 1ab73d8726
2 changed files with 7 additions and 5 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/gui/src/UI/Dashboard/TabHome.js
+5 -5
View File
@@ -149,7 +149,7 @@ const TabHome = {
// Recent apps card (rectangle)
h += '<div class="bento-card bento-recent">';
h += '<div class="bento-card-fancy-header">';
h += '<a href="#" class="bento-card-fancy-header" data-target-tab="apps">';
h += '<div class="bento-card-fancy-icon bento-card-fancy-icon-apps">';
h += '<svg viewBox="0 0 24 24" fill="currentColor"><rect x="3" y="3" width="7" height="7" rx="1.5"/><rect x="14" y="3" width="7" height="7" rx="1.5"/><rect x="3" y="14" width="7" height="7" rx="1.5"/><rect x="14" y="14" width="7" height="7" rx="1.5"/></svg>';
h += '</div>';
@@ -160,7 +160,7 @@ const TabHome = {
h += 'Recently used';
h += '</span>';
h += '</div>';
h += '</div>';
h += '</a>';
h += '<div class="bento-recent-apps-container">';
h += buildRecentAppsHTML();
h += '</div>';
@@ -168,7 +168,7 @@ const TabHome = {
// Usage card (spans full width on second row)
h += '<div class="bento-card bento-usage">';
h += '<div class="bento-card-fancy-header">';
h += '<a href="#" class="bento-card-fancy-header" data-target-tab="usage">';
h += '<div class="bento-card-fancy-icon bento-card-fancy-icon-usage">';
h += '<svg viewBox="0 0 16 16" fill="currentColor"><path d="M8 4a.5.5 0 0 1 .5.5V6a.5.5 0 0 1-1 0V4.5A.5.5 0 0 1 8 4M3.732 5.732a.5.5 0 0 1 .707 0l.915.914a.5.5 0 1 1-.708.708l-.914-.915a.5.5 0 0 1 0-.707M2 10a.5.5 0 0 1 .5-.5h1.586a.5.5 0 0 1 0 1H2.5A.5.5 0 0 1 2 10m9.5 0a.5.5 0 0 1 .5-.5h1.5a.5.5 0 0 1 0 1H12a.5.5 0 0 1-.5-.5m.754-4.246a.39.39 0 0 0-.527-.02L7.547 9.31a.91.91 0 1 0 1.302 1.258l3.434-4.297a.39.39 0 0 0-.029-.518z"/><path fill-rule="evenodd" d="M0 10a8 8 0 1 1 15.547 2.661c-.442 1.253-1.845 1.602-2.932 1.25C11.309 13.488 9.475 13 8 13c-1.474 0-3.31.488-4.615.911-1.087.352-2.49.003-2.932-1.25A8 8 0 0 1 0 10m8-7a7 7 0 0 0-6.603 9.329c.203.575.923.876 1.68.63C4.397 12.533 6.358 12 8 12s3.604.532 4.923.96c.757.245 1.477-.056 1.68-.631A7 7 0 0 0 8 3"/></svg>';
h += '</div>';
@@ -179,7 +179,7 @@ const TabHome = {
h += 'Monthly overview';
h += '</span>';
h += '</div>';
h += '</div>';
h += '</a>';
h += '<div class="bento-usage-container">';
h += buildUsageHTML();
h += '</div>';
@@ -208,7 +208,7 @@ const TabHome = {
});
// Handle "View details" link clicks
$el_window.on('click', '.bento-view-more, .bento-usage-card-header', function (e) {
$el_window.on('click', '.bento-view-more, .bento-usage-card-header, .bento-card-fancy-header[data-target-tab]', function (e) {
e.preventDefault();
const targetTab = $(this).attr('data-target-tab');
if ( targetTab ) {
src/gui/src/css/dashboard.css
+2
View File
@@ -2170,6 +2170,8 @@ body {
padding: 20px 24px;
background: linear-gradient(135deg, var(--dashboard-fancy-header-start) 0%, var(--dashboard-fancy-header-end) 100%);
border-bottom: 1px solid var(--dashboard-shadow-light);
text-decoration: none;
color: inherit;
}
.dashboard .bento-card-fancy-icon {