refactor: tighten inventory mana panel layout
Move the Mana panel to the right of the backpack column, widen the inventory window, and switch to a smaller Mag-Tools-style row layout with compact icons and status dots.
This commit is contained in:
parent
0e8186b8e5
commit
63ea242167
2 changed files with 129 additions and 46 deletions
|
|
@ -1562,8 +1562,8 @@ function renderInventoryManaPanel(state) {
|
|||
|
||||
const stateEl = document.createElement('div');
|
||||
const stateName = item.mana_state || 'unknown';
|
||||
stateEl.className = `inv-mana-state mana-state-${stateName}`;
|
||||
stateEl.textContent = stateName.replace(/_/g, ' ');
|
||||
stateEl.className = `inv-mana-state-dot mana-state-${stateName}`;
|
||||
stateEl.title = stateName.replace(/_/g, ' ');
|
||||
|
||||
const manaEl = document.createElement('div');
|
||||
manaEl.className = 'inv-mana-value';
|
||||
|
|
@ -1641,6 +1641,20 @@ function showInventoryWindow(name) {
|
|||
const sidebar = document.createElement('div');
|
||||
sidebar.className = 'inv-sidebar';
|
||||
|
||||
const manaPanel = document.createElement('div');
|
||||
manaPanel.className = 'inv-mana-panel';
|
||||
const manaHeader = document.createElement('div');
|
||||
manaHeader.className = 'inv-mana-header';
|
||||
manaHeader.textContent = 'Mana';
|
||||
const manaSummary = document.createElement('div');
|
||||
manaSummary.className = 'inv-mana-summary';
|
||||
manaSummary.textContent = 'Mana: loading';
|
||||
const manaListBody = document.createElement('div');
|
||||
manaListBody.className = 'inv-mana-list';
|
||||
manaPanel.appendChild(manaHeader);
|
||||
manaPanel.appendChild(manaSummary);
|
||||
manaPanel.appendChild(manaListBody);
|
||||
|
||||
const burdenContainer = document.createElement('div');
|
||||
burdenContainer.className = 'inv-burden-bar';
|
||||
const burdenFill = document.createElement('div');
|
||||
|
|
@ -1658,26 +1672,13 @@ function showInventoryWindow(name) {
|
|||
|
||||
topSection.appendChild(equipGrid);
|
||||
topSection.appendChild(sidebar);
|
||||
topSection.appendChild(manaPanel);
|
||||
|
||||
const bottomSection = document.createElement('div');
|
||||
bottomSection.className = 'inv-bottom-section';
|
||||
|
||||
const itemSection = document.createElement('div');
|
||||
itemSection.className = 'inv-item-section';
|
||||
|
||||
const manaPanel = document.createElement('div');
|
||||
manaPanel.className = 'inv-mana-panel';
|
||||
const manaHeader = document.createElement('div');
|
||||
manaHeader.className = 'inv-mana-header';
|
||||
manaHeader.textContent = 'Mana';
|
||||
const manaSummary = document.createElement('div');
|
||||
manaSummary.className = 'inv-mana-summary';
|
||||
manaSummary.textContent = 'Mana: loading';
|
||||
const manaListBody = document.createElement('div');
|
||||
manaListBody.className = 'inv-mana-list';
|
||||
manaPanel.appendChild(manaHeader);
|
||||
manaPanel.appendChild(manaSummary);
|
||||
manaPanel.appendChild(manaListBody);
|
||||
|
||||
const contentsHeader = document.createElement('div');
|
||||
contentsHeader.className = 'inv-contents-header';
|
||||
|
|
@ -1689,7 +1690,6 @@ function showInventoryWindow(name) {
|
|||
itemSection.appendChild(contentsHeader);
|
||||
itemSection.appendChild(itemGrid);
|
||||
bottomSection.appendChild(itemSection);
|
||||
bottomSection.appendChild(manaPanel);
|
||||
|
||||
invContent.appendChild(topSection);
|
||||
invContent.appendChild(bottomSection);
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue