mirror of
https://github.com/imgfloat/server.git
synced 2026-02-05 03:39:26 +00:00
Improve layout for settings
This commit is contained in:
@@ -251,6 +251,18 @@ body {
|
||||
background: #475569;
|
||||
}
|
||||
|
||||
.secondary.danger {
|
||||
background: #7f1d1d;
|
||||
border: 1px solid rgba(248, 113, 113, 0.35);
|
||||
color: #fecdd3;
|
||||
}
|
||||
|
||||
.secondary.danger:hover:not(:disabled) {
|
||||
border-color: rgba(248, 113, 113, 0.6);
|
||||
background: #991b1b;
|
||||
color: #fee2e2;
|
||||
}
|
||||
|
||||
.hero-panel {
|
||||
background: #0b1220;
|
||||
border: 1px solid #1f2937;
|
||||
@@ -884,18 +896,22 @@ body {
|
||||
}
|
||||
|
||||
.rail-inspector {
|
||||
margin-top: auto;
|
||||
margin-top: 0;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
max-height: 48vh;
|
||||
overflow: hidden;
|
||||
gap: 12px;
|
||||
max-height: none;
|
||||
overflow: visible;
|
||||
border-top: 1px solid #1f2937;
|
||||
padding: 14px 16px 0;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.rail-inspector .panel-section {
|
||||
margin-top: 4px;
|
||||
overflow-y: auto;
|
||||
padding-right: 4px;
|
||||
max-height: calc(48vh - 72px);
|
||||
margin-top: 0;
|
||||
overflow: visible;
|
||||
padding-right: 0;
|
||||
max-height: none;
|
||||
}
|
||||
|
||||
.control-panel {
|
||||
@@ -905,7 +921,11 @@ body {
|
||||
.asset-settings {
|
||||
background: transparent;
|
||||
box-shadow: none;
|
||||
padding: 6px;
|
||||
padding: 0;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 10px;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.panel-header {
|
||||
@@ -938,21 +958,22 @@ body {
|
||||
border: none;
|
||||
border-radius: 0;
|
||||
padding: 0;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.asset-controls-placeholder {
|
||||
margin-top: 8px;
|
||||
margin-top: 0;
|
||||
}
|
||||
|
||||
.selected-asset-banner {
|
||||
display: grid;
|
||||
grid-template-columns: 1fr auto;
|
||||
grid-template-columns: 1fr;
|
||||
gap: 10px;
|
||||
padding: 10px;
|
||||
border-radius: 10px;
|
||||
background: rgba(255, 255, 255, 0.02);
|
||||
border: 1px solid rgba(124, 58, 237, 0.2);
|
||||
box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.04);
|
||||
padding: 4px 0 10px;
|
||||
border-radius: 0;
|
||||
background: transparent;
|
||||
border: none;
|
||||
box-shadow: none;
|
||||
}
|
||||
|
||||
.selected-asset-main {
|
||||
@@ -1029,17 +1050,75 @@ body {
|
||||
|
||||
.title-row {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 12px;
|
||||
flex-wrap: wrap;
|
||||
align-items: baseline;
|
||||
gap: 8px;
|
||||
flex-wrap: nowrap;
|
||||
justify-content: space-between;
|
||||
}
|
||||
|
||||
.title-row strong {
|
||||
flex: 1;
|
||||
min-width: 0;
|
||||
overflow: hidden;
|
||||
white-space: nowrap;
|
||||
text-overflow: ellipsis;
|
||||
}
|
||||
|
||||
.asset-resolution {
|
||||
margin-left: auto;
|
||||
white-space: nowrap;
|
||||
font-size: 12px;
|
||||
color: #cbd5e1;
|
||||
text-align: right;
|
||||
}
|
||||
|
||||
.property-list {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 10px;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.property-row {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
gap: 12px;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.property-label {
|
||||
color: #e2e8f0;
|
||||
font-weight: 600;
|
||||
font-size: 14px;
|
||||
}
|
||||
|
||||
.property-control {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: flex-end;
|
||||
gap: 10px;
|
||||
min-width: 0;
|
||||
}
|
||||
|
||||
.property-row .number-input {
|
||||
max-width: 140px;
|
||||
text-align: right;
|
||||
}
|
||||
|
||||
.property-row .range-input {
|
||||
min-width: 200px;
|
||||
flex: 1;
|
||||
}
|
||||
|
||||
.property-row .badge-row {
|
||||
justify-content: flex-end;
|
||||
}
|
||||
|
||||
.inline-toggle {
|
||||
padding-top: 0;
|
||||
}
|
||||
|
||||
.meta-text {
|
||||
margin: 6px 0 0;
|
||||
}
|
||||
@@ -1125,7 +1204,8 @@ body {
|
||||
}
|
||||
|
||||
.asset-item strong {
|
||||
width: 157px;
|
||||
flex: 1;
|
||||
min-width: 0;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
}
|
||||
@@ -1176,6 +1256,14 @@ body {
|
||||
background: #0f172a;
|
||||
}
|
||||
|
||||
.asset-inspector .panel-section {
|
||||
margin-top: 0;
|
||||
padding: 0;
|
||||
border-radius: 0;
|
||||
background: transparent;
|
||||
border: none;
|
||||
}
|
||||
|
||||
.asset-meta-badges {
|
||||
margin-top: 4px;
|
||||
}
|
||||
@@ -1394,6 +1482,7 @@ body {
|
||||
gap: 8px;
|
||||
margin-top: 12px;
|
||||
flex-wrap: wrap;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.control-actions.compact button {
|
||||
@@ -1407,6 +1496,15 @@ body {
|
||||
border-radius: 12px;
|
||||
}
|
||||
|
||||
.unified-actions {
|
||||
padding: 0;
|
||||
margin: 14px 0;
|
||||
}
|
||||
|
||||
.unified-actions button {
|
||||
flex: 1 1 48px;
|
||||
}
|
||||
|
||||
.checkbox-inline {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
|
||||
@@ -51,6 +51,7 @@ const fileNameLabel = document.getElementById('asset-file-name');
|
||||
const assetInspector = document.getElementById('asset-inspector');
|
||||
const selectedAssetName = document.getElementById('selected-asset-name');
|
||||
const selectedAssetMeta = document.getElementById('selected-asset-meta');
|
||||
const selectedAssetResolution = document.getElementById('selected-asset-resolution');
|
||||
const selectedAssetIdLabel = document.getElementById('selected-asset-id');
|
||||
const selectedAssetBadges = document.getElementById('selected-asset-badges');
|
||||
const selectedVisibilityBtn = document.getElementById('selected-asset-visibility');
|
||||
@@ -1471,11 +1472,19 @@ function updateSelectedAssetSummary(asset) {
|
||||
selectedAssetName.textContent = asset ? (asset.name || `Asset ${asset.id.slice(0, 6)}`) : 'Choose an asset';
|
||||
}
|
||||
if (selectedAssetMeta) {
|
||||
const baseMeta = asset ? `${Math.round(asset.width)}x${Math.round(asset.height)}` : null;
|
||||
selectedAssetMeta.textContent = asset
|
||||
? `${baseMeta}`
|
||||
? getDisplayMediaType(asset)
|
||||
: 'Pick an asset in the list to adjust its placement and playback.';
|
||||
}
|
||||
if (selectedAssetResolution) {
|
||||
if (asset) {
|
||||
selectedAssetResolution.textContent = `${Math.round(asset.width)}×${Math.round(asset.height)}`;
|
||||
selectedAssetResolution.classList.remove('hidden');
|
||||
} else {
|
||||
selectedAssetResolution.textContent = '';
|
||||
selectedAssetResolution.classList.add('hidden');
|
||||
}
|
||||
}
|
||||
if (selectedAssetIdLabel) {
|
||||
if (asset) {
|
||||
selectedAssetIdLabel.textContent = `ID: ${asset.id}`;
|
||||
|
||||
@@ -52,19 +52,12 @@
|
||||
<div class="selected-asset-main">
|
||||
<div class="title-row">
|
||||
<strong id="selected-asset-name">Choose an asset</strong>
|
||||
<span id="selected-asset-resolution" class="asset-resolution subtle-text hidden"></span>
|
||||
</div>
|
||||
<p class="meta-text" id="selected-asset-meta">Pick an asset in the list to adjust its placement and playback.</p>
|
||||
<p class="meta-text subtle-text hidden" id="selected-asset-id"></p>
|
||||
<div class="badge-row asset-meta-badges" id="selected-asset-badges"></div>
|
||||
</div>
|
||||
<div class="selected-asset-actions">
|
||||
<button id="selected-asset-visibility" class="ghost icon-button" type="button" title="Hide asset" disabled>
|
||||
<i class="fa-solid fa-eye-slash"></i>
|
||||
</button>
|
||||
<button id="selected-asset-delete" class="ghost danger icon-button" type="button" title="Delete asset" disabled>
|
||||
<i class="fa-solid fa-trash"></i>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
<div id="asset-controls-placeholder" class="asset-controls-placeholder">
|
||||
<div id="asset-controls" class="hidden asset-settings">
|
||||
@@ -72,34 +65,34 @@
|
||||
<div class="section-header">
|
||||
<h5>Layout & order</h5>
|
||||
</div>
|
||||
<div class="control-grid condensed three-col">
|
||||
<label>
|
||||
Width
|
||||
<input id="asset-width" class="number-input" type="number" min="10" step="5" />
|
||||
</label>
|
||||
<label>
|
||||
Height
|
||||
<input id="asset-height" class="number-input" type="number" min="10" step="5" />
|
||||
</label>
|
||||
<label>
|
||||
Maintain AR
|
||||
<label class="checkbox-inline toggle">
|
||||
<div class="property-list">
|
||||
<div class="property-row">
|
||||
<span class="property-label">Width</span>
|
||||
<input id="asset-width" class="number-input property-control" type="number" min="10" step="5" />
|
||||
</div>
|
||||
<div class="property-row">
|
||||
<span class="property-label">Height</span>
|
||||
<input id="asset-height" class="number-input property-control" type="number" min="10" step="5" />
|
||||
</div>
|
||||
<div class="property-row">
|
||||
<span class="property-label">Maintain AR</span>
|
||||
<label class="checkbox-inline toggle inline-toggle property-control">
|
||||
<input id="maintain-aspect" type="checkbox" checked />
|
||||
<span class="toggle-track" aria-hidden="true">
|
||||
<span class="toggle-thumb"></span>
|
||||
</span>
|
||||
</label>
|
||||
</label>
|
||||
</div>
|
||||
<div class="control-grid condensed">
|
||||
<label>
|
||||
Layer
|
||||
<div class="badge-row stacked">
|
||||
<span class="badge">Layer <strong id="asset-z-level">1</strong></span>
|
||||
</div>
|
||||
<div class="property-row">
|
||||
<span class="property-label">Layer</span>
|
||||
<div class="property-control">
|
||||
<div class="badge-row stacked">
|
||||
<span class="badge">Layer <strong id="asset-z-level">1</strong></span>
|
||||
</div>
|
||||
</div>
|
||||
</label>
|
||||
</div>
|
||||
</div>
|
||||
<div class="control-actions filled compact">
|
||||
<div class="control-actions compact unified-actions">
|
||||
<button type="button" onclick="sendToBack()" class="secondary" title="Send to back"><i class="fa-solid fa-angles-down"></i></button>
|
||||
<button type="button" onclick="bringBackward()" class="secondary" title="Move backward"><i class="fa-solid fa-arrow-down"></i></button>
|
||||
<button type="button" onclick="bringForward()" class="secondary" title="Move forward"><i class="fa-solid fa-arrow-up"></i></button>
|
||||
@@ -107,6 +100,12 @@
|
||||
<button type="button" onclick="recenterSelectedAsset()" class="secondary" title="Center on canvas"><i class="fa-solid fa-bullseye"></i></button>
|
||||
<button type="button" onclick="nudgeRotation(-5)" class="secondary" title="Rotate left"><i class="fa-solid fa-rotate-left"></i></button>
|
||||
<button type="button" onclick="nudgeRotation(5)" class="secondary" title="Rotate right"><i class="fa-solid fa-rotate-right"></i></button>
|
||||
<button id="selected-asset-visibility" class="secondary" type="button" title="Hide asset" disabled>
|
||||
<i class="fa-solid fa-eye-slash"></i>
|
||||
</button>
|
||||
<button id="selected-asset-delete" class="secondary danger" type="button" title="Delete asset" disabled>
|
||||
<i class="fa-solid fa-trash"></i>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@@ -142,19 +141,20 @@
|
||||
<div class="section-header">
|
||||
<h5>Audio</h5>
|
||||
</div>
|
||||
<div class="control-grid condensed two-col">
|
||||
|
||||
<label class="checkbox-inline toggle inline-toggle">
|
||||
<input id="asset-audio-loop" type="checkbox" />
|
||||
<span class="toggle-track" aria-hidden="true">
|
||||
<span class="toggle-thumb"></span>
|
||||
</span>
|
||||
<span class="toggle-label">Loop</span>
|
||||
</label>
|
||||
<label>
|
||||
Delay (ms)
|
||||
<input id="asset-audio-delay" class="number-input" type="number" min="0" step="100"/>
|
||||
</label>
|
||||
<div class="property-list">
|
||||
<div class="property-row">
|
||||
<span class="property-label">Loop</span>
|
||||
<label class="checkbox-inline toggle inline-toggle property-control">
|
||||
<input id="asset-audio-loop" type="checkbox" />
|
||||
<span class="toggle-track" aria-hidden="true">
|
||||
<span class="toggle-thumb"></span>
|
||||
</span>
|
||||
</label>
|
||||
</div>
|
||||
<div class="property-row">
|
||||
<span class="property-label">Delay (ms)</span>
|
||||
<input id="asset-audio-delay" class="number-input property-control" type="number" min="0" step="100"/>
|
||||
</div>
|
||||
</div>
|
||||
<div class="stacked-field">
|
||||
<div class="label-row">
|
||||
@@ -164,12 +164,11 @@
|
||||
<input id="asset-audio-speed" class="range-input" type="range" min="25" max="400" step="5" value="100" />
|
||||
<div class="range-meta"><span>0.25x</span><span>4x</span></div>
|
||||
</div>
|
||||
<div class="control-grid condensed two-col">
|
||||
<label>
|
||||
Pitch (%)
|
||||
<input id="asset-audio-pitch" class="range-input" type="range" min="50" max="200" step="5" value="100" />
|
||||
</label>
|
||||
<div></div>
|
||||
<div class="property-list">
|
||||
<div class="property-row">
|
||||
<span class="property-label">Pitch (%)</span>
|
||||
<input id="asset-audio-pitch" class="range-input property-control" type="range" min="50" max="200" step="5" value="100" />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@@ -195,7 +194,7 @@
|
||||
<canvas id="admin-canvas"></canvas>
|
||||
</div>
|
||||
<div class="canvas-footnote">
|
||||
<p>Edges of the canvas are outlined to match your stream aspect ratio.</p>
|
||||
<p>Edges of the canvas are outlined to match the aspect ratio of the stream.</p>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
Reference in New Issue
Block a user