mirror of
https://github.com/ArchiveBox/ArchiveBox.git
synced 2025-06-04 16:53:53 -04:00
fix pending titles and favicons, improve add page, custom admin
This commit is contained in:
Nick Sweeting
parent
022231b362
commit
3aeca0e450
23 changed files with 387 additions and 316 deletions
|
|
@ -2,7 +2,7 @@
|
|||
{% get_current_language as LANGUAGE_CODE %}{% get_current_language_bidi as LANGUAGE_BIDI %}
|
||||
<html lang="{{ LANGUAGE_CODE|default:"en-us" }}" {% if LANGUAGE_BIDI %}dir="rtl"{% endif %}>
|
||||
<head>
|
||||
<title>{% block title %}{% endblock %}</title>
|
||||
<title>{% block title %}{% endblock %} | ArchiveBox</title>
|
||||
<link rel="stylesheet" type="text/css" href="{% block stylesheet %}{% static "admin/css/base.css" %}{% endblock %}">
|
||||
{% block extrastyle %}{% endblock %}
|
||||
{% if LANGUAGE_BIDI %}<link rel="stylesheet" type="text/css" href="{% block stylesheet_rtl %}{% static "admin/css/rtl.css" %}{% endblock %}">{% endif %}
|
||||
|
|
@ -13,6 +13,7 @@
|
|||
{% if LANGUAGE_BIDI %}<link rel="stylesheet" type="text/css" href="{% static "admin/css/responsive_rtl.css" %}">{% endif %}
|
||||
{% endblock %}
|
||||
{% block blockbots %}<meta name="robots" content="NONE,NOARCHIVE">{% endblock %}
|
||||
<link rel="stylesheet" type="text/css" href="{% static "admin.css" %}">
|
||||
</head>
|
||||
{% load i18n %}
|
||||
|
||||
|
|
@ -26,13 +27,14 @@
|
|||
<!-- Header -->
|
||||
<div id="header">
|
||||
<div id="branding">
|
||||
{% block branding %}{% endblock %}
|
||||
{% block branding %}{% endblock %}
|
||||
</div>
|
||||
{% block usertools %}
|
||||
{% if has_permission %}
|
||||
<div id="user-tools">
|
||||
<a href="/add/">Add Links</a> /
|
||||
<a href="/">Main Index</a> /
|
||||
<a href="/admin/">Admin</a> /
|
||||
<a href="https://github.com/pirate/ArchiveBox/wiki">Docs</a>
|
||||
|
||||
{% block welcome-msg %}
|
||||
|
|
@ -76,7 +78,7 @@
|
|||
<!-- Content -->
|
||||
<div id="content" class="{% block coltype %}colM{% endblock %}">
|
||||
{% block pretitle %}{% endblock %}
|
||||
{% block content_title %}{% if title %}<h1>{{ title }}</h1>{% endif %}{% endblock %}
|
||||
{% block content_title %}{# {% if title %}<h1>{{ title }}</h1>{% endif %} #}{% endblock %}
|
||||
{% block content %}
|
||||
{% block object-tools %}{% endblock %}
|
||||
{{ content }}
|
||||
|
|
|
|||
|
|
@ -1,218 +1,113 @@
|
|||
{% load static %}
|
||||
{% extends "admin/index.html" %}
|
||||
{% load i18n %}
|
||||
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<title>Archived Sites</title>
|
||||
<meta charset="utf-8" name="viewport" content="width=device-width, initial-scale=1">
|
||||
<style>
|
||||
html, body {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
font-size: 18px;
|
||||
font-weight: 200;
|
||||
text-align: center;
|
||||
margin: 0px;
|
||||
padding: 0px;
|
||||
font-family: "Gill Sans", Helvetica, sans-serif;
|
||||
}
|
||||
.header-top small {
|
||||
font-weight: 200;
|
||||
color: #efefef;
|
||||
}
|
||||
|
||||
.header-top {
|
||||
width: 100%;
|
||||
height: auto;
|
||||
min-height: 40px;
|
||||
margin: 0px;
|
||||
text-align: center;
|
||||
color: white;
|
||||
font-size: calc(11px + 0.84vw);
|
||||
font-weight: 200;
|
||||
padding: 4px 4px;
|
||||
border-bottom: 3px solid #aa1e55;
|
||||
background-color: #aa1e55;
|
||||
}
|
||||
input[type=search] {
|
||||
width: 22vw;
|
||||
border-radius: 4px;
|
||||
border: 1px solid #aeaeae;
|
||||
padding: 3px 5px;
|
||||
}
|
||||
.nav > div {
|
||||
min-height: 30px;
|
||||
}
|
||||
.header-top a {
|
||||
text-decoration: none;
|
||||
color: rgba(0,0,0,0.6);
|
||||
}
|
||||
.header-top a:hover {
|
||||
text-decoration: none;
|
||||
color: rgba(0,0,0,0.9);
|
||||
}
|
||||
.header-top .col-lg-4 {
|
||||
text-align: center;
|
||||
padding-top: 4px;
|
||||
padding-bottom: 4px;
|
||||
}
|
||||
.header-archivebox img {
|
||||
display: inline-block;
|
||||
margin-right: 3px;
|
||||
height: 30px;
|
||||
margin-left: 12px;
|
||||
margin-top: -4px;
|
||||
margin-bottom: 2px;
|
||||
}
|
||||
.header-archivebox img:hover {
|
||||
opacity: 0.5;
|
||||
}
|
||||
{% block breadcrumbs %}
|
||||
<div class="breadcrumbs">
|
||||
<a href="{% url 'admin:index' %}">{% trans 'Home' %}</a>
|
||||
{% if title %} › {{ title }}{% endif %}
|
||||
</div>
|
||||
{% endblock %}
|
||||
|
||||
#table-bookmarks_length, #table-bookmarks_filter {
|
||||
padding-top: 12px;
|
||||
opacity: 0.8;
|
||||
padding-left: 24px;
|
||||
padding-right: 22px;
|
||||
margin-bottom: -16px;
|
||||
}
|
||||
table {
|
||||
padding: 6px;
|
||||
width: 100%;
|
||||
}
|
||||
table thead th {
|
||||
font-weight: 400;
|
||||
}
|
||||
table tr {
|
||||
height: 35px;
|
||||
}
|
||||
tbody tr:nth-child(odd) {
|
||||
background-color: #ffebeb !important;
|
||||
}
|
||||
table tr td {
|
||||
white-space: nowrap;
|
||||
overflow: hidden;
|
||||
/*padding-bottom: 0.4em;*/
|
||||
/*padding-top: 0.4em;*/
|
||||
padding-left: 2px;
|
||||
text-align: center;
|
||||
}
|
||||
table tr td a {
|
||||
text-decoration: none;
|
||||
}
|
||||
table tr td img, table tr td object {
|
||||
display: inline-block;
|
||||
margin: auto;
|
||||
height: 24px;
|
||||
width: 24px;
|
||||
padding: 0px;
|
||||
padding-right: 5px;
|
||||
vertical-align: middle;
|
||||
margin-left: 4px;
|
||||
}
|
||||
#table-bookmarks {
|
||||
width: 100%;
|
||||
overflow-y: scroll;
|
||||
table-layout: fixed;
|
||||
}
|
||||
.dataTables_wrapper {
|
||||
background-color: #fafafa;
|
||||
}
|
||||
table tr a span[data-archived~=False] {
|
||||
opacity: 0.4;
|
||||
}
|
||||
.files-spinner {
|
||||
height: 15px;
|
||||
width: auto;
|
||||
opacity: 0.5;
|
||||
vertical-align: -2px;
|
||||
}
|
||||
.in-progress {
|
||||
display: none;
|
||||
}
|
||||
body[data-status~=finished] .files-spinner {
|
||||
display: none;
|
||||
}
|
||||
/*body[data-status~=running] .in-progress {
|
||||
display: inline-block;
|
||||
}*/
|
||||
tr td a.favicon img {
|
||||
padding-left: 6px;
|
||||
padding-right: 12px;
|
||||
vertical-align: -4px;
|
||||
}
|
||||
tr td a.title {
|
||||
font-size: 1.4em;
|
||||
text-decoration:none;
|
||||
color:black;
|
||||
}
|
||||
tr td a.title small {
|
||||
background-color: #efefef;
|
||||
border-radius: 4px;
|
||||
float:right
|
||||
}
|
||||
input[type=search]::-webkit-search-cancel-button {
|
||||
-webkit-appearance: searchfield-cancel-button;
|
||||
}
|
||||
.title-col {
|
||||
text-align: left;
|
||||
}
|
||||
.title-col a {
|
||||
color: black;
|
||||
}
|
||||
.ul-form {
|
||||
list-style: none;
|
||||
}
|
||||
.ul-form li {
|
||||
list-style: none;
|
||||
}
|
||||
</style>
|
||||
<link rel="stylesheet" href="{% static 'bootstrap.min.css' %}">
|
||||
<link rel="stylesheet" href="{% static 'jquery.dataTables.min.css' %}"/>
|
||||
<script src="{% static 'jquery.min.js' %}"></script>
|
||||
<script src="{% static 'jquery.dataTables.min.js' %}"></script>
|
||||
<script>
|
||||
document.addEventListener('error', function(e) {
|
||||
e.target.style.opacity = 0;
|
||||
}, true)
|
||||
jQuery(document).ready(function() {
|
||||
jQuery('#table-bookmarks').DataTable({
|
||||
stateSave: true, // save state (filtered input, number of entries shown, etc) in localStorage
|
||||
dom: '<lf<t>ip>', // how to show the table and its helpers (filter, etc) in the DOM
|
||||
order: [[0, 'desc']],
|
||||
iDisplayLength: 100,
|
||||
});
|
||||
});
|
||||
</script>
|
||||
</head>
|
||||
<body data-status="finished">
|
||||
<header>
|
||||
<div class="header-top container-fluid">
|
||||
<div class="row nav">
|
||||
<div class="col-sm-2">
|
||||
<a href="/" class="header-archivebox" title="Last updated: {{updated}}">
|
||||
<img src="{% static 'archive.png' %}" alt="Logo"/>
|
||||
ArchiveBox: Add
|
||||
</a>
|
||||
</div>
|
||||
<div class="col-sm-10" style="text-align: right">
|
||||
<a href="/">Main Index</a> |
|
||||
<a href="/admin/">Admin</a> |
|
||||
<a href="https://github.com/pirate/ArchiveBox/wiki">Docs</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</header>
|
||||
<center>
|
||||
{{ stdout | safe }}
|
||||
<br/><br/>
|
||||
<form action="?" method="POST" class="ul-form">{% csrf_token %}
|
||||
Add new links...<br/>
|
||||
{{ form.as_ul }}
|
||||
<button role="submit">Add</button>
|
||||
{% block content %}
|
||||
<style>
|
||||
.dashboard #content {
|
||||
width: 100%;
|
||||
margin-right: 0px;
|
||||
margin-left: 0px;
|
||||
}
|
||||
#submit {
|
||||
border: 1px solid rgba(0,0,0,0.2);
|
||||
padding: 10px;
|
||||
border-radius: 4px;
|
||||
background-color: #f5dd5d;
|
||||
color: #333;
|
||||
font-size: 18px;
|
||||
font-weight: 800;
|
||||
}
|
||||
#add-form button[role=submit]:hover {
|
||||
background-color: #e5cd4d;
|
||||
}
|
||||
#add-form label {
|
||||
display: block;
|
||||
font-size: 16px;
|
||||
}
|
||||
#add-form textarea {
|
||||
width: 100%;
|
||||
min-height: 300px;
|
||||
}
|
||||
#delay-warning div {
|
||||
border: 1px solid red;
|
||||
border-radius: 4px;
|
||||
margin: 10px;
|
||||
padding: 10px;
|
||||
font-size: 15px;
|
||||
background-color: #F5DD5D;
|
||||
}
|
||||
#stdout {
|
||||
background-color: #ded;
|
||||
padding: 10px 10px;
|
||||
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/>
|
||||
{% if stdout %}
|
||||
<h1>Add new URLs to your archive: results</h1>
|
||||
<pre id="stdout">
|
||||
{{ stdout | safe }}
|
||||
<br/><br/>
|
||||
</pre>
|
||||
<br/>
|
||||
<center>
|
||||
<a href="/add" id="submit"> Add more URLs ➕</a>
|
||||
</center>
|
||||
{% else %}
|
||||
<form id="add-form" action="?" method="POST" class="p-form">{% csrf_token %}
|
||||
<h1>Add new URLs to your archive</h1>
|
||||
<br/>
|
||||
{{ form.as_p }}
|
||||
<center>
|
||||
<button role="submit" id="submit"> Add URLs and archive ➕</button>
|
||||
</center>
|
||||
</form>
|
||||
</center>
|
||||
<br/><br/><br/>
|
||||
<center id="delay-warning" style="display: none">
|
||||
<b><i>This page will be unresponsive until the process is completely finished.</i></b>
|
||||
<br/><br/>
|
||||
<div>
|
||||
Warning: it may take several minutes to finish adding!<br/>
|
||||
<br/>
|
||||
Progress will be displayed in the <code>archivebox server</code> stdout,<br/>
|
||||
and on this page once the archiving process completes.<br/>
|
||||
<br/>
|
||||
<small>(it's safe to leave this page, adding will continue in the background)</small>
|
||||
</div>
|
||||
</center>
|
||||
<script>
|
||||
document.getElementById('add-form').addEventListener('submit', function(event) {
|
||||
setTimeout(function() {
|
||||
document.getElementById('add-form').innerHTML = '<center><h3>Adding URLs to index and running archive methods...<h3><br/><div class="loader"></div><br/>(see terminal for progress)</center>'
|
||||
document.getElementById('delay-warning').style.display = 'block'
|
||||
}, 200)
|
||||
return true
|
||||
})
|
||||
</script>
|
||||
{% endif %}
|
||||
</div>
|
||||
{% endblock %}
|
||||
|
||||
<a href="{% url 'admin:core_snapshot_changelist' %}">Go back to Main Index</a>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
{% block sidebar %}{% endblock %}
|
||||
|
|
|
|||
126
archivebox/themes/default/static/admin.css
Normal file
126
archivebox/themes/default/static/admin.css
Normal file
|
|
@ -0,0 +1,126 @@
|
|||
#header {
|
||||
background: #aa1e55;
|
||||
padding: 6px 14px;
|
||||
}
|
||||
#content {
|
||||
padding: 8px 8px;
|
||||
}
|
||||
#user-tools {
|
||||
font-size: 13px;
|
||||
|
||||
}
|
||||
|
||||
div.breadcrumbs {
|
||||
background: #772948;
|
||||
color: #f5dd5d;
|
||||
padding: 6px 15px;
|
||||
}
|
||||
|
||||
.module h2, .module caption, .inline-group h2 {
|
||||
background: #772948;
|
||||
}
|
||||
|
||||
#content .object-tools {
|
||||
margin-top: -35px;
|
||||
margin-right: -10px;
|
||||
float: right;
|
||||
}
|
||||
|
||||
#content .object-tools a:link, #content .object-tools a:visited {
|
||||
border-radius: 0px;
|
||||
background-color: #f5dd5d;
|
||||
color: #333;
|
||||
font-size: 12px;
|
||||
font-weight: 800;
|
||||
}
|
||||
|
||||
#content .object-tools a.addlink {
|
||||
background-blend-mode: difference;
|
||||
}
|
||||
|
||||
#content #changelist #toolbar {
|
||||
padding: 0px;
|
||||
background: none;
|
||||
margin-bottom: 10px;
|
||||
border-top: 0px;
|
||||
border-bottom: 0px;
|
||||
}
|
||||
|
||||
#content #changelist #toolbar form input[type="submit"] {
|
||||
border-color: #aa1e55;
|
||||
}
|
||||
|
||||
#content #changelist-filter li.selected a {
|
||||
color: #aa1e55;
|
||||
}
|
||||
|
||||
|
||||
#content #changelist .actions {
|
||||
position: fixed;
|
||||
bottom: 0px;
|
||||
z-index: 800;
|
||||
}
|
||||
|
||||
#content #changelist .actions .button {
|
||||
border-color: #aa1e55;
|
||||
}
|
||||
#content #changelist-filter h2 {
|
||||
border-radius: 4px 4px 0px 0px;
|
||||
}
|
||||
|
||||
@media (min-width: 767px) {
|
||||
#content #changelist-filter {
|
||||
top: 35px;
|
||||
width: 110px;
|
||||
}
|
||||
|
||||
.change-list .filtered .results,
|
||||
.change-list .filtered .paginator,
|
||||
.filtered #toolbar,
|
||||
.filtered div.xfull {
|
||||
margin-right: 115px;
|
||||
}
|
||||
}
|
||||
|
||||
#content a img.favicon {
|
||||
height: 20px;
|
||||
width: 20px;
|
||||
vertical-align: -5px;
|
||||
padding-right: 6px;
|
||||
}
|
||||
|
||||
#content td, #content th {
|
||||
vertical-align: middle;
|
||||
}
|
||||
|
||||
#content #changelist table input {
|
||||
vertical-align: -2px;
|
||||
}
|
||||
|
||||
|
||||
#content th.field-added, #content td.field-updated {
|
||||
word-break: break-word;
|
||||
min-width: 85px;
|
||||
white-space: normal;
|
||||
}
|
||||
|
||||
#content th.field-title_str {
|
||||
min-width: 300px;
|
||||
}
|
||||
|
||||
#content td.field-files {
|
||||
white-space: nowrap;
|
||||
}
|
||||
#content td.field-size {
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
#content td.field-url_str {
|
||||
word-break: break-all;
|
||||
min-width: 200px;
|
||||
}
|
||||
|
||||
#content tr b.status-pending {
|
||||
font-weight: 200;
|
||||
opacity: 0.6;
|
||||
}
|
||||
|
Before Width: | Height: | Size: 17 KiB After Width: | Height: | Size: 17 KiB |
|
Before Width: | Height: | Size: 1.6 KiB After Width: | Height: | Size: 1.6 KiB |
|
Before Width: | Height: | Size: 158 B After Width: | Height: | Size: 158 B |
|
Before Width: | Height: | Size: 201 B After Width: | Height: | Size: 201 B |
|
Before Width: | Height: | Size: 157 B After Width: | Height: | Size: 157 B |
|
Before Width: | Height: | Size: 11 KiB After Width: | Height: | Size: 11 KiB |
|
|
@ -359,18 +359,6 @@
|
|||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-lg-2">
|
||||
<div class="card">
|
||||
<iframe class="card-img-top" src="$url" sandbox="allow-same-origin allow-scripts allow-forms" scrolling="no"></iframe>
|
||||
<div class="card-body">
|
||||
<a href="$url" style="float:right" title="Open in new tab..." target="_blank" rel="noopener">
|
||||
<img src="../../static/external.png" class="external"/>
|
||||
</a>
|
||||
<a href="$url" target="preview"><h4 class="card-title">Original</h4></a>
|
||||
<p class="card-text">$domain</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-lg-2">
|
||||
<div class="card">
|
||||
<iframe class="card-img-top" src="$archive_org_path" sandbox="allow-same-origin allow-scripts allow-forms" scrolling="no"></iframe>
|
||||
|
|
@ -383,6 +371,18 @@
|
|||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-lg-2">
|
||||
<div class="card">
|
||||
<iframe class="card-img-top" src="$url" sandbox="allow-same-origin allow-scripts allow-forms" scrolling="no"></iframe>
|
||||
<div class="card-body">
|
||||
<a href="$url" style="float:right" title="Open in new tab..." target="_blank" rel="noopener">
|
||||
<img src="../../static/external.png" class="external"/>
|
||||
</a>
|
||||
<a href="$url" target="preview"><h4 class="card-title">Original</h4></a>
|
||||
<p class="card-text">$domain</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</header>
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue