mirror of
https://github.com/ArchiveBox/ArchiveBox
synced 2025-02-17 05:48:24 +00: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 %}"
|
||||
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 -->
|
||||
<div id="container">
|
||||
|
||||
|
|
@ -27,14 +75,20 @@
|
|||
<!-- Header -->
|
||||
<div id="header">
|
||||
<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>
|
||||
{% block usertools %}
|
||||
{% if has_permission %}
|
||||
<div id="user-tools">
|
||||
<a href="{% url 'Home' %}">Index</a> /
|
||||
<a href="{% url 'admin:Add' %}">Add URLs</a> /
|
||||
<a href="{% url 'admin:index' %}">Admin</a> /
|
||||
<a href="{% url 'admin:Add' %}">Add ➕</a> /
|
||||
<a href="{% url 'Home' %}">URLs</a> /
|
||||
<a href="/admin/auth/user/">Users</a> /
|
||||
<a href="{% url 'OldHome' %}">Old UI</a> /
|
||||
<a href="{% url 'Docs' %}">Docs</a>
|
||||
|
||||
|
|
@ -59,13 +113,13 @@
|
|||
{% endblock %}
|
||||
{% block nav-global %}{% endblock %}
|
||||
</div>
|
||||
<!-- END Header -->
|
||||
{% block breadcrumbs %}
|
||||
<div class="breadcrumbs">
|
||||
<a href="{% url 'admin:index' %}">{% trans 'Home' %}</a>
|
||||
{% if title %} › {{ title }}{% endif %}
|
||||
</div>
|
||||
{% endblock %}
|
||||
<!-- END Header -->
|
||||
{% block breadcrumbs %}
|
||||
<div class="breadcrumbs">
|
||||
<a href="{% url 'admin:index' %}">{% trans 'Home' %}</a>
|
||||
{% if title %} › {{ title }}{% endif %}
|
||||
</div>
|
||||
{% endblock %}
|
||||
{% endif %}
|
||||
|
||||
{% block messages %}
|
||||
|
|
@ -93,5 +147,42 @@
|
|||
</div>
|
||||
<!-- 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>
|
||||
</html>
|
||||
|
|
|
|||
|
|
@ -49,19 +49,6 @@
|
|||
border-radius: 4px;
|
||||
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>
|
||||
<div style="max-width: 550px; margin: auto; float: none">
|
||||
<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 {
|
||||
background: #aa1e55;
|
||||
padding: 6px 14px;
|
||||
|
|
@ -16,6 +36,11 @@ div.breadcrumbs {
|
|||
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 {
|
||||
background: #772948;
|
||||
}
|
||||
|
|
@ -55,15 +80,51 @@ div.breadcrumbs {
|
|||
}
|
||||
|
||||
|
||||
#content #changelist .actions {
|
||||
/*#content #changelist .actions {
|
||||
position: fixed;
|
||||
bottom: 0px;
|
||||
z-index: 800;
|
||||
}*/
|
||||
#content #changelist .actions {
|
||||
float: right;
|
||||
margin-top: -34px;
|
||||
padding: 0px;
|
||||
background: none;
|
||||
margin-right: 0px;
|
||||
}
|
||||
|
||||
#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 {
|
||||
border-radius: 4px 4px 0px 0px;
|
||||
}
|
||||
|
|
@ -72,6 +133,7 @@ div.breadcrumbs {
|
|||
#content #changelist-filter {
|
||||
top: 35px;
|
||||
width: 110px;
|
||||
margin-bottom: 35px;
|
||||
}
|
||||
|
||||
.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 {
|
||||
height: 20px;
|
||||
width: 20px;
|
||||
|
|
@ -91,16 +163,20 @@ div.breadcrumbs {
|
|||
|
||||
#content td, #content th {
|
||||
vertical-align: middle;
|
||||
padding: 4px;
|
||||
}
|
||||
|
||||
#content #changelist table input {
|
||||
vertical-align: -2px;
|
||||
}
|
||||
|
||||
#content thead th .text a {
|
||||
padding: 8px 4px;
|
||||
}
|
||||
|
||||
#content th.field-added, #content td.field-updated {
|
||||
word-break: break-word;
|
||||
min-width: 85px;
|
||||
min-width: 128px;
|
||||
white-space: normal;
|
||||
}
|
||||
|
||||
|
|
@ -111,6 +187,13 @@ div.breadcrumbs {
|
|||
#content td.field-files {
|
||||
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 {
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
|
@ -124,3 +207,18 @@ div.breadcrumbs {
|
|||
font-weight: 200;
|
||||
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
Reference in a new issue