feat(admin): improve uploads and dashboard UX

2026-03-23 16:07:11 +01:00
parent 45bca018b5
commit ef9763692d
22 changed files with 2531 additions and 212 deletions
--- a/src/static/admin/css/mostovik-admin-upload.css
+++ b/src/static/admin/css/mostovik-admin-upload.css
@@ -0,0 +1,151 @@
+.mx-upload-page {
+  max-width: 980px;
+}
+
+.mx-upload-shell {
+  display: grid;
+  gap: 1rem;
+}
+
+.mx-upload-intro {
+  padding: 1.15rem 1.25rem;
+  border: 1px solid var(--mx-border);
+  border-radius: 16px;
+  background:
+    linear-gradient(135deg, rgba(8, 24, 30, 0.96), rgba(5, 18, 24, 0.9)),
+    radial-gradient(circle at top right, rgba(73, 208, 200, 0.12), transparent 32%);
+  box-shadow: var(--mx-shadow);
+}
+
+.mx-upload-title {
+  margin: 0;
+  color: #f5fbff;
+  font-size: 1.35rem;
+  font-weight: 700;
+  letter-spacing: 0.01em;
+}
+
+.mx-upload-description {
+  margin: 0.55rem 0 0;
+  max-width: 64ch;
+  color: var(--mx-text-muted);
+  line-height: 1.55;
+}
+
+.mx-upload-form {
+  display: grid;
+  gap: 0.9rem;
+}
+
+.mx-upload-card {
+  margin: 0;
+  padding: 1.25rem;
+  border-radius: 16px;
+}
+
+.mx-upload-grid {
+  display: grid;
+  gap: 1rem;
+}
+
+.mx-upload-field {
+  display: grid;
+  gap: 0.45rem;
+}
+
+.mx-upload-label {
+  margin: 0;
+  color: #d8e7ff;
+  font-size: 0.95rem;
+  font-weight: 600;
+}
+
+.mx-upload-input,
+.mx-upload-select {
+  width: min(100%, 520px);
+  padding: 0.7rem 0.9rem;
+}
+
+.mx-upload-help {
+  margin: 0;
+  max-width: 72ch;
+  color: var(--mx-text-dim) !important;
+  line-height: 1.45;
+}
+
+.mx-upload-file {
+  width: min(100%, 720px);
+  padding: 0.35rem;
+  cursor: pointer;
+}
+
+.mx-upload-file::file-selector-button {
+  margin-right: 0.8rem;
+  padding: 0.82rem 1rem;
+  border: 1px solid rgba(98, 119, 211, 0.48);
+  border-radius: 10px;
+  background: linear-gradient(135deg, rgba(51, 179, 168, 0.9), rgba(65, 112, 196, 0.82));
+  color: #ffffff;
+  font-weight: 700;
+  cursor: pointer;
+}
+
+.mx-upload-file::-webkit-file-upload-button {
+  margin-right: 0.8rem;
+  padding: 0.82rem 1rem;
+  border: 1px solid rgba(98, 119, 211, 0.48);
+  border-radius: 10px;
+  background: linear-gradient(135deg, rgba(51, 179, 168, 0.9), rgba(65, 112, 196, 0.82));
+  color: #ffffff;
+  font-weight: 700;
+  cursor: pointer;
+}
+
+.mx-upload-actions {
+  display: flex;
+  align-items: center;
+  gap: 0.8rem;
+  margin: 0;
+  padding: 1rem 1.15rem;
+  border: 1px solid var(--mx-border);
+  border-radius: 14px;
+  background: rgba(5, 18, 24, 0.84);
+  box-shadow: var(--mx-shadow);
+}
+
+.mx-upload-cancel {
+  color: var(--mx-azure);
+  font-weight: 600;
+}
+
+.mx-upload-cancel:hover {
+  color: #88d9ff;
+}
+
+@media (max-width: 900px) {
+  .mx-upload-file::file-selector-button,
+  .mx-upload-file::-webkit-file-upload-button {
+    width: 100%;
+    margin-right: 0;
+    margin-bottom: 0.65rem;
+  }
+}
+
+@media (max-width: 640px) {
+  .mx-upload-card,
+  .mx-upload-intro,
+  .mx-upload-actions {
+    padding: 1rem;
+  }
+
+  .mx-upload-input,
+  .mx-upload-select,
+  .mx-upload-file {
+    width: 100%;
+  }
+
+  .mx-upload-actions {
+    flex-direction: column;
+    align-items: stretch;
+  }
+}