diff --git a/src/main/resources/static/css/customAssets.css b/src/main/resources/static/css/customAssets.css index b7dafdc..4d2cf52 100644 --- a/src/main/resources/static/css/customAssets.css +++ b/src/main/resources/static/css/customAssets.css @@ -25,8 +25,12 @@ width: 460px; } +.modal .modal-inner.medium { + width: 720px; +} + .modal .modal-inner.wide { - width: 960px; + width: 1120px; } .modal .modal-inner .modal-header-row { @@ -58,6 +62,51 @@ gap: 10px; } +.modal .modal-inner .launch-grid { + display: grid; + grid-template-columns: repeat(3, minmax(0, 1fr)); + gap: 14px; + margin-top: 16px; +} + +.modal .modal-inner .launch-tile { + display: flex; + flex-direction: column; + gap: 8px; + align-items: flex-start; + padding: 16px; + border-radius: 12px; + border: 1px solid rgba(148, 163, 184, 0.35); + background: rgba(15, 23, 42, 0.75); + color: inherit; + text-align: left; + cursor: pointer; + min-height: 140px; + width: 100%; + transition: border-color 0.2s ease, background-color 0.2s ease, transform 0.2s ease; +} + +.modal .modal-inner .launch-tile:hover, +.modal .modal-inner .launch-tile:focus-visible { + border-color: rgba(226, 232, 240, 0.7); + background: rgba(30, 41, 59, 0.8); + transform: translateY(-1px); +} + +.modal .modal-inner .launch-tile .tile-icon { + font-size: 1.4rem; + color: rgba(226, 232, 240, 0.9); +} + +.modal .modal-inner .launch-tile .tile-title { + font-weight: 600; +} + +.modal .modal-inner .launch-tile .tile-subtitle { + color: rgba(226, 232, 240, 0.7); + font-size: 0.9rem; +} + .modal .modal-inner .checkbox-row { flex-direction: row; align-items: center; @@ -146,21 +195,22 @@ } .modal .modal-inner .marketplace-list { - display: flex; - flex-direction: column; - gap: 12px; - margin-top: 8px; + display: grid; + grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); + gap: 16px; + margin-top: 12px; } .modal .modal-inner .marketplace-card { - display: grid; - grid-template-columns: 80px 1fr auto; - gap: 16px; - align-items: center; - padding: 12px; + display: flex; + flex-direction: column; + align-items: flex-start; + gap: 12px; + padding: 16px; border: 1px solid rgba(148, 163, 184, 0.3); border-radius: 10px; background-color: rgba(15, 23, 42, 0.6); + min-height: 240px; } .modal .modal-inner .marketplace-logo { @@ -193,6 +243,9 @@ .modal .modal-inner .marketplace-actions { display: flex; align-items: center; + margin-top: auto; + width: 100%; + justify-content: flex-end; } .modal .modal-inner .marketplace-empty, diff --git a/src/main/resources/static/js/admin/console.js b/src/main/resources/static/js/admin/console.js index bfd12f3..fa40d7e 100644 --- a/src/main/resources/static/js/admin/console.js +++ b/src/main/resources/static/js/admin/console.js @@ -110,9 +110,9 @@ export function createAdminConsole({ handleFileSelection(event.target); }); } - const customAssetButton = document.getElementById("custom-asset-button"); - if (customAssetButton && customAssetModal?.openLauncher) { - customAssetButton.addEventListener("click", () => customAssetModal.openLauncher()); + const assetLauncherButton = document.getElementById("asset-launcher-button"); + if (assetLauncherButton && customAssetModal?.openLauncher) { + assetLauncherButton.addEventListener("click", () => customAssetModal.openLauncher()); } globalThis.addEventListener("resize", () => { resizeCanvas(); diff --git a/src/main/resources/static/js/customAssets.js b/src/main/resources/static/js/customAssets.js index 75ce2b1..5ff89a0 100644 --- a/src/main/resources/static/js/customAssets.js +++ b/src/main/resources/static/js/customAssets.js @@ -7,6 +7,7 @@ export function createCustomAssetModal({ const launchModal = document.getElementById("custom-asset-launch-modal"); const launchNewButton = document.getElementById("custom-asset-launch-new"); const launchMarketplaceButton = document.getElementById("custom-asset-launch-marketplace"); + const assetFileInput = document.getElementById("asset-file"); const marketplaceModal = document.getElementById("custom-asset-marketplace-modal"); const marketplaceCloseButton = document.getElementById("custom-asset-marketplace-close"); const marketplaceSearchInput = document.getElementById("custom-asset-marketplace-search"); @@ -234,6 +235,13 @@ export function createCustomAssetModal({ if (launchMarketplaceButton) { launchMarketplaceButton.addEventListener("click", () => openMarketplaceModal()); } + if (assetFileInput) { + assetFileInput.addEventListener("change", (event) => { + if (event.target?.files?.length) { + closeLaunchModal(); + } + }); + } if (marketplaceModal) { marketplaceModal.addEventListener("click", (event) => { if (event.target === marketplaceModal) { diff --git a/src/main/resources/templates/admin.html b/src/main/resources/templates/admin.html index 4ad1017..58586fc 100644 --- a/src/main/resources/templates/admin.html +++ b/src/main/resources/templates/admin.html @@ -47,27 +47,13 @@