mirror of
https://github.com/ArchiveBox/ArchiveBox.git
synced 2025-05-14 15:14:31 -04:00
ui and css improvements
This commit is contained in:
Nick Sweeting
parent
5a30e03778
commit
b1082cfbaa
4 changed files with 204 additions and 27 deletions
1
archivebox/themes/admin/actions_as_select.html
Normal file
1
archivebox/themes/admin/actions_as_select.html
Normal file
|
|
@ -0,0 +1 @@
|
||||||
|
actions_as_select
|
||||||
|
|
@ -20,6 +20,54 @@
|
||||||
<body class="{% if is_popup %}popup {% endif %}{% block bodyclass %}{% endblock %}"
|
<body class="{% if is_popup %}popup {% endif %}{% block bodyclass %}{% endblock %}"
|
||||||
data-admin-utc-offset="{% now "Z" %}">
|
data-admin-utc-offset="{% now "Z" %}">
|
||||||
|
|
||||||
|
<style nonce="{{nonce}}">
|
||||||
|
/* Loading Progress Bar */
|
||||||
|
#progress {
|
||||||
|
position: absolute;
|
||||||
|
z-index: 1000;
|
||||||
|
top: 0px;
|
||||||
|
left: -6px;
|
||||||
|
width: 2%;
|
||||||
|
opacity: 1;
|
||||||
|
height: 2px;
|
||||||
|
background: #1a1a1a;
|
||||||
|
border-radius: 1px;
|
||||||
|
transition: width 4s ease-out, opacity 400ms linear;
|
||||||
|
}
|
||||||
|
|
||||||
|
@-moz-keyframes bugfix { from { padding-right: 1px ; } to { padding-right: 0; } }
|
||||||
|
</style>
|
||||||
|
|
||||||
|
<script>
|
||||||
|
// Page Loading Bar
|
||||||
|
window.loadStart = function(distance) {
|
||||||
|
var distance = distance || 0;
|
||||||
|
// only add progrstess bar if not already present
|
||||||
|
if (django.jQuery("#loading-bar").length == 0) {
|
||||||
|
django.jQuery("body").add("<div id=\"loading-bar\"></div>");
|
||||||
|
}
|
||||||
|
if (django.jQuery("#progress").length === 0) {
|
||||||
|
django.jQuery("body").append(django.jQuery("<div></div>").attr("id", "progress"));
|
||||||
|
let last_distance = (distance || (30 + (Math.random() * 30)))
|
||||||
|
django.jQuery("#progress").width(last_distance + "%");
|
||||||
|
setInterval(function() {
|
||||||
|
last_distance += Math.random()
|
||||||
|
django.jQuery("#progress").width(last_distance + "%");
|
||||||
|
}, 1000)
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
|
window.loadFinish = function() {
|
||||||
|
django.jQuery("#progress").width("101%").delay(200).fadeOut(400, function() {
|
||||||
|
django.jQuery(this).remove();
|
||||||
|
});
|
||||||
|
};
|
||||||
|
window.loadStart();
|
||||||
|
window.addEventListener('beforeunload', function() {window.loadStart(27)});
|
||||||
|
document.addEventListener('DOMContentLoaded', function() {window.loadFinish()});
|
||||||
|
</script>
|
||||||
|
|
||||||
|
|
||||||
<!-- Container -->
|
<!-- Container -->
|
||||||
<div id="container">
|
<div id="container">
|
||||||
|
|
||||||
|
|
@ -27,14 +75,20 @@
|
||||||
<!-- Header -->
|
<!-- Header -->
|
||||||
<div id="header">
|
<div id="header">
|
||||||
<div id="branding">
|
<div id="branding">
|
||||||
{% block branding %}{% endblock %}
|
<h1 id="site-name">
|
||||||
|
<a href="{% url 'Home' %}">
|
||||||
|
<img src="{% static 'archive.png' %}" id="logo">
|
||||||
|
ArchiveBox
|
||||||
|
</a>
|
||||||
|
</h1>
|
||||||
|
|
||||||
</div>
|
</div>
|
||||||
{% block usertools %}
|
{% block usertools %}
|
||||||
{% if has_permission %}
|
{% if has_permission %}
|
||||||
<div id="user-tools">
|
<div id="user-tools">
|
||||||
<a href="{% url 'Home' %}">Index</a> /
|
<a href="{% url 'admin:Add' %}">Add ➕</a> /
|
||||||
<a href="{% url 'admin:Add' %}">Add URLs</a> /
|
<a href="{% url 'Home' %}">URLs</a> /
|
||||||
<a href="{% url 'admin:index' %}">Admin</a> /
|
<a href="/admin/auth/user/">Users</a> /
|
||||||
<a href="{% url 'OldHome' %}">Old UI</a> /
|
<a href="{% url 'OldHome' %}">Old UI</a> /
|
||||||
<a href="{% url 'Docs' %}">Docs</a>
|
<a href="{% url 'Docs' %}">Docs</a>
|
||||||
|
|
||||||
|
|
@ -59,13 +113,13 @@
|
||||||
{% endblock %}
|
{% endblock %}
|
||||||
{% block nav-global %}{% endblock %}
|
{% block nav-global %}{% endblock %}
|
||||||
</div>
|
</div>
|
||||||
<!-- END Header -->
|
<!-- END Header -->
|
||||||
{% block breadcrumbs %}
|
{% block breadcrumbs %}
|
||||||
<div class="breadcrumbs">
|
<div class="breadcrumbs">
|
||||||
<a href="{% url 'admin:index' %}">{% trans 'Home' %}</a>
|
<a href="{% url 'admin:index' %}">{% trans 'Home' %}</a>
|
||||||
{% if title %} › {{ title }}{% endif %}
|
{% if title %} › {{ title }}{% endif %}
|
||||||
</div>
|
</div>
|
||||||
{% endblock %}
|
{% endblock %}
|
||||||
{% endif %}
|
{% endif %}
|
||||||
|
|
||||||
{% block messages %}
|
{% block messages %}
|
||||||
|
|
@ -93,5 +147,42 @@
|
||||||
</div>
|
</div>
|
||||||
<!-- END Container -->
|
<!-- END Container -->
|
||||||
|
|
||||||
|
<script>
|
||||||
|
(function ($) {
|
||||||
|
$.fn.reverse = [].reverse;
|
||||||
|
|
||||||
|
function fix_actions() {
|
||||||
|
var container = $('div.actions');
|
||||||
|
|
||||||
|
if (container.find('option').length < 10) {
|
||||||
|
container.find('label, button').hide();
|
||||||
|
|
||||||
|
var buttons = $('<div></div>')
|
||||||
|
.prependTo(container)
|
||||||
|
.css('display', 'inline')
|
||||||
|
.addClass('class', 'action-buttons');
|
||||||
|
|
||||||
|
container.find('option:gt(0)').reverse().each(function () {
|
||||||
|
const name = this.value
|
||||||
|
$('<button>')
|
||||||
|
.appendTo(buttons)
|
||||||
|
.attr('name', this.value)
|
||||||
|
.addClass('button')
|
||||||
|
.text(this.text)
|
||||||
|
.click(function () {
|
||||||
|
container.find('select')
|
||||||
|
.find(':selected').attr('selected', '').end()
|
||||||
|
.find('[value=' + this.name + ']').attr('selected', 'selected');
|
||||||
|
$('#changelist-form button[name="index"]').click();
|
||||||
|
document.querySelector('#logo').outerHTML = '<div class="loader"></div>'
|
||||||
|
});
|
||||||
|
});
|
||||||
|
}
|
||||||
|
};
|
||||||
|
$(function () {
|
||||||
|
fix_actions();
|
||||||
|
});
|
||||||
|
})(django.jQuery);
|
||||||
|
</script>
|
||||||
</body>
|
</body>
|
||||||
</html>
|
</html>
|
||||||
|
|
|
||||||
|
|
@ -49,19 +49,6 @@
|
||||||
border-radius: 4px;
|
border-radius: 4px;
|
||||||
white-space: normal;
|
white-space: normal;
|
||||||
}
|
}
|
||||||
.loader {
|
|
||||||
border: 16px solid #f3f3f3; /* Light grey */
|
|
||||||
border-top: 16px solid #3498db; /* Blue */
|
|
||||||
border-radius: 50%;
|
|
||||||
width: 120px;
|
|
||||||
height: 120px;
|
|
||||||
animation: spin 2s linear infinite;
|
|
||||||
}
|
|
||||||
|
|
||||||
@keyframes spin {
|
|
||||||
0% { transform: rotate(0deg); }
|
|
||||||
100% { transform: rotate(360deg); }
|
|
||||||
}
|
|
||||||
</style>
|
</style>
|
||||||
<div style="max-width: 550px; margin: auto; float: none">
|
<div style="max-width: 550px; margin: auto; float: none">
|
||||||
<br/><br/>
|
<br/><br/>
|
||||||
|
|
|
||||||
|
|
@ -1,3 +1,23 @@
|
||||||
|
#logo {
|
||||||
|
height: 30px;
|
||||||
|
vertical-align: -6px;
|
||||||
|
padding-right: 5px;
|
||||||
|
}
|
||||||
|
#site-name:hover a {
|
||||||
|
opacity: 0.9;
|
||||||
|
}
|
||||||
|
#site-name .loader {
|
||||||
|
height: 25px;
|
||||||
|
width: 25px;
|
||||||
|
display: inline-block;
|
||||||
|
border-width: 3px;
|
||||||
|
vertical-align: -3px;
|
||||||
|
margin-right: 5px;
|
||||||
|
margin-top: 2px;
|
||||||
|
}
|
||||||
|
#branding h1, #branding h1 a:link, #branding h1 a:visited {
|
||||||
|
color: mintcream;
|
||||||
|
}
|
||||||
#header {
|
#header {
|
||||||
background: #aa1e55;
|
background: #aa1e55;
|
||||||
padding: 6px 14px;
|
padding: 6px 14px;
|
||||||
|
|
@ -16,6 +36,11 @@ div.breadcrumbs {
|
||||||
padding: 6px 15px;
|
padding: 6px 15px;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
body.model-snapshot.change-list div.breadcrumbs,
|
||||||
|
body.model-snapshot.change-list #content .object-tools {
|
||||||
|
display: none;
|
||||||
|
}
|
||||||
|
|
||||||
.module h2, .module caption, .inline-group h2 {
|
.module h2, .module caption, .inline-group h2 {
|
||||||
background: #772948;
|
background: #772948;
|
||||||
}
|
}
|
||||||
|
|
@ -55,15 +80,51 @@ div.breadcrumbs {
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
||||||
#content #changelist .actions {
|
/*#content #changelist .actions {
|
||||||
position: fixed;
|
position: fixed;
|
||||||
bottom: 0px;
|
bottom: 0px;
|
||||||
z-index: 800;
|
z-index: 800;
|
||||||
|
}*/
|
||||||
|
#content #changelist .actions {
|
||||||
|
float: right;
|
||||||
|
margin-top: -34px;
|
||||||
|
padding: 0px;
|
||||||
|
background: none;
|
||||||
|
margin-right: 0px;
|
||||||
}
|
}
|
||||||
|
|
||||||
#content #changelist .actions .button {
|
#content #changelist .actions .button {
|
||||||
border-color: #aa1e55;
|
border-radius: 2px;
|
||||||
|
background-color: #f5dd5d;
|
||||||
|
color: #333;
|
||||||
|
font-size: 12px;
|
||||||
|
font-weight: 800;
|
||||||
|
margin-right: 4px;
|
||||||
|
box-shadow: 4px 4px 4px rgba(0,0,0,0.02);
|
||||||
|
border: 1px solid rgba(0,0,0,0.08);
|
||||||
}
|
}
|
||||||
|
#content #changelist .actions .button:hover {
|
||||||
|
border: 1px solid rgba(0,0,0,0.2);
|
||||||
|
opacity: 0.9;
|
||||||
|
}
|
||||||
|
#content #changelist .actions .button[name=verify_snapshots], #content #changelist .actions .button[name=update_titles] {
|
||||||
|
background-color: #dedede;
|
||||||
|
color: #333;
|
||||||
|
}
|
||||||
|
#content #changelist .actions .button[name=update_snapshots] {
|
||||||
|
background-color:lightseagreen;
|
||||||
|
color: #333;
|
||||||
|
}
|
||||||
|
#content #changelist .actions .button[name=overwrite_snapshots] {
|
||||||
|
background-color: #ffaa31;
|
||||||
|
color: #333;
|
||||||
|
}
|
||||||
|
#content #changelist .actions .button[name=delete_snapshots] {
|
||||||
|
background-color: #f91f74;
|
||||||
|
color: rgb(255 248 252 / 64%);
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
#content #changelist-filter h2 {
|
#content #changelist-filter h2 {
|
||||||
border-radius: 4px 4px 0px 0px;
|
border-radius: 4px 4px 0px 0px;
|
||||||
}
|
}
|
||||||
|
|
@ -72,6 +133,7 @@ div.breadcrumbs {
|
||||||
#content #changelist-filter {
|
#content #changelist-filter {
|
||||||
top: 35px;
|
top: 35px;
|
||||||
width: 110px;
|
width: 110px;
|
||||||
|
margin-bottom: 35px;
|
||||||
}
|
}
|
||||||
|
|
||||||
.change-list .filtered .results,
|
.change-list .filtered .results,
|
||||||
|
|
@ -82,6 +144,16 @@ div.breadcrumbs {
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
@media (max-width: 1127px) {
|
||||||
|
#content #changelist .actions {
|
||||||
|
position: fixed;
|
||||||
|
bottom: 6px;
|
||||||
|
left: 10px;
|
||||||
|
float: left;
|
||||||
|
z-index: 1000;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
#content a img.favicon {
|
#content a img.favicon {
|
||||||
height: 20px;
|
height: 20px;
|
||||||
width: 20px;
|
width: 20px;
|
||||||
|
|
@ -91,16 +163,20 @@ div.breadcrumbs {
|
||||||
|
|
||||||
#content td, #content th {
|
#content td, #content th {
|
||||||
vertical-align: middle;
|
vertical-align: middle;
|
||||||
|
padding: 4px;
|
||||||
}
|
}
|
||||||
|
|
||||||
#content #changelist table input {
|
#content #changelist table input {
|
||||||
vertical-align: -2px;
|
vertical-align: -2px;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
#content thead th .text a {
|
||||||
|
padding: 8px 4px;
|
||||||
|
}
|
||||||
|
|
||||||
#content th.field-added, #content td.field-updated {
|
#content th.field-added, #content td.field-updated {
|
||||||
word-break: break-word;
|
word-break: break-word;
|
||||||
min-width: 85px;
|
min-width: 128px;
|
||||||
white-space: normal;
|
white-space: normal;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
@ -111,6 +187,13 @@ div.breadcrumbs {
|
||||||
#content td.field-files {
|
#content td.field-files {
|
||||||
white-space: nowrap;
|
white-space: nowrap;
|
||||||
}
|
}
|
||||||
|
#content td.field-files .exists-True {
|
||||||
|
opacity: 1;
|
||||||
|
}
|
||||||
|
#content td.field-files .exists-False {
|
||||||
|
opacity: 0.1;
|
||||||
|
filter: grayscale(100%);
|
||||||
|
}
|
||||||
#content td.field-size {
|
#content td.field-size {
|
||||||
white-space: nowrap;
|
white-space: nowrap;
|
||||||
}
|
}
|
||||||
|
|
@ -124,3 +207,18 @@ div.breadcrumbs {
|
||||||
font-weight: 200;
|
font-weight: 200;
|
||||||
opacity: 0.6;
|
opacity: 0.6;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
.loader {
|
||||||
|
border: 16px solid #f3f3f3; /* Light grey */
|
||||||
|
border-top: 16px solid #3498db; /* Blue */
|
||||||
|
border-radius: 50%;
|
||||||
|
width: 30px;
|
||||||
|
height: 30px;
|
||||||
|
box-sizing: border-box;
|
||||||
|
animation: spin 2s linear infinite;
|
||||||
|
}
|
||||||
|
|
||||||
|
@keyframes spin {
|
||||||
|
0% { transform: rotate(0deg); }
|
||||||
|
100% { transform: rotate(360deg); }
|
||||||
|
}
|
||||||
|
|
|
||||||
Loading…
Add table
Add a link
Reference in a new issue