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;
|
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 {
|
.hero-panel {
|
||||||
background: #0b1220;
|
background: #0b1220;
|
||||||
border: 1px solid #1f2937;
|
border: 1px solid #1f2937;
|
||||||
@@ -884,18 +896,22 @@ body {
|
|||||||
}
|
}
|
||||||
|
|
||||||
.rail-inspector {
|
.rail-inspector {
|
||||||
margin-top: auto;
|
margin-top: 0;
|
||||||
display: flex;
|
display: flex;
|
||||||
flex-direction: column;
|
flex-direction: column;
|
||||||
max-height: 48vh;
|
gap: 12px;
|
||||||
overflow: hidden;
|
max-height: none;
|
||||||
|
overflow: visible;
|
||||||
|
border-top: 1px solid #1f2937;
|
||||||
|
padding: 14px 16px 0;
|
||||||
|
width: 100%;
|
||||||
}
|
}
|
||||||
|
|
||||||
.rail-inspector .panel-section {
|
.rail-inspector .panel-section {
|
||||||
margin-top: 4px;
|
margin-top: 0;
|
||||||
overflow-y: auto;
|
overflow: visible;
|
||||||
padding-right: 4px;
|
padding-right: 0;
|
||||||
max-height: calc(48vh - 72px);
|
max-height: none;
|
||||||
}
|
}
|
||||||
|
|
||||||
.control-panel {
|
.control-panel {
|
||||||
@@ -905,7 +921,11 @@ body {
|
|||||||
.asset-settings {
|
.asset-settings {
|
||||||
background: transparent;
|
background: transparent;
|
||||||
box-shadow: none;
|
box-shadow: none;
|
||||||
padding: 6px;
|
padding: 0;
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
gap: 10px;
|
||||||
|
width: 100%;
|
||||||
}
|
}
|
||||||
|
|
||||||
.panel-header {
|
.panel-header {
|
||||||
@@ -938,21 +958,22 @@ body {
|
|||||||
border: none;
|
border: none;
|
||||||
border-radius: 0;
|
border-radius: 0;
|
||||||
padding: 0;
|
padding: 0;
|
||||||
|
width: 100%;
|
||||||
}
|
}
|
||||||
|
|
||||||
.asset-controls-placeholder {
|
.asset-controls-placeholder {
|
||||||
margin-top: 8px;
|
margin-top: 0;
|
||||||
}
|
}
|
||||||
|
|
||||||
.selected-asset-banner {
|
.selected-asset-banner {
|
||||||
display: grid;
|
display: grid;
|
||||||
grid-template-columns: 1fr auto;
|
grid-template-columns: 1fr;
|
||||||
gap: 10px;
|
gap: 10px;
|
||||||
padding: 10px;
|
padding: 4px 0 10px;
|
||||||
border-radius: 10px;
|
border-radius: 0;
|
||||||
background: rgba(255, 255, 255, 0.02);
|
background: transparent;
|
||||||
border: 1px solid rgba(124, 58, 237, 0.2);
|
border: none;
|
||||||
box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.04);
|
box-shadow: none;
|
||||||
}
|
}
|
||||||
|
|
||||||
.selected-asset-main {
|
.selected-asset-main {
|
||||||
@@ -1029,17 +1050,75 @@ body {
|
|||||||
|
|
||||||
.title-row {
|
.title-row {
|
||||||
display: flex;
|
display: flex;
|
||||||
align-items: center;
|
align-items: baseline;
|
||||||
gap: 12px;
|
gap: 8px;
|
||||||
flex-wrap: wrap;
|
flex-wrap: nowrap;
|
||||||
|
justify-content: space-between;
|
||||||
}
|
}
|
||||||
|
|
||||||
.title-row strong {
|
.title-row strong {
|
||||||
|
flex: 1;
|
||||||
|
min-width: 0;
|
||||||
overflow: hidden;
|
overflow: hidden;
|
||||||
white-space: nowrap;
|
white-space: nowrap;
|
||||||
text-overflow: ellipsis;
|
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 {
|
.meta-text {
|
||||||
margin: 6px 0 0;
|
margin: 6px 0 0;
|
||||||
}
|
}
|
||||||
@@ -1125,7 +1204,8 @@ body {
|
|||||||
}
|
}
|
||||||
|
|
||||||
.asset-item strong {
|
.asset-item strong {
|
||||||
width: 157px;
|
flex: 1;
|
||||||
|
min-width: 0;
|
||||||
overflow: hidden;
|
overflow: hidden;
|
||||||
text-overflow: ellipsis;
|
text-overflow: ellipsis;
|
||||||
}
|
}
|
||||||
@@ -1176,6 +1256,14 @@ body {
|
|||||||
background: #0f172a;
|
background: #0f172a;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
.asset-inspector .panel-section {
|
||||||
|
margin-top: 0;
|
||||||
|
padding: 0;
|
||||||
|
border-radius: 0;
|
||||||
|
background: transparent;
|
||||||
|
border: none;
|
||||||
|
}
|
||||||
|
|
||||||
.asset-meta-badges {
|
.asset-meta-badges {
|
||||||
margin-top: 4px;
|
margin-top: 4px;
|
||||||
}
|
}
|
||||||
@@ -1394,6 +1482,7 @@ body {
|
|||||||
gap: 8px;
|
gap: 8px;
|
||||||
margin-top: 12px;
|
margin-top: 12px;
|
||||||
flex-wrap: wrap;
|
flex-wrap: wrap;
|
||||||
|
width: 100%;
|
||||||
}
|
}
|
||||||
|
|
||||||
.control-actions.compact button {
|
.control-actions.compact button {
|
||||||
@@ -1407,6 +1496,15 @@ body {
|
|||||||
border-radius: 12px;
|
border-radius: 12px;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
.unified-actions {
|
||||||
|
padding: 0;
|
||||||
|
margin: 14px 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
.unified-actions button {
|
||||||
|
flex: 1 1 48px;
|
||||||
|
}
|
||||||
|
|
||||||
.checkbox-inline {
|
.checkbox-inline {
|
||||||
display: flex;
|
display: flex;
|
||||||
align-items: center;
|
align-items: center;
|
||||||
|
|||||||
@@ -51,6 +51,7 @@ const fileNameLabel = document.getElementById('asset-file-name');
|
|||||||
const assetInspector = document.getElementById('asset-inspector');
|
const assetInspector = document.getElementById('asset-inspector');
|
||||||
const selectedAssetName = document.getElementById('selected-asset-name');
|
const selectedAssetName = document.getElementById('selected-asset-name');
|
||||||
const selectedAssetMeta = document.getElementById('selected-asset-meta');
|
const selectedAssetMeta = document.getElementById('selected-asset-meta');
|
||||||
|
const selectedAssetResolution = document.getElementById('selected-asset-resolution');
|
||||||
const selectedAssetIdLabel = document.getElementById('selected-asset-id');
|
const selectedAssetIdLabel = document.getElementById('selected-asset-id');
|
||||||
const selectedAssetBadges = document.getElementById('selected-asset-badges');
|
const selectedAssetBadges = document.getElementById('selected-asset-badges');
|
||||||
const selectedVisibilityBtn = document.getElementById('selected-asset-visibility');
|
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';
|
selectedAssetName.textContent = asset ? (asset.name || `Asset ${asset.id.slice(0, 6)}`) : 'Choose an asset';
|
||||||
}
|
}
|
||||||
if (selectedAssetMeta) {
|
if (selectedAssetMeta) {
|
||||||
const baseMeta = asset ? `${Math.round(asset.width)}x${Math.round(asset.height)}` : null;
|
|
||||||
selectedAssetMeta.textContent = asset
|
selectedAssetMeta.textContent = asset
|
||||||
? `${baseMeta}`
|
? getDisplayMediaType(asset)
|
||||||
: 'Pick an asset in the list to adjust its placement and playback.';
|
: '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 (selectedAssetIdLabel) {
|
||||||
if (asset) {
|
if (asset) {
|
||||||
selectedAssetIdLabel.textContent = `ID: ${asset.id}`;
|
selectedAssetIdLabel.textContent = `ID: ${asset.id}`;
|
||||||
|
|||||||
@@ -52,19 +52,12 @@
|
|||||||
<div class="selected-asset-main">
|
<div class="selected-asset-main">
|
||||||
<div class="title-row">
|
<div class="title-row">
|
||||||
<strong id="selected-asset-name">Choose an asset</strong>
|
<strong id="selected-asset-name">Choose an asset</strong>
|
||||||
|
<span id="selected-asset-resolution" class="asset-resolution subtle-text hidden"></span>
|
||||||
</div>
|
</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" 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>
|
<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 class="badge-row asset-meta-badges" id="selected-asset-badges"></div>
|
||||||
</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>
|
||||||
<div id="asset-controls-placeholder" class="asset-controls-placeholder">
|
<div id="asset-controls-placeholder" class="asset-controls-placeholder">
|
||||||
<div id="asset-controls" class="hidden asset-settings">
|
<div id="asset-controls" class="hidden asset-settings">
|
||||||
@@ -72,34 +65,34 @@
|
|||||||
<div class="section-header">
|
<div class="section-header">
|
||||||
<h5>Layout & order</h5>
|
<h5>Layout & order</h5>
|
||||||
</div>
|
</div>
|
||||||
<div class="control-grid condensed three-col">
|
<div class="property-list">
|
||||||
<label>
|
<div class="property-row">
|
||||||
Width
|
<span class="property-label">Width</span>
|
||||||
<input id="asset-width" class="number-input" type="number" min="10" step="5" />
|
<input id="asset-width" class="number-input property-control" type="number" min="10" step="5" />
|
||||||
</label>
|
</div>
|
||||||
<label>
|
<div class="property-row">
|
||||||
Height
|
<span class="property-label">Height</span>
|
||||||
<input id="asset-height" class="number-input" type="number" min="10" step="5" />
|
<input id="asset-height" class="number-input property-control" type="number" min="10" step="5" />
|
||||||
</label>
|
</div>
|
||||||
<label>
|
<div class="property-row">
|
||||||
Maintain AR
|
<span class="property-label">Maintain AR</span>
|
||||||
<label class="checkbox-inline toggle">
|
<label class="checkbox-inline toggle inline-toggle property-control">
|
||||||
<input id="maintain-aspect" type="checkbox" checked />
|
<input id="maintain-aspect" type="checkbox" checked />
|
||||||
<span class="toggle-track" aria-hidden="true">
|
<span class="toggle-track" aria-hidden="true">
|
||||||
<span class="toggle-thumb"></span>
|
<span class="toggle-thumb"></span>
|
||||||
</span>
|
</span>
|
||||||
</label>
|
</label>
|
||||||
</label>
|
|
||||||
</div>
|
</div>
|
||||||
<div class="control-grid condensed">
|
<div class="property-row">
|
||||||
<label>
|
<span class="property-label">Layer</span>
|
||||||
Layer
|
<div class="property-control">
|
||||||
<div class="badge-row stacked">
|
<div class="badge-row stacked">
|
||||||
<span class="badge">Layer <strong id="asset-z-level">1</strong></span>
|
<span class="badge">Layer <strong id="asset-z-level">1</strong></span>
|
||||||
</div>
|
</div>
|
||||||
</label>
|
|
||||||
</div>
|
</div>
|
||||||
<div class="control-actions filled compact">
|
</div>
|
||||||
|
</div>
|
||||||
|
<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="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="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>
|
<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="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 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 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>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
@@ -142,20 +141,21 @@
|
|||||||
<div class="section-header">
|
<div class="section-header">
|
||||||
<h5>Audio</h5>
|
<h5>Audio</h5>
|
||||||
</div>
|
</div>
|
||||||
<div class="control-grid condensed two-col">
|
<div class="property-list">
|
||||||
|
<div class="property-row">
|
||||||
<label class="checkbox-inline toggle inline-toggle">
|
<span class="property-label">Loop</span>
|
||||||
|
<label class="checkbox-inline toggle inline-toggle property-control">
|
||||||
<input id="asset-audio-loop" type="checkbox" />
|
<input id="asset-audio-loop" type="checkbox" />
|
||||||
<span class="toggle-track" aria-hidden="true">
|
<span class="toggle-track" aria-hidden="true">
|
||||||
<span class="toggle-thumb"></span>
|
<span class="toggle-thumb"></span>
|
||||||
</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>
|
</label>
|
||||||
</div>
|
</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="stacked-field">
|
||||||
<div class="label-row">
|
<div class="label-row">
|
||||||
<span>Playback speed</span>
|
<span>Playback speed</span>
|
||||||
@@ -164,12 +164,11 @@
|
|||||||
<input id="asset-audio-speed" class="range-input" type="range" min="25" max="400" step="5" value="100" />
|
<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 class="range-meta"><span>0.25x</span><span>4x</span></div>
|
||||||
</div>
|
</div>
|
||||||
<div class="control-grid condensed two-col">
|
<div class="property-list">
|
||||||
<label>
|
<div class="property-row">
|
||||||
Pitch (%)
|
<span class="property-label">Pitch (%)</span>
|
||||||
<input id="asset-audio-pitch" class="range-input" type="range" min="50" max="200" step="5" value="100" />
|
<input id="asset-audio-pitch" class="range-input property-control" type="range" min="50" max="200" step="5" value="100" />
|
||||||
</label>
|
</div>
|
||||||
<div></div>
|
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
@@ -195,7 +194,7 @@
|
|||||||
<canvas id="admin-canvas"></canvas>
|
<canvas id="admin-canvas"></canvas>
|
||||||
</div>
|
</div>
|
||||||
<div class="canvas-footnote">
|
<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>
|
||||||
</div>
|
</div>
|
||||||
</section>
|
</section>
|
||||||
|
|||||||
Reference in New Issue
Block a user