Make layout more square

This commit is contained in:
2025-12-10 22:18:07 +01:00
parent de102d3570
commit 989aae9410
3 changed files with 24 additions and 62 deletions

View File

@@ -463,11 +463,10 @@ body {
.admin-rail {
background: rgba(11, 18, 32, 0.92);
border-right: 1px solid #1f2937;
padding: 10px 10px 12px;
box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.02), 0 18px 45px rgba(0, 0, 0, 0.4);
display: flex;
flex-direction: column;
gap: 8px;
height: calc(100vh - 81px);
}
.rail-header {
@@ -906,13 +905,6 @@ body {
max-height: calc(48vh - 72px);
}
.drawer-header {
padding: 4px 2px 0;
display: flex;
align-items: center;
justify-content: space-between;
}
.control-panel {
margin-top: 0;
}
@@ -997,8 +989,6 @@ body {
.upload-row {
display: flex;
align-items: center;
gap: 10px;
margin: 8px 0 2px;
}
.file-input-field {
@@ -1011,15 +1001,12 @@ body {
align-items: center;
gap: 12px;
padding: 10px 12px;
border: 1px dashed rgba(124, 58, 237, 0.45);
border-radius: 10px;
background: rgba(124, 58, 237, 0.08);
cursor: pointer;
transition: border-color 120ms ease, background 120ms ease;
transition: background 120ms ease, background 120ms ease;
}
.file-input-trigger:hover {
border-color: rgba(124, 58, 237, 0.8);
background: rgba(124, 58, 237, 0.14);
}
@@ -1122,9 +1109,8 @@ body {
.asset-list {
display: flex;
flex-direction: column;
gap: 6px;
margin-top: 6px;
padding: 0;
margin: 0;
}
.asset-item {
@@ -1132,9 +1118,8 @@ body {
flex-direction: column;
align-items: stretch;
padding: 8px 10px;
border-radius: 9px;
background: #111827;
border: 1px solid #1f2937;
border-top: 1px solid #1f2937;
cursor: pointer;
gap: 8px;
font-size: 13px;
@@ -1142,9 +1127,18 @@ body {
height: 60px;
}
.asset-item:last-child {
border-bottom: 1px solid #1f2937;
}
.asset-item strong {
width: 157px;
overflow: hidden;
text-overflow: ellipsis;
}
.asset-item.selected {
border-color: #7c3aed;
box-shadow: 0 0 0 1px rgba(124, 58, 237, 0.6);
background: #235;
}
.asset-item.pending {
@@ -1202,6 +1196,7 @@ body {
align-items: center;
gap: 6px;
padding: 8px 10px;
width: 39px;
border-radius: 8px;
border: 1px solid rgba(148, 163, 184, 0.25);
background: rgba(255, 255, 255, 0.04);

View File

@@ -1084,23 +1084,6 @@ function renderAssetList() {
meta.appendChild(name);
meta.appendChild(details);
const badges = document.createElement('div');
badges.className = 'badge-row asset-meta-badges';
badges.appendChild(createBadge(getDisplayMediaType(asset)));
if (!isAudioAsset(asset)) {
badges.appendChild(createBadge(asset.hidden ? 'Hidden' : 'Visible', asset.hidden ? 'danger' : ''));
badges.appendChild(createBadge(`Layer ${asset.zIndex ?? 1}`));
}
const aspectLabel = !isAudioAsset(asset) ? formatAspectRatioLabel(asset) : '';
if (aspectLabel) {
badges.appendChild(createBadge(aspectLabel, 'subtle'));
}
const durationLabel = getDurationBadge(asset);
if (durationLabel) {
badges.appendChild(createBadge(durationLabel, 'subtle'));
}
meta.appendChild(badges);
const actions = document.createElement('div');
actions.className = 'actions';
@@ -1143,18 +1126,6 @@ function renderAssetList() {
actions.appendChild(toggleBtn);
}
const deleteBtn = document.createElement('button');
deleteBtn.type = 'button';
deleteBtn.className = 'ghost danger icon-button';
deleteBtn.innerHTML = '<i class="fa-solid fa-trash"></i>';
deleteBtn.title = 'Delete asset';
deleteBtn.addEventListener('click', (e) => {
e.stopPropagation();
deleteAsset(asset);
});
actions.appendChild(deleteBtn);
row.appendChild(preview);
row.appendChild(meta);
row.appendChild(actions);