ab/web-petting
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Reworked admin style
Build and Publish / Build and Publish Docker Image (push) Successful in 1m42s
Details

Browse Source
This commit is contained in:
Aleksandr Bogomiakov
2026-08-09 03:19:47 +01:00
parent cec96cab1e
commit 79c287eaa0
18 changed files with 985 additions and 749 deletions
Download Patch File Download Diff File Expand all files Collapse all files
templates/admin/media_upload.html
+17 -24
View File
@@ -5,14 +5,18 @@
{% block content %}
<div class="page-head">
<h1>{{ t.media_upload_title }}</h1>
<h1>{{ t.media_title }}</h1>
</div>
<div class="form-card">
<div style="margin-bottom:1rem;font-size:0.9rem;color:#666;">
<div><strong>{{ t.schedule_client }}:</strong> {{ client_name }}</div>
<div><strong>{{ t.schedule_date }}:</strong> {{ visit_label }}</div>
</div>
<section class="admin-section">
<header class="admin-section-head">
<span class="admin-section-icon" aria-hidden="true">📤</span>
<div>
<h2>{{ t.media_upload_title }}</h2>
<p>{{ client_name }} · {{ visit_label }}</p>
</div>
</header>
<div class="admin-section-body">
<form id="uploadForm" action="/admin/media/{{ visit_id }}/upload/submit" enctype="multipart/form-data">
<div class="field">
@@ -20,7 +24,7 @@
<div class="control">
<input class="input" type="file" id="uploadFiles" name="files" multiple accept="image/*,video/*" required>
</div>
<p id="fileCount" style="font-size:0.8rem;color:#888;margin-top:0.3rem;"></p>
<p id="fileCount" class="field-help"></p>
<div id="uploadQueue" class="upload-queue"></div>
</div>
@@ -32,13 +36,13 @@
</div>
<!-- Progress -->
<div id="uploadProgress" style="display:none;margin-bottom:1rem;">
<div style="display:flex;justify-content:space-between;font-size:0.82rem;color:#555;margin-bottom:0.3rem;">
<div id="uploadProgress" class="upload-progress">
<div class="upload-progress-head">
<span id="uploadStatusText">{{ t.media_upload }}...</span>
<span id="uploadPercent">0%</span>
</div>
<div style="background:#e8e8e8;border-radius:99px;height:8px;overflow:hidden;">
<div id="uploadBar" style="height:100%;width:0%;background:linear-gradient(90deg,#6c63ff,#b06cff);border-radius:99px;transition:width 0.2s;"></div>
<div class="upload-progress-track">
<div id="uploadBar" class="upload-progress-bar"></div>
</div>
</div>
@@ -159,18 +163,7 @@
});
})();
</script>
</div>
</div>
</section>
<style>
.upload-queue { display:flex; flex-direction:column; gap:.4rem; margin-top:.65rem; }
.upload-queue:empty { display:none; }
.upload-queue-item { display:grid; grid-template-columns:34px minmax(0,1fr); gap:.55rem; align-items:center; padding:.45rem .55rem; background:#f7f6ff; border-radius:8px; }
.upload-queue-icon { width:34px; height:34px; display:flex; align-items:center; justify-content:center; border-radius:7px; background:#ebe8ff; font-size:1.05rem; }
.upload-queue-name { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; font-size:.78rem; color:#494467; }
.upload-queue-state { font-size:.68rem; color:#8a84a5; }
.upload-queue-track { height:3px; overflow:hidden; border-radius:99px; background:#dedbea; margin-top:.25rem; }
.upload-queue-bar { height:100%; width:0; background:#7567e8; transition:width .2s; }
#uploadBar.is-processing, .upload-queue-bar.is-processing { width:35% !important; animation:upload-processing 1.15s ease-in-out infinite; }
@keyframes upload-processing { from { transform:translateX(-110%); } to { transform:translateX(300%); } }
</style>
{% endblock %}