mirror of
https://github.com/ArchiveBox/ArchiveBox.git
synced 2025-06-03 08:08:43 -04:00
add timezone support, tons of CSS and layout improvements, more detailed snapshot admin form info, ability to sort by recently updated, better grid view styling, better table layouts, better dark mode support
This commit is contained in:
Nick Sweeting
parent
cf7d7e4990
commit
a9986f1f05
28 changed files with 681 additions and 549 deletions
|
|
@ -4,228 +4,228 @@
|
|||
|
||||
<!DOCTYPE html>
|
||||
<html lang="{{ LANGUAGE_CODE|default:"en-us" }}" {% if LANGUAGE_BIDI %}dir="rtl"{% endif %}>
|
||||
<head>
|
||||
<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 %}
|
||||
{% block extrahead %}{% endblock %}
|
||||
{% 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 %}
|
||||
{% block blockbots %}<meta name="robots" content="NONE,NOARCHIVE">{% endblock %}
|
||||
<link rel="stylesheet" type="text/css" href="{% static "admin.css" %}">
|
||||
</head>
|
||||
{% load i18n %}
|
||||
|
||||
<body class="{% if is_popup %}popup {% endif %}{% block bodyclass %}{% endblock %}"
|
||||
data-admin-utc-offset="{% now "Z" %}">
|
||||
|
||||
<style>
|
||||
/* 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">
|
||||
|
||||
{% if not is_popup %}
|
||||
<!-- Header -->
|
||||
<div id="header">
|
||||
<div id="branding">
|
||||
<h1 id="site-name">
|
||||
<a href="{% url 'Home' %}">
|
||||
<img src="{% static 'archive.png' %}" id="logo">
|
||||
ArchiveBox
|
||||
</a>
|
||||
|
||||
<small style="display: inline-block;margin-top: 2px;font-size: 18px;opacity: 0.8;">
|
||||
<a><span id="snapshotListView" style="cursor: pointer">☰</span></a> |
|
||||
<a><span id="snapshotGridView"style="letter-spacing: -.4em; cursor: pointer;">⣿⣿</span></a>
|
||||
</small>
|
||||
</h1>
|
||||
</div>
|
||||
{% block usertools %}
|
||||
{% if has_permission %}
|
||||
{% include 'navigation.html' %}
|
||||
<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 %}">
|
||||
{% block extrastyle %}{% 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 %}
|
||||
{% block nav-global %}{% endblock %}
|
||||
</div>
|
||||
<!-- END Header -->
|
||||
{% block breadcrumbs %}
|
||||
<div class="breadcrumbs">
|
||||
<a href="{% url 'admin:index' %}">{% trans 'Home' %}</a>
|
||||
{% if title %} › {{ title }}{% endif %}
|
||||
|
||||
<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>
|
||||
|
||||
{% 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 %}">
|
||||
{% if opts.model_name == 'snapshot' and cl %}
|
||||
<small id="snapshot-view-mode">
|
||||
<a href="#list" title="List view" id="snapshot-view-list">☰</a> |
|
||||
<a href="#grid" title="Grid view" id="snapshot-view-grid" style="letter-spacing: -.4em;">⣿⣿</a>
|
||||
</small>
|
||||
{% endif %}
|
||||
{% 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>
|
||||
{% 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 %}
|
||||
<script>
|
||||
$ = django.jQuery;
|
||||
$.fn.reverse = [].reverse;
|
||||
|
||||
<!-- Content -->
|
||||
<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>
|
||||
<!-- END Content -->
|
||||
// hide images that fail to load
|
||||
document.querySelector('body').addEventListener('error', function (e) {
|
||||
e.target.style.opacity = 0;
|
||||
}, true)
|
||||
|
||||
{% block footer %}<div id="footer"></div>{% endblock %}
|
||||
</div>
|
||||
<!-- END Container -->
|
||||
// setup timezone
|
||||
{% get_current_timezone as TIME_ZONE %}
|
||||
window.TIME_ZONE = '{{TIME_ZONE}}'
|
||||
|
||||
<script>
|
||||
(function ($) {
|
||||
$.fn.reverse = [].reverse;
|
||||
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 fix_actions() {
|
||||
var container = $('div.actions');
|
||||
function setTimeOffset() {
|
||||
if (window.GMT_OFFSET) return
|
||||
window.GMT_OFFSET = -(new Date).getTimezoneOffset()
|
||||
window.setCookie('GMT_OFFSET', window.GMT_OFFSET, 365)
|
||||
}
|
||||
|
||||
if (container.find('select[name=action] option').length < 10) {
|
||||
container.find('label:nth-child(1), button[value=0]').hide();
|
||||
// change the admin actions button from a dropdown to buttons across
|
||||
function fix_actions() {
|
||||
const container = $('div.actions')
|
||||
|
||||
var buttons = $('<div></div>')
|
||||
.appendTo(container)
|
||||
// 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');
|
||||
|
||||
container.find('select[name=action] option:gt(0)').reverse().each(function () {
|
||||
const name = this.value
|
||||
// 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>')
|
||||
.appendTo(buttons)
|
||||
.attr('name', this.value)
|
||||
.attr('type', 'button')
|
||||
.attr('name', action_type)
|
||||
.addClass('button')
|
||||
.text(this.text)
|
||||
.click(function (e) {
|
||||
e.preventDefault()
|
||||
e.stopPropagation()
|
||||
container.find('select')
|
||||
.find(':selected').removeAttr('selected').end()
|
||||
.find('[value=' + name + ']').attr('selected', 'selected').click();
|
||||
$('#changelist-form button[name="index"]').click();
|
||||
|
||||
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('op: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
|
||||
});
|
||||
});
|
||||
}
|
||||
};
|
||||
|
||||
function redirectWithQuery(uri){
|
||||
uri_query = uri + document.location.search;
|
||||
window.location = uri_query;
|
||||
|
||||
};
|
||||
|
||||
function selectSnapshotListView(){
|
||||
localStorage.setItem('currentSnapshotView', 'List');
|
||||
redirectWithQuery("{% url 'admin:core_snapshot_changelist' %}");
|
||||
};
|
||||
|
||||
function selectSnapshotGridView(){
|
||||
localStorage.setItem('currentSnapshotView', 'Grid');
|
||||
redirectWithQuery("{% url 'admin:grid' %}");
|
||||
};
|
||||
|
||||
function setPreferredSnapshotView(view){
|
||||
urlPath = window.location.pathname;
|
||||
|
||||
if((view==="Grid") && urlPath == "{% url 'admin:core_snapshot_changelist' %}"){
|
||||
selectSnapshotGridView();
|
||||
})
|
||||
.appendTo(buttons)
|
||||
})
|
||||
console.log('Converted', buttons.children().length, 'admin actions from dropdown to buttons')
|
||||
}
|
||||
|
||||
{% comment %}
|
||||
else if((view==="List") && urlPath == "{% url 'admin:grid' %}"){
|
||||
selectSnapshotListView();
|
||||
|
||||
}
|
||||
{% endcomment %}
|
||||
};
|
||||
function setupSnapshotGridListToggle() {
|
||||
$("#snapshot-view-list").click(selectSnapshotListView)
|
||||
$("#snapshot-view-grid").click(selectSnapshotGridView)
|
||||
|
||||
function setupSnapshotViews() {
|
||||
const preferredSnapshotView = localStorage.getItem('currentSnapshotView');
|
||||
setPreferredSnapshotView(preferredSnapshotView);
|
||||
|
||||
$( document ).ready(function() {
|
||||
|
||||
$("#snapshotListView").click(function() {
|
||||
selectSnapshotListView();
|
||||
});
|
||||
$("#snapshotGridView").click(function() {
|
||||
selectSnapshotGridView();
|
||||
});
|
||||
|
||||
$('input:checkbox').change(function(){
|
||||
if($(this).is(':checked'))
|
||||
$(this).parent().parent().parent().parent().addClass('selected-card');
|
||||
$('#changelist-form .card input:checkbox').change(function() {
|
||||
if ($(this).is(':checked'))
|
||||
$(this).parents('.card').addClass('selected-card')
|
||||
else
|
||||
$(this).parent().parent().parent().parent().removeClass('selected-card')
|
||||
});
|
||||
|
||||
});
|
||||
};
|
||||
$(function () {
|
||||
fix_actions();
|
||||
setupSnapshotViews();
|
||||
});
|
||||
})(django.jQuery);
|
||||
</script>
|
||||
</body>
|
||||
$(this).parents('.card').removeClass('selected-card')
|
||||
})
|
||||
};
|
||||
$(document).ready(function() {
|
||||
fix_actions()
|
||||
setupSnapshotGridListToggle()
|
||||
setTimeOffset()
|
||||
})
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
|
|
|
|||
|
|
@ -3,160 +3,189 @@
|
|||
|
||||
{% block extrastyle %}
|
||||
<style>
|
||||
* {
|
||||
-webkit-box-sizing: border-box;
|
||||
-moz-box-sizing: border-box;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
#changelist-search #searchbar {
|
||||
min-height: 24px;
|
||||
}
|
||||
.cards {
|
||||
padding-top: 10px;
|
||||
display: grid;
|
||||
grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); /* see notes below */
|
||||
grid-auto-rows: minmax(200px, auto);
|
||||
grid-gap: 14px 14px;
|
||||
}
|
||||
|
||||
a {
|
||||
text-decoration: none;
|
||||
color: orange;
|
||||
}
|
||||
h2 {
|
||||
color: #000;
|
||||
margin: 2rem 0 .5rem;
|
||||
font-size: 1.25rem;
|
||||
font-weight: 400;
|
||||
{% comment %} text-transform: uppercase; {% endcomment %}
|
||||
}
|
||||
|
||||
card.img {
|
||||
display: block;
|
||||
border: 0;
|
||||
width: 100%;
|
||||
height: auto;
|
||||
}
|
||||
|
||||
/*************************** Cards *******************************/
|
||||
|
||||
.cards {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); /* see notes below */
|
||||
grid-auto-rows: minmax(200px, auto);
|
||||
grid-gap: 1rem;
|
||||
}
|
||||
|
||||
.card {
|
||||
/*height: 200px;*/
|
||||
/*background: red;*/
|
||||
border: 2px solid #e7e7e7;
|
||||
border-radius: 4px;
|
||||
-webkit-box-shadow: 0 2px 2px rgba(0, 0, 0, 0.15);
|
||||
box-shadow: 0 2px 2px rgba(0, 0, 0, 0.15);
|
||||
display: flex;
|
||||
/* -webkit-box-orient: vertical; */
|
||||
/* -webkit-box-direction: normal; */
|
||||
-ms-flex-direction: column;
|
||||
flex-direction: column;
|
||||
position: relative;
|
||||
color: #5d5e5e;
|
||||
} /* li item */
|
||||
|
||||
.thumbnail img {
|
||||
height: 100%;
|
||||
box-sizing: border-box;
|
||||
max-width: 100%;
|
||||
max-height: 100%;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.card-content {
|
||||
font-size: .75rem;
|
||||
padding: .5rem;
|
||||
display: flex;
|
||||
-webkit-box-orient: vertical;
|
||||
-webkit-box-direction: normal;
|
||||
-ms-flex-direction: column;
|
||||
flex-direction: column;
|
||||
-webkit-box-flex: 1;
|
||||
-ms-flex: 1;
|
||||
flex: 1;
|
||||
.cards .card {
|
||||
position: relative;
|
||||
max-height: 380px;
|
||||
overflow: hidden;
|
||||
|
||||
}
|
||||
background-color: #fffcfc;
|
||||
border: 1px solid #f1efef;
|
||||
border-radius: 4px;
|
||||
box-shadow: 4px 4px 2px 2px rgba(0, 0, 0, 0.01);
|
||||
|
||||
text-align: center;
|
||||
color: #5d5e5e;
|
||||
}
|
||||
|
||||
.card-content h4{
|
||||
vertical-align:bottom;
|
||||
margin: 1.2em 0 0em 0;
|
||||
}
|
||||
.cards .card.selected-card {
|
||||
border: 3px solid #2196f3;
|
||||
box-shadow: 2px 3px 6px 2px rgba(0, 0, 221, 0.14);
|
||||
}
|
||||
|
||||
.category {
|
||||
font-size: .75rem;
|
||||
text-transform: uppercase;
|
||||
}
|
||||
.category {
|
||||
position: absolute;
|
||||
top: 5%;
|
||||
right: 0;
|
||||
color: #fff;
|
||||
background: #e74c3c;
|
||||
padding: 10px 15px;
|
||||
font-size: 10px;
|
||||
font-weight: 600;
|
||||
text-transform: uppercase;
|
||||
}
|
||||
.cards .card .card-thumbnail {
|
||||
display: block;
|
||||
width: 100%;
|
||||
height: 345px;
|
||||
overflow: hidden;
|
||||
border-radius: 4px;
|
||||
background-color: #fffcfc;
|
||||
}
|
||||
|
||||
.category__01 {
|
||||
background-color: #50c6db;
|
||||
|
||||
}
|
||||
.cards .card .card-thumbnail img {
|
||||
width: 100%;
|
||||
height: auto;
|
||||
border: 0;
|
||||
}
|
||||
.cards .card .card-thumbnail.missing img {
|
||||
opacity: 0.03;
|
||||
width: 20%;
|
||||
height: auto;
|
||||
margin-top: 84px;
|
||||
}
|
||||
|
||||
.tags{
|
||||
opacity: 0.8;
|
||||
}
|
||||
.cards .card .card-tags {
|
||||
width: 100%;
|
||||
}
|
||||
.cards .card .card-tags span {
|
||||
display: inline-block;
|
||||
padding: 2px 5px;
|
||||
border-radius: 5px;
|
||||
opacity: 0.95;
|
||||
background-color: #bfdfff;
|
||||
color: #679ac2;
|
||||
font-size: 12px;
|
||||
margin-bottom: 3px;
|
||||
}
|
||||
|
||||
footer {
|
||||
border-top: 2px solid #e7e7e7;
|
||||
{% comment %} margin: .5rem 0 0; {% endcomment %}
|
||||
{% comment %} min-height: 30px; {% endcomment %}
|
||||
font-size: .5rem;
|
||||
}
|
||||
.post-meta {
|
||||
padding: .3rem;
|
||||
}
|
||||
.cards .card .card-footer {
|
||||
width: 100%;
|
||||
position: absolute;
|
||||
bottom: 0;
|
||||
text-align: center;
|
||||
}
|
||||
.cards .card .card-title {
|
||||
padding: 4px 5px;
|
||||
background-color: #fffcfc;
|
||||
/*height: 50px;
|
||||
vertical-align: middle;
|
||||
line-height: 50px;*/
|
||||
}
|
||||
.cards .card .card-title h4 {
|
||||
color: initial;
|
||||
display: block;
|
||||
vertical-align: middle;
|
||||
line-height: normal;
|
||||
margin: 0px;
|
||||
padding: 5px 0px;
|
||||
font-size: 13.5px;
|
||||
font-weight: 400;
|
||||
word-break: break-all;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
max-height: 46px;
|
||||
}
|
||||
.cards .card .card-title h4 .title-text {
|
||||
user-select: all;
|
||||
}
|
||||
.cards .card .card-title .link-favicon {
|
||||
height: 15px;
|
||||
margin: 2px;
|
||||
vertical-align: -5px;
|
||||
display: inline-block;
|
||||
}
|
||||
|
||||
.comments {
|
||||
margin-left: .5rem;
|
||||
}
|
||||
|
||||
.selected-card{
|
||||
border: 5px solid #ffaa31;
|
||||
}
|
||||
.cards .card .card-info {
|
||||
padding: 2px 4px;
|
||||
/*border-top: 1px solid #ddd;*/
|
||||
background-color: #fffcfc;
|
||||
font-size: 11px;
|
||||
color: #333;
|
||||
}
|
||||
.cards .card .card-info input[type=checkbox] {
|
||||
float: right;
|
||||
width: 18px;
|
||||
height: 18px;
|
||||
}
|
||||
.cards .card .card-info label {
|
||||
display: inline-block;
|
||||
height: 20px;
|
||||
width: 145px;
|
||||
font-size: 11px;
|
||||
}
|
||||
.cards .card .card-info .timestamp {
|
||||
font-weight: 600;
|
||||
}
|
||||
.cards .card .card-footer code {
|
||||
display: inline-block;
|
||||
width: 100%;
|
||||
margin-top: 2px;
|
||||
font-size: 10px;
|
||||
opacity: 0.4;
|
||||
user-select: all;
|
||||
white-space: nowrap;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
}
|
||||
|
||||
</style>
|
||||
|
||||
{% endblock %}
|
||||
|
||||
{% block content %}
|
||||
<section class="cards">
|
||||
<section class="cards">
|
||||
{% for obj in results %}
|
||||
<article class="card">
|
||||
<picture class="thumbnail">
|
||||
<a href="/{{obj.archive_path}}/index.html">
|
||||
<img class="category__01" src="{% snapshot_image obj%}" alt="" />
|
||||
</a>
|
||||
</picture>
|
||||
<div class="card-content">
|
||||
{% if obj.tags_str %}
|
||||
<p class="category category__01 tags">{{obj.tags_str}}</p>
|
||||
{% endif %}
|
||||
{% if obj.title %}
|
||||
<div class="card">
|
||||
<div class="card-info">
|
||||
<a href="{% url 'admin:core_snapshot_change' obj.id %}">
|
||||
<h4>{{obj.title|truncatechars:55 }}</h4>
|
||||
<span class="timestamp">{{obj.added}}</span>
|
||||
</a>
|
||||
{% endif %}
|
||||
{% comment %} <p> TEXT If needed.</p> {% endcomment %}
|
||||
</div><!-- .card-content -->
|
||||
<footer>
|
||||
<div class="post-meta">
|
||||
<span style="float:right;"><input type="checkbox" name="_selected_action" value="{{obj.pk}}" class="action-select"></span>
|
||||
<span class="timestamp">🕑 {{obj.added}}</span>
|
||||
<span class="comments">📖{{obj.num_outputs}}</span>
|
||||
<span>🗄️{{ obj.archive_size | file_size }}</span>
|
||||
</div>
|
||||
</footer>
|
||||
</article>
|
||||
|
||||
<label>
|
||||
<span class="num_outputs">📄 {{obj.num_outputs}}</span>
|
||||
<span>🗄 {{ obj.archive_size | file_size }}</span>
|
||||
<input type="checkbox" name="_selected_action" value="{{obj.pk}}"/>
|
||||
</label>
|
||||
</div>
|
||||
<a href="/{{obj.archive_path}}/index.html" class="card-thumbnail {% if not obj.thumbnail_url %}missing{% endif %}">
|
||||
<img src="{{obj.thumbnail_url|default:'/static/spinner.gif' }}" alt="{{obj.title|default:'Not yet archived...'}}" />
|
||||
</a>
|
||||
<div class="card-footer">
|
||||
{% if obj.tags_str %}
|
||||
<div class="card-tags">
|
||||
{% for tag in obj.tags_str|split:',' %}
|
||||
<span>
|
||||
{{tag}}
|
||||
</span>
|
||||
{% endfor %}
|
||||
</div>
|
||||
{% endif %}
|
||||
<div class="card-title" title="{{obj.title}}">
|
||||
<a href="/{{obj.archive_path}}/index.html">
|
||||
<h4>
|
||||
{% if obj.is_archived %}
|
||||
<img src="/{{obj.archive_path}}/favicon.ico" onerror="this.style.display='none'" class="link-favicon" decoding="async"/>
|
||||
{% else %}
|
||||
<img src="{% static 'spinner.gif' %}" onerror="this.style.display='none'" class="link-favicon" decoding="async"/>
|
||||
{% endif %}
|
||||
<span class="title-text">{{obj.title|default:'Pending...' }}</span>
|
||||
</h4>
|
||||
</a>
|
||||
<code title="{{obj.url}}">{{obj.url}}</code>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
{% endfor %}
|
||||
</section>
|
||||
|
||||
</section>
|
||||
<br/>
|
||||
{% endblock %}
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue