mirror of
https://github.com/imgfloat/server.git
synced 2026-02-05 11:49:25 +00:00
Fix wrappers
This commit is contained in:
@@ -534,7 +534,8 @@ body {
|
||||
|
||||
.asset-inspector {
|
||||
background: rgba(255, 255, 255, 0.02);
|
||||
border: 1px solid rgba(148, 163, 184, 0.15);
|
||||
border: none !important;
|
||||
padding: 0 !important;
|
||||
}
|
||||
|
||||
.asset-controls-placeholder {
|
||||
@@ -873,6 +874,64 @@ body {
|
||||
align-items: center;
|
||||
gap: 8px;
|
||||
padding-top: 6px;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.checkbox-inline.toggle {
|
||||
gap: 12px;
|
||||
cursor: pointer;
|
||||
user-select: none;
|
||||
}
|
||||
|
||||
.checkbox-inline input[type="checkbox"] {
|
||||
position: absolute;
|
||||
opacity: 0;
|
||||
width: 1px;
|
||||
height: 1px;
|
||||
}
|
||||
|
||||
.toggle-track {
|
||||
position: relative;
|
||||
width: 52px;
|
||||
height: 30px;
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
padding: 4px;
|
||||
border-radius: 999px;
|
||||
background: linear-gradient(180deg, #e2e8f0, #cbd5e1);
|
||||
border: 1px solid #cbd5e1;
|
||||
box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.18);
|
||||
transition: background 160ms ease, border-color 160ms ease, box-shadow 160ms ease;
|
||||
}
|
||||
|
||||
.toggle-thumb {
|
||||
width: 22px;
|
||||
height: 22px;
|
||||
border-radius: 999px;
|
||||
background: #ffffff;
|
||||
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.18), 0 1px 0 rgba(255, 255, 255, 0.6) inset;
|
||||
transform: translateX(0);
|
||||
transition: transform 160ms ease, box-shadow 160ms ease, background 160ms ease;
|
||||
}
|
||||
|
||||
.checkbox-inline input[type="checkbox"]:checked + .toggle-track {
|
||||
background: linear-gradient(180deg, #34c759, #28b74b);
|
||||
border-color: #28b74b;
|
||||
box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.12), 0 0 0 1px rgba(52, 199, 89, 0.35);
|
||||
}
|
||||
|
||||
.checkbox-inline input[type="checkbox"]:checked + .toggle-track .toggle-thumb {
|
||||
transform: translateX(22px);
|
||||
box-shadow: 0 2px 6px rgba(40, 183, 75, 0.35), 0 1px 0 rgba(255, 255, 255, 0.6) inset;
|
||||
}
|
||||
|
||||
.checkbox-inline input[type="checkbox"]:focus-visible + .toggle-track {
|
||||
box-shadow: 0 0 0 3px rgba(124, 58, 237, 0.35), inset 0 1px 2px rgba(0, 0, 0, 0.18);
|
||||
}
|
||||
|
||||
.toggle-label {
|
||||
color: #e2e8f0;
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
.muted {
|
||||
|
||||
@@ -1294,26 +1294,40 @@ function deleteAsset(asset) {
|
||||
|
||||
function handleFileSelection(input) {
|
||||
if (!input) return;
|
||||
const name = input.files && input.files.length ? input.files[0].name : '';
|
||||
const hasFile = input.files && input.files.length;
|
||||
const name = hasFile ? input.files[0].name : '';
|
||||
if (fileNameLabel) {
|
||||
fileNameLabel.textContent = name || 'No file chosen';
|
||||
}
|
||||
if (hasFile) {
|
||||
uploadAsset(input.files[0]);
|
||||
}
|
||||
}
|
||||
|
||||
function uploadAsset() {
|
||||
function uploadAsset(file = null) {
|
||||
const fileInput = document.getElementById('asset-file');
|
||||
if (!fileInput || !fileInput.files || fileInput.files.length === 0) {
|
||||
const selectedFile = file || (fileInput?.files && fileInput.files.length ? fileInput.files[0] : null);
|
||||
if (!selectedFile) {
|
||||
alert('Please choose an image, GIF, video, or audio file to upload.');
|
||||
return;
|
||||
}
|
||||
const data = new FormData();
|
||||
data.append('file', fileInput.files[0]);
|
||||
data.append('file', selectedFile);
|
||||
if (fileNameLabel) {
|
||||
fileNameLabel.textContent = 'Uploading...';
|
||||
}
|
||||
fetch(`/api/channels/${broadcaster}/assets`, {
|
||||
method: 'POST',
|
||||
body: data
|
||||
}).then(() => {
|
||||
fileInput.value = '';
|
||||
handleFileSelection(fileInput);
|
||||
if (fileInput) {
|
||||
fileInput.value = '';
|
||||
handleFileSelection(fileInput);
|
||||
}
|
||||
}).catch(() => {
|
||||
if (fileNameLabel) {
|
||||
fileNameLabel.textContent = 'Upload failed';
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
|
||||
Reference in New Issue
Block a user