mirror of
https://github.com/ArchiveBox/ArchiveBox.git
synced 2026-04-06 07:47:53 +10:00
1870 lines
66 KiB
HTML
1870 lines
66 KiB
HTML
{% load i18n static tz core_tags %}
|
|
{% get_current_language as LANGUAGE_CODE %}
|
|
{% get_current_language_bidi as LANGUAGE_BIDI %}
|
|
|
|
<!DOCTYPE html>
|
|
<html lang="{{ LANGUAGE_CODE|default:"en-us" }}" {% if LANGUAGE_BIDI %}dir="rtl"{% endif %}>
|
|
<head>
|
|
<title>{% block title %}Home{% endblock %} | ArchiveBox</title>
|
|
|
|
{% block blockbots %}
|
|
<meta name="robots" content="NONE,NOARCHIVE">
|
|
{% endblock %}
|
|
|
|
<link rel="stylesheet" type="text/css" href="{% block stylesheet %}{% static "admin/css/base.css" %}{% endblock %}">
|
|
{% api_token as api_token %}
|
|
<script>
|
|
window.ARCHIVEBOX_API_KEY = "{{ api_token|escapejs }}";
|
|
</script>
|
|
{% block extrastyle %}
|
|
<style>
|
|
#upgrade-banner {
|
|
position: fixed;
|
|
right: 20px;
|
|
bottom: 20px;
|
|
background-color: #f8f8f8;
|
|
color: #333333;
|
|
border: 2px solid #772948;
|
|
padding: 10px 20px;
|
|
z-index: 1000;
|
|
text-align: center;
|
|
}
|
|
#dismiss-btn {
|
|
background: #aa1e55;
|
|
color: white;
|
|
cursor: pointer;
|
|
}
|
|
|
|
/* ============================================
|
|
Modern card-based admin UI (shadcn-inspired)
|
|
============================================ */
|
|
|
|
/* Base font improvements */
|
|
body, html {
|
|
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
|
|
-webkit-font-smoothing: antialiased;
|
|
-moz-osx-font-smoothing: grayscale;
|
|
font-size: 15px;
|
|
line-height: 1.6;
|
|
color: #0f172a;
|
|
background: #f8fafc;
|
|
}
|
|
|
|
#container {
|
|
background: #f8fafc;
|
|
}
|
|
|
|
#content {
|
|
padding: 24px;
|
|
}
|
|
|
|
/* Main form container - flexbox grid */
|
|
body:not(.change-list) #content-main form > div,
|
|
body:not(.change-list) #content form > div {
|
|
display: flex;
|
|
flex-wrap: wrap;
|
|
gap: 20px;
|
|
align-items: stretch;
|
|
}
|
|
|
|
/* Each fieldset becomes a card */
|
|
#content-main form fieldset,
|
|
#content form fieldset,
|
|
#content-main form .module:not(.inline-group),
|
|
#content form .module:not(.inline-group) {
|
|
background: #fff !important;
|
|
border: 1px solid #e2e8f0 !important;
|
|
border-top: 1px solid #e2e8f0 !important;
|
|
border-left: 1px solid #e2e8f0 !important;
|
|
border-right: 1px solid #e2e8f0 !important;
|
|
border-bottom: 1px solid #e2e8f0 !important;
|
|
border-radius: 12px !important;
|
|
padding: 0 !important;
|
|
margin: 0 !important;
|
|
box-shadow: 0 1px 3px rgba(0,0,0,0.04), 0 1px 2px rgba(0,0,0,0.06);
|
|
flex: 1 1 340px;
|
|
min-width: 320px;
|
|
max-width: calc(33.33% - 14px);
|
|
box-sizing: border-box;
|
|
display: flex;
|
|
flex-direction: column;
|
|
transition: box-shadow 0.2s ease, border-color 0.2s ease;
|
|
overflow: hidden;
|
|
}
|
|
|
|
/* Wide fieldsets MUST override card max-width - placed after card rules for specificity */
|
|
#content-main form fieldset.wide,
|
|
#content form fieldset.wide,
|
|
#content-main form fieldset:has(.field-archiveresults_list),
|
|
#content form fieldset:has(.field-archiveresults_list),
|
|
#content-main form fieldset:has(.field-snapshots),
|
|
#content form fieldset:has(.field-snapshots) {
|
|
flex: 1 1 100% !important;
|
|
max-width: 100% !important;
|
|
min-width: 100% !important;
|
|
width: 100% !important;
|
|
flex-basis: 100% !important;
|
|
}
|
|
|
|
/* Inline groups should NOT have card constraints */
|
|
#content-main form .inline-group,
|
|
#content form .inline-group,
|
|
.inline-group fieldset,
|
|
.inline-group .module {
|
|
flex: 1 1 100% !important;
|
|
max-width: 100% !important;
|
|
min-width: 100% !important;
|
|
width: 100% !important;
|
|
}
|
|
|
|
#content-main form fieldset:hover,
|
|
#content form fieldset:hover {
|
|
box-shadow: 0 4px 6px rgba(0,0,0,0.05), 0 2px 4px rgba(0,0,0,0.06);
|
|
border-color: #cbd5e1;
|
|
}
|
|
|
|
/* Archive results list content should take full width */
|
|
.field-archiveresults_list,
|
|
.field-archiveresults_list .readonly,
|
|
.field-snapshots,
|
|
.field-snapshots .readonly {
|
|
width: 100% !important;
|
|
max-width: 100% !important;
|
|
background: transparent !important;
|
|
border: none !important;
|
|
padding: 0 !important;
|
|
}
|
|
|
|
/* Card headers - no borders, just background */
|
|
#content-main form fieldset h2,
|
|
#content form fieldset h2,
|
|
#content-main form .module h2,
|
|
#content form .module h2 {
|
|
margin: 0 !important;
|
|
padding: 8px 16px !important;
|
|
background: #f1f5f9 !important;
|
|
color: #334155 !important;
|
|
font-size: 12px !important;
|
|
font-weight: 600 !important;
|
|
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif !important;
|
|
border: none !important;
|
|
border-top: none !important;
|
|
border-left: none !important;
|
|
border-right: none !important;
|
|
border-bottom: none !important;
|
|
border-radius: 0 !important;
|
|
text-transform: uppercase;
|
|
letter-spacing: 0.5px;
|
|
flex-shrink: 0;
|
|
-webkit-font-smoothing: antialiased;
|
|
box-shadow: none !important;
|
|
outline: none !important;
|
|
}
|
|
|
|
/* Collapse toggle styling */
|
|
#content-main form fieldset h2 a.collapse-toggle,
|
|
#content form fieldset h2 a.collapse-toggle {
|
|
color: #64748b;
|
|
}
|
|
|
|
/* Card content area */
|
|
#content-main form fieldset > div,
|
|
#content form fieldset > div {
|
|
padding: 20px;
|
|
flex: 1;
|
|
overflow-x: hidden;
|
|
overflow-y: visible;
|
|
min-width: 0;
|
|
}
|
|
|
|
#content-main form fieldset > .description,
|
|
#content form fieldset > .description {
|
|
flex: 0 0 auto;
|
|
padding: 6px 16px 0;
|
|
margin: 0;
|
|
}
|
|
|
|
/* Form rows inside cards */
|
|
#content-main form fieldset .form-row,
|
|
#content form fieldset .form-row {
|
|
padding: 8px 0;
|
|
border-bottom: 1px solid #f1f5f9;
|
|
min-width: 0;
|
|
min-height: auto;
|
|
}
|
|
|
|
#content-main form fieldset .form-row:first-child,
|
|
#content form fieldset .form-row:first-child {
|
|
padding-top: 0;
|
|
}
|
|
|
|
#content-main form fieldset .form-row:last-child,
|
|
#content form fieldset .form-row:last-child {
|
|
border-bottom: none;
|
|
padding-bottom: 0;
|
|
}
|
|
|
|
/* Remove borders from nested fieldsets and flex-containers inside cards */
|
|
#content-main form fieldset fieldset,
|
|
#content form fieldset fieldset,
|
|
#content-main form fieldset .flex-container,
|
|
#content form fieldset .flex-container,
|
|
#content-main form .module fieldset,
|
|
#content form .module fieldset {
|
|
background: transparent !important;
|
|
border: none !important;
|
|
border-radius: 0 !important;
|
|
box-shadow: none !important;
|
|
padding: 0 !important;
|
|
margin: 0 !important;
|
|
min-width: 0 !important;
|
|
max-width: 94% !important;
|
|
flex: none !important;
|
|
display: block !important;
|
|
}
|
|
|
|
/* Nested fieldset headers should be invisible */
|
|
#content-main form fieldset fieldset h2,
|
|
#content form fieldset fieldset h2,
|
|
#content-main form fieldset .flex-container legend,
|
|
#content form fieldset .flex-container legend {
|
|
background: transparent !important;
|
|
padding: 0 0 4px 0 !important;
|
|
font-size: 13px !important;
|
|
color: #374151 !important;
|
|
text-transform: none !important;
|
|
letter-spacing: normal !important;
|
|
}
|
|
|
|
/* Ensure form elements inside cards don't overflow */
|
|
#content-main form fieldset input,
|
|
#content-main form fieldset select,
|
|
#content-main form fieldset textarea,
|
|
#content form fieldset input,
|
|
#content form fieldset select,
|
|
#content form fieldset textarea {
|
|
max-width: 100%;
|
|
box-sizing: border-box;
|
|
}
|
|
|
|
/* Related widget wrapper should fit within card */
|
|
#content-main form fieldset .related-widget-wrapper,
|
|
#content form fieldset .related-widget-wrapper {
|
|
max-width: 100%;
|
|
}
|
|
|
|
#content-main form fieldset .related-widget-wrapper select,
|
|
#content form fieldset .related-widget-wrapper select {
|
|
min-width: 0;
|
|
flex: 1;
|
|
}
|
|
|
|
/* Labels inside cards */
|
|
#content-main form fieldset .form-row > label,
|
|
#content form fieldset .form-row > label,
|
|
#content-main form fieldset .form-row > .flex-container > label,
|
|
#content form fieldset .form-row > .flex-container > label,
|
|
#content-main form label,
|
|
#content form label,
|
|
.aligned label,
|
|
legend {
|
|
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
|
|
font-weight: 500;
|
|
color: #374151;
|
|
display: block;
|
|
margin-bottom: 8px;
|
|
float: none !important;
|
|
width: auto !important;
|
|
padding: 0 !important;
|
|
font-size: 13px;
|
|
letter-spacing: -0.01em;
|
|
-webkit-font-smoothing: antialiased;
|
|
-moz-osx-font-smoothing: grayscale;
|
|
}
|
|
|
|
/* Snapshot admin actions: hide label/colon and remove card border */
|
|
#content-main form .field-admin_actions > label,
|
|
#content form .field-admin_actions > label,
|
|
#content-main form .field-admin_actions label,
|
|
#content form .field-admin_actions label,
|
|
#content-main form .field-snapshot_summary > label,
|
|
#content form .field-snapshot_summary > label,
|
|
#content-main form .field-snapshot_summary label,
|
|
#content form .field-snapshot_summary label,
|
|
#content-main form .field-url_favicon > label,
|
|
#content form .field-url_favicon > label,
|
|
#content-main form .field-url_favicon label,
|
|
#content form .field-url_favicon label,
|
|
#content-main form .field-archiveresults_list > label,
|
|
#content form .field-archiveresults_list > label,
|
|
#content-main form .field-archiveresults_list label,
|
|
#content form .field-archiveresults_list label {
|
|
display: none !important;
|
|
}
|
|
|
|
#content-main form .field-url_favicon .readonly,
|
|
#content form .field-url_favicon .readonly {
|
|
background: transparent;
|
|
border: none;
|
|
padding: 0;
|
|
border-radius: 0;
|
|
font-family: inherit;
|
|
font-size: inherit;
|
|
line-height: 1;
|
|
}
|
|
|
|
#content-main form .form-row.field-url_favicon.field-url .form-multiline,
|
|
#content form .form-row.field-url_favicon.field-url .form-multiline {
|
|
display: flex !important;
|
|
align-items: flex-end;
|
|
gap: 12px;
|
|
flex-wrap: nowrap;
|
|
width: 100%;
|
|
}
|
|
|
|
#content-main form .form-row.field-url_favicon.field-url .form-multiline > div:first-child,
|
|
#content form .form-row.field-url_favicon.field-url .form-multiline > div:first-child {
|
|
flex: 0 0 32px;
|
|
width: 32px;
|
|
margin: 0 !important;
|
|
}
|
|
|
|
#content-main form .form-row.field-url_favicon.field-url .form-multiline > div:last-child,
|
|
#content form .form-row.field-url_favicon.field-url .form-multiline > div:last-child {
|
|
flex: 1 1 auto;
|
|
min-width: 0;
|
|
margin: 0 !important;
|
|
}
|
|
|
|
#content-main form .form-row.field-url_favicon.field-url .field-url_favicon,
|
|
#content form .form-row.field-url_favicon.field-url .field-url_favicon {
|
|
width: 32px !important;
|
|
max-width: 32px !important;
|
|
}
|
|
|
|
#content-main form .form-row.field-url_favicon.field-url .field-url,
|
|
#content form .form-row.field-url_favicon.field-url .field-url {
|
|
width: 100% !important;
|
|
max-width: none !important;
|
|
}
|
|
|
|
#content-main form fieldset.actions-card,
|
|
#content form fieldset.actions-card {
|
|
border: none !important;
|
|
box-shadow: none !important;
|
|
background: transparent !important;
|
|
}
|
|
|
|
/* Readonly fields styling */
|
|
#content-main form fieldset .readonly,
|
|
#content form fieldset .readonly {
|
|
background: #f8fafc;
|
|
padding: 12px 14px;
|
|
border-radius: 8px;
|
|
font-family: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Monaco, Consolas, monospace;
|
|
font-size: 13px;
|
|
word-break: break-word;
|
|
line-height: 1.6;
|
|
border: 1px solid #e2e8f0;
|
|
color: #475569;
|
|
}
|
|
|
|
/* Long content in readonly */
|
|
#content-main form fieldset .readonly pre,
|
|
#content form fieldset .readonly pre {
|
|
margin: 0;
|
|
white-space: pre-wrap;
|
|
word-break: break-word;
|
|
font-family: inherit;
|
|
}
|
|
|
|
/* Input styling */
|
|
#content-main form input[type="text"],
|
|
#content-main form input[type="number"],
|
|
#content-main form input[type="url"],
|
|
#content-main form input[type="email"],
|
|
#content-main form input[type="password"],
|
|
#content form input[type="text"],
|
|
#content form input[type="number"],
|
|
#content form input[type="url"],
|
|
#content form input[type="email"],
|
|
#content form input[type="password"] {
|
|
width: 100%;
|
|
padding: 10px 14px;
|
|
border: 1px solid #d1d5db;
|
|
border-radius: 8px;
|
|
font-size: 14px;
|
|
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
|
|
box-sizing: border-box;
|
|
background: #fff;
|
|
color: #1e293b;
|
|
transition: border-color 0.15s ease, box-shadow 0.15s ease;
|
|
-webkit-font-smoothing: antialiased;
|
|
}
|
|
|
|
#content-main form select,
|
|
#content form select {
|
|
width: 100%;
|
|
border: 1px solid #d1d5db;
|
|
border-radius: 8px;
|
|
font-size: 14px;
|
|
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
|
|
box-sizing: border-box;
|
|
background: #fff;
|
|
color: #1e293b;
|
|
transition: border-color 0.15s ease, box-shadow 0.15s ease;
|
|
-webkit-font-smoothing: antialiased;
|
|
}
|
|
|
|
#content-main form input::placeholder,
|
|
#content form input::placeholder {
|
|
color: #94a3b8;
|
|
}
|
|
|
|
/* Focus states */
|
|
#content-main form input:focus,
|
|
#content-main form select:focus,
|
|
#content-main form textarea:focus,
|
|
#content form input:focus,
|
|
#content form select:focus,
|
|
#content form textarea:focus {
|
|
border-color: #3b82f6;
|
|
outline: none;
|
|
box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.15);
|
|
}
|
|
|
|
/* Textarea styling */
|
|
#content-main form textarea,
|
|
#content form textarea {
|
|
width: 100%;
|
|
box-sizing: border-box;
|
|
border: 1px solid #d1d5db;
|
|
border-radius: 8px;
|
|
padding: 12px 14px;
|
|
font-size: 14px;
|
|
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
|
|
line-height: 1.6;
|
|
resize: vertical;
|
|
min-height: 80px;
|
|
color: #1e293b;
|
|
transition: border-color 0.15s ease, box-shadow 0.15s ease;
|
|
-webkit-font-smoothing: antialiased;
|
|
}
|
|
|
|
/* Fix vTextField width */
|
|
.vTextField {
|
|
width: 100% !important;
|
|
}
|
|
|
|
/* ============================================
|
|
Button styling (shadcn-inspired)
|
|
============================================ */
|
|
|
|
/* Base button styles */
|
|
input[type="submit"],
|
|
button,
|
|
.button,
|
|
.btn,
|
|
a.button,
|
|
.submit-row input,
|
|
.submit-row a.button {
|
|
display: inline-flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
gap: 8px;
|
|
padding: 10px 18px;
|
|
font-size: 14px;
|
|
font-weight: 500;
|
|
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
|
|
line-height: 1.4;
|
|
border-radius: 8px;
|
|
border: 1px solid transparent;
|
|
cursor: pointer;
|
|
transition: all 0.15s ease;
|
|
text-decoration: none;
|
|
white-space: nowrap;
|
|
-webkit-font-smoothing: antialiased;
|
|
}
|
|
|
|
/* Primary button (default) */
|
|
input[type="submit"],
|
|
button[type="submit"],
|
|
.button.default,
|
|
.submit-row input[type="submit"] {
|
|
background: #0f172a;
|
|
color: #fff;
|
|
border-color: #0f172a;
|
|
}
|
|
|
|
input[type="submit"]:hover,
|
|
button[type="submit"]:hover,
|
|
.button.default:hover,
|
|
.submit-row input[type="submit"]:hover {
|
|
background: #1e293b;
|
|
border-color: #1e293b;
|
|
}
|
|
|
|
input[type="submit"]:active,
|
|
button[type="submit"]:active {
|
|
background: #334155;
|
|
transform: translateY(1px);
|
|
}
|
|
|
|
/* Secondary/outline buttons */
|
|
button:not([type="submit"]),
|
|
.button:not(.default),
|
|
a.button {
|
|
background: #fff;
|
|
color: #374151;
|
|
border-color: #d1d5db;
|
|
}
|
|
|
|
button:not([type="submit"]):hover,
|
|
.button:not(.default):hover,
|
|
a.button:hover {
|
|
background: #f9fafb;
|
|
border-color: #9ca3af;
|
|
color: #1f2937;
|
|
}
|
|
|
|
/* Danger button */
|
|
.deletelink,
|
|
a.deletelink,
|
|
button.deletelink,
|
|
input[name="delete"],
|
|
.button.delete {
|
|
background: #fff;
|
|
color: #dc2626;
|
|
border-color: #fecaca;
|
|
}
|
|
|
|
.deletelink:hover,
|
|
a.deletelink:hover,
|
|
button.deletelink:hover,
|
|
input[name="delete"]:hover,
|
|
.button.delete:hover {
|
|
background: #fef2f2;
|
|
border-color: #f87171;
|
|
color: #b91c1c;
|
|
}
|
|
|
|
/* Small buttons */
|
|
.btn-sm,
|
|
.object-tools a,
|
|
.datetimeshortcuts a {
|
|
padding: 6px 12px;
|
|
font-size: 13px;
|
|
border-radius: 6px;
|
|
}
|
|
|
|
/* Object tools (top action buttons) */
|
|
.object-tools {
|
|
margin-bottom: 20px;
|
|
}
|
|
|
|
.object-tools li {
|
|
margin-left: 10px;
|
|
}
|
|
|
|
.object-tools a {
|
|
background: #fff;
|
|
color: #374151;
|
|
border: 1px solid #d1d5db;
|
|
text-decoration: none;
|
|
display: inline-flex;
|
|
align-items: center;
|
|
}
|
|
|
|
.object-tools a:hover {
|
|
background: #f9fafb;
|
|
border-color: #9ca3af;
|
|
}
|
|
|
|
/* Submit row styling */
|
|
.submit-row {
|
|
margin-top: 24px;
|
|
padding: 20px;
|
|
background: #fff;
|
|
border-radius: 12px;
|
|
border: 1px solid #e2e8f0;
|
|
box-shadow: 0 1px 3px rgba(0,0,0,0.04);
|
|
clear: both;
|
|
flex: 1 1 100%;
|
|
display: flex;
|
|
gap: 12px;
|
|
flex-wrap: wrap;
|
|
align-items: center;
|
|
}
|
|
|
|
.submit-row p {
|
|
margin: 0;
|
|
}
|
|
|
|
.submit-row .deletelink-box {
|
|
margin-left: auto;
|
|
}
|
|
|
|
/* Responsive: 2 columns on medium screens */
|
|
@media (max-width: 1400px) {
|
|
#content-main form fieldset,
|
|
#content form fieldset {
|
|
max-width: calc(50% - 10px);
|
|
flex: 1 1 320px;
|
|
}
|
|
}
|
|
|
|
/* Responsive: stack on smaller screens */
|
|
@media (max-width: 900px) {
|
|
#content-main form fieldset,
|
|
#content form fieldset {
|
|
flex: 1 1 100%;
|
|
max-width: 100%;
|
|
min-width: auto;
|
|
}
|
|
|
|
#content {
|
|
padding: 16px;
|
|
}
|
|
}
|
|
|
|
/* Module content padding */
|
|
#content-main form .module > div,
|
|
#content form .module > div {
|
|
padding: 12px;
|
|
}
|
|
|
|
/* Fix for JSON/config editor */
|
|
.field-config .readonly,
|
|
.field-config textarea {
|
|
width: 100%;
|
|
min-height: 120px;
|
|
max-height: none;
|
|
}
|
|
|
|
/* Related widget styling */
|
|
.related-widget-wrapper {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 8px;
|
|
flex-wrap: wrap;
|
|
}
|
|
|
|
.related-widget-wrapper select {
|
|
flex: 1;
|
|
min-width: 150px;
|
|
}
|
|
|
|
.related-widget-wrapper a {
|
|
flex-shrink: 0;
|
|
padding: 8px;
|
|
border-radius: 6px;
|
|
color: #64748b;
|
|
transition: color 0.15s ease, background 0.15s ease;
|
|
}
|
|
|
|
.related-widget-wrapper a:hover {
|
|
color: #1e293b;
|
|
background: #f1f5f9;
|
|
}
|
|
|
|
/* Help text styling */
|
|
.help {
|
|
font-size: 13px;
|
|
color: #64748b;
|
|
margin-top: 6px;
|
|
line-height: 1.5;
|
|
}
|
|
|
|
/* Error styling */
|
|
.errorlist {
|
|
color: #dc2626;
|
|
font-size: 13px;
|
|
margin: 6px 0;
|
|
padding: 0;
|
|
list-style: none;
|
|
}
|
|
|
|
.errorlist li {
|
|
background: #fef2f2;
|
|
padding: 8px 12px;
|
|
border-radius: 6px;
|
|
border: 1px solid #fecaca;
|
|
}
|
|
|
|
/* Inline related objects - force full width */
|
|
.inline-group,
|
|
#archiveresult_set-group,
|
|
#content-main form .inline-group,
|
|
#content-main form > div > .inline-group,
|
|
#content form > div > .inline-group,
|
|
.change-form .inline-group,
|
|
div.inline-group {
|
|
flex: 1 1 100% !important;
|
|
max-width: 100% !important;
|
|
min-width: 100% !important;
|
|
width: 100% !important;
|
|
margin-top: 20px;
|
|
flex-basis: 100% !important;
|
|
}
|
|
|
|
/* Ensure inline-group breaks out of card grid */
|
|
#content-main form > div,
|
|
#content form > div {
|
|
flex-wrap: wrap;
|
|
}
|
|
|
|
/* TabularInline table full width */
|
|
.inline-group .tabular,
|
|
.inline-group table {
|
|
width: 100% !important;
|
|
}
|
|
|
|
.inline-related {
|
|
margin: 12px 0;
|
|
padding: 16px;
|
|
background: #fff;
|
|
border-radius: 10px;
|
|
border: 1px solid #e2e8f0;
|
|
}
|
|
|
|
.inline-related h3 {
|
|
margin: -16px -16px 16px -16px;
|
|
padding: 12px 16px;
|
|
background: #f8fafc;
|
|
border-radius: 9px 9px 0 0;
|
|
border-bottom: 1px solid #e2e8f0;
|
|
font-size: 13px;
|
|
font-weight: 600;
|
|
color: #374151;
|
|
}
|
|
|
|
/* Tabular inline styling */
|
|
.tabular {
|
|
border-radius: 8px;
|
|
overflow: hidden;
|
|
border: 1px solid #e2e8f0;
|
|
}
|
|
|
|
.tabular td, .tabular th {
|
|
padding: 12px 14px;
|
|
font-size: 13px;
|
|
border-bottom: 1px solid #f1f5f9;
|
|
}
|
|
|
|
.tabular th {
|
|
background: #f8fafc;
|
|
font-weight: 600;
|
|
color: #374151;
|
|
text-align: left;
|
|
}
|
|
|
|
.tabular tr:last-child td {
|
|
border-bottom: none;
|
|
}
|
|
|
|
/* Delete checkbox */
|
|
.inline-deletelink {
|
|
color: #dc2626;
|
|
font-size: 13px;
|
|
}
|
|
|
|
/* Datetime widgets */
|
|
.datetimeshortcuts {
|
|
margin-left: 10px;
|
|
}
|
|
|
|
.datetimeshortcuts a {
|
|
background: #f1f5f9;
|
|
color: #475569;
|
|
border: none;
|
|
padding: 4px 10px;
|
|
}
|
|
|
|
.datetimeshortcuts a:hover {
|
|
background: #e2e8f0;
|
|
color: #1e293b;
|
|
}
|
|
|
|
/* Aligned forms - fix label positioning */
|
|
.aligned .form-row > div {
|
|
margin-left: 0 !important;
|
|
}
|
|
|
|
/* Checkbox styling */
|
|
input[type="checkbox"] {
|
|
width: 18px;
|
|
height: 18px;
|
|
border-radius: 4px;
|
|
border: 1px solid #d1d5db;
|
|
cursor: pointer;
|
|
accent-color: #3b82f6;
|
|
}
|
|
|
|
/* Links styling */
|
|
a {
|
|
color: #2563eb;
|
|
text-decoration: none;
|
|
transition: color 0.15s ease;
|
|
}
|
|
|
|
a:hover {
|
|
color: #1d4ed8;
|
|
}
|
|
|
|
/* Messages/alerts */
|
|
.messagelist {
|
|
padding: 0;
|
|
margin: 0 0 20px 0;
|
|
}
|
|
|
|
.messagelist li {
|
|
padding: 14px 18px;
|
|
border-radius: 10px;
|
|
font-size: 14px;
|
|
margin-bottom: 10px;
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 10px;
|
|
}
|
|
|
|
ul.messagelist li.success {
|
|
background: #f0fdf4 !important;
|
|
background-image: none !important;
|
|
border: 1px solid #bbf7d0;
|
|
color: #166534;
|
|
}
|
|
|
|
.messagelist li.warning {
|
|
background: #fffbeb !important;
|
|
background-image: none !important;
|
|
border: 1px solid #fde68a;
|
|
color: #92400e;
|
|
}
|
|
|
|
.messagelist li.error {
|
|
background: #fef2f2 !important;
|
|
background-image: none !important;
|
|
border: 1px solid #fecaca;
|
|
color: #991b1b;
|
|
}
|
|
|
|
/* Breadcrumbs */
|
|
.breadcrumbs {
|
|
background: transparent;
|
|
padding: 12px 24px;
|
|
font-size: 13px;
|
|
color: #64748b;
|
|
}
|
|
|
|
.breadcrumbs a {
|
|
color: #64748b;
|
|
}
|
|
|
|
.breadcrumbs a:hover {
|
|
color: #1e293b;
|
|
}
|
|
|
|
/* Action buttons in cards */
|
|
.card .btn,
|
|
.card button {
|
|
margin-top: 10px;
|
|
}
|
|
|
|
/* Select2 overrides */
|
|
.select2-container--default .select2-selection--single,
|
|
.select2-container--default .select2-selection--multiple {
|
|
border: 1px solid #d1d5db;
|
|
border-radius: 8px;
|
|
min-height: 42px;
|
|
}
|
|
|
|
.select2-container--default .select2-selection--single:focus,
|
|
.select2-container--default .select2-selection--multiple:focus {
|
|
border-color: #3b82f6;
|
|
box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.15);
|
|
}
|
|
|
|
/* ============================================
|
|
Admin List/Changelist Page Styling
|
|
============================================ */
|
|
|
|
/* Results table container */
|
|
#changelist {
|
|
background: #fff;
|
|
border-radius: 12px;
|
|
border: 1px solid #e2e8f0;
|
|
box-shadow: 0 1px 3px rgba(0,0,0,0.04);
|
|
overflow: hidden;
|
|
}
|
|
|
|
/* Table styling */
|
|
#result_list {
|
|
width: 100%;
|
|
border-collapse: collapse;
|
|
font-size: 14px;
|
|
}
|
|
|
|
#result_list thead th {
|
|
background: #f8fafc;
|
|
border-bottom: 2px solid #e2e8f0;
|
|
padding: 12px 16px;
|
|
font-weight: 600;
|
|
font-size: 13px;
|
|
color: #475569;
|
|
text-align: left;
|
|
text-transform: uppercase;
|
|
letter-spacing: 0.025em;
|
|
white-space: nowrap;
|
|
}
|
|
|
|
#result_list thead th a {
|
|
color: #475569;
|
|
text-decoration: none;
|
|
}
|
|
|
|
#result_list thead th a:hover {
|
|
color: #1e293b;
|
|
}
|
|
|
|
#result_list thead th.sorted {
|
|
background: #f1f5f9;
|
|
}
|
|
|
|
#result_list thead th .text span {
|
|
padding-right: 5px;
|
|
}
|
|
|
|
#result_list tbody tr {
|
|
border-bottom: 1px solid #f1f5f9;
|
|
transition: background-color 0.15s ease;
|
|
}
|
|
|
|
#result_list tbody tr:hover {
|
|
background-color: #f8fafc;
|
|
}
|
|
|
|
#result_list tbody tr.selected {
|
|
background-color: #eff6ff;
|
|
}
|
|
|
|
#result_list tbody td {
|
|
padding: 12px 16px;
|
|
color: #334155;
|
|
vertical-align: middle;
|
|
}
|
|
|
|
#result_list tbody td a {
|
|
color: #2563eb;
|
|
font-weight: 500;
|
|
}
|
|
|
|
#result_list tbody td a:hover {
|
|
color: #1d4ed8;
|
|
text-decoration: underline;
|
|
}
|
|
|
|
/* Checkbox column */
|
|
#result_list .action-checkbox,
|
|
#result_list th.action-checkbox-column {
|
|
width: 40px;
|
|
text-align: center;
|
|
padding: 12px 8px;
|
|
}
|
|
|
|
/* Pagination */
|
|
.paginator {
|
|
background: #f8fafc;
|
|
padding: 12px 16px;
|
|
border-top: 1px solid #e2e8f0;
|
|
font-size: 14px;
|
|
color: #64748b;
|
|
}
|
|
|
|
.paginator a {
|
|
color: #2563eb;
|
|
padding: 6px 12px;
|
|
border-radius: 6px;
|
|
margin: 0 2px;
|
|
text-decoration: none;
|
|
}
|
|
|
|
.paginator a:hover {
|
|
background: #e2e8f0;
|
|
}
|
|
|
|
/* Toolbar / search bar */
|
|
#changelist #toolbar {
|
|
padding: 12px 16px;
|
|
background: #fff;
|
|
border-bottom: 1px solid #e2e8f0;
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 12px;
|
|
}
|
|
|
|
#toolbar form,
|
|
#changelist-search {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 8px;
|
|
flex: 1 1 auto;
|
|
max-width: none;
|
|
min-width: 0;
|
|
}
|
|
body.change-list #toolbar form > div {
|
|
display: flex !important;
|
|
align-items: center;
|
|
gap: 8px;
|
|
flex-wrap: nowrap !important;
|
|
white-space: nowrap;
|
|
width: 100%;
|
|
min-width: 0;
|
|
}
|
|
body.change-list #toolbar label {
|
|
margin: 0;
|
|
display: inline-flex;
|
|
align-items: center;
|
|
}
|
|
body.change-list #toolbar input[type="submit"] {
|
|
margin: 0;
|
|
}
|
|
|
|
#searchbar {
|
|
flex: 0 1 420px;
|
|
width: 100%;
|
|
min-width: 180px;
|
|
max-width: none;
|
|
padding: 10px 14px;
|
|
border: 1px solid #d1d5db;
|
|
border-radius: 8px;
|
|
font-size: 14px;
|
|
}
|
|
|
|
#searchbar:focus {
|
|
border-color: #3b82f6;
|
|
outline: none;
|
|
box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.15);
|
|
}
|
|
|
|
/* Filter sidebar */
|
|
#changelist-filter {
|
|
background: #fff;
|
|
border: 1px solid #e2e8f0;
|
|
border-radius: 12px;
|
|
box-shadow: 0 1px 3px rgba(0,0,0,0.04);
|
|
overflow: hidden;
|
|
}
|
|
|
|
#changelist-filter h2 {
|
|
background: #f8fafc;
|
|
padding: 12px 16px;
|
|
font-size: 13px;
|
|
font-weight: 600;
|
|
color: #475569;
|
|
text-transform: uppercase;
|
|
letter-spacing: 0.025em;
|
|
margin: 0;
|
|
border-bottom: 1px solid #e2e8f0;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: space-between;
|
|
gap: 8px;
|
|
}
|
|
|
|
.filter-toggle {
|
|
border: 1px solid #e2e8f0;
|
|
background: #ffffff;
|
|
color: #64748b;
|
|
font-size: 11px;
|
|
padding: 4px 8px;
|
|
border-radius: 999px;
|
|
cursor: pointer;
|
|
text-transform: none;
|
|
letter-spacing: normal;
|
|
}
|
|
|
|
.filter-toggle:hover {
|
|
background: #f1f5f9;
|
|
color: #334155;
|
|
}
|
|
|
|
#changelist-toolbar-filter-toggle {
|
|
margin-left: auto;
|
|
flex: 0 0 auto;
|
|
}
|
|
|
|
#changelist-filter h3 {
|
|
padding: 12px 16px 8px;
|
|
font-size: 12px;
|
|
font-weight: 600;
|
|
color: #64748b;
|
|
text-transform: uppercase;
|
|
letter-spacing: 0.05em;
|
|
margin: 0;
|
|
}
|
|
|
|
#changelist-filter ul {
|
|
padding: 0 8px 12px;
|
|
margin: 0;
|
|
list-style: none;
|
|
}
|
|
|
|
#changelist-filter li {
|
|
margin: 0;
|
|
}
|
|
|
|
#changelist-filter li a {
|
|
display: block;
|
|
padding: 8px 12px;
|
|
color: #475569;
|
|
text-decoration: none;
|
|
border-radius: 6px;
|
|
font-size: 14px;
|
|
transition: background-color 0.15s ease;
|
|
}
|
|
|
|
#changelist-filter li a:hover {
|
|
background: #f1f5f9;
|
|
color: #1e293b;
|
|
}
|
|
|
|
#changelist-filter li.selected a {
|
|
background: #eff6ff;
|
|
color: #2563eb;
|
|
font-weight: 500;
|
|
}
|
|
|
|
body.filters-collapsed #changelist-filter {
|
|
display: none !important;
|
|
}
|
|
|
|
/* Actions bar */
|
|
body.change-list #changelist .actions {
|
|
padding: 12px 16px;
|
|
background: #f8fafc;
|
|
border-bottom: 0;
|
|
display: flex !important;
|
|
align-items: center;
|
|
gap: 8px;
|
|
flex-wrap: nowrap !important;
|
|
overflow-x: auto;
|
|
}
|
|
body.change-list #content-main {
|
|
clear: both;
|
|
float: none;
|
|
width: auto;
|
|
}
|
|
body.change-list #changelist {
|
|
border: 0 !important;
|
|
}
|
|
body.change-list #changelist .actions .button,
|
|
body.change-list #changelist .actions select {
|
|
display: inline-flex;
|
|
align-items: center;
|
|
box-sizing: border-box;
|
|
}
|
|
body.change-list #changelist .actions-left {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 8px;
|
|
flex-wrap: nowrap !important;
|
|
flex: 1 1 auto;
|
|
min-width: 0;
|
|
white-space: nowrap;
|
|
}
|
|
body.change-list #changelist .actions-right {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 8px;
|
|
margin-left: auto;
|
|
flex: 0 0 auto;
|
|
}
|
|
|
|
.actions label {
|
|
display: inline-flex;
|
|
align-items: center;
|
|
font-size: 14px;
|
|
color: #475569;
|
|
}
|
|
|
|
.actions select {
|
|
padding: 8px 12px;
|
|
border: 1px solid #d1d5db;
|
|
border-radius: 6px;
|
|
font-size: 14px;
|
|
background: #fff;
|
|
}
|
|
|
|
.actions .button {
|
|
padding: 8px 16px;
|
|
font-size: 14px;
|
|
}
|
|
|
|
/* Object count */
|
|
.actions .action-counter {
|
|
color: #64748b;
|
|
font-size: 14px;
|
|
}
|
|
|
|
/* Empty results */
|
|
#changelist-form .results + p,
|
|
.paginator + p {
|
|
padding: 40px;
|
|
text-align: center;
|
|
color: #64748b;
|
|
font-size: 15px;
|
|
}
|
|
|
|
/* Date hierarchy */
|
|
.xfull {
|
|
padding: 12px 16px;
|
|
background: #f8fafc;
|
|
border-bottom: 1px solid #e2e8f0;
|
|
}
|
|
|
|
.xfull a {
|
|
color: #2563eb;
|
|
margin-right: 8px;
|
|
}
|
|
|
|
/* ============================================
|
|
Tag Editor Widget Styles
|
|
============================================ */
|
|
|
|
/* Main container - acts as input field */
|
|
.tag-editor-container {
|
|
display: flex;
|
|
flex-wrap: wrap;
|
|
align-items: center;
|
|
gap: 6px;
|
|
padding: 8px 12px;
|
|
min-height: 42px;
|
|
background: #fff;
|
|
border: 1px solid #d1d5db;
|
|
border-radius: 8px;
|
|
cursor: text;
|
|
transition: border-color 0.15s ease, box-shadow 0.15s ease;
|
|
}
|
|
|
|
.tag-editor-container:focus-within {
|
|
border-color: #3b82f6;
|
|
box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.15);
|
|
}
|
|
|
|
/* Pills container */
|
|
.tag-pills {
|
|
display: flex;
|
|
flex-wrap: wrap;
|
|
gap: 6px;
|
|
align-items: center;
|
|
}
|
|
|
|
/* Individual tag pill */
|
|
.tag-pill {
|
|
display: inline-flex;
|
|
align-items: center;
|
|
gap: 4px;
|
|
padding: 4px 8px 4px 10px;
|
|
background: var(--tag-bg, #e2e8f0);
|
|
color: var(--tag-fg, #1e293b);
|
|
font-size: 13px;
|
|
font-weight: 500;
|
|
border-radius: 16px;
|
|
white-space: nowrap;
|
|
transition: all 0.15s ease;
|
|
-webkit-font-smoothing: antialiased;
|
|
border: 1px solid var(--tag-border, #cbd5e1);
|
|
}
|
|
|
|
.tag-pill:hover {
|
|
filter: brightness(0.98);
|
|
}
|
|
|
|
.tag-pill a.tag-link {
|
|
color: inherit;
|
|
text-decoration: none;
|
|
}
|
|
|
|
.tag-pill a.tag-link:hover {
|
|
text-decoration: underline;
|
|
}
|
|
|
|
/* Remove button on pills */
|
|
.tag-remove-btn {
|
|
display: inline-flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
width: 16px;
|
|
height: 16px;
|
|
padding: 0;
|
|
margin: 0;
|
|
background: rgba(15, 23, 42, 0.08);
|
|
border: 1px solid rgba(15, 23, 42, 0.12);
|
|
border-radius: 50%;
|
|
color: inherit;
|
|
font-size: 14px;
|
|
font-weight: 600;
|
|
line-height: 1;
|
|
cursor: pointer;
|
|
opacity: 0.7;
|
|
transition: all 0.15s ease;
|
|
}
|
|
|
|
.tag-remove-btn:hover {
|
|
background: rgba(15, 23, 42, 0.18);
|
|
opacity: 1;
|
|
}
|
|
|
|
/* Inline input for adding tags */
|
|
.tag-inline-input {
|
|
flex: 1;
|
|
min-width: 120px;
|
|
padding: 4px 0;
|
|
border: none;
|
|
outline: none;
|
|
font-size: 14px;
|
|
font-family: inherit;
|
|
background: transparent;
|
|
color: #1e293b;
|
|
}
|
|
|
|
.tag-inline-input::placeholder {
|
|
color: #94a3b8;
|
|
}
|
|
|
|
/* Inline editor for list view - more compact */
|
|
.tag-editor-inline {
|
|
display: inline-flex;
|
|
flex-wrap: wrap;
|
|
align-items: center;
|
|
gap: 4px;
|
|
padding: 2px 4px;
|
|
background: transparent;
|
|
border-radius: 4px;
|
|
cursor: text;
|
|
vertical-align: middle;
|
|
}
|
|
|
|
.tag-pills-inline {
|
|
display: inline-flex;
|
|
flex-wrap: wrap;
|
|
gap: 4px;
|
|
align-items: center;
|
|
}
|
|
|
|
.tag-editor-inline .tag-pill {
|
|
padding: 2px 6px 2px 8px;
|
|
font-size: 11px;
|
|
border-radius: 12px;
|
|
}
|
|
|
|
.tag-editor-inline .tag-remove-btn {
|
|
width: 14px;
|
|
height: 14px;
|
|
font-size: 12px;
|
|
}
|
|
|
|
#content .tag-editor-inline input.tag-inline-input-sm {
|
|
width: 22px;
|
|
min-width: 22px;
|
|
max-width: 140px;
|
|
height: 22px;
|
|
padding: 0 6px;
|
|
border: 1px solid #e2e8f0;
|
|
outline: none;
|
|
font-size: 12px;
|
|
font-family: inherit;
|
|
background: #f1f5f9;
|
|
color: #94a3b8;
|
|
border-radius: 999px;
|
|
text-align: center;
|
|
cursor: text;
|
|
transition: width 0.15s ease, color 0.15s ease, border-color 0.15s ease, background 0.15s ease;
|
|
}
|
|
|
|
#content .tag-editor-inline input.tag-inline-input-sm:focus {
|
|
width: 120px;
|
|
color: #1e293b;
|
|
border-color: #94a3b8;
|
|
background: #ffffff;
|
|
text-align: left;
|
|
}
|
|
|
|
#content .tag-editor-inline input.tag-inline-input-sm::placeholder {
|
|
color: #94a3b8;
|
|
}
|
|
|
|
/* Actions bar tag editor (compact to avoid crowding buttons) */
|
|
body.change-list #changelist .actions .tag-editor-container {
|
|
padding: 2px 6px;
|
|
min-height: 24px;
|
|
height: 24px;
|
|
width: 160px;
|
|
max-width: 160px;
|
|
flex: 0 0 160px;
|
|
flex-wrap: nowrap;
|
|
overflow-x: auto;
|
|
overflow-y: hidden;
|
|
gap: 4px;
|
|
}
|
|
body.change-list #changelist .actions-tags {
|
|
display: none;
|
|
align-items: center;
|
|
}
|
|
|
|
/* Changelist layout */
|
|
body.change-list #changelist {
|
|
display: grid;
|
|
grid-template-columns: minmax(0, 1fr) 320px;
|
|
align-items: flex-start;
|
|
gap: 0;
|
|
clear: both;
|
|
}
|
|
body.change-list #changelist .changelist-form-container {
|
|
display: block;
|
|
min-width: 0;
|
|
width: auto;
|
|
}
|
|
body.change-list #changelist-filter {
|
|
width: 320px;
|
|
min-width: 320px;
|
|
max-width: 320px;
|
|
display: block;
|
|
margin: 0 !important;
|
|
align-self: flex-start;
|
|
}
|
|
body.change-list #changelist .changelist-form-container > div,
|
|
body.change-list #changelist .changelist-form-container > form {
|
|
min-width: 0;
|
|
width: auto;
|
|
max-width: none;
|
|
}
|
|
body.filters-collapsed.change-list #changelist {
|
|
grid-template-columns: minmax(0, 1fr);
|
|
}
|
|
|
|
.actions .tag-pills {
|
|
gap: 4px;
|
|
flex-wrap: nowrap;
|
|
}
|
|
|
|
.actions .tag-pill {
|
|
padding: 1px 6px 1px 8px;
|
|
font-size: 10px;
|
|
}
|
|
|
|
.actions .tag-inline-input {
|
|
min-width: 40px;
|
|
padding: 0;
|
|
font-size: 11px;
|
|
}
|
|
|
|
|
|
/* Container in list view title column */
|
|
.tags-inline-editor {
|
|
display: inline;
|
|
margin-left: 8px;
|
|
}
|
|
|
|
/* Existing tag styles (keep for backwards compat) */
|
|
.tags .tag {
|
|
display: inline-block;
|
|
padding: 2px 8px;
|
|
margin: 1px 2px;
|
|
background: linear-gradient(135deg, #3b82f6 0%, #2563eb 100%);
|
|
color: #fff;
|
|
font-size: 11px;
|
|
font-weight: 500;
|
|
border-radius: 12px;
|
|
text-decoration: none;
|
|
transition: all 0.15s ease;
|
|
}
|
|
|
|
.tags .tag:hover {
|
|
background: linear-gradient(135deg, #2563eb 0%, #1d4ed8 100%);
|
|
}
|
|
</style>
|
|
{% endblock %}
|
|
|
|
{% if LANGUAGE_BIDI %}
|
|
<link rel="stylesheet" type="text/css" href="{% block stylesheet_rtl %}{% static "admin/css/rtl.css" %}{% endblock %}">
|
|
{% endif %}
|
|
|
|
{% block responsive %}
|
|
<meta name="viewport" content="user-scalable=no, width=device-width, initial-scale=1.0, maximum-scale=1.0">
|
|
<link rel="stylesheet" type="text/css" href="{% static "admin/css/responsive.css" %}">
|
|
{% if LANGUAGE_BIDI %}
|
|
<link rel="stylesheet" type="text/css" href="{% static "admin/css/responsive_rtl.css" %}">
|
|
{% endif %}
|
|
{% endblock %}
|
|
|
|
<script
|
|
src="{% static 'jquery-3.7.1.slim.min.js' %}"
|
|
integrity="sha256-kmHvs0B+OpCW5GVHUNjv9rOmY0IvSIRcf7zGUDTDQM8="
|
|
crossorigin="anonymous"></script>
|
|
<link href="{% static 'select2.min.css' %}" rel="stylesheet"/>
|
|
<script src="{% static 'select2.min.js' %}"></script>
|
|
|
|
<link rel="stylesheet" type="text/css" href="{% static "admin.css" %}">
|
|
|
|
<script>
|
|
function selectSnapshotListView(e) {
|
|
e && e.stopPropagation()
|
|
e && e.preventDefault()
|
|
console.log('Switching to Snapshot list view...')
|
|
localStorage.setItem('preferred_snapshot_view_mode', 'list')
|
|
window.location = "{% url 'admin:core_snapshot_changelist' %}" + document.location.search
|
|
return false
|
|
}
|
|
function selectSnapshotGridView(e) {
|
|
e && e.stopPropagation()
|
|
e && e.preventDefault()
|
|
console.log('Switching to Snapshot grid view...')
|
|
localStorage.setItem('preferred_snapshot_view_mode', 'grid')
|
|
window.location = "{% url 'admin:grid' %}" + document.location.search
|
|
return false
|
|
}
|
|
|
|
const preferred_view = localStorage.getItem('preferred_snapshot_view_mode') || 'unset'
|
|
const current_view = (
|
|
window.location.pathname === "{% url 'admin:core_snapshot_changelist' %}"
|
|
? 'list'
|
|
: 'grid')
|
|
console.log('Preferred snapshot view is:', preferred_view, 'Current view mode is:', current_view)
|
|
|
|
if (preferred_view === 'grid' && current_view !== 'grid') {
|
|
selectSnapshotGridView()
|
|
}
|
|
</script>
|
|
|
|
{% block extrahead %}{% endblock %}
|
|
</head>
|
|
|
|
|
|
<body class="{% if is_popup %}popup {% endif %}{% block bodyclass %}{% endblock %}" data-admin-utc-offset="{% now "Z" %}">
|
|
{% include 'progressbar.html' %}
|
|
|
|
<div id="container">
|
|
{% if not is_popup %}
|
|
<div id="header">
|
|
<div id="branding">
|
|
<h1 id="site-name">
|
|
<a href="{% url 'Home' %}">
|
|
<img src="{% static 'archive.png' %}" id="logo">
|
|
ArchiveBox
|
|
</a>
|
|
</h1>
|
|
</div>
|
|
{% block usertools %}
|
|
{% if has_permission %}
|
|
{% include 'navigation.html' %}
|
|
{% endif %}
|
|
{% endblock %}
|
|
{% block nav-global %}{% endblock %}
|
|
</div>
|
|
|
|
{% if has_permission %}
|
|
{% include 'admin/progress_monitor.html' %}
|
|
{% endif %}
|
|
|
|
{% block breadcrumbs %}
|
|
<div class="breadcrumbs">
|
|
<a href="{% url 'admin:index' %}">{% trans 'Home' %}</a>
|
|
{% if title %} › {{ title }}{% endif %}
|
|
</div>
|
|
{% endblock %}
|
|
{% endif %}
|
|
|
|
{% block messages %}
|
|
{% if messages %}
|
|
<ul class="messagelist">
|
|
{% for message in messages %}
|
|
<li{% if message.tags %} class="{{ message.tags }}"{% endif %}>{{ message|capfirst }}</li>
|
|
{% endfor %}
|
|
</ul>
|
|
{% endif %}
|
|
{% endblock messages %}
|
|
|
|
<div id="content" class="{% block coltype %}colM{% endblock %}">
|
|
{% block pretitle %}{% endblock %}
|
|
{% block content_title %}{# {% if title %}<h1>{{ title }}</h1>{% endif %} #}{% endblock %}
|
|
{% block content %}
|
|
{% block object-tools %}{% endblock %}
|
|
{{ content }}
|
|
{% endblock %}
|
|
{% block sidebar %}{% endblock %}
|
|
<br class="clear">
|
|
</div>
|
|
|
|
{% block footer %}<div id="footer"></div>{% endblock %}
|
|
</div>
|
|
|
|
{% comment %}
|
|
{% if user.is_authenticated and user.is_superuser and CAN_UPGRADE %}
|
|
<script>
|
|
if (!localStorage.getItem("bannerDismissed")) {
|
|
const upgradeVersionTag = "{{VERSIONS_AVAILABLE.recommended_version.tag_name}}"
|
|
const upgradeVersionURL = "{{VERSIONS_AVAILABLE.recommended_version.html_url}}"
|
|
const currentVersionTag = "{{VERSION}}"
|
|
const currentVersionURL = "{{VERSIONS_AVAILABLE.recommended_version.html_url}}"
|
|
|
|
createBanner(currentVersionTag, currentVersionURL, upgradeVersionTag, upgradeVersionURL)
|
|
}
|
|
|
|
function createBanner(currentVersionTag, currentVersionURL, upgradeVersionTag, upgradeVersionURL) {
|
|
const banner = document.createElement('div')
|
|
banner.setAttribute('id', 'upgrade-banner');
|
|
banner.innerHTML = `
|
|
<p>There's a new version of ArchiveBox available!</p>
|
|
Your version: <a href=${currentVersionURL}>${currentVersionTag}</a> | New version: <a href=${upgradeVersionURL}>${upgradeVersionTag}</a>
|
|
<p>
|
|
<a href=https://github.com/ArchiveBox/ArchiveBox/wiki/Upgrading-or-Merging-Archives>Upgrade Instructions</a> | <a href=https://github.com/ArchiveBox/ArchiveBox/releases>Changelog</a> | <a href=https://github.com/ArchiveBox/ArchiveBox/wiki/Roadmap>Roadmap</a>
|
|
</p>
|
|
<button id="dismiss-btn">Dismiss</button>
|
|
`
|
|
document.body.appendChild(banner);
|
|
const dismissButton = document.querySelector("#dismiss-btn")
|
|
if (dismissButton) {
|
|
dismissButton.addEventListener("click", dismissBanner)
|
|
}
|
|
}
|
|
|
|
function dismissBanner() {
|
|
const banner = document.getElementById("upgrade-banner")
|
|
banner.style.display = "none"
|
|
localStorage.setItem("bannerDismissed", "true")
|
|
}
|
|
</script>
|
|
{% endif %}
|
|
{% endcomment %}
|
|
|
|
<script>
|
|
$ = django.jQuery;
|
|
$.fn.reverse = [].reverse;
|
|
|
|
// hide images that fail to load
|
|
document.querySelector('body').addEventListener('error', function (e) {
|
|
e.target.style.opacity = 0;
|
|
}, true)
|
|
|
|
// setup timezone
|
|
{% get_current_timezone as TIME_ZONE %}
|
|
window.TIME_ZONE = '{{TIME_ZONE}}'
|
|
|
|
window.setCookie = function(name, value, days) {
|
|
let expires = ""
|
|
if (days) {
|
|
const date = new Date()
|
|
date.setTime(date.getTime() + (days*24*60*60*1000))
|
|
expires = "; expires=" + date.toUTCString()
|
|
}
|
|
document.cookie = name + "=" + (value || "") + expires + "; path=/"
|
|
}
|
|
|
|
function setTimeOffset() {
|
|
if (window.GMT_OFFSET) return
|
|
window.GMT_OFFSET = -(new Date).getTimezoneOffset()
|
|
window.setCookie('GMT_OFFSET', window.GMT_OFFSET, 365)
|
|
}
|
|
|
|
// change the admin actions button from a dropdown to buttons across
|
|
function fix_actions() {
|
|
const container = $('div.actions')
|
|
|
|
// too many actions to turn into buttons
|
|
if (container.find('select[name=action] option').length >= 11) return
|
|
|
|
// hide the empty default option thats just a placeholder with no value
|
|
container.find('label:nth-child(1), button[value=0]').hide()
|
|
|
|
const buttons = $('<div></div>')
|
|
.insertAfter('div.actions button[type=submit]')
|
|
.css('display', 'inline')
|
|
.addClass('class', 'action-buttons');
|
|
|
|
// for each action in the dropdown, turn it into a button instead
|
|
container.find('select[name=action] option:gt(0)').each(function () {
|
|
const action_type = this.value
|
|
$('<button>')
|
|
.attr('type', 'button')
|
|
.attr('name', action_type)
|
|
.addClass('button')
|
|
.text(this.text)
|
|
.click(function (e) {
|
|
e.preventDefault()
|
|
e.stopPropagation()
|
|
|
|
const num_selected = document.querySelector('.action-counter').innerText.split(' ')[0]
|
|
|
|
if (action_type === 'overwrite_snapshots') {
|
|
const message = (
|
|
'Are you sure you want to re-archive (overwrite) ' + num_selected + ' Snapshots?\n\n' +
|
|
'This will delete all previously saved files from these Snapshots and re-archive them from scratch.\n\n'
|
|
)
|
|
if (!window.confirm(message)) return false
|
|
}
|
|
if (action_type === 'delete_snapshots') {
|
|
const message = (
|
|
'Are you sure you want to permanently delete ' + num_selected + ' Snapshots?\n\n' +
|
|
'They will be removed from your index, and all their Snapshot content on disk will be permanently deleted.'
|
|
)
|
|
if (!window.confirm(message)) return false
|
|
}
|
|
|
|
// select the action button from the dropdown
|
|
container.find('select[name=action]')
|
|
.find('[selected]').removeAttr('selected').end()
|
|
.find('[value=' + action_type + ']').attr('selected', 'selected').click()
|
|
|
|
// click submit & replace the archivebox logo with a spinner
|
|
$('#changelist-form button[name="index"]').click()
|
|
document.querySelector('#logo').outerHTML = '<div class="loader"></div>'
|
|
return false
|
|
})
|
|
.appendTo(buttons)
|
|
})
|
|
console.log('Converted', buttons.children().length, 'admin actions from dropdown to buttons')
|
|
jQuery('select[multiple]').select2();
|
|
}
|
|
function updateTagWidgetVisibility() {
|
|
const tagContainer = document.querySelector('.actions-tags');
|
|
if (!tagContainer) return;
|
|
const checked = document.querySelectorAll('#changelist-form input.action-select:checked').length;
|
|
tagContainer.style.display = checked > 0 ? 'inline-flex' : 'none';
|
|
}
|
|
function fixInlineAddRow() {
|
|
$('#id_snapshottag-MAX_NUM_FORMS').val('1000')
|
|
$('.add-row').show()
|
|
}
|
|
|
|
function setupSnapshotGridListToggle() {
|
|
$("#snapshot-view-list").click(selectSnapshotListView)
|
|
$("#snapshot-view-grid").click(selectSnapshotGridView)
|
|
|
|
// Set active class based on current view
|
|
const isGridView = window.location.pathname === "{% url 'admin:grid' %}"
|
|
if (isGridView) {
|
|
$("#snapshot-view-grid").addClass('active')
|
|
$("#snapshot-view-list").removeClass('active')
|
|
} else {
|
|
$("#snapshot-view-list").addClass('active')
|
|
$("#snapshot-view-grid").removeClass('active')
|
|
}
|
|
|
|
$('#changelist-form .card input:checkbox').change(function() {
|
|
if ($(this).is(':checked'))
|
|
$(this).parents('.card').addClass('selected-card')
|
|
else
|
|
$(this).parents('.card').removeClass('selected-card')
|
|
})
|
|
};
|
|
function selectSnapshotIfHotlinked() {
|
|
// if we arrive at the index with a url like ??id__startswith=...
|
|
// we were hotlinked here with the intention of making it easy for the user to perform some
|
|
// actions on the given snapshot. therefore we should preselect the snapshot to save them a click
|
|
if (window.location.search.startsWith('?')) {
|
|
const result_checkboxes = [...document.querySelectorAll('#result_list .action-checkbox input[type=checkbox]')]
|
|
if (result_checkboxes.length === 1) {
|
|
result_checkboxes[0].click()
|
|
}
|
|
}
|
|
}
|
|
window.archiveboxHandleZipClick = function(link, event) {
|
|
if (!link || link.dataset.loading === '1') {
|
|
if (event) event.preventDefault()
|
|
return false
|
|
}
|
|
|
|
const resetZipButton = function(target) {
|
|
if (!target) return
|
|
target.dataset.loading = ''
|
|
target.classList.remove('is-loading')
|
|
target.removeAttribute('aria-busy')
|
|
const targetLabel = target.querySelector('.archivebox-zip-label')
|
|
const targetSpinner = target.querySelector('.archivebox-zip-spinner')
|
|
if (targetLabel) {
|
|
targetLabel.textContent = target.dataset.originalLabel || targetLabel.textContent
|
|
targetLabel.style.opacity = ''
|
|
targetLabel.style.display = ''
|
|
targetLabel.style.visibility = ''
|
|
}
|
|
if (targetSpinner) {
|
|
targetSpinner.style.display = ''
|
|
}
|
|
target.style.pointerEvents = ''
|
|
target.style.opacity = ''
|
|
target.style.width = target.dataset.originalWidth || ''
|
|
target.style.minWidth = target.dataset.originalMinWidth || ''
|
|
if (target._zipResetTimer) {
|
|
window.clearTimeout(target._zipResetTimer)
|
|
target._zipResetTimer = null
|
|
}
|
|
}
|
|
|
|
if (event) event.preventDefault()
|
|
const lockedWidth = Math.ceil(link.getBoundingClientRect().width)
|
|
link.dataset.originalWidth = link.style.width || ""
|
|
link.dataset.originalMinWidth = link.style.minWidth || ""
|
|
link.style.width = lockedWidth + "px"
|
|
link.style.minWidth = lockedWidth + "px"
|
|
link.dataset.loading = '1'
|
|
link.classList.add('is-loading')
|
|
link.setAttribute('aria-busy', 'true')
|
|
const label = link.querySelector('.archivebox-zip-label')
|
|
const spinner = link.querySelector('.archivebox-zip-spinner')
|
|
const loadingMode = link.dataset.loadingMode || 'label'
|
|
if (label) {
|
|
link.dataset.originalLabel = label.textContent || ''
|
|
if (loadingMode !== 'spinner-only') {
|
|
label.textContent = link.dataset.loadingLabel || 'Preparing...'
|
|
label.style.opacity = '0.92'
|
|
}
|
|
}
|
|
if (spinner) {
|
|
spinner.style.display = 'inline-block'
|
|
}
|
|
link.style.pointerEvents = 'none'
|
|
link.style.opacity = '0.96'
|
|
const destination = link.href
|
|
let iframe = document.getElementById('archivebox-zip-download-frame')
|
|
if (!iframe) {
|
|
iframe = document.createElement('iframe')
|
|
iframe.id = 'archivebox-zip-download-frame'
|
|
iframe.name = 'archivebox-zip-download-frame'
|
|
iframe.hidden = true
|
|
iframe.style.display = 'none'
|
|
document.body.appendChild(iframe)
|
|
}
|
|
iframe.onload = function() {
|
|
window.setTimeout(function() {
|
|
resetZipButton(link)
|
|
}, 250)
|
|
}
|
|
link._zipResetTimer = window.setTimeout(function() {
|
|
resetZipButton(link)
|
|
}, 12000)
|
|
void link.offsetWidth
|
|
requestAnimationFrame(function() {
|
|
requestAnimationFrame(function() {
|
|
iframe.src = destination
|
|
})
|
|
})
|
|
return false
|
|
}
|
|
$(document).ready(function() {
|
|
fix_actions()
|
|
updateTagWidgetVisibility()
|
|
const form = document.querySelector('#changelist-form')
|
|
if (form) {
|
|
form.addEventListener('change', updateTagWidgetVisibility)
|
|
}
|
|
fixInlineAddRow()
|
|
setupSnapshotGridListToggle()
|
|
setTimeOffset()
|
|
selectSnapshotIfHotlinked()
|
|
})
|
|
</script>
|
|
<script src="{% static 'admin-inline-tags.js' %}"></script>
|
|
</body>
|
|
</html>
|